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;

<!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 h2{

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>

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

</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;

}

h4{

color:green;

margin: 10px 0;

}

text-decoration: none;

color:#009;

}

span{

color:orange;

}

</style>

</head>

<body>

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

<hr>

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

<hr>

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

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

<hr>

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

<hr>

</div>

</body>

</html>

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

上一篇：Linux系统EC204G模块移植方法是什么

下一篇：设置vscode使其自动识别编码格式的方法