1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 【HTML/CSS】CSS权重 继承及引入方式

【HTML/CSS】CSS权重 继承及引入方式

时间:2023-10-07 15:23:09

相关推荐

【HTML/CSS】CSS权重 继承及引入方式

1 CSS权重

1.1 权重规则

CSS匹配的选择器中每一种选择器类型的数组决定了选择器的权重,CSS的优先级规则:

权重高的样式会被应用到元素上。如果权重相同则使用最后声明的样式。属性后加上!important,无条件优先

1.2 权重计算

内联样式的权重:1000

ID选择器的权重:100

类选择器、属性选择器、伪类选择器的权重:10

元素选择器的权重:1

通配符*、子选择器>、兄弟选择器+的权重:0

/* ul=1 + #nav=100 + li=1 + .active=10 + a=1 = 113*/ul#nav li.active a {}

2 CSS的继承

继承是指子元素继承父元素的样式,下面列举有继承性的属性:

2.1 字体属性

fontfont-familyfont-weightfont-sizefont-stylefont-variant

2.2 文本属性

text-indent:文本缩进text-align:文本水平对齐line-height:行高word-spacing:字间距letter-spacing:字符间距text-transform:文本大小写direction:文本书写方向color:文本颜色

2.3 其他

元素可见性:visibility表格布局属性列表布局属性:ist-style-type、list-style-image、list-style-position、list-style光标属性:cursor:页面样式属性

3 CSS引入方式

内联样式

<p style="color:red">红色的字</p>

内部样式表

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

外部样式表

链接式:<link type="text/css" rel="styleSheet" href="CSS文件路径" />

导入式:

<style type="text/css">@import url("css文件路径");</style>

链接式的语法是属于HTML的,优先加载CSS文件到页面

导入式的语法属于CSS,先加载HTML结构再加载CSS文件

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。