02 CSS入门基础

转x33g5p2x  于2022-05-16 转载在 其他  
字(13.6k)|赞(0)|评价(0)|浏览(336)

CSS 概述

1.认识 CSS

  1. 产生背景

从 HTML 被发明开始，样式就以各种形式存在，最初的 HTML 只 包含很少的显示属性。

随着 HTML 的成长，为了满足页面设计者的要求，HTML 添加了 很多显示功能，例如文本格式化标签。

但是随着这些功能的增加，HTML 变的越来越杂乱，而且 HTML 页面也越来越臃肿。

于是 CSS 便诞生了。

  1. 发展过程

  1. CSS 概念

css 全称 cascading style sheets，层叠式样式表，是一种用来表现HTML的文件样式的计算机语言。

作用：静态地修饰网页，并且可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 的出现，实现了网页的结构和样式分离，拯救了混乱的 HTML，更加拯救了我们web 开发者。

  1. 没有CSS 的网页

  1. 有 CSS 的网页

  1. CSS 可以说是网页的美容师，让我们的网页更加美观。
  • CSS 的组成

层叠式

  • css 中贯穿始终的加载特性

层叠性

继承性

样式

  • 定义如何显示HTML 元素

文字文本

背景

盒模型

浮动

定位

其他

2.CSS语法

1.CSS 代码书写位置

  • CSS 规则

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明

书写位置

css 的代码根据书写位置不同分为四种书写方式：内联式、内嵌式、外联式、导入式。

1.内联式
  • 内联式，也被习惯叫做行内式。

书写位置：在 HTML 标签之上的 style 属性中书写css 样式。

所有的 css 样式属性总体组成标签的 style 属性的属性值。

<p style="font-size: 30px;">这是一段文字内容</p>
<div style="font-size: 30px;">有一段文字div</div>
<p style="font-size: 30px;">这是第二段文字内容p</p>
  • 内联式缺点

a、内联式必须写在标签上，没有完全脱离 HTML 标签。

b、 css 样式代码让标签结构繁重，不利于 HTML 结构的解读。

c、一个内联式的 css 代码，只能给一个标签使用，如果多个标签有相同的样式，同样的 css 代码需要书写多次，增加代码量。

  • 总结

因此，实际工作中不会使用内联式（行内式）编写css 代码。

2.内嵌式*
  • 书写位置

在 HTML 文件中，<head> 标签内部有一个<style> 标签。<style> 标签书写在< title> 标签后面，所有 css 代码书写在<style>标签内部。

