2020-10-18学习笔记（样式规则——权重判断层叠）

作者: amanohina | 来源:发表于2020-10-18 20:41 被阅读0次

样式规则

用内嵌式作为例子：

1.所有CSS代码必须写在<head>标签内部的一对<style>标签内。（外联式和导入式则不需要，创建.css文件直接书写，内联式则是使用style属性进行样式修改）
2.CSS在给某个标签进行设置之前，先用选择器选中标签
3.CSS样式的属性，属性名和属性值的键值对写法是k:v
4.每个选择器添加的样式属性都必须要在一对大括号之内{}
5.给一个标签添加所有需要的样式，需要用;分隔开来，然后在{}内一一罗列

注意：

分号是必要的，每条属性后的分号必须要写，不写的话，会导致后面所有的代码无法加载成功
css中所有属性与属性之间对空格、缩进、换行并不敏感。

eg：

  div{
            width: 200px;
            height: 200px;
            background-color: cyan;
            margin-top: auto;
            margin-bottom: 10px;
        }

和下面的代码是等效的

div{width:200px;height:200px;background-color:cyan;margin-top:auto;margin-bottom:10px;}

CSS注释语法

语法格式：/注释内容/
vs快捷键：ctrl+/

CSS样式格式

展开模式：开发过程使用，可读性强，便于调错
紧凑模式：上传服务器使用，减伤不必要的空白字符，压缩文件大小，利于传输

展开模式

紧凑模式

英文大小写

CSS中的英文可以使用大写，也可以使用小写
建议都是用小写，特殊情况除外

空格规范

1.选择器与大括号之间留有一个空格，
2.冒号后面，属性值前面留有一个空格。

规范

CSS常用样式

文本属性：颜色color

部分常用的颜色名

/*段落颜色为红*/
        p {
            color: red;
        }

更多的颜色可以查阅W3C手册得到

颜色值

1.rgb模式
2.十六进制模式

rgb模式

根据红绿蓝三色进行混合而成的模式
每个原色的取值范围是0-255
书写方法：rgb(红,绿,蓝)

部分常用的rgb值

        p {
            color:rgb(255,255,255)
        }

色号可以查阅资料或者PS拾色器可以获取

PS的拾色器

十六进制模式

十六进制模式：是 rgb 模式的一种简化写法，使用十六进制的数字字符去替换十进制的 0--255 的数字。
十六进制：逢十六进一，每个数位上只能出现 0-9，a-f 之间的字符。
书写为颜色值时，红、绿、蓝每个色值都要使用两位数的十六进制进行替换。
0→00
255→ff
书写方式：使用 # 开头，后面连续书写红、绿、蓝三个颜色的十六进制的两位数值。

常用值
注意事项

文本属性：字体font-family

作用：定义元素内文字的字体
属性名 k ：font-family，字体属于 font 综合属性的一个单一属性。
属性值 v ：字体名称，必须包裹在一对引号中，属性值可以有多个，值之间用逗号分隔

        p {
            color:rgb(255,255,255);
            font-family: "宋体","Arial";
        }

常用字体

中文：
宋体，微软雅黑
英文：
Arial，consolas

如果不设置字体属性，不同的浏览器有自己默认的字体

注意事项：

1.虽然可以设置多个字体名称，但是只加载一种，顺序是按照书写顺序来的，写多个的目的是如果浏览器不支持一个字体，就会尝试下一个，直到找到适合的字体
2.浏览器中加载的字体是用户机器中自带的，如果用户没有代码中设置的字体就会加载失败，所以最后应该在最后设置一个所有机器都有的字体作为后路
3.中文字体一般带有英文可以加载的字体效果，避免影响可以将英文字体写在属性值的最前面

电脑内查看字体的路径

首选字体根据设计图敲定，最后需要设置备用字体

文本属性：font-size

作用：设置文字的大小。
属性名 k ：font-size，字号属于 font 综合属性的一个单一属性。
属性值 v ：可以使用相对长度单位，也可以使用绝对长度单位。推荐使用相对长度单位。

