CSS样式表及优先级法则

最新推荐文章于 2024-04-05 15:53:53 发布

Micca_Xx

最新推荐文章于 2024-04-05 15:53:53 发布

阅读量2.3k

点赞数 1

分类专栏：前端小记

本文链接：https://blog.csdn.net/sinat_36594453/article/details/88615767

版权

3 篇文章 0 订阅

订阅专栏

CSS：Cascading Style Sheets，层叠样式表，改变页面布局和外观。HTML定义文档内容，

组成部分：选择器，一条或多条声明。

需要改变样式的HTML元素；

声明：每条声明由一个属性和一个值组成。【声明组以{ }括起来，以分号结束】

p {color:red;text-align:center;}

注释：/*这是个注释*/

id选择器：为标有特定id属性的HTML元素指定样式，

ID属性：不能以数字开头，ID属性只能在每个HTML文档中出现一次。

#para1   /*id = "para1"属性 */
{
text-align:center;
color:red;
}

class类选择器：描述一组元素的样式，可以在多个元素中使用；在CSS中以一个" ."表示。

p.center {text-align:center;}  /*所有的 p 元素使用 class="center" 让该元素的文本居中*/

外部样式表：适合于样式应用于很多页面。文件不能包含任何html标签。

<head> <link rel="stylesheet" type="text/css" href="https://www.w3cschool.cn/css/mystyle.css"> </head>
/*HTML链接到CSS样式表，标签写在文档头部*/

样式表文件的例子：

hr {color:sienna;}           
p {margin-left:20px;}     /*正确：20px，错误：20 px，【不要在属性值与单位之间留有空格】*/    
body {background-image:url(/images/back40.gif);}

内部样式表：单个文档需要特殊样式，用 <style> 标签在文档头部定义内部样式表。

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

内联样式：将表现和内容混杂在一起，会损失掉样式表的许多优势，请慎用。

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

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

外部样式表

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

内部样式表

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

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

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

层叠

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

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

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

优先级逐级增加的选择器列表：

当 !important 规则被应用在一个样式声明中时，该样式声明会覆盖CSS中任何其他的声明，无论它处在声明列表中的哪里。尽管如此，!important规则还是与优先级毫无关系。使用 !important 不是一个好习惯，因为它改变了你样式表本来的级联规则，从而使其难以调试。

一些经验法则：

关注