CSS
一、CSS簡介
1.1 什么是CSS
- CSS全稱：Cascading Style Sheet 層疊樣式表，定義如何顯示HTML元素
- 多個樣式可以層層疊加，如果不同的css樣式對同一html標(biāo)簽進(jìn)行修飾，樣式有沖突的應(yīng)用優(yōu)先級高的，樣式無沖突的共同作用
1.2 CSS能干什么
- 修飾美化html網(wǎng)頁
- 外部樣式表可以提高代碼復(fù)用性從而提高效率
- html內(nèi)容與樣式表現(xiàn)分離，便于后期維護(hù)
1.3 CSS書寫規(guī)范
CSS規(guī)則由兩個主要的部分構(gòu)成：選擇器，以及一條或多條聲明
- 選擇器通常是我們需要改變的html元素
- 每條聲明由一個屬性和一個值組成
1.4 基礎(chǔ)語法
選擇器{屬性:值; 屬性:值;......}
h1{color:red; font-size:14px;}
注意事項：
- 使用花括號來包圍聲明
- 如果值為若干單詞，則要給值加引號
- 多個聲明之間使用分號來分開
- css對大小寫不敏感，但如果涉及到與html文檔一起使用時，class與id名稱對大小寫敏感
二、CSS導(dǎo)入方式
2.1 內(nèi)嵌方式
把CSS樣式嵌入到html標(biāo)簽當(dāng)中，類似屬性的用法
<div style="color:red;font-size:14px">~示例文本~~~~~</div>
2.2 內(nèi)部方式
在head標(biāo)簽中使用style引入CSS樣式
<head>
<!-- 告訴瀏覽器使用css解析器去解析 -->
<style type="text/css">
div{color:red;front-size:14px}
</style>
</head>
<body>
<!-- 上面在head中定義了一個元素選擇器, 給所有的div元素加上上面定義好的CSS樣式 -->
<div> aaaa </div>
</body>
2.3 外部方式
將CSS樣式抽成一個單獨的文件，使用者直接引用
Step1：創(chuàng)建單獨的css文件div.css
div{color:red;front-size:14px}
Step2：在html中引入div.css文件
<head>
<link rel="stylesheet" type="text/css" href="div.css"></link>
<!-- rel: 表示當(dāng)前頁面與href所指定文檔的關(guān)系
type: 文件類型, 告訴瀏覽器使用css解析器去解析
href: css文件地址 -->
</head>
<body>
<!-- 在div.css中中定義了一個元素選擇器, 給所有的div元素加上上面定義好的CSS樣式 -->
<div> aaaa </div>
</body>
2.4 @import方式
在頁面中引入一個獨立的單獨文件
<head>
<!-- 引入div.css文件 -->
<style type="text/css">
@import url("div.css")
</style>
</head>
<body>
<!-- 在div.css中中定義了一個元素選擇器, 給所有的div元素加上上面定義好的CSS樣式 -->
<div> aaaa </div>
</body>
三、CSS選擇器
主要用于選擇需要添加樣式的html元素
3.1 基本選擇器
3.1.1 元素選擇器
給所有定義了選擇器的html元素添加樣式
html標(biāo)簽1, html標(biāo)簽2{屬性:屬性值; ......}
3.1.2 id選擇器
給需要修改樣式的html元素加上id屬性標(biāo)識，根據(jù)id的來選擇元素
<head>
<!-- 定義了一個樣式, 該樣式只會被加到id="d1"的html元素 -->
<style type="text/css">
#d1{color:red;front-size:14px}
</style>
</head>
<body>
<!-- 給該div定義了id -->
<div id="d1"> aaaa </div>
</body>
3.1.3 class選擇器
給需要修改樣式的html元素加上class屬性標(biāo)識，根據(jù)class的值來選擇元素
<head>
<!-- 定義了一個樣式, 該樣式只會被加到class="d1"的html元素 -->
<style type="text/css">
.d1{color:red;front-size:14px}
</style>
</head>
<body>
<!-- 給該div定義了class -->
<div class="d1"> aaaa </div>
</body>
與id選擇器的區(qū)別：class屬性可以重復(fù)定義，而id不行
<head>
<style type="text/css">
.d1{color:red;front-size:14px}
#d2{color:red;front-size:14px}
</style>
</head>
<body>
<!-- 給該div定義了class -->
<div class="d1"> aaaa </div>
<!-- 給該div定義了class -->
<div class="d1"> bbbb </div>
<!-- 給該div定義了id -->
<div id="d2"> aaaa2 </div>
<!-- 錯誤: 因為id="d2"已經(jīng)被使用了, 這里不能再用id="d2"來定義該div -->
<div id="d2"> bbbb2 </div>
</body>
3.2 屬性選擇器
根據(jù)元素的屬性及屬性值來選擇元素
<head>
<!-- 定義了一個樣式, 該樣式只會被加到帶有href屬性且屬性值為"www.baidu.com"的html元素
如果不寫屬性值, 樣式就會被加到所有帶有href屬性的html元素 -->
<style type="text/css">
[href="www.baidu.com"]{color:red;front-size:14px}
</style>
</head>
<body>
<a href="www.baidu.com"> aaaa </a>
<a href="www.qq.com"> bbbb </a>
</body>
3.3 偽元素選擇器
也叫冒號選擇器，主要是針對< a>標(biāo)簽
語法：html元素:行為{css屬性}
- 靜止?fàn)顟B(tài)：沒有鼠標(biāo)碰到的狀態(tài)。a:link{css屬性}
- 懸浮狀態(tài)?：鼠標(biāo)停留在鏈接時的狀態(tài)。a:hover{css屬性}
- 觸發(fā)狀態(tài)?：鼠標(biāo)點擊鏈接時，點擊按下還沒抬起的狀態(tài)。a:active{css屬性}
- 完成狀態(tài)?：鼠標(biāo)點擊鏈接后的狀態(tài)。a:visited{css屬性}
<head>
<style type="text/css">
<!-- 靜止?fàn)顟B(tài) -->
a:link{color:blue;}
<!-- 懸浮狀態(tài) -->
a:hover{color:red;}
<!-- 觸發(fā)狀態(tài) -->
a:active{color:green;}
<!-- 完成狀態(tài) -->
a:visited{color:yellow;}
</style>
</head>
<body>
<a href="www.baidu.com"> 點我吧 </a>
</body>
3.4 層級選擇器
語法：父級選擇器 子級選擇器{css屬性}
<head>
<style type="text/css">
#div1 .div11{color:blue;}
</style>
</head>
<body>
<div id="div1">
<!-- 上面定義了父級為id="div1" 子級為class="div11"的一個層級選擇器
這樣就只會改變id="div1"下的class="div11"下的樣式, 而不會改變其他div的樣式-->
<div class="div11"></div>
<div class="div12"></div>
</div>
</body>
四、CSS屬性
4.1 文字屬性
| 屬性名 | 取值 | 描述 |
|---|---|---|
| font-size | 像素值 | 設(shè)置字體大小 |
| font-family | 宋體、黑體等 | 設(shè)置字體樣式 |
| font-style | normal表示正常、italic表示斜體 | 設(shè)置斜體樣式 |
| font-weight | 100-900數(shù)值或者bold表示粗體 | 粗體樣式 |
4.2 文本屬性
| 屬性名 | 取值 | 描述 |
|---|---|---|
| color | 十六進(jìn)制或代表顏色的英文單詞 | 設(shè)置文本顏色 |
| text-indent | 像素或百分比。5px縮進(jìn)5像素或20%縮進(jìn)父容器寬度的百分之20 | 設(shè)置元素中文本的首行縮進(jìn) |
| text-decoration | none、underline、overline、blink | 文本的裝飾線 |
| word-spacing | normal或像素值 | 單詞間的水平間隔（只對英文有效） |
| letter-spacing | normal或像素值 | 中文文字間的水平間隔 |
| text-align | left、right、center | 文本水平對齊方式 |
| line-height | normal或像素值 | 設(shè)置文本的行間距 |
| text-shadow | 四個取值依次是：陰影水平偏移 陰影垂直偏移 陰影模糊程度 陰影顏色 | 設(shè)置陰影級模糊效果 |
4.3 背景屬性
| 屬性名 | 取值 | 描述 |
|---|---|---|
| background-color | 十六進(jìn)制或代表顏色的英文單詞 | 設(shè)置元素的背景色 |
| background-image | url('圖片路徑') | 設(shè)置元素的背景圖片 |
| backgroud-repeat | repeat-y、repeat-x、repeat、no-repeat | 設(shè)置背景圖片的平鋪方向 |
| backgroud-size | 寬度和高度屬性或者只設(shè)置寬度 | 改變圖像在背景中的大小 |
4.4 列表屬性
| 屬性名 | 取值 | 描述 |
|---|---|---|
| list-style-type | disc等 | 改變列表的標(biāo)識類型 |
| list-style-image | url('圖片路徑') | 用圖像表示標(biāo)識 |
| list-style-position | inside;outside | 標(biāo)識出現(xiàn)在列表項內(nèi)容之外還是內(nèi)部 |
4.5 尺寸屬性
| 屬性名 | 取值 | 描述 |
|---|---|---|
| width | 像素值 | 設(shè)置元素的寬度 |
| height | 像素值 | 設(shè)置元素的高度 |
4.6 顯示屬性
| 屬性名 | 取值 | 描述 |
|---|---|---|
| display | none：不顯示、block：塊級顯示（獨立一行）、inline：行級顯示（在同一行） | 設(shè)置元素是否顯示以及顯示方式 |
4.7 輪廓屬性
| 屬性名 | 取值 | 描述 |
|---|---|---|
| outline-style | solid、dotted、dashed等 | 設(shè)置輪廓的樣式 |
| outline-color | 十六進(jìn)制或代表顏色的英文單詞 | 設(shè)置輪廓的顏色 |
| outline-width | 像素值 | 設(shè)置輪廓的寬度 |
4.8 浮動屬性
浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框位置。由于浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現(xiàn)得就像浮動框不存在一樣（即碰到普通的框不會停下來）
float屬性：規(guī)定元素向什么方向移動
框1向右浮動，直到碰到包含框才停下來，框2和框3順勢上移
框1向左浮動，碰到框2時不會停下來，直到碰到包含框才停下來，此時看到的現(xiàn)象是框1覆蓋掉了框2
如果框1、框2都是浮動框，框1碰到包含框停下來，而框2碰到框1就會停下來，不會覆蓋掉框1
如果包含框太窄，無法容納水平排列的三個浮動元素，name其他浮動框向下移動，直到有足夠的空間。如果浮動元素的高度不同，那么當(dāng)它們向下移動時可能被其他浮動元素“卡住”
clear屬性：規(guī)定元素的哪一側(cè)不允許其他浮動元素
| 取值 | 描述 |
|---|---|
| left | 在左側(cè)不允許浮動元素 |
| right | 在右側(cè)不允許浮動元素 |
| both | 在左右兩側(cè)都不允許浮動元素 |
| none | 默認(rèn)值。允許浮動元素出現(xiàn)在兩側(cè) |
| inherit | 規(guī)定應(yīng)該從父元素繼承clear屬性的值 |
4.9 定位屬性
相對定位（relative）：元素框偏移某個距離，元素仍保持其未定位前的狀態(tài)，它原本所占的空間保留
<head>
<style type="text/css">
h2.pos_left {
position: relative;
left: -20px;
}
h2.pos_right {
position: relative;
left:20px;
}
</style>
</head>
<body>
<h2>這是位于正常位置的標(biāo)題</h2>
<h2 class="pos_left">這個標(biāo)題相對其正常位置向左移動</h2>
<h2 class="pos_right">這個標(biāo)題相對其正常位置向右移動</h2>
<p>相對定位會按照元素的原始位置對該元素進(jìn)行移動</p>
<p>樣式 “l(fā)eft:-20px” 從元素的原始左側(cè)位置減去20像素</p>
<p>樣式 “l(fā)eft:20px” 從元素的原始左側(cè)位置增加20像素</p>
</body>
絕對定位（absolute）：元素框從文檔流完全刪除，并相對于其包含框進(jìn)行定位。包含框可能是文檔中的另一個元素，或者是初始包含框。元素原先在正常文檔流中所占的空間會關(guān)閉，就好像元素原來不存在一樣，元素定位后生成一個新的框
<head>
<style type="text/css">
h2.pos_abs {
position: absolute;
left: 100px;
top: 150px
}
</style>
</head>
<body>
<h2 class="pos_abs">這是帶有絕對定位的標(biāo)題</h2>
<p>通過絕對定位，元素可以放置到頁面上的任何位置。下面的標(biāo)題距離頁面左側(cè) 100px，距離頁面頂部150px</p>
</body>
固定定位（fixed）：元素狂的表現(xiàn)類似于將position設(shè)置為absolute，不過其包含框是視窗本身
<head>
<style type="text/css">
#left {
width: 200px;
height:200px;
backgroud-color: red;
position: fixed;
left: 100px;
top: 100px;
}
</style>
</head>
<body>
<div id="left"></div>
<!-- 增加很多的換行, 目的是為了創(chuàng)造網(wǎng)頁的滾動條 -->
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<p>通過固定定位，無論頁面如何滾動，上面定義的div框永遠(yuǎn)保持在視窗的上邊距100px左邊距100px的位置</p>
</body>
五、CSS盒子模型
5.1 邊框相關(guān)屬性
| 屬性名 | 取值 | 描述 |
|---|---|---|
| border-style | solid、double、dashed、dotted等 | 設(shè)置邊框樣式 |
| boder-color | 十六進(jìn)制或用于表示顏色的英文 | 設(shè)置邊框顏色 |
| boder-width | 像素值 | 設(shè)置邊框粗細(xì) |
5.2 外邊距相關(guān)屬性
margin：外邊距。邊框和邊框外層元素的距離
| 屬性名 | 取值 | 描述 |
|---|---|---|
| margin | top、right、bottom、left | 四個方向的距離 |
| margin-top | 像素值 | 上邊距 |
| margin-bottom | 像素值 | 下邊距 |
| margin-left | 像素值 | 左邊距 |
| margin-right | 像素值 | 右邊距 |
5.3 內(nèi)邊距相關(guān)屬性
padding：內(nèi)邊距。元素內(nèi)容和邊框之間的距離
| 屬性名 | 取值 | 描述 |
|---|---|---|
| padding | top、right、bottom、left | 四個方向的距離 |
| padding-top | 像素值 | 上邊距 |
| padding-bottom | 像素值 | 下邊距 |
| padding-left | 像素值 | 左邊距 |
| padding-right | 像素值 | 右邊距 |
