css基础样式声明

迷南。 2023-10-06 21:40 1阅读 0赞

#### 阅读目录 ####

*  基础知识
 *  样式声明
 *   *  外部样式
     *  嵌入样式
     *  内联样式
     *  导入样式
 *  其他细节
 *   *  空白
     *  注释
     *  错误
     *  初始样式
 *  多重样式
 *   *  多重样式将层叠为一个
     *  层叠次序
     *  多重样式优先级深入理解
     *  多重样式优先级顺序
     *  !important 规则例外
     *  权重计算
     *  CSS 优先级法则

## 基础知识 ##

因为CSS 主要是对页面元素的美化，大部分HTML元素都有系统提供的样式，但有以下问题：

1.  不同浏览器显示样式不一致
2.  样式过于简单，显示效果不美观
3.  很难按照设计稿完全呈现显示效果

## 样式声明 ##

可以通过多种方式定义样式表。

### 外部样式 ###

使用 `link` 标签引入外部样式文件，需要注意以下几点。

1.  link 标签放在 head 标签内部
2.  样式文件要以 .css 为扩展名
3.  一个页面往往需要引入多个样式文件

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>rel</td> 
   <td>定义当前文档与被链接文档之间的关系</td> 
  </tr> 
  <tr> 
   <td>href</td> 
   <td>外部样式文件</td> 
  </tr> 
  <tr> 
   <td>type</td> 
   <td>文档类型</td> 
  </tr> 
 </tbody> 
</table>

### 嵌入样式 ###

使用 style 标签可以在文档内部定义样式规则。

### 内联样式 ###

可以为某个标签单独设置样式。

### 导入样式 ###

使用 `@import` 可以在原样式规则中导入其他样式表，可以在外部样式、style标签中使用。

可以使用以下两种方式导入

@import "hd.css"
    @import url("hd.css")

导入样式要放在样式规则前面定义。

## 其他细节 ##

### 空白 ###

在样式规则中可以随意使用空白，空白只是看不见但同样占用空间，所以可以结合其他工具如 `webpack` 等将 `css` 压缩为一行。

### 注释 ###

注释是对定义样式规则的说明，便于后期维护理解。

body {
        
    	/* 这是注释的使用 */
    	background: red;
    }

### 错误 ###

样式规则如果存在错误，解析器会选择忽略，并不会影响其他样式规则。

以下代码的 `wchen:red` 是无效样式但不影响后面的 `font-size:100px;` 规则使用。

h1 {
        
        wchen:red;
        font-size: 100px;
    }

### 初始样式 ###

有些标签默认含有内外边距，且不同浏览器大小也不一样。为了统一我们可以重置标签的CSS默认样式。

最简单的方式就是使用插件 `css-reset (opens new window)` 完成，你也可以在vscode等编辑器中定义代码片段。

## 多重样式 ##

如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。

例如，外部样式表拥有针对 h3 选择器的三个属性：

h3
    {
        
        color:red;
        text-align:left;
        font-size:8pt;
    }

而内部样式表拥有针对 h3 选择器的两个属性：

h3
    {
        
        text-align:right;
        font-size:20pt;
    }

假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：

color:red;
    text-align:right;
    font-size:20pt;

即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。

### 多重样式将层叠为一个 ###

样式表允许以多种方式规定样式信息。

样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

### 层叠次序 ###

当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

1、浏览器缺省设置  
2、外部样式表  
3、内部样式表（位于 head 标签内部）  
4、内联样式（在 HTML 元素内部）

因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明： 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。

> 提示：如果你使用了外部文件的样式在内部样式中也定义了该样式，则内部样式表会取代外部文件的样式。

### 多重样式优先级深入理解 ###

优先级用于浏览器是通过判断哪些属性值与元素最相关以决定并应用到该元素上的。

优先级仅由选择器组成的匹配规则决定的。

优先级就是分配给指定的CSS声明的一个权重，它由匹配的选择器中的每一种选择器类型的数值决定。

### 多重样式优先级顺序 ###

下列是一份优先级逐级增加的选择器列表，其中数字 7 拥有最高的优先权：

1、通用选择器（\*）  
2、元素(类型)选择器  
3、类选择器  
4、属性选择器  
5、伪类  
6、ID 选择器  
7、内联样式

### !important 规则例外 ###

当 `!important` 规则被应用在一个样式声明中时，该样式声明会覆盖 CSS 中任何其他的声明，无论它处在声明列表中的哪里。

尽管如此，`!important` 规则还是与优先级毫无关系。使用 `!important` 不是一个好习惯，因为它改变了你样式表本来的级联规则，从而使其难以调试。

一些经验法则：

Always 要优化考虑使用样式规则的优先级来解决问题而不是 !important
      Only 只在需要覆盖全站或外部 css（例如引用的 ExtJs 或者 YUI ）的特定页面中使用 !important
     Never 永远不要在全站范围的 CSS 上使用 !important
     Never 永远不要在你的插件中使用 !important

### 权重计算 ###

![在这里插入图片描述][44eff854f212494594d3dbb008a20492.png]  
以下是对于上图的解释：

内联样式表的权值最高 1000
         ID 选择器的权值为 100
    Class 类选择器的权值为 10
    HTML 标签选择器的权值为 1

利用选择器的权值进行计算比较，em 显示蓝色，我们提供了详细的代码参考：

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_11_color_FFFFFF_t_70_g_se_x_16]

![在这里插入图片描述][ead402e41f40427cb19b571777807c68.png]

### CSS 优先级法则 ###

选择器都有一个权值，权值越大越优先；  
当权值相等时，后出现的样式表设置要优于先出现的样式表设置；

创作者的规则高于浏览者：  
即网页编写者设置的 CSS 样式的优先权高于浏览器所设置的样式；

继承的 CSS 样式不如后来指定的 CSS 样式；

在同一组属性设置中标有 `“!important”` 规则的优先级最大；

[44eff854f212494594d3dbb008a20492.png]: https://img-blog.csdnimg.cn/44eff854f212494594d3dbb008a20492.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_11_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/0f28b411518941fcafd335336861381a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9,size_11,color_FFFFFF,t_70,g_se,x_16
[ead402e41f40427cb19b571777807c68.png]: https://img-blog.csdnimg.cn/ead402e41f40427cb19b571777807c68.png