所有標簽都有一個默認樣式，稱為瀏覽器樣式，或者默認樣式
行內樣式：通過在標簽中設置style屬性來達到實現控制標簽的樣式的效果。eg:
<h1 style="color:red;">這是一個標題</h1>
可以設置多個css屬性
嵌入樣式：在head標簽中嵌套一個style標簽，在style標簽中可以書寫css樣式
外聯樣式：通過link標簽
后代選擇器：空格
并集選擇器：逗號
子元素選擇器：> 只選擇兒子輩的元素
順序不能顛倒
偽類
LVHA原則
/*未訪問過的鏈接*/
a:link {
color: red;
}
/*已訪問過的鏈接*/
a:visited { color: gray; }
/*進入*/
a:hover {
color: green;
}
/*被點擊*/
a:active {
color: purple;
}
層疊性，繼承性
文字相關的屬性可以繼承,盒子相關不能繼承
一般情況下對body進行字體設置
css優先級
行內樣式>id選擇器>類選擇器>標簽選擇器
繼承的樣式優先級 大于 默認的樣式優先級
通配符選擇器優先級大于 繼承的樣式優先級
標簽選擇器的優先級大于通配符選擇器優先級
復合選擇器的優先級
行內樣式>id選擇器>類選擇器>標簽選擇器
css單位 與 文字排版
dispaly:控制標簽的顯示模式
- none 移除元素
- inline 讓元素變成行內元素， 不能設置寬高，只有左右邊距，不獨占行
- block 讓元素變成塊級元素， 可以設置寬高，上下左右邊距，獨占行
- inline-block 變成行內塊元素， 可以設置寬高，左右邊距，不獨占行
行內元素不能設置寬高，只能通過內容來撐開寬高；
visibility：hide；//隱藏
display:none;// 移除，不影響頁面布局
css顏色表示
- rgb(r,g,b)
-
rrggbb
r、g、b :0-255 獲取百分比
rr、gg、bb：0-255 的十六進制
css長度單位
一般用相對長度單位：px、em、rem em：當前字體大小，例如：當前元素的字體大小為12px，那么1em=12px；
文字排版
font-size：字號大小，一般頁面12px、14px
font-family: 字體
非襯線體收尾
字體系列
襯線體和非襯線體
字體加粗
設置字體不需要單位
- b標簽
- font-weight:700; 100-900 ：400正常
字體風格
font-style
- normal:默認值，標準
- italic：使用斜體顯示，如果系統沒有斜體的字體，則正常顯示
- oblique：傾斜
字體樣式
font:style weight size family
字間距
letter-spacing：字符與字符之間的空白，默認為normal ，px為單位
li {
font-family: "微軟雅黑";
font-size: 16px;
font-style: oblique;
font-weight: 700;
letter-spacing: normal;
letter-spacing: 20px; /*字符間距*/
word-spacing:10px;/*只對字符之間有空格的有影響*/
}
a {
display: inline-block;
background-color:silver;
width: 100px;
height: 50px;
line-height: 50px;/*文本垂直居中*/
text-align: center;/*文本水平居中*/
letter-spacing: 30px;
text-decoration: none;/*去掉下劃線*/
}
行高 line-height
文本裝飾
text-decoration
none 默認。定義標準的文本。
underline 定義文本下的一條線。
overline 定義文本上的一條線。
line-through 定義穿過文本下的一條線。
blink 定義閃爍的文本。
inherit 規定應該從父元素繼承 text-decoration 屬性的值。
水平對齊方式 text-align
- left： 默認值
- right
- center
首行縮進
只能設置于塊級標簽
text-indent ：值為em的倍數，不同單位的數值，瀏覽器寬度的百分比，允許使用負值，建議用em作為單位
text-indent:-9999px;text-indent:-9999px;/*用于隱藏網站logo的標題，易于seo*/
空白符處理
white-space:normal; 正常顯示，自動折行
white-space: nowrap; 即使超過盒子寬度，文本也不換行顯示
white-space: pre; 寫html的時候什么樣式，顯示就什么樣式
word-break 自動換行
- normal 不打斷單詞顯示
- break-all 允許單詞打斷換行
- keep-all 只能在半角空格或連字符換行，單詞不換行，空格和換行符才換行
