CSS-引入样式以及css样式选择器详解

最新推荐文章于 2020-10-21 19:24:23 发布

Fly_Fly_Zhang

最新推荐文章于 2020-10-21 19:24:23 发布

阅读量1k

点赞数

分类专栏：前端杂谈文章标签： css(样式)权重计算方法 css(样式)选择器详解 css样式引入方式 css样式优先级详解直接子元素选择器

本文链接：https://blog.csdn.net/Fly_Fly_Zhang/article/details/88353185

版权

杂谈同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

前端

11 篇文章 1 订阅

订阅专栏

三种css样式引入方式

行间样式
 head引入样式
 css外部文件引入样式

css样式选择器

id选择器
 class选择器
 标签选择器
 通配符选择器
 属性选择器
 父子选择器/派生选择器
 直接子元素选择器
 并列选择器
 分组选择器

css选择器优先级

css选择器优先级详解

css权重计算方法

三种样式引入方式：

- [ ] 行间样式：

<!DOCTYPE html>
<html lang="em">
<head>
    <meta charset="UTF-8">
    <title> 行间样式演示</title>
  
</head>
<body>
<div > <em style="width:100px;height:50px;background-color:yellowgreen ; color:black;">我是文字</em>
</div>
</body>
</html>

head引入样式：

<!DOCTYPE html>
<html>
<head >
    <meta charset="UTF-8">
    <title> head引入样式演示</title>
    <style  type="text/css"> 
         div{
           width:100px;
           height:50px;
           background-color:red;
           color:blue;
          }
    </style>
</head>
<body>
     <div > <em >我是文字</em>
     </div>
</body>
</html>

css外部文件引入样式：
html部分

<!DOCTYPE html>
<html lang="em">
<head>
    <meta charset="UTF-8">
    <title> css引入样式演示</title>
    <link rel="stylesheet" type="text/css" href="./test.css">
</head>
<body>
    <div><em>外部css引入</em>></div>

</body>
</html>

css部分

div{
    width:100px;
    height:20px;
    background-color:#034;
    color:white;
}

css样式选择器

id选择器：#+html中id内容；

html部分

<!DOCTYPE html>
<html lang="em">
<head>
    <meta charset="UTF-8">
    <title> id选择器演示</title>
    <link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
    <div>
        <em id="id01">
            背景绿，字蓝；
        </em>
        <br>
        <p id="id02">
            无样式
        </p>
    </div>
    <h4 id="id03">
        背景黑，字白；
    </h4>
</body>
</html>

css部分

#id01{
   /*
    * 背景宽，高，颜色
    * 字体颜色
    */
    width:100px;
    height:30px;
    background-color:green; 
    color:blue;
}
#id03{
    width:100px;
    height:50px;
    background-color:black;
    color:white;
}

样式演示：

class选择器：多对多，对此class对应的全部内容进行渲染 , 形式为.class ；

html部分：

<!DOCTYPE html>
<html lang="em">
<head>
    <meta charset="UTF-8">
    <title> id选择器演示</title>
    <link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
    <div>
        <em class="demo">
            背景绿，字蓝；
        </em>
        <br>
        <p class="demo1">
            无样式
        </p>
    </div>
    <h6 class="demo">
        背景绿，字蓝；
    </h6>
</body>
</html>

css部分：

.demo{
    width:100px;
    height:30px;
    background-color:green;
    color:blue;
}
.demo1{
    width:100px;
    height:20px;
    background-color:black;
    color:white;
}

样式演示：

标签选择器：只要是该标签下面的内容都会被渲染，无论内容是否与此标签接壤；

html部分：

<!DOCTYPE html>
<html lang="em">
<head>
    <meta charset="UTF-8">
    <title> id选择器演示</title>
    <link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
    <p>
        <div>测试一</div>
        <p>
            <div>测试二</div>
        </p>
    </p>
    <em>测试三</em>
</body>
</html>

css部分：


div{
    font-width:bold;
    color:#f40;
}
em{
    width:150px;
    height:80px;
    background-color: aqua;
    color:black;
}

样式演示：

通配符选择器：全局渲染；还有就是初始化所有标签，（更深层意义）当它初始化其它标签后，其它标签再次进行设置时就不会与通配符产生权重冲突（因为通配符权重为0，别的标签权重都比它高）；

html部分：

<!DOCTYPE html>
<html lang="em">
<head>
    <meta charset="UTF-8">
    <title> id选择器演示</title>
    <link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<p>
<div>测试一</div>
<p>
<div>测试二</div>
</p>
</p>
<em>测试三</em>
</body>
</html>

