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 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>
<div >
<h1>CSS vertical-align 屬性</h1>
</div>
<div >
<div >
<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 >
<span >cyy</span><span >你會越來越棒棒</span><span >！</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;
}
h3{
color:green;
margin: 10px 0;
}
a{
text-decoration: none;
color:#009;
}
span{
color:orange;
}
</style>
</head>
<body>
<div >
<h3>大話西游之大圣娶親的影評</h3>
<a href="https://www.cnblogs.com/firebet/p/#">熱門</a>/<a href="https://www.cnblogs.com/firebet/p/#">最新</a>/<a href="https://www.cnblogs.com/firebet/p/#">好友</a>
<hr>
<p><a href="https://www.cnblogs.com/firebet/p/#">羅紅霉素</a><span>★★★★★</span>2019-07-26</p>
<p>有人跟我比賽背臺詞么</p>
<p>閱讀：1615 <a href="https://www.cnblogs.com/firebet/p/#">有用</a></p>
<hr>
<p><a href="https://www.cnblogs.com/firebet/p/#">十七只貓和魚</a><span>★★★★</span>2019-04-26</p>
<p>任何時候任何場合都可以再看一遍的電影</p>
<p>閱讀：515 <a href="https://www.cnblogs.com/firebet/p/#">有用</a></p>
<hr>
<p><a href="https://www.cnblogs.com/firebet/p/#">暖家男</a><span>★★★★</span>2019-04-22</p>
<p>一定有一些電影，永遠都不能被超越</p>
<p>閱讀：490 <a href="https://www.cnblogs.com/firebet/p/#">有用</a></p>
<hr>
</div>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/128417.html
標籤：其他
上一篇：JSON
下一篇：HTML基礎