<style> 标签有一个标签属性叫做 type，属性值是”text/css”。 ``` <style type="text/css"> /* css规则：选择器、属性 */ p,div { font-size: 30px; } </style>


* 内嵌式特点

优点

a、实现了结构和样式的初步分离， css 只负责样式，HTML 负责结构。

b、多个标签可以利用一段代码设置 相同的样式，节省代码量。

缺点

a、结构和样式并没有完全分离，代码依旧书写在HTML 文件的<style>标签内部。

b、css 样式只能给一个HTML文件使用，不能够被多个HTML 文件同时利用。

c、在HTML 中如果css 代码太多，会造成文件头重脚轻。
* 总结

往往在设置网站首页的时候会使用内嵌式 这样可以提高网页的加载速度

##### 3.外联式*

* 外联式 CSS，也可以叫做外链式 CSS、外部 CSS。

书写位置：在一个单独的扩展名为 .css 的文件中。

书写语法：内部代码与内嵌式样式表中 <style> 标签内部的代码一样的。需要通过选择器去选中标签，添加对应的样式。
* 注意：在 .css 文件中书写时，不需要再加 <style> 标签

/* 直接书写css规则 */
p,div {
font-size: 30px;
color: yellow;
}


* 外联式样式表必须引入到 HTML 文件中，才能正常进行加载。

引入方式：在 HTML 中的 标签内部使用 标签进行引入。
* <link> 标签属性：

![](//img.saoniuhuo.com/images/202205/74421652709501784.jpg)

* 外联式优点

①实现了 HTML 和 css 完全分离。

②多个 HTML 文件可以共用一个 css 文件，便于提取公共css，减少代码量。

③可以实现一个 css 变化，多个 HTML 页面同时变化，减少工作量。

④一个 HTML 文件可以引入多个 css 文件，可以实现同一个页面中css 代码分层。

##### 4.导入式

* 书写位置：在内嵌式样式表
* 导入方式：利用一条 @import url(路径) 语句进行引入。

<style> @import url(01.css); h1 { color: red; } </style>


* 导入式问题

导入式样式表的作用与外联式样式表基本相同。

但是由于导入式在浏览器中加载时，会在 HTML 结构加载完毕后再进行编译，如果网速比较慢时，会导致网页出现没有 css 样式的效果，给用户的体验不好。

实际工作中，较少使用导入式，推荐使用外联式样式表。

##### 5.实际应用

* 小型案例：可以使用内嵌式 CSS。
* 实际工作、大型网站项目：推荐使用外联式 CSS。

##### 6.样式规则

* （1）所有的 css 代码都必须书写在 <head> 标签内部的一对<style> 标签内。
* （2）css 在给某个标签设置样式前，必须使用选择器先选中标签。
* （3）css 样式的属性，属性名和属性值的键值对写法为 k:v; 。
* （4）给每个选择器添加的样式属性都必须写在一对大括号{} 之内。
* （5）给一个标签添加的所有需要的样式，都要在 {} 内部一一罗列出来

![](//img.saoniuhuo.com/images/202205/96591652709502244.jpg)

注意事项

a、分号必要性：每条属性后面的分号必须写，如果不写，会导致后面所有的代码加载错误。

b、 css 中所有属性与属性之间对空格、换行、缩进不敏感。

![](//img.saoniuhuo.com/images/202205/79711652709503322.jpg)

#### 2.CSS 注释语法

* 一个清晰易读的CSS 代码，离不开CSS 注释的合理添加。

语法格式：

/中间部分为注释内容/


vs code快捷键：ctrl+/ 。
* 习惯代码书写风格

代码风格是实际开发中的书写方式，并非强制标准。
* CSS 样式格式

展开格式：开发过程使用，代码可读性强，便于调错。

![](//img.saoniuhuo.com/images/202205/96571652709503477.jpg)

紧凑格式：上传服务器时使用，减少不必要的空白字符，压缩文件大小，利于传输。

![](//img.saoniuhuo.com/images/202205/5911652709503802.jpg)

* 英文大小写

CSS 中的英文可以使用大写，也可以使用小写。

![](//img.saoniuhuo.com/images/202205/30711652709504217.jpg)

建议：css 中的选择器和样式属性名、属性值等都使用小写英文，特殊情况除外。
* 空格规范

a、选择器与大括号 {} 之间保留一个空格。

b、 冒号后面，属性值前面，保留一个空格。

![](//img.saoniuhuo.com/images/202205/65821652709504778.jpg)

### 3.文字三属性

#### 1.颜色color

* 作用：给文字设置颜色。

属性名 k ：color

属性值 v ：颜色名、颜色值。
* 颜色名

颜色名就是使用颜色的英文单词进行表示。

需要记忆一些最常用的颜色名：

红色 red 橙色 orange 黄色 yellow
绿色 green 青色 cyan 蓝色 blue
紫色 purple 黑色 black 白色 white
金色 gold 粉色 pink 浅黄色 lightyellow
黄绿色 yellowgreen 天蓝色 skyblue


* 更多的颜色名可以通过查询手册得到：https://www.runoob.com/cssref/css-colornames.html

![](//img.saoniuhuo.com/images/202205/80691652709505910.jpg)

* 颜色值指使用具体颜色的数值表示。

包括： rgb 模式和十六进制模式写法。

* rgb 模式

rgb 模式：是根据红绿蓝三原色进行混合而成的颜色模式。

每个原色的取值范围是0-255，一共256个数值。三个原色共能混合成1677多万种颜色。

书写方法：rgb(红,绿,蓝)

常用颜色的 rgb 色值：

红色 rgb(255,0,0) 绿色 rgb(0,255,0) 蓝色 rgb(0,0,255)
黑色 rgb(0,0,0) 白色 rgb(255,255,255) 灰色 rgb(128,128,128)


* 十六进制模式

十六进制模式：是 rgb 模式的一种简化写法，使用十六进制的数字字符去替换十进制的 0–255 的数字。

十六进制：逢十六进一，每个数位上只能出现 0-9，a-f 之间的字符。

书写为颜色值时，红、绿、蓝每个色值都要使用两位数的十六进制进行替换。

* 0→00
* 255→ff

书写方式：使用 # 开头，后面连续书写红、绿、蓝三个颜色的十六进制的两位数值。

红色 #ff0000 绿色 #00ff00 蓝色 #0000ff
黑色 #000000 黑色 #000000 白色 #ffffff
灰色 #808080


十六进制颜色值简写模式：如果红、绿、蓝三个原色的色值每一个都是由重叠的数字组成，可以将重叠的数字简化成一个进行书写。

红色 #f00 绿色 #0f0 蓝色 #00f


类似 #808080 是不能进行简化的。

/* 颜色英文名称 /
color: blue;
/ RGB模式 /
color: rgb(0,255,0);
/ 16进制模式 /
color: #0000f0;
color: #808080;
/ 16进制简化写法 */
color: #00f;


#### 2.字体font-family

* 作用：定义元素内文字的字体。

属性名 k ：font-family，字体属于 font 综合属性的一个单一属性。

属性值 v ：字体名称，必须包裹在一对引号中，属性值可以有多个，值之间用逗号分隔。
* 常用字体

常用的中文字体：

* 宋体 SimSun
* 微软雅黑 Microsoft Yahei

常用的英文字体：

* Arial
* Consolas
* 如果不设置字体属性，不同的浏览器有自己的默认字体。
* 注意事项

1. font-family 可以设置多个字体名称，在实际加载时只会选择一种加载，选择的依据是按书写顺序进行，如果浏览器不支持第一个字体，则会尝试下一个，直到找到第一个支持的字体。

2、 浏览器中加载的字体是用户机器中自带的，如果用户的电脑中没有设置的字体则加载失败，需要查找下一个，因此，必须在最后设置一个所有机器都具备的通用字体作为后路。

3、中文字体中一般带有英文可以加载的字体效果，为了避免对英文字的字体影响，建议将英文字体写在属性值最前面。
* 实际应用

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

font-family: "Candara","Arial","微软雅黑","宋体";


#### 3.字号font-size

* 作用：设置文字的大小。

属性名 k ：font-size，字号属于 font 综合属性的一个单一属性。

属性值 v ：可以使用相对长度单位，也可以使用绝对长度单位。推荐使用相对长度单位。
* 单位

![](//img.saoniuhuo.com/images/202205/54391652709506514.jpg)

* 注意事项

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

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

网页中最小设置字号必须是12px，如果低于12px会出现兼容问题。现在网页中普遍使用14px+。

尽量使用12px、14px、16px等偶数的数字字号，ie6 等老式浏览器支持奇数会有bug。

实际工作中的字号，需要以设计图为准。

font-size: 16px;


### 4.盒子实体化三属性

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

![](//img.saoniuhuo.com/images/202205/64091652709506850.jpg)

div {
width: 200px;
height: 200px;
background-color: pink;
}


### 5.选择器

* 在内嵌式和外部css中，要想将 CSS 样式应用于特定的HTML 元素，首先需要找到该目标元素，这时需要用到CSS 中的选择器。
* 选择器：选择要添加样式的 HTML 标签的一种方法、模式。
* 首先学习 css2.1 版本的七种选择器：

基础选择器：标签选择器、id 选择器、类选择器、通配符选择器。

高级选择器：后代选择器、交集选择器、并集选择器。

#### 1.基础选择器

##### 1.标签选择器

* 通过标签名去选择标签元素

书写方式：标签名。

选择范围：选中的是HTML文件中所有的同名标签。

注意：标签选择器可以选择所有的同名标签，会忽视HTML 元素的嵌套关系，不管嵌套多深，都能被选中。
* 标签选择器特点

优点：可以选中所有的同名标签，设置所有同名标签的公共样式。

缺点：只能实现全选，不能对局部的标签添加特殊样式。
* css样式

<style> p { color: red; } h3 { color: green; } </style>


* html

<h3>三级标题标签内容</h3> <p>段落标签内容</p> <p>段落标签内容</p> <h3>三级标题标签内容</h3> <p>段落标签内容</p> <p>段落标签内容</p> <h3>三级标题标签内容</h3> <p>段落标签内容</p> <p>段落标签内容</p> <div> <div> <div> <div> <div> <p>这是一个嵌套很深的段落</p> </div> </div> </div> </div> </div> ```

  • 效果显示