css部分：

*{
    color:red;
    background-color: blue;
    padding:0; 
    margin:0; /*所有标签修饰的元素之间间隙为0*/

}

样式演示：

通配符选择器

属性选择器：有id或者class以及其它属性所修饰的标签的都会被其所定义的属性样式化；下面例子请注意背景和字体是由不同的属性所操控的；

html部分：

<!DOCTYPE html>
<html lang="em">
<head>
    <meta charset="UTF-8">
    <title> id选择器演示</title>
    <link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
    <p>
        <div id="id01" class="wuwu01">测试一</div>
        <p >
            <div class="wuwu02">测试二</div>
            <p class="wuwu03">
                测试三
            </p>
        </p>
    </p>
    <em id="id03">测试四</em>
</body>
</html>

css部分：

[class]{
    width:70px;
    height:20px;
    background-color: blue;
}
[id]{
    color:red;
}

样式演示：

父子选择器/派生选择器：按照内外关系来给样式，没有必要都是标签选择器，父孙也行，也就是不连贯只要往下探究符合结构，就可以形成样式；

注意：浏览器遍历父子选择器是从右向左遍历的；
html部分：

<!DOCTYPE html>
<html lang="em">
<head>
    <meta charset="UTF-8">
    <title> id选择器演示</title>
    <link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
    <div>
        <div  id="id01">测试一</div>
            <strong class="haha">测试二</strong>
            <p >
                测试三
            </p>
    </div>
</body>
</html>

css部分：

div p{
    /*
     *  满足子孙也行，也就是不一定非得连续，
     *  可以跨越，但是层级关系要满足；
     */
    color:red;
}
    /*
     * 只要满足父子结构，不局限于标签，属性，id都可以；
     */
div .haha{

    color:blue;
}
div #id01{
    color:yellow;
}

样式演示：

直接子元素选择器：父子结构必须连贯，子孙样式不能产生样式；不局限于标签，只要满足层级结构均可

html部分：

<!DOCTYPE html>
<html lang="em">
<head>
    <meta charset="UTF-8">
    <title> id选择器演示</title>
    <link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<div>
    <div  >测试一</div>
    <strong class="haha">测试二</strong>

             <em id="id01">
                 <div>测试三 </div>
             </em>
</div>
</body>
</html>

css部分：


div > .haha{
    color:blue;
}

div >#id01> div{
    color:red;
}

div > div {
    color: yellow;
}

样式演示：

并列选择器：标签点属性来确定；多个限制条件选择一个元素；

注意：标签和class或者标签和id，标签必须放在前面可以 div.demo 但是不能.demodiv 因为浏览器会去寻找demodiv这个class
html部分：

<!DOCTYPE html>
<html lang="em">
<head>
    <meta charset="UTF-8">
    <title> id选择器演示</title>
    <link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
     <div>
         测试一
     </div>
     <div class="demo">
         测试二
     </div>
     <em class="demo">测试三</em>
</body>
</html>

css部分：

div.demo{
    color:red;
}

样式演示：

分组选择器：如果有几个标签下的内容样式一样，将标签用逗号隔开，设置一次样式；横竖写都行，一般开发用竖的；

html部分：

<!DOCTYPE html>
<html lang="em">
<head>
    <meta charset="UTF-8">
    <title> id选择器演示</title>
    <link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
     
     <div>
         测试一
     </div>
     <p class="demo">
         测试二
     </p>
     <em class="demo">测试三</em>

</body>
</html>

css部分：

div,
em,
p{
    color:red;
}

图片演示部分：

css选择器优先级：

important > 行间样式 >id > class | 属性 > div(标签) > *(通配符)

css权重计算方法：

css权重计算进制为256进制，当权重一样时，后面的覆盖前面的；

注意：important infinity(正无穷)–>当两个比较的权重都是正无穷时，依然比较别的权重；也就是说 important+1>important;
权重列表：

选择器优先级（从高到底）	数值(256进制)
important	infinity(正无穷)
行间样式	1000
id	100
class \| 属性 \| 伪类	10
标签 \| 伪属性	1
通配符	0

Fly_Fly_Zhang

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS-引入样式以及css样式选择器详解

[行间样式] [head引入样式] [css外部文件引入样式]&amp;amp;amp;lt;h1&amp;amp;amp;gt; css样式选择器 &amp;amp;amp;lt;/h1&amp;amp;amp;gt;[id选择器][class选择器][标签选择器][通配符选择器][属性选择器][ 父子选择器/派生选择器 ][直接子元素选择器][并列选择器][分组选择器]
复制链接

扫一扫