css基礎-css選擇器和css文本樣式相關： 使用link鏈入外部樣式，頁面載入時會同時載入樣式 @import url(“*.css”);使用導入式，頁面載入完後，才會載入樣式 鏈接偽類的順序 :link-> :visited ->:hover-> :active 或者 : visited -> ...
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 class="warp1">
<h1>CSS vertical-align 屬性</h1>
</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;
}
h3{
color:green;
margin: 10px 0;
}
a{
text-decoration: none;
color:#009;
}
span{
color:orange;
}
</style>
</head>
<body>
<div class="wrap">
<h3>大話西游之大聖娶親的影評</h3>
<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>
