一 心得體會
今天的任務(wù)是通過給簡歷加樣式來初步了解css的語法勾哩、選擇器、層疊與繼承以及其是怎樣運作的等等举哟，在此次課程中思劳，我們不要求記牢每個css特性，但是我們需要對其有個初步的概念妨猩。與此同時潜叛，我們應(yīng)該檢查教程的版本，力爭看到的是最新的版本壶硅，因為前端技術(shù)更新迭代十分迅速威兜，以前很多屬性都已棄用，新的版本也新增了許多屬性庐椒，因此學(xué)習(xí)最新課程十分有必要牡属。當(dāng)前css版本為css3，推薦去MDN觀看最新文檔扼睬，書籍的話可以看看《css權(quán)威指南第三版》。
編程時有一點十分重要：一定要多寫注釋！一定要多謝注釋窗宇！一定要多謝注釋４敕ァ（重要的事情所三遍）剛開始寫代碼的時候你可能知道當(dāng)前寫的是什么東西，代表什么含義军俊，但是到寫到后面經(jīng)常會忘掉前面寫的內(nèi)容以及當(dāng)時的思路侥加，同時初學(xué)者也還沒形成規(guī)范統(tǒng)一的編程風(fēng)格，所以注釋就顯得十分重要粪躬，盡管寫注釋會花一些時間担败，但是卻很有必要！
二 相關(guān)知識點
問題1 什么是CSS镰官，CSS是如何工作的
css全稱cascading style sheets提前，中文譯名層疊樣式表，通過css中的選擇器泳唠、屬性及屬性值來修改html中元素的默認樣式狈网，得到我們預(yù)想的樣式。其工作原理如下圖
問題2 內(nèi)聯(lián)樣式 內(nèi)部樣式表 外部樣式表的聯(lián)系與區(qū)別以及優(yōu)缺點
- 內(nèi)聯(lián)樣式：存在于開始標(biāo)簽中笨腥，樣式屬性鍵值對最為屬性
style的值拓哺，僅作用于當(dāng)前標(biāo)簽。
<!--示例-->
<div style="color:blue; font-size:20px;">示例</div>
- 內(nèi)部樣式表：存在于當(dāng)前文檔中脖母，存放在
<head>中的<style>標(biāo)簽中士鸥，作用于當(dāng)前文檔。
<!--示例-->
<html>
<head>
<style>
div {
color:blue;
font-size:20px;
}
</style>
</head>
<body>
<div>示例</div>
</body>
</html>
- 外部樣式表：樣式單獨保存為一個文件谆级，以.css為文件類型烤礁，HTML文檔需要通過鏈接引入該文件才能生效，可作用于多個文檔哨苛。
<!--test.css-->
div {
color:blue;
font-size:20px;
}
<!--test.html-->
<html>
<head>
<link el="stylesheet" type="text/css" href="test.css"/>
</head>
<body>
<div>示例</div>
</body>
</html>
各自優(yōu)缺點見下表
| 樣式類型 | 優(yōu)點 | 缺點 |
|---|---|---|
| 內(nèi)聯(lián)樣式 | 不影響其他元素的樣式 | 后期需單獨維護鸽凶，十分不便（十分不推薦） |
| 內(nèi)部樣式表 | 在不能修改.css文件時修改方便 | 不同頁面更新時需要修改多個位置 |
| 外部樣式表 | 方便維護 | 全局樣式可能會引起不必要的樣式修改 |
問題3 CSS的基本語法是怎樣的
這里我們需要搞清楚三個概念：選擇器，屬性建峭，屬性值玻侥。
- 選擇器就是選擇需要修改樣式的元素
- 屬性就是需要修改的樣式名稱，例如width亿蒸，color凑兰，padding等
- 屬性值就是樣式的值，例如width的值可能時200px或者100%等
MDN給了一個圖示很好的解釋了css的基本語法
問題4 CSS選擇器是什么概念边锁，有哪些類型
選擇器就是選擇需要修改樣式的元素姑食。那么問題來了，我們以什么標(biāo)準(zhǔn)來選擇與之匹配的元素呢茅坛？繼續(xù)往下看音半。
簡單選擇器：基于元素類型（或其class或id）直接匹配文檔中的一個或多個元素则拷。
這是我們用的最多的選擇器類型。
一般來說曹鸠，元素類型選擇器（直接使用元素如p做選擇器）適合基礎(chǔ)性樣式的修改煌茬，用來重置默認樣式；class選擇器（以.class名做選擇器）適合需要使用相同樣式的元素彻桃，這也是最長使用的選擇器坛善；id選擇器（以#id名做選擇器）適合唯一需要使用該樣式的元素，通常我們不是很推薦這種使用方式邻眷，跟不推薦內(nèi)聯(lián)樣式一樣眠屎。
注：還有一個通用選擇器（以*做選擇器），其允許給頁面中每一個元素添加樣式肆饶，盡量不要使用改衩，因為其會使頁面加載變慢，影響頁面性能抖拴。屬性選擇器：通過元素的屬性來匹配文檔中的一個或多個元素燎字。
其有以下三種方式：
- [attr]：該選擇器選擇包含 attr 屬性的所有元素，不論 attr 的值為何阿宅。
- [attr=val]：該選擇器僅選擇 attr 屬性被賦值為 val 的所有元素候衍。
- [attr~=val]：該選擇器僅選擇具有 attr 屬性的元素，而且要求 val 值是 attr 值包含的被空格分隔的取值列表里中的一個洒放。
- 偽類及偽元素
偽類以冒號(:)作為前綴蛉鹿，添加在選擇器后面，再特定狀態(tài)下樣式生效往湿，下面是一個例子
<!--html片段-->
<a>點擊跳轉(zhuǎn)</a>
<!--html片段-->
/*鏈接標(biāo)簽初始樣式*/
a{
color: blue;
font-weight: bold;
}
/*鏈接懸停時樣式*/
a：hover{
color: yellow;
}
/*鏈接訪問過后樣式*/
a：visited{
color: green;
}
在這里不全部展現(xiàn)所有偽類妖异，僅展示其用法。
偽元素語法跟偽類有一點像领追，只不過其使用兩個冒號(::)他膳，其有個特殊的用法是可以添加一個不存在的元素，使用::after或者::before實現(xiàn)绒窑。
- 組合選擇器：用過以上選擇器組合使用
組合選擇器也是我們經(jīng)常使用的棕孙，用于不同的樣式需求。值得注意的時相鄰兄弟選擇器和通用兄弟選擇器的細微區(qū)別些膨，這兩個組合選擇器雖然不常用蟀俊，但是在特定情境下效果顯著。
問題5 文本樣式都有哪些相關(guān)屬性订雾，對應(yīng)哪些值肢预？
文本樣式就是text styles，其包含兩個部分：字體屬性和文本屬性洼哎。
字體屬性針對于每個字烫映，主要屬性有：
font-family: serif; (字體)
font-size:18px; (大小)
font-style:italic; (樣式/斜體)
font-weight:bold; (字重/粗)
line-height:20px; (行高)
文本屬性針對于當(dāng)前文本段落沼本，主要屬性有：
text-indent:5px; (縮進)
text-align:center; (水平對齊)
direction:rtl; (文本方向/right to left)
text-decoration:underline; (文本描述)
letter-spacing:2px; (字母間距)
word-spacing:4px; (字間距)
text-transform:capitalize; (大小寫轉(zhuǎn)換/每個單詞首字母大寫)
white-space:nowrap; (空白符處理/不換行)
text-overflow:ellipsis; (文本超出顯示形式)
text-shadow:3px 3px 3px blue; (文本陰影/水平偏移，豎直偏移窑邦，模糊值擅威，顏色)
問題6 超出框的文本顯示省略號如何實現(xiàn)？
<!--css片段-->
.box {
width:300px;
height: 100px;
border: 1px solid #000;
overflow: hidden; /*超出部分隱藏*/
white-space: nowrap; /*不換行*/
text-overflow:ellipsis; /*超出部分以省略號表示*/
}
<!--html片段-->
<div class="box">
測試超出框文本便省略號（括號內(nèi)容為測試內(nèi)容把啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦）
</div>
測試效果如下圖：