2.id 选择器
  • 通过标签上的 id 属性去选择标签。

书写方式：#id 属性值

选择范围：只能选中一个标签。

id 命名规则：必须以字母开头，后面可以有字母、数字、下划线、横线，严格区分大小写。每个 id 属性值必须是唯一的，不能与其他的id 同名。

注意：如果希望多个标签设置相同的样式，使用id选择器的话，必须给这多个标签取不同的 id 名，分别选中设置。

  • id 选择器特点

缺点：id 选择器只能实现单选，不能帮我们完成多选的功能。

<style>
    #para1 {
      color: red;
    }
    #para2 {
      color: red;
    }
  </style>
</head>
<body>
  <h3>三级标题标签内容</h3>
  <p>段落标签内容</p>
  <p>段落标签内容</p>
  <h3>三级标题标签内容</h3>
  <p id="para1">段落标签内容</p>
  <p id="para2">段落标签内容</p>
  <h3>三级标题标签内容</h3>
  <p>段落标签内容</p>
  <p>段落标签内容</p>
3.类选择器
  • 通过标签的 class 属性去选择标签。

书写方式：.class属性值

选择范围：是页面中所有 class 属性值相同的标签。

class 命名规则：必须以字母开头，后面可以有字母、数字、下划线、横线，严格区分大小写。class 属性值可以与其他的class相同。

  • 类选择器特点

