所有標簽都有一個默認樣式,稱為瀏覽器樣式,或者默認樣式
行內樣式:通過在標簽中設置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 只能在半角空格或連字符換行,單詞不換行,空格和換行符才換行