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;
vertical-align*{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;}CSSvertical-align属性