今晚的月度會議，又被洗腦了一遍，也不能說是洗腦，是無情的揭露，目標是不是真的遙不可及，我們是不是還有學生綜合症。前端我是不是真的做不到獨當一面的高手，我是不是懶惰了，我爲什麼學英語，我週末都在做什麼，我爲什麼不願意加班，我爲什麼身材臃腫……這些種種，答案呼之欲出，不是做不到就是不願意付出，做啊，殺氣呢！?看到櫻桃的發言，我就想到一個詞，靈魂人物，這個公司我加入不到一個月，現狀是這麼的年輕，意味着我可以有更大的機會，我是不是該做點什麼，現狀既然是這樣，我一點點來改變，前端是我的痛，那我就學，那我就多做————-紀念2017-9-7晚月度會議
1. 什麼是CSS
用來控制外觀，決定瀏覽器怎麼顯示HTML代碼的格式規則
2. 如何引入CSS
1. 行內式
定義：標籤內，style屬性
作用範圍數量：1個標籤
//我們怎麼控制div的顯示？指定了它的高度、邊框厚度、邊框線型、邊框顏色
<div style="border: 1px solid red; height: 20px;"></div>2. 內嵌式
定義：混合着標籤的文件內以style定義（像成員變量的感覺）
範圍：文件內根據樣式選擇器決定渲染哪些標籤（本文後面會介紹選擇器）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
//在這裏我們以style定義了一個css樣式
<style type="text/css">
//這樣樣式的選擇器是用來渲染div標籤的
div {border: 2px solid red; height: 20px;}
</style>
</head>
<body>
//感受到渲染的光環，因爲我們在一個文件中，我是div標籤
<div></div>
//我也感受到了
<div></div>
</body>
</html> 3. 外鏈式
定義：在一個css文件中寫css，其他使用的地方引用文件路徑
範圍：引用的地方
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
//外鏈divStyle.css文件
<link rel="stylesheet" href="css/divStyle.css" /> />
</head>
<body>
<div></div>
<div></div>
</body>
</html>
3. CSS使用技巧
同一個標籤可以受到多種樣式渲染，一般寫1-2種風格的樣式控制，易於維護（用的多的是內嵌式和外鏈式）
樣式優先級是：最近原則（一個標籤同一個屬性，行內式優先級高於內嵌式……）
css文件命名可以用這個css起到什麼作用來命名
4. CSS選擇器
選擇器用來確定範圍：
確定樣式是作用於哪個標籤，修飾哪個標籤，讓哪個標籤按自己的樣式內容定義的方式來讓瀏覽器顯示
選擇器的內容用來確定：顏色、大小……怎麼顯示
格式： 選擇器{ 屬性1：值 ； 屬性2 ：值 }
1. 選擇器種類
1. 標籤選擇器
以標籤名作爲選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
//在這裏我們以style定義了一個css樣式
<style type="text/css">
//div開頭
div {border: 2px solid red; height: 20px;}
</style>
</head>
<body>
//感受到渲染的光環，因爲我們在一個文件中，我是div標籤
<div></div>
//我也感受到了
<div></div>
</body>
</html> 2. 類別選擇器
每個標籤都有屬性class，值可以隨意定義
一組標籤的class值相同，一同被該class選擇器渲染
以.開頭
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.s1{ border: 2px solid red; height: 20px;}
</style>
</head>
<body>
<div class="s1"></div>
<br />
<div class="s1"></div>
</body>
</html>3. ID選擇器
每個標籤都有id屬性
建議id選擇器的值是唯一，即使多個標籤的id的值相同，id選擇器也會對這些都能渲染，後面用jquery的時候通過id獲取標籤的內容，就會只能獲取第一個，想要定義一組還是用class選擇器
以#開頭
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#s1{ border: 2px solid red; height: 20px;}
#s2{border: 4px solid burlywood;}
</style>
</head>
<body>
<div id="s1"></div>
<br />
<div id="s2"></div>
</body>
</html>
4. 僞類選擇器
這個簡單了，就只有4個，都是對a標籤進行的
a : link a標籤在平常時候的樣式
a：visited a標籤在訪問過後的樣式
a：hover a標籤在鼠標浮上去的時候顯示的樣式
a：active a標籤在點擊時候顯示的樣式
2. 選擇器集合聲明
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
//用逗號分割，三個選擇器都被同一套css渲染
div, input, #s5{
border: 1px solid red;
height: 20px;}
</style>
</head>
<body>
<div></div>
<input type="text" />
<div id="s5"></div>
</body>
</html>3. 選擇器嵌套
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div, input, #s5{
border: 1px solid red;
height: 20px;}
//用空格分割，意味着讓#s5裏面的div標籤感受到這套css的渲染
#s5 div{
border: 1px solid black;
height: 10px;}
</style>
</head>
<body>
<input type="text" />
<div id="s5">
<div></div>//只有我感受到了
</div>
</body>
</html>