码迷,mamicode.com
首页 > Web开发 > 详细

web表达三剑客之css

时间:2020-01-29 21:56:31      阅读:104      评论:0      收藏:0      [点我收藏+]

标签:pre   图片   charset   mamicode   png   color   lan   bsp   set   

1.css快速入门

1.1css的四种引入方式

代码中用了第三种方式,在<head></head>中引入<style></style>标签,并在其中定义<p></p>标签,同时外部定义.css文件,对<p></p>;

其次也对四种引入方式进行了总结。

技术图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--<style>-->
        <!--p{-->
            <!--color: rebeccapurple;-->
            <!--font-size: 40px;-->
        <!--}-->
        <!--a{-->
            <!--text-decoration: none;-->
        <!--}-->
    <!--</style>-->

    <link href="test1.css" rel="stylesheet" type="text/css">

    <!--<style>-->
            <!--@import "test1.css";-->
    <!--</style>-->
</head>
<body>


<p>css, do you understand it?</p>

<a href="">点我啊</a>

<!--第一种引入方式,在div标签内修改-->
<!--<div style="color:red;background-color: #62f589">hello world</div>-->

<!--<第二种引入方式,在<head></head>标签对的<style></style>中修改-->
<!--<head>-->
    <!--<meta charset="UTF-8">-->
    <!--<title>Title</title>-->
    <!--<style>-->
        <!--p{-->
            <!--color: rebeccapurple;-->
            <!--font-size: 40px;-->
        <!--}-->
        <!--a{-->
            <!--text-decoration: none;-->
        <!--}-->
    <!--</style>-->
<!--</head>-->

<!--<第三种引入方式,链接式:通过外部建立css文件,在<head></head>内引入>-->
<!--<link href="test1.css" rel="stylesheet" type="text/css">-->

<!--<第四种引入方式:导入式,在<head></head>中导入test1.css文件>-->
<!--<style>-->
    <!--@import "test1.css";-->
<!--</style>-->

</body>
</html>
View Code

1.2css四种基本选择器

分别是定义‘div‘对应‘div‘,‘id‘对应‘#‘,class对应‘.‘,‘*‘用于修改全局,还有一种混合型。

技术图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: red;
        }

        *{
            color: red;
        }

        #little_P{
            background-color: green;
        }

        .P_P{
            background-color: cadetblue;
        }
        
        div.PP_div{
            color: aqua;
        }
    </style>
</head>
<body>
    hello body

    <div>hello div</div>

    <p id="little_P">pppp</p>

    <p class="P_P">ppp</p>
    <p class="P_P">pp</p>

    <p>p</p>
    <div class="PP_div">div</div>

    <a href="">aaa</a>

</body>
</html>
View Code

技术图片

 

1.3css的四种组合选择器

 

web表达三剑客之css

标签:pre   图片   charset   mamicode   png   color   lan   bsp   set   

原文地址:https://www.cnblogs.com/yuyukun/p/12241430.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!