溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“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>
<meta charset="UTF-8">
<title>vertical-align</title>
<style type="text/css">
*{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>
<div class="warp1">
<h2>CSS vertical-align 屬性</h2>
</div>
<div class="warp2">
<div class="content">
<p>vertical-align 屬性設置元素的垂直對齊方式</p>
<p>該屬性定義行內元素的基線相對于該元素所在行的基線的垂直對齊。允許指定負長度值和百分比值。這會使元素降低而不是升高。在表單元格中，這個屬性會設置單元格框中的單元格內容的對齊方式。</p>
</div>
</div>
</body>
</html文本大小寫：
text-transform：capitalize/uppercase/lowercase/none
文本裝飾線：
text-decoration: underline/overline/line-through
文本樣式應用demo：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vertical-align</title>
<style type="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>
<div class="wrap">
<span class="name">cyy</span><span class="words">你會越來越棒棒</span><span class="mark">！</span>
</div>
</body>
</html>文本樣式demo2：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vertical-align</title>
<style type="text/css">
*{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;
}
a{
text-decoration: none;
color:#009;
}
span{
color:orange;
}
</style>
</head>
<body>
<div class="wrap">
<h4>大話西游之大圣娶親的影評</h4>
<a href="#">熱門</a>/<a href="#">最新</a>/<a href="#">好友</a>
<hr>
<p><a href="#">羅紅霉素</a><span>★★★★★</span>2019-07-26</p>
<p>有人跟我比賽背臺詞么</p>
<p>閱讀：1615 <a href="#">有用</a></p>
<hr>
<p><a href="#">十七只貓和魚</a><span>★★★★</span>2019-04-26</p>
<p>任何時候任何場合都可以再看一遍的電影</p>
<p>閱讀：515 <a href="#">有用</a></p>
<hr>
<p><a href="#">暖家男</a><span>★★★★</span>2019-04-22</p>
<p>一定有一些電影，永遠都不能被超越</p>
<p>閱讀：490 <a href="#">有用</a></p>
<hr>
</div>
</body>
</html>“css選擇器和文本樣式實例分析”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
