css选择器和文本样式实例分析
css选择器和文本样式实例分析
本篇内容介绍了“css选择器和文本样式实例分析”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
css基础-css选择器和css文本样式相关：
使用link链入外部样式，页面加载时会同时加载样式
@import url(“*.css”);使用导入式，页面加载完后，才会加载样式
链接伪类的顺序
:link-> :visited ->:hover-> :active
或者
: visited -> : link ->:hover-> :active
选择器的优先级：
id选择器>class选择器>标签选择器
如果设置了同样的类样式，类样式与元素里类的顺序没有关系，取决于哪个样式离需要引用样式的元素最近就用哪个，所以div里的文字颜色是“橘色“
选择器权值：
标签选择器：1
类和伪类选择器：10
id选择器：100
通配符选择器：0
行内样式：1000
!important：优先级最最高
权值不同时，根据权值判断样式；权值相同时，根据就近原则判断样式
常用选择器：
input:focus
p:first-letter p元素的首字母
p:first-line p元素的首行
serif字体和sans-serif字体的区别：
sans-serif有修饰
sans-serif无修饰
font-style:normal/italic/oblique
正常 斜体 倾斜
font简写顺序： font-style font-variant font-weight font-size font-family；
img水平居中：
img不是块级元素，不能使用img{text-align:center;}
可以在img外面包裹div，使用div{text-align:center;}
margin:0 auto也可以实现
vertical-align可以设置数值
单行文字水平垂直居中：
height与Line-height相同，text-align:center;
多行文字水平垂直居中：
多行文字设置margin:0 auto；
文字外容器设置：display:table-cell;vertical-align:middle;
文字外容器的外容器设置：display:table;
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>vertical-align</title><styletype="text/css">*{padding:0px;margin:0px;}.warp1{height:80px;width:100%;background-color:#14191e;line-height:80px;text-align:center;}.warp1h2{color:#fff;font-size:24px;}.warp2{height:400px;width:100%;border:1px#14191esolid;display:table;}.content{display:table-cell;vertical-align:middle;}.contentp{width:500px;font-family:"微软雅黑";line-height:1.5em;font-size:14px;margin:0auto;}</style></head><body><divclass="warp1"><h2>CSSvertical-align属性</h2></div><divclass="warp2"><divclass="content"><p>vertical-align属性设置元素的垂直对齐方式</p><p>该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。</p></div></div></body></html
文本大小写：
text-transform：capitalize/uppercase/lowercase/none
文本装饰线：
text-decoration: underline/overline/line-through
文本样式应用demo：
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>vertical-align</title><styletype="text/css">*{padding:0px;margin:0px;}.wrap{height:200px;line-height:200px;width:100%;text-align:center;background-color:#abcdef;font-family:"宋体";}span.words{font-size:28px;color:gray;text-decoration:underline;letter-spacing:5px;margin-left:10px;vertical-align:12px;}span.name{color:red;font-size:60px;letter-spacing:10px;text-transform:uppercase;}span.mark{font-style:italic;color:gray;font-weight:bold;font-size:60px;}</style></head><body><divclass="wrap"><spanclass="name">cyy</span><spanclass="words">你会越来越棒棒</span><spanclass="mark">！</span></div></body></html>
文本样式demo2：
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>vertical-align</title><styletype="text/css">*{padding:0px;margin:0px;}.wrap{height:100px;line-height:34px;width:100%;padding-left:10px;}hr{margin:10px0;}h4{color:green;margin:10px0;}a{text-decoration:none;color:#009;}span{color:orange;}</style></head><body><divclass="wrap"><h4>大话西游之大圣娶亲的影评</h4><ahref="#">热门</a>/<ahref="#">最新</a>/<ahref="#">好友</a><hr><p><ahref="#">罗红霉素</a><span>★★★★★</span>2019-07-26</p><p>有人跟我比赛背台词么</p><p>阅读：1615<ahref="#">有用</a></p><hr><p><ahref="#">十七只猫和鱼</a><span>★★★★</span>2019-04-26</p><p>任何时候任何场合都可以再看一遍的电影</p><p>阅读：515<ahref="#">有用</a></p><hr><p><ahref="#">暖家男</a><span>★★★★</span>2019-04-22</p><p>一定有一些电影，永远都不能被超越</p><p>阅读：490<ahref="#">有用</a></p><hr></div></body></html>
“css选择器和文本样式实例分析”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注恰卡编程网网站，小编将为大家输出更多高质量的实用文章！