单位

注意事项

1.如果 HTML 中不设置字号，不同的浏览器有自己默认的加载字号，比如 chrome、 IE，默认显示字号为 16px。

不同的浏览器也有自己最小加载显示字号，如果设置的字号低于最小字号，都以最小字号加载，0除外。chrome 浏览器最小加载显示字号为8px，IE 浏览器最小可以支持1px的字号。

实际使用

网页最小设置字号必须是12px，低于12px会出现一系列的兼容问题。现在网页普遍使用14px+
尽量只用12,14,16等偶数的数字字号，ie等老浏览器支持奇数有bug
实际工作的字号根据设计图为准

    <p style="font-size: 14px;">看看我是多少字号的段落?</p>

盒子实体化三属性

要在浏览器里具体看到一个盒子占有的实际位置，需要设置盒子可以实体化的三属性

实体化属性：

实体化属性

    <div style="width: 200px; height: 200px; background-color: silver;">1</div>

CSS选择器

在内嵌式和外部CSS中，要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素，这时就需要用到CSS的选择器

选择器：选择添加样式的HTML标签的一种方法、模式
基础选择器：标签选择器，id选择器，类选择器，通配符选择器
高级选择器：后代选择器，交集选择器，并集选择器

标签选择器

通过标签名去选择标签元素。
书写方式：标签名。
选择范围：选中的是HTML文件中所有的同名标签。
注意：标签选择器可以选择所有的同名标签，会忽视 HTML 元素的嵌套关系，不管嵌套多深，都能被选中。

<body>
    <h2>这是二级标题</h2>
    <p>段落内容</p>
    <p>段落内容</p>
    <h2>这是二级标题</h2>
    <p>段落内容</p>
    <p>段落内容</p>
    <h2>这是二级标题</h2>
    <p>段落内容</p>
    <p>段落内容</p>
    <div>
        <div>
            <div>
                <div>
                    <p>这是一个嵌套的p标签内容</p>
                </div>
            </div>
        </div>
    </div>
</body>

 <style>
        p {
            color: red;
        }
        h2 {
            color: silver;
        }
    </style>

安插了p和h2标签的选择器，效果如下：

效果

标签选择器特点：

优点：可以选中所有同名标签，设置所有同名标签的公共样式
缺点：实现全选但是不能对局部的标签添加特殊样式

id选择器

通过标签上的id属性去选择
书写方式：#id属性值
选择范围：只能选中一个标签
id命名规则：字母开头，后面可以有字母，数字，下划线，横线，区分大小写，每个id属性值必须唯一，不能与其他的id同名
注意：如果希望多个标签设置相同的样式，使用id选择器的话，必须给这多个标签取不同的 id 名，分别选中设置。

<p id="inside">这是一个嵌套的p标签内容</p>

 #inside {
            color: skyblue;
        }

缺点：只能实现单选，不能完成多选的功能

类选择器

通过标签的 class 属性去选择标签。
书写方式：.class属性值
选择范围：是页面中所有 class 属性值相同的标签。
class 命名规则：必须以字母开头，后面可以有字母、数字、下划线、横线，严格区分大小写。class 属性值可以与其他的class相同。

类选择器特点

1.只要class属性值相同，就可以被同一个类选择器选中
2.一个标签的class属性可以用多个属性值，值之间用空格分隔，每个属性值组成的选择器，都可以选中这个标签，每个选择器后面的样式都会添加给同一个标签

.fs20{
            font-size: 20px;
        }
        .col{
            color: green;
        }

 <p class="fs20 col">段落内容</p>
    <p class="fs20">段落内容</p>

效果图

class属性值空格间隔一位再添加其他的属性值就可以把样式添加到同一个标签。

类选择器的特殊应用

