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;

　　

　　文本大小写：

　　text-transform：capitalize/uppercase/lowercase/none

　　文本装饰线：

　　text-decoration: underline/overline/line-through

　　文本样式应用demo：

　　

　　文本样式demo2：

　　

以上就是关于"css选择器和css文本样式实例分析"这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注行业资讯频道。