特点 1：多个不同的标签，不区分标签类型，只要class 属性值相同，都可以被同一个类选择器选中。

特点 2：一个标签的 class 属性可以有多个属性值，值之间用空格分隔，每个属性值组成的选择器，都可以选中这一个标签，每个选择器后面的样式都会添加给同一个标签。

  • 类选择器的特殊应用

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

<style>
    /* 提前设置一些原子类 */
    .fs12 {
      font-size: 12px;
    }
    .fs30 {
      font-size: 30px;
    }
    .hong {
      color: red;
    }
    .lv {
      color: green;
    }
  </style>
</head>
<body>
  <p class="fs12 lv">这是一个段落1</p>
  <p class="fs12 hong">这是一个段落2</p>
</body>
  • 类选择器的优点

①通过一个类选择器进行多选，选中多个标签，添加公共样式。

②一个标签可以被多个类选择器选中，可以将所有样式进行分离，分别提取公共样式和单独样式，节省代码量。

实际工作中，通常我们有一个使用规律：类上样式(CSS)，id 上行为(JavaScript)。

4.通配符选择器
  • 通过一个特殊符号选择页面内所有的标签。

书写方式：*

选择范围：包含 标签在内的所有标签。

  • 通配符特点和应用

优点：可以实现全选，简化书写。

缺点：通配符选择效率低，设置的部分公共样式不是所有标签都需要添加，如果使用通配符选择，会让不需要的标签也加载一次样式，导致浏览器多做无用的工作。

注意：实际上线的网站不允许使用 * 去清除默认内外边距。

不过普通的案例，代码量较少时，为了节省书写，可以使用通配符。

