css 特性(第五天)_IT分享知识网

大家好，欢迎来到IT知识分享网。

css 特性（第五天）

凹凸文字
导航栏案例
- 文本的装饰
CSS 三大特性
CSS特殊性（Specificity）

凹凸文字

代码：

<!DOCTYPE html> <!-- @Author jinliwei @Date 2019/9/16 16:03 --> <html lang="en"> <head> <meta charset="UTF-8"> <title>凹凸文字</title> <style type="text/css"> body { 
    background-color: #ccc; } div { 
    color: #ccc; font: 700 80px "微软雅黑"; } div:first-child { 
    /* text-shadow:水平位置 垂直位置 模糊距离 阴影颜色 */ text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff; } div:last-child { 
    /* text-shadow:水平位置 垂直位置 模糊距离 阴影颜色 */ text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff; } </style> </head> <body> <div>我是凸起的文字</div> <div>我是凹下的文字</div> </body> </html>

导航栏案例

文本的装饰

text-decoration 通常我们用于给链接修改装饰效果

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。下划线也是我们链接自带的`
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。

部分代码：

a { 
    /*text-decoration: none;*/ /*text-decoration: underline;*/ /*text-decoration: overline;*/ text-decoration: line-through; }

<a href="#">我是一个a标签</a>

生成图

CSS 三大特性

层叠继承优先级是我们学习CSS 必须掌握的三个特性

CSS层叠性

CSS最后的执行口诀： 长江后浪推前浪，前浪死在沙滩上。

代码：

<!DOCTYPE html> <!-- @Author jinliwei @Date 2019/9/17 08:56 --> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS三大特性</title> <style type="text/css"> /* 层叠 长江后浪推前浪。前浪死在沙滩上 样式冲突，就近原则，执行最后加载的 */ p{ 
    color: pink; } p{ 
    color: blue; } </style> </head> <body> <p>面朝大海，春暖花开！</p> </body> </html>

CSS继承性

CSS最后的执行口诀： 龙生龙，凤生凤，老鼠生的孩子会打洞。

代码：

<!-- 层叠，继承，优先级 --> <!-- 继承 子承父业 --> <div style="color: red;border: green solid 1px"> <p>面朝大海，春暖花开！</p> </div>

<a href="#">我是一个a标签</a>

CSS优先级

代码：

<!DOCTYPE html> <!-- @Author jinliwei @Date 2019/9/17 08:56 --> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS三大特性</title> <style type="text/css"> /* 层叠 长江后浪推前浪。前浪死在沙滩上 样式冲突，就近原则，执行最后加载的 */ p{ 
    color: pink; } p{ 
    color: blue; } </style> </head> <body> <!-- 层叠，继承，优先级 --> <!-- 继承 子承父业 --> <div style="color: red;border: green solid 1px"> <p>面朝大海，春暖花开！</p> </div> <!-- 优先级：行内样式(内联)>内部样式>外部样式(外链) 选择器优先级：!important>行内样式>ID选择器>类和伪类选择器>标签选择器 --> <p style="color: aqua">面朝大海，春暖花开！</p> </body> </html>

CSS特殊性（Specificity）

继承或者* 的贡献值	0,0,0,0
每个元素（标签）贡献值为	0,0,0,1
每个类，伪类贡献值为	0,0,1,0
每个ID贡献值为	0,1,0,0
每个行内样式贡献值	1,0,0,0
每个!important贡献值	∞ 无穷大

权重是可以叠加的

.nav ul li ------> 0,0,1,2 a:hover -----—> 0,0,1,1 .nav a ------> 0,0,1,1 #nav p -----> 0,1,0,1

继承的权重是 0

总结优先级：

使用了 !important声明的规则。
内嵌在 HTML 元素的 style属性里面的声明。
使用了 ID 选择器的规则。
使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
使用了元素选择器的规则。
只包含一个通用选择器的规则。
同一类选择器则遵循就近原则。

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/112857.html

css 特性(第五天)