原子类：在css中提前设置一些类名，每个类选择器后面只添加一条css样式属性，这些属性会在页面中常被使用，后期可以不需要多次书写属性，只要将对应的类名添加给需要的标签即可。

<style>
        .fs20 {
            font-size: 20px;
        }
        .fs30 {
            font-size: 30px;
        }
        .green {
            color: green;
        }
        .red {
            color: red;
        }
    </style>

 <p class="fs20 green">段落内容</p>
    <p class="fs30 red">段落内容</p>

效果图

类选择器的优点

1.通过一个类选择器进行多选，选中多个标签，添加公共样式
2.一个标签可以被多个类选择器选中，将所有样式进行分离，提取公共样式和单独样式，节省代码量

**实际工作中，有一个规律：样式用类选择器，行为（JavaScript）用id选择器

通配符选择器

通过一个特殊符号选择页面内所有的标签
书写方式：*
范围：包含<html>标签在内的所有标签

通配符的特点和应用

优点：全选，简化书写
缺点：效率低，会多出很多的无用功
注意：上线的网站不允许使用*去清除默认的内外边距
代码量很少的时候可以使用通配符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       * {
           color: red;
       }
    </style>
</head>
<body>
    <h2>这是二级标题</h2>
    <p>段落内容</p>
    <p>段落内容</p>
    <h2>这是二级标题</h2>
    <p>段落内容</p>
    <p>段落内容</p>
    <h2>这是二级标题</h2>
    <p>段落内容</p>
    <p>段落内容</p>
    <div>
        <div>
            <div>
                <div>
                    <p>这是一个嵌套的p标签内容</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

效果

后代选择器

通过标签之间存的嵌套关系（族谱关系）去选择元素，基本组成部分就是基础选择器。
后代选择器也叫包含选择器。
书写方式：空格表示后代，基础选择器中间使用空格分隔，空格前面的选择器选中的标签必须是后面选择器选中标签的祖先级。
选择范围：通过后代选择器中前面的一系列基础选择器缩小选择范围，最终由最后一个选择器确定选中的标签。
注意：后代选择器必须满足所有的后代关系才能够被选中，后代关系不一定只能是父子关系。

<body>
    <div class="box">
        <ul>
            <li><p>我是嵌套下的内容1</p></li>
            <li><p>我是嵌套下的内容2</p></li>
        </ul>
        <p>我是外部段落</p>
    </div>
</body>

<style>
       .box ul li p {
            color: red;
       }
    </style>

效果图

后代选择器特点

优点：减少了class属性的定义与应用，选择效率更高。

交集选择器

通过一个标签之上满足所有的基础选择器的需求去选择标签。
书写方式：基础选择器进行连续书写，如果有标签选择器参与交集，必须书写在开头。
选择范围：选择的是满足所有基础选择器需求的标签，如果一个条件不满足都不能被选中。
比较常见的是标签与类的交集。

<div class="box1">
        <ul>
            <li>
                <p class="demo">这是 box1 标签中 li 标签内部的段落</p>
            </li>
            <li>
                <p class="demo ps">这是 box1 标签中 li 标签内部的段落</p>

            </li>
            <li>
                <p>这是 box1 标签中 li 标签内部的段落</p>

            </li>
            <li>
                <p>这是 box1 标签中 li 标签内部的段落</p>
            </li>
        </ul>
        <p>这是box1标签内部的段落</p>
    </div>

box1里的满足class为demo ps的标签p，缺一不可

<style>
       .box1 p.demo.ps {
           color: green;
       }
    </style>

效果

交集选择器的更多写法：

可以进行类型的连续交集，需要满足更多的条件才能选中标签
IE6不支持类型连续交集写法，只识别最后一个选择器，比如.box1 p.demo.ps只能识别.box1 .ps
交集选择器可以作为其他高级选择器的组成成分

并集选择器

不同选择器选中的元素都要设置相同的样式，多次书写相同的样式属性对代码造成浪费，可以将前面六种选择器可以进行并集书写，相当于一种简化写法。
书写方式：将多个选择器中间用逗号进行分隔，最后一个后面不能加逗号。
选择范围：是所有的单独选择器选中的标签的并集集合。

