1、標簽選擇器
元素選擇器
標簽名{ 屬性1:屬性值;屬性2:屬性值;}
所有某一類集體更改樣式按標簽名分類
1.1、類選擇器
<style>.one { color: red;}</style>
<p class="one">紅色字體 </p>
在style標簽中用.來調用需要樣式的標簽，在標簽內給class命名，上定義下調用
1.2、類選擇器常見錯誤及命名規范
- 長名稱或詞組可以使用中橫線來為選擇器命名，
- 不建議使用"_"下劃線來命名CSS選擇器
- 輸入的時候少按一個shift鍵，瀏覽器兼容問題（比如使用tips的選擇器命名，在IE6是無效的）能良好區分JavaScript變量命名（JS變量命名使用）
- 不要純數字，中文等命名，盡量使用英文字母來表示。
CSS命名規范
1.3、多類名選擇器
.red{ color:red;} .purple{ color:purple;} <p class="red purple">改字體是什么顏色</p>
字體顏色的顯示順序和style標簽中樣式的順序一樣
和標簽內的順序無關
1.4、id選擇器
#red{ color:red;} <p id="red">改字體是紅色</p>
類選擇器和id選擇器的區別
調用次數
類選擇器 反復多次調用
id選擇器是唯一的 只能調用一次
1.5、通配符選擇器
* { color: purple;} *指所有標簽（測試中使用）
2、CSS注釋
/* 需要注釋的內容 快捷鍵 Ctrl+Shift+/ */
2、
- 行高
line-height 單位有px em和
1em就是一個字的大小2em兩個字大小。 - 水平對齊方式（左中右）
text-align: left center right可以讓頁面中文字 - 首行縮進兩個字
text-indent: 2em; 讓所有段落首行縮進兩個字 - 標簽語義化 w3cschool為例 利于SEO
去掉CSS樣式之后，網頁結構依然組織有序，并且有良好的可讀性。
核心：合適的地方放合適的標簽
小技巧 - 重語義的地方多用有語義的標簽，比如h和p等等，少用沒有語義的標簽比如div span等等
- 如果有地方可以用p又可以用div，特別是文字段落，優先選用p標簽（結構更清晰）
- 少用純樣式標簽比如 b u font，可以運用CSS樣式，如果有強調的地方盡量用strong em等有強調語義的標簽
3、選擇器
3.1、交集選擇器
標簽選擇器 類選擇器{ 屬性: 值 } 例如 .singer{ color: #f00;} div .singer{ font-weight: 700;}
效果是既是紅色又會加粗
3.2、并集選擇器（集體聲明）
標簽選擇器,標簽選擇器{ 屬性: 值 } 例如 p,div,h1,.singer{ color: #f00;}
效果是p,div和h1標簽內的內容都是紅色
3.3后代選擇器（集體聲明）
標簽選擇器 標簽選擇器{ 屬性: 值 } 例如 .nav ul li{ color: #f00;}
效果是p,div和h1標簽內的內容都是紅色
3.4子元素選擇器（集體聲明）
標簽選擇器>類選擇器{ 屬性: 值 } 例如 >代表子元素選擇器 ul>li{ color: #f00;}
效果是ul里的li標簽內的內容都是紅色
3.5、行內元素
p里面不能放塊級元素
p h1-h6 dt都是文字類的塊級元素
3.6、塊級和行內元素區別
塊級元素的特點：
- 總是從新行開始
- 高度 行高 外邊距以及內邊距都可以控制
- 高度默認都是容器的100%
- 可以容納內聯元素和其他元素
行內元素的特點： - 和相鄰的元素在一行內顯示
- 寬度 高度無效，但水平方向的padding和margin可以設置，垂直方向的無效
- 默認寬度就是它本身內容的寬度
- 行內元素只能容納文本或者其它行內元素，不能放塊級元素（a除外）
行內塊元素inline-block
例如 img input td
既可以在一行內放多個又可以調整寬高。
元素之間的轉換
display:
3.7、鏈接偽類
:link 用于未被訪問過的連接
text-decoration 屬性文本是否有下劃線normal為無下劃線
:hover 用于有鼠標指針懸停于其上的元素
:active 應用于被激活的元素，如被點擊的的鏈接被按下的按鈕。
:visited 應用于已經被訪問過的鏈接
:focus 應用于擁有鍵盤輸入焦點的元素（ie8以上支持）
使用順序為link visited hover active
偽元素
p:first-letter首字變大
p:first-line 改變首行文字效果（響應式）
4、玩轉行高
字體有頂線中線基線底線
基線和基線之間的距離為行高
文字的行高等于盒子的高度可以實現居中對齊
小于盒子的高度位置靠上大于則靠下
4.1、玩轉行高
看照片
鏈入式樣式表
<link rel="stylesheet" type="text/css" href="name.css">
導入式樣式表
<style type="text/css"> @import url(name.css); </style>
在外部css文件中放入導入式樣式表，文件即可實現串糖葫蘆效果，實現兩者的效果
CSS層疊性
樣式如果沖突后面會覆蓋之前的樣式，執行后者的樣式
長江后浪推前浪，前浪死在沙灘上
CSS繼承性
如果子標簽會繼承父標簽的某些樣式
CSS特殊性Specificity
繼承或者*的貢獻值 0.0.0.0
每個元素（標簽）貢獻值為 0.0.0.1
每個類，偽類貢獻值值為 0.0.1.0
每個ID貢獻值為 0.1.0.0
每個行內樣式貢獻值 1.0.0.0
每個!important貢獻值 無窮大
例如
div ul li 0.0.0.3
.nav ul li 0.0.1.2
a:hover 0.0.1.1
.nav a 0.0.1.1
nav p 0.1.0.1
在標簽屬性內寫入！important，優先級最優
a和h標簽的特殊性 在游覽器渲染的時候，就默認有自己的樣式。
權重練習題做一做
background-color: red; 背景顏色 background-image: url();背景圖片 background-repeat: no-repeat;背景圖片不平鋪 repeat-x橫向平鋪 repeat-y縱向平鋪 background-position: 0 0; 和background-position: left top是一樣都是左上角， 方位名詞沒有先后順序 left center right左中右 top center button上中下 如果精確單位和方位名詞混用但是x坐標在前 y坐標在后 背景附著 background-attachment: scroll和fixed fixed背景圖片是固定的 scroll背景圖片是滾動的
背景簡寫
background:背景顏色，背景圖片地址，背景平鋪，背景滾動，背景位置
中間用空格隔開。沒有要求順序
