CSS(Cascading Style Sheets)層級樣式表亏推，是一種用來表現(xiàn)HTML或XML等文件樣式的計算機(jī)語言涉馅。CSS是模型與視圖分離這個概念的典范之作。學(xué)習(xí)CSS需要有HTML基礎(chǔ)喊递。
CSS的引入方式
CSS是為HTML提供顯示效果的疤剑，在網(wǎng)頁制作是采用CSS技術(shù)滑绒，可以對網(wǎng)頁的布局、顏色隘膘、背景疑故、寬度、高度弯菊、字體等進(jìn)行控制纵势，使得網(wǎng)頁設(shè)計布局更加美觀漂亮。但我們必須在HTML里引入CSS，它才會起作用钦铁，如何引入CSS呢扫茅？它的引入方式有三種，且三種方式優(yōu)先級依次降低育瓜，相同情況下，優(yōu)先級高的可以覆蓋優(yōu)先級低的：
- 內(nèi)聯(lián)屬性(Inline style attribute) —— 對HTML標(biāo)簽直接修改他的style屬性
<h1 style="font-size: 12px;">我的字號被修改了</h1>
- 寫在style標(biāo)簽里 —— style標(biāo)簽一般要求寫在head標(biāo)簽里
<head>
<style>
h1 {
font-size: 12px;
}
</style>
</head>
- 用link標(biāo)簽引用外部文件 —— 寫在head標(biāo)簽里栽烂，最常用的引入方式
<link rel="stylesheet" href="styles.css" />
常用CSS樣式
| 樣式 | 功能 | 例子 |
|---|---|---|
| font-size | 字體大小 | font-size:14px |
| font-family | 字體系列 | font-family:Times |
| color | 文本顏色 | color:red |
| text-align | 對齊元素中的文本 | text-align:center/left/right |
| border | 邊框 | border:thin solid black |
| font-weight | 加粗 | font-weight:bold |
| text-decoration | 文字裝飾 | text-decoration:underline/none/overline |
| background | 背景屬性 | background:#FFF/url(bg.png) |
更多CSS樣式見這里
CSS語法規(guī)則
CSS語法規(guī)則 = CSS選擇器(selector) + 一條或多條聲明(declaration)
一個聲明 = 一個屬性名 + 一個值
主要選擇器：元素選擇器躏仇、類選擇器、ID選擇器
CSS選擇器
選擇器主要用來確定HTML樹形結(jié)構(gòu)中的DOM元素節(jié)點腺办。
一焰手、元素選擇器(Element Selector)
以HTML標(biāo)簽作為目標(biāo)的選擇器，目的是改變某類標(biāo)簽的默認(rèn)樣式怀喉。
h1 {
font-size: 12px;
}
二书妻、類選擇器(Class Selector)
是一種獨(dú)立于HTML元素來指定樣式的選擇器。
.warning{
color: red;
}
<h1 class="warning">我是警告標(biāo)題</h1>
三躬拢、ID選擇器(ID Selector)
為標(biāo)有特定id的HTML元素指定特定的樣式躲履，以#開頭
#warning-title {
font-weight: bold;
}
<h1 id="warning-title">這是一個警告標(biāo)題</h1>
注意：介紹幾種其他選擇器
- 屬性選擇器：可以根據(jù)元素的屬性及屬性值來選擇元素。
例如：可以只對有 href 屬性的錨（a 元素）應(yīng)用樣式：
a[href] {color:red;}
- 后代選擇器：可以選擇作為某元素后代的元素聊闯，當(dāng)兩個選擇器用空格分開時工猜，表示第一個選擇器命中的元素下被第二個選擇器命中的任何一級子元素。
例如：可以只對 h1 元素中的 em 元素應(yīng)用樣式：
h1 em {color:red;}
上面這個規(guī)則會把作為 h1 元素后代的 em 元素的文本變?yōu)?紅色菱蔬。其他 em 文本（如段落或塊引用中的 em）則不會被這個規(guī)則選中：
<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>
- 子元素選擇器：只能選擇作為某元素子元素的元素篷帅。
例如：選擇只作為 h1 元素子元素的 strong 元素應(yīng)用樣式：
h1 > strong {color:red;}
這個規(guī)則會把第一個 h1 下面的兩個 strong 元素變?yōu)榧t色，但是第二個 h1 中的 strong 不受影響：
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
- 相鄰兄弟選擇器：選擇緊接在另一個元素后的元素拴泌，而且二者有相同的父元素魏身。
例如：要增加緊接在 h1 元素后出現(xiàn)的段落(h1 和 p 元素?fù)碛泄餐母冈?的上邊距應(yīng)用樣式：
h1 + p {margin-top:50px;}
- 組合選擇器：復(fù)用CSS代碼。將兩個選擇器以“ , ”分割蚪腐，表示兩個完全不相關(guān)的選擇器命中的元素箭昵，都適用于后面的CSS屬性。
樣式繼承與覆蓋
樣式繼承不是一個默認(rèn)行為,實際上是看某一個屬性的默認(rèn)值是否是inherit,也就是瀏覽器默認(rèn)樣式.比如a標(biāo)簽的color瀏覽器默認(rèn)樣式不是inherit
- CSS使用中削茁，一些屬性比如color是可以被繼承的宙枷，即父元素設(shè)置了某屬性，自元素也有該屬性茧跋。例如：
文本相關(guān)：
font-family, font-size, font-style,
font-variant, font-weight, font, letter-spacing,
line-height, text-align, text-indent, texttransform, word-spacing
列表相關(guān)：
list-style-image, list-style-position,
list-style-type, list-style
- CSS的樣式覆蓋,在選擇器不同的情況下,我們給每種選擇器制定一個權(quán)值,計算命中一個元素的所有選擇器的總權(quán)值,值高者優(yōu)先級高:
- 元素選擇器： 1
- 類選擇起器： 10
- ID選擇器： 100
- 內(nèi)聯(lián)選擇器： 1000
- 無論在任何一種情況下慰丛，只要你在樣式上加了important，那么他最大瘾杭，前面所有的規(guī)則都忽略 加了important的代碼樣子
p {
color: white !important;
}
布局定位
盒子模型
HTML的元素現(xiàn)實模型被稱為盒子模型,任何一個在頁面上顯示的元素哦都會呈現(xiàn)一個盒子形狀,一個盒子的總寬 = width + padding-left + padding-right + border-left + border-right
布局定位的重要CSS屬性
float, clear, position, display
width, height, padding, margin, border
- float：控制靠左還是靠右,有三個值:
float: left / right / none
- clear：規(guī)定元素的哪一側(cè)不允許其他浮動元素诅病。但是這個功能與display屬性協(xié)同會產(chǎn)生不同的效果。 所以初學(xué)者來講，只要記住這一種用法就好了贤笆。
- position：顯示相對于原有位置的偏移量蝇棉，經(jīng)常跟right，left芥永，top篡殷，bottom相聯(lián)合使用。
position: static / relative / absolute / fixed
- absolute：會脫離他的父級元素埋涧，他的定位會相對于整個窗口板辽。而且他原本在文檔流里就不占位置了。 設(shè)置right,left,top,bottom這四個屬性的時候棘催，是相對于整個頁面來換算的劲弦。
- relative：還在父級元素里，設(shè)置right, left, top, bottom的時候醇坝，他就相對于自己來計算邑跪。最重要的是，他原本占有的位置仍保留呼猪。
- fixed：right, left, top, bottom四個屬性則是相對于窗口來換算了画畅，與相對于整個頁面來換算最大的區(qū)別就在于，當(dāng)頁面寬高超過窗口的時候宋距。 fixed的元素會懸浮在那里夜赵，我們在頁面上看到的跟著滾動條走得懸浮塊都是這么做的。
- display：改變生成的盒子的類型乡革。
none, block, inline, inline-block, list-item, table, run-in 等
- block：塊級元素寇僧，如div、h1 沸版、p 元素嘁傀，意味著這些元素顯示為一塊內(nèi)容。 塊級元素的特點是：(1)寬度充滿父級容器视粮、(2)與前后元素都會空一行细办、(3)盒子模型涉及的所有屬性都可以被修改
- inline：行內(nèi)元素，如a蕾殴、span笑撞、strong 元素，它們的內(nèi)容顯示在行中钓觉。 行內(nèi)元素的特點是：(1)通常在塊級元素里茴肥，且只會占據(jù)自己內(nèi)容部分的空間、(2)不能在前后元素之間生成空行
- inline-block：兼顧了兩者荡灾，既象行內(nèi)元素一樣流動布局瓤狐，又像block元素一樣有自己的padding margin等
- none：讓生成的元素根本不顯示瞬铸，不占用文檔中的空間。
流式布局
通過使用百分比設(shè)置各個部分的寬度來適應(yīng)不同的分辨率础锐。
偽類和偽元素
用于向某些選擇器添加特殊效果
語法
- 偽類
selector : pseudo-class {property: value}
selector.class : pseudo-class {property: value} (CSS類與偽類搭配使用)
- 偽元素
selector:pseudo-element {property:value;}
selector.class:pseudo-element {property:value;} (CSS類與偽元素搭配使用)
例如：
a:link {color: #FF0000} /* 未訪問的鏈接 */
a:visited {color: #00FF00} /* 已訪問的鏈接 */
a:hover {color: #FF00FF} /* 鼠標(biāo)移動到鏈接上 */
a:active {color: #0000FF} /* 選定的鏈接 */
"first-line" 偽元素用于向文本的首行設(shè)置特殊樣式嗓节。
p:first-line
{
color:#ff0000;
font-variant:small-caps;
}
偽類屬性
| 屬性 | 描述 |
|---|---|
| :active | 向被激活的元素添加樣式 |
| :focus | 向擁有鍵盤輸入焦點的元素添加樣式 |
| :hover | 當(dāng)鼠標(biāo)懸浮在元素上方時，向元素添加樣式 |
| :link | 向未被訪問的鏈接添加樣式 |
| :visited | 向已被訪問的鏈接添加樣式 |
| :first-child | 向元素的第一個子元素添加樣式 |
| :lang | 向帶有指定 lang 屬性的元素添加樣式 |
偽元素屬性
| 屬性 | 描述 |
|---|---|
| :first-letter | 向文本的第一個字母添加特殊樣式 |
| :first-line | 向文本的首行添加特殊樣式 |
| :before | 在元素之前添加內(nèi)容 |
| :after | 在元素之后添加內(nèi)容 |
參考資料
CSS在線驗證
學(xué)習(xí)CSS布局
CSS基礎(chǔ)教程
CSS3新特性
CodeForDream上提供的CSS課程
