第二天.css 樣式
css基礎選擇器
標籤選擇器
類選擇器
多類名選擇器
ID選擇器
萬用字元選擇器
1.當既存在外部樣式,又存在內部樣式時,根據css樣式排列順序,位於較後面的若存在相同的定義樣式,會替換前面的樣式。如行內樣式,會替換外部樣式。
2.若存在多類選擇器,也只與css樣式的排列順序有關,與類選擇器中類的書寫順序無關。
3.ID 選擇器只能使用一次,class選擇器可以使用多次
eg:
<html>
<head>
<style>
.firstStyle{
font-size: 50px;
}
.secondStyle {
font-size :100px;
color:yellow;
}
</style>
</head>
<body>
<div class="secondStyle firstStyle">白居易</div>
</body>
</html>
2.更改字型
font-weight:bold=700; 加粗;/normal 正常=400 數字沒有單位
font-size:20px 數字要帶px單位
<em></em> 加強標籤 傾斜文字自動變色 加強 <i></i> 也有此作用
font-style:normal 讓斜體變正常
font-family: 字型
字型聯合設定
排列順序:font-style/ font-weight/ font-size/ line-height(行高 行與行之間的距離)/ font-family
字型連寫 必不可少屬性font-size;font-family;
font: 20px "微軟";
h1 {
text-align:center (裡面的文字居中對齊 而不是h1,h1是個盒子)
}
text-indent: 2em 首行縮排兩個字元
text-decoration: none/ underline 是否加線
<s>現價 199</s> 在內容中間產生一天橫線。
取消橫線即設定 s {
text-decoration:none;
}
del 標籤與 s 標籤有相同的作用。
u、ins標籤 給文字 新增下劃線:text-decoration:underline
3.複合選擇器
子代選擇器 各個標籤用空格隔開(子代中標籤的樣式)
div ul li{
}
後代選擇器 >
div ul>li
交集選擇器
div.class {
}
eg: div.red red 為一個class
並集選擇器 ,
eg: a,span {
}
連結偽類選擇器(:)
lvha 的順序定義
未訪問時的文字格式 a:link {
}
訪問時的文字格式 a:visited {
}
懸浮時的文字格式 a:hover {
}
點選時的文字格式 a:active {
}
span,em,i {
}