<style>
    * {
      color: red;
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
  <h3>三级标题标签内容</h3>
  <p>段落标签内容</p>
  <p>段落标签内容</p>
  <h3>三级标题标签内容</h3>
  <p>段落标签内容</p>
  <p>段落标签内容</p>
  <h3>三级标题标签内容</h3>
  <p>段落标签内容</p>
  <p>段落标签内容</p>
</body>

2.高级选择器

  • 由于基础选择器不能实现所有选择情况，后期在基础选择器的基础上衍生出了几种高级选择器。高级选择器的组成部分是基础选择器。
1.后代选择器
  • 通过标签之间存的嵌套关系（族谱关系）去选择元素，基本组成部分就是基础选择器。

后代选择器也叫包含选择器。

书写方式：空格表示后代，基础选择器中间使用空格分隔，空格前面的选择器选中的标签必须是后面选择器选中标签的祖先级。

选择范围：通过后代选择器中前面的一系列基础选择器缩小选择范围，最终由最后一个选择器确定选中的标签。

注意：后代选择器必须满足所有的后代关系才能够被选中，后代关系不一定只能是父子关系。

  • 后代选择器特点

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

/* 按照层级进行一级一级写 */
    .box1 ul li p {
      color: red;
    } 
    /* 直接编写 和上面效果一样 */
    .box1 p {
      color: green;      
    }
  </style>
</head>
<body>
  <div class="box1">
    <ul>
      <li><p>这是 box1 标签中 li 标签内部的段落</p></li>
      <li><p>这是 box1 标签中 li 标签内部的段落</p></li>
      <li><p>这是 box1 标签中 li 标签内部的段落</p></li>
      <li><p>这是 box1 标签中 li 标签内部的段落</p></li>
    </ul>
    <p>这是 box1 标签内部的段落</p>
  </div>
  <div class="box2">
    <ul>
      <li><p>这是 box2 标签中 li 标签内部的段落</p></li>0
      <li><p>这是 box2 标签中 li 标签内部的段落</p></li>
      <li><p>这是 box2 标签中 li 标签内部的段落</p></li>
      <li><p>这是 box2 标签中 li 标签内部的段落</p></li>
    </ul>
    <p>这是 box2 标签内部的段落</p>
  </div>

</body>
2.交集选择器
  • 通过一个标签之上满足所有的基础选择器的需求去选择标签。

书写方式：基础选择器进行连续书写，如果有标签选择器参与交集，必须书写在开头。

选择范围：选择的是满足所有基础选择器需求的标签，如果一个条件不满足都不能被选中。

比较常见的是标签与类的交集。

  • 交集选择器更多写法

交集选择器可以进行类名的连续交集，需要满足更多的条件才能选中标签。

IE6 不支持类名连续交集写法。

交集选择器可以作为其他高级选择器的组成部分。

<style>
     p.ps.demo {
      color: red;
    }
    .box1 p.demo {
      color: green;
    }
  </style>
</head>
<body>
  <h2 class="demo">这是一个二级标题</h2>
  <div class="box1">
    <ul>
      <li><p>这是 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>
  <div class="box2">
    <ul>
      <li><p>这是 box2 标签中 li 标签内部的段落</p></li>
      <li><p class="demo">这是 box2 标签中 li 标签内部的段落</p></li>
      <li><p>这是 box2 标签中 li 标签内部的段落</p></li>
      <li><p>这是 box2 标签中 li 标签内部的段落</p></li>
    </ul>
    <p>这是 box2 标签内部的段落</p>
  </div>
</body>
3.并集选择器
  • 不同选择器选中的元素都要设置相同的样式，多次书写相同的样式属性对代码造成浪费，可以将前面六种选择器可以进行并集书写，相当于一种简化写法。

书写方式：将多个选择器中间用逗号进行分隔，最后一个后面不能加逗号。

选择范围：是所有的单独选择器选中的标签的并集集合。

  • 并集选择器用途

①如果多个标签具有公共样式，但是不能用一个选择器选中，可以使用并集写法。

②可以使用标签选择器的并集写法，进行默认样式的清除，替换通配符的功能。

<meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* h2 {
      color: red;
    }
    .demo {
      color: red;
    } */
    /* h2,.demo {
      color: red;
    } */
    body,h2,div,ul,li,p {
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
  <h2>这是一个二级标题</h2>
  <div class="box1">
    <ul>
      <li><p>这是 box1 标签中 li 标签内部的段落</p></li>
      <li><p class="demo">这是 box1 标签中 li 标签内部的段落</p></li>
      <li><p>这是 box1 标签中 li 标签内部的段落</p></li>
      <li><p>这是 box1 标签中 li 标签内部的段落</p></li>
    </ul>
    <p>这是 box1 标签内部的段落</p>
  </div>

</body>

6.CSS层叠式

CSS 的概念中，除了前面提到的样式外，还有一个重要的概念就是层叠式，层叠式是贯穿整个css的一个性质，包含继承性和层叠性。

1.理解继承性

  • 如果一个标签没有设置过一些样式，它的某个祖先级曾经设置过，在浏览器中该标签也加载了这些样式，这些样式都是从祖先级继承而来，这种现象就是继承性。

能够被继承的样式是所有的文字相关样式属性，其他的属性都不能被继承。

  • 浏览器控制面板

  • 继承性应用

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

<style>
    body {
      color: green;
      font-family: "宋体";
      font-size: 14px;
    }
    .box1 {
      width: 200px;
      height: 200px;
      background-color: pink;      
    }
    /* p {
      height: 50px;
    } */
  </style>
</head>
<body>
  <h2>这是一个二级标题</h2>
  <div class="box1">    
    <p>这是 box1 标签内部的段落</p>
    <p>这是 box1 标签内部的段落</p>
    <p>这是 box1 标签内部的段落</p>
    <p>这是 box1 标签内部的段落</p>
  </div>
  <div class="box2">    
    <p>这是 box1 标签内部的段落</p>
    <p>这是 box1 标签内部的段落</p>
    <p>这是 box1 标签内部的段落</p>
    <p>这是 box1 标签内部的段落</p>
  </div>
</body>

2.理解层叠性

  • 思考问题：同一个标签可以被多个选择器选中，如果选择器后面设置了相同的样式属性，标签最终该加载哪个？或者，在继承性中，如果多个祖先都设置了相同的文字样式，后代中该继承哪个祖先级的？

解决方法：就是使用层叠性去解决冲突。多个选择器在进行对比的过程中，最终只有一个属性会成功加载，它会层叠、覆盖掉其他的属性。

  • 判断方法

  • 选中目标标签

第一步：比较多个选择器的权重，权重高的层叠权重低的。

  • 基础选择器的权重：根据选择范围，范围越大权重越小，* < 标签选择器<类选择器 < id 选择器。
  • 高级选择器权重比较方法：依次比较组成高级选择器的id 的个数，类的个数，标签的个数，如果前面能够比较出大小就不再比较后面，如果前面相等就往后比较，直到比较出大小。
  • 比较顺序：( id 个数, 类的个数, 标签的个数 )

第二步：如果选择器权重都相同，需要比较 CSS 中代码的书写顺序，后写的层叠先写的。

  • 选中目标标签的组先级

如果选择器选中的是祖先元素，文字的样式可以被继承。

第一步：比较就近原则，比较选择器选中的祖先级在HTML 结构中距离目标标签的远近，近的层叠远的。

第二步：如果选中的祖先级距离目标一样近（同一个祖先级），比较选择器权重，权重大的层叠小的。

第三步：如果距离一样近，权重也相同，最后比较CSS 中的书写顺序，后面的层叠前面的。

  • ! important 关键字

如果在比较选择器权重的过程中，遇见一个 !important 关键字，可以将某条CSS样式属性的权重提升到最大。

书写位置：在某个css属性的属性值后面空格加 !important

注意：

① 就近原则中，不需要比较选择器权重，所有 important 会失效。

② important 不能提升选择器的权重，只能提升某条属性的权重到最大。

  • 行内式权重

行内式样式与内嵌式或外链式样式比较权重时，行内式的权重最高。

但是，与 !important 关键字相比权重要低。

<style>
    /* 选中目标，判断选择器权重 */
    /* #ps {
      color: blue;
    }
    .demo {
      color: yellow;
    }
    p {
      color: green;
    }
    * {
      color: red;
    } */
    /* body p {
      color: red;
    }
    .demo {
      color: green;
    }
    #ps.demo {
      color: blue;
    } */
    #box1 .box2 .demo,.box1 #box2 #ps {
      color: red !important;
    }
    /* 选中目标，判断选择器权重，权重相同，判断css书写顺序 */
    /* .box1 #box2 .box3 .demo {
      color: blue;
    }
    .box1 .box2 #box3 .demo {
      color: yellow;
    } */
    /* 选中的是目标的组先级，文字样式被继承，也会出现层叠 */
    /* 第一步：就近原则 */
    /* #box1 {
      color: red;
    }
    .box2 {
      color: green;
    } */
    
    /* 第二步：距离相同的组先级，判断选择器权重 */
    /* .box3 {
      color: blue;
    }
    #box3 {
      color: yellow;
    } */
    /* 第三步：距离相同的组先级，权重也相同，比较书写顺序 */
    
    /* .box2 #box3 {
      color: yellow;
    }
    #box2 .box3 {
      color: blue;
    } */
    
    /* 如果遇到 important ，在判断权重过程中 ，会将某条属性的权重提升到最大 */
    /* #box2 {
      color: yellow !important;
    }
    #box2 .box3 {
      color: blue;
    } */

    /* 行内样式的权重最高，但是低于 important */
  </style>
</head>
<body>  
  <div class="box1" id="box1">
    <div class="box2" id="box2">
      <div class="box3" id="box3">
        <p class="demo" id="ps" style="color: blue;">看一看文字颜色是什么？</p>
      </div>
    </div>
  </div>
</body>

3.总结

版权说明 : 本文为转载文章, 版权归原作者所有 版权申明

原文链接 : https://blog.csdn.net/Junsunnyl/article/details/124793116

内容来源于网络，如有侵权，请联系作者删除！

Htmlcss前端css3

相关文章

    查看更多
    微信公众号

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新文章

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com