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;

　　<!DOCTYPE html>

　　<html>

　　<head>

　　<title>vertical-align</title>

　　*{padding:0px;margin: 0px;}

　　.warp1{

　　height:80px;

　　width: 100%;

　　background-color: #14191e;

　　line-height:80px;

　　text-align:center;

　　}

　　.warp1 h1{

　　color:#fff;

　　font-size:24px;

　　}

　　.warp2{

　　height:400px;

　　width: 100%;

　　border:1px #14191e solid;

　　display:table;

　　}

　　.content{

　　display:table-cell;

　　vertical-align:middle;

　　}

　　.content p{

　　width:500px;

　　font-family: "微软雅黑";

　　line-height:1.5em;

　　font-size:14px;

　　margin:0 auto;

　　}

　　</style>

　　</head>

　　<body>

　　<h1>CSS vertical-align 属性</h1>

　　</div>

　　<p>vertical-align 属性设置元素的垂直对齐方式</p>

　　<p>该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。</p>

　　</div>

　　</body>

　　</html>

　　文本大小写：

　　text-transform：capitalize/uppercase/lowercase/none

　　文本装饰线：

　　text-decoration: underline/overline/line-through

　　文本样式应用demo：

　　<!DOCTYPE html>

　　<html>

　　<head>

　　<title>vertical-align</title>

　　*{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>

　　<span class="name">cyy</span><span class="words">你会越来越棒棒</span><span class="mark">！</span>

　　</div>

　　</body>

　　</html>

　　文本样式demo2：

　　<!DOCTYPE html>

　　<html>

　　<head>

　　<title>vertical-align</title>

　　*{padding:0px;margin: 0px;}

　　.wrap{

　　height: 100px;

　　line-height: 34px;

　　width: 100%;

　　padding-left:10px;

　　}

　　hr{

　　margin:10px 0;

　　}

　　h3{

　　color:green;

　　margin: 10px 0;

　　}

　　text-decoration: none;

　　color:#009;

　　}

　　span{

　　color:orange;

　　}

　　</style>

　　</head>

　　<body>

　　<h3>大话西游之大圣娶亲的影评</h3>

　　<hr>

　　<p>有人跟我比赛背台词么</p>

　　<hr>

　　<p><a href="#">十七只猫和鱼</a><span>★★★★</span>2019-04-26</p>

　　<p>任何时候任何场合都可以再看一遍的电影</p>

　　<hr>

　　<p>一定有一些电影，永远都不能被超越</p>

　　<hr>

　　</div>

　　</body>

　　</html>

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h62861.shtml