CSS核心基础
CSS核心基礎(chǔ)
CSS樣式規(guī)則
在HTML中，引入CSS的方法 主要有：行內(nèi)式、內(nèi)嵌式、導(dǎo)入式、鏈接式4種。
1.行內(nèi)式：在標(biāo)記的style屬性中設(shè)定CSS樣式，這種方式本質(zhì)上沒(méi)有體現(xiàn)出CSS的優(yōu)勢(shì)，因此不推薦使用。
2. 嵌入式：對(duì)頁(yè)面中的各種元素的設(shè)置集中在<head></head>之間。
3. 導(dǎo)入式和鏈接式：目的都是將一個(gè)獨(dú)立的CSS文件引入HTML文件中。鏈接式使用HTML的標(biāo)記引入外部CSS文件，如
<link href="mystyle.css" rel="stylesheet" type="text/css" />.導(dǎo)入式需使用： <style type="text/css"> @import"mystyle.css";</style>
基本CSS選擇器
標(biāo)記選擇器、類(lèi)別選擇器和ID選擇器3種。
1 標(biāo)記選擇器
選擇器包含： 選擇器本身、屬性和值。
如 h1{ color:red,font-size:12px;}.
2 類(lèi)別選擇器
類(lèi)別選擇器的名稱(chēng)由用戶自定義，屬性和值跟標(biāo)記選擇器一樣，也必須符合CSS規(guī)范。 如 .class{color:green;}
最好通過(guò)標(biāo)記選擇器定義 標(biāo)記的全局顯示方案，再通過(guò)clss選擇器突出標(biāo)記進(jìn)行單獨(dú)設(shè)置。這樣可提高代碼的編寫(xiě)效率。
3 ID選擇器
ID選擇器只能在HTML頁(yè)面中使用一次，針對(duì)性更強(qiáng)。
CSS文本外觀屬性
1文本顏色
顏色屬性被用來(lái)設(shè)置文字的顏色。
顏色是通過(guò)CSS最經(jīng)常的指定：
十六進(jìn)制值 - 如: ＃FF0000
一個(gè)RGB值 - 如: RGB(255,0,0)
顏色的名稱(chēng) - 如: red
例如：
body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
2文本的對(duì)齊方式
文本排列屬性是用來(lái)設(shè)置文本的水平對(duì)齊方式。
文本可居中或?qū)R到左或右,兩端對(duì)齊.
當(dāng)text-align設(shè)置為"justify"，每一行被展開(kāi)為寬度相等，左，右外邊距是對(duì)齊（如雜志和報(bào)紙）。
例如：
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
3文本修飾
text-decoration 屬性用來(lái)設(shè)置或刪除文本的裝飾。
從設(shè)計(jì)的角度看 text-decoration屬性主要是用來(lái)刪除鏈接的下劃線：
例如：
a {text-decoration:none;}
4文本轉(zhuǎn)換
文本轉(zhuǎn)換屬性是用來(lái)指定在一個(gè)文本中的大寫(xiě)和小寫(xiě)字母。
可用于所有字句變成大寫(xiě)或小寫(xiě)字母，或每個(gè)單詞的首字母大寫(xiě)。
例如：
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
5文本縮進(jìn)
文本縮進(jìn)屬性是用來(lái)指定文本的第一行的縮進(jìn)。
例如：
p {text-indent:50px;}·
以下是本節(jié)構(gòu)圖：
作業(yè)：
運(yùn)行結(jié)果：
總結(jié)
- 上一篇： maven复习 (进阶+高级)
- 下一篇： css图形动画,CSS3 实现图形下落动