<style>
    body,h2,div,ul,li,p {
      margin: 0;
      padding: 0;
      color: red;
    }
  </style>

代码如上

并集选择器用途

1.多个标签具有公共样式，但是不能用一个选择其选中，可以使用并集写法
2.可以使用标签选择器的并集写法，进行默认样式的清除，替换通配符的功能

CSS层叠式

继承性

如果一个标签没有设置过一些样式，它的某个祖先级曾经设置过，在浏览器中该标签也加载了这些样式，这些样式都是从祖先级继承而来，这种现象就是继承性。
能够被继承的样式是所有的文字相关样式属性，其他的属性都不能被继承。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: pink;
            color: green;
            font-family: "宋体";
            font-size: 14px;
        }
    </style>
</head>
<body>
    <h2>这是一个二级标题</h2>
    <div class="box1">
        <p>这是 box1 标签内的段落</p>
        <p>这是 box1 标签内的段落</p>
        <p>这是 box1 标签内的段落</p>
        <p>这是 box1 标签内的段落</p>
    </div>
</body>
</html>

继承了文本相关的，color，size，family等等，但是没有继承宽高等等。

效果

控制台情况
element.style是行业样式
user agent.stylesheet是用户看到的默认的样式

具体的解析

继承性应用

继承性是一个很好的性质，可以将页面中出现最多的文字样式设置给一个较大的祖先级标签比如<body>，后期所有的后代标签都可以从<body>里面继承而来。

body {
    font-size:14px;
    font-family:"宋体";
    color:red;
}

层叠性

使用层叠性解决同一个标签被多个选择器选中，且设置了相同的样式引起的冲突。多个选择器在进行对比的过程中，最终只有一个属性会成功加载，它会层叠，覆盖掉其他的属性。
判断需要依赖判断优先级

怎么判断？

判断概图

选中目标标签

第一步：比较权重，权重高就可以进层叠
基础选择器中，权重根据范围进行确定，范围越小权重越高，于是有：*（这是通配符选择器）<标签选择器<类选择器<id选择器

基础选择器
最终效果为蓝色
控制栏的样式
高级选择器权重比较方法：依次比较组成高级选择器的id的个数，类的个数，标签的个数，如果前面能够比较出大小后面就不再进行比较，如果前面相等，就往后，直到比较出来大小
比较顺序：（id个数，类的个数，标签的个数）

高级选择器
很明显，权重高地为#ps.demo>.demo>body p
第二步：如果选择器权重怎么比较都相同，那么就比较CSS里代码的书写顺序，后写的层叠前面写的

权重相同时
后写的blue会层叠掉先写的brown

选中目标标签的祖先级

如果选择器选中的是祖先级，文字的样式可以被继承
第一步：比较就近原则，比较选择器选中的祖先级在HTML结构中距离目标标签的远近，近的层叠远的

祖先级继承
结果为蓝色，祖先级距离最近的是.box3
第二步：若是选中的祖先级距离目标一样近（同一个祖先级），就比较选择器权重，权重高的层叠小的

权重高的是红色
第三步：若是距离一样，选择器权重也一样，就后面的层叠前面的。

毫无疑问，是蓝色

!important关键字

如果在比较选择器权重的过程中，遇见一个 !important 关键字，可以将某条 CSS 样式属性的权重提升到最大。
书写位置：在某个css属性的属性值后面空格加 !important 。

将属性权重提升到最大，所以是黄色
注意：
① 就近原则中，不需要比较选择器权重，所有 important 会失效。
② important 不能提升选择器的权重，只能提升某条属性的权重到最大。

就近原则不会有作用，故而依然是蓝色

行内式

行内式样式与内嵌式或外链式样式比较权重时，行内式的权重最高。
但是，与 !important 关键字相比权重要低。