學習如逆水乘舟，不進則退播赁。
** 前言 **
- 前面學習的HTML主要是用來給文本添加語義的颂郎，而一個完整的網(wǎng)頁要想呈現(xiàn)出界面樣式，還需要用CSS來修改樣式容为，才能達到美觀的UI效果乓序。下面就是這段時間習CSS的一個小總結寺酪。
一、CSS基礎知識
-
概念
W3C的介紹中介紹 CSS 指層疊樣式表 (Cascading Style Sheets)替劈， 樣式定義如何顯示 HTML 元素寄雀。瀏覽器將內容裝在一個元素里面（一個盒子），然后CSS通過調整盒子背景抬纸、大小咙俩、顏色、樣式湿故、內容的文本以及字體的大小阿趁，最后展示出我們需要的排版樣式。
CSS在使用的過程中坛猪，有很多的參數(shù)需要記憶脖阵。特別是還有很多的瀏覽器的有自己獨有的參數(shù)，很難記憶墅茉。只有多使用命黔，多查文檔。用的時候可以到w3c.com中查詢
CSS格式：
<style type="text/css">
標簽名稱{
屬性名稱: 屬性對應的值;
...
}
</style>
注意：一定要用一對style標簽包裹起來 而且必須要寫在head標簽之內 titile標簽的下面就斤。
二悍募、CSS的屬性
常用屬性
三、CSS的選擇器
-
** 1. 標簽選擇器 **
作用：根據(jù)指定的標簽名稱, 在當前界面中找到所有該名稱的標簽, 然后設置屬性洋机。
格式：
標簽名稱{
屬性：值坠宴；
}例如：
p{ color:red; font-size:14px; } -
** 2. id選擇器 **
作用：根據(jù)指定的id名稱找到對應的標簽, 然后設置屬性。
格式：
#id名稱{ 屬性：值绷旗； }- 注意點：同一個界面中的id名稱是唯一的喜鼓，不能有同名的id。
-
** 3. 類選擇器 **
作用：根據(jù)指定的類名稱找到對應的標簽, 然后設置屬性衔肢。
格式：
.類名{
屬性：值庄岖；
}- 在HTML中一個標簽可以同時綁定多個類名。
例如：
< 標簽名稱 class="類名1 類名2 ... ">- 注意點：同一個界面中的類名稱可以重復角骤。
-
** 4. 后代選擇器 **
作用：找到指定標簽的所有特定的后代標簽, 設置屬性隅忿。
格式：
標簽名稱1 標簽名稱2 標簽名稱3 ...{
屬性：值；
}
-
** 5. 子元素選擇器 **
作用：找到指定標簽中所有特定的直接子元素, 然后設置屬性邦尊。
格式：
標簽名稱1>標簽名稱2{
屬性：值硼控；}
-
** 6. 交集選擇器 **
作用：給所有選擇器選中的標簽中, 相交的那部分標簽設置屬性。
格式：
選擇器1選擇器2{
屬性：值胳赌；
}
-
** 7. 并集選擇器 **
作用：給所有選擇器選中的標簽設置屬性。
格式：
選擇器1,選擇器2{
屬性：值匙隔；
}
-
** 8. 兄弟選擇器 **
-
** 8.1 相鄰兄弟選擇器 **
作用：給指定標簽后面緊跟的那個標簽設置屬性疑苫。
格式：
選擇器1+選擇器2{
屬性：值；
} -
** 8.2 通用兄弟選擇器 **
作用：給指定選擇器后面的所有選擇器選中的所有標簽設置屬性。
格式：
選擇器1~選擇器2{
屬性：值捍掺；
}
-
-
** 9. 序選擇器 **
作用：選中指定的任意標簽然后設置屬性撼短。
-
** 9.1 同級別的第幾個 **
- 格式：
選擇器:xxx-child{
屬性：值；
}- 列舉3個常用取值
:first-child 選中第一個標簽
:last-child 選中最后一個標簽
:nth-child(n) 選中第n個標簽 -
** 9.2 同級別同類型的第幾個 **
- 格式：
選擇器:xxx-of-type{
屬性：值挺勿；
}
-
** 10. 屬性選擇器 **
作用：根據(jù)指定的屬性名稱找到對應的標簽, 然后設置屬性曲横。
格式用法如下：
input[type=password]{ 做某些操作 }
-
** 11. 通配符選擇器 **
作用： 給當前界面上所有的標簽設置屬性。
格式：
*{
屬性：值不瓶；
}
-
** 12. 偽類和偽元素 **
作用：在特定的事件觸發(fā)的時候禾嫉，調用的CSS的樣式，用:號來表示蚊丐。
偽類
- 偽元素
四熙参、CSS的三大特性
- ** 繼承性 **
只給HTML父項設置格式,其所包含的子項也會有相應的屬性,要想單個控制,那么就給每個項加class屬性,實現(xiàn)一對一控制。
** 注意點：**
- 并不是所有的屬性都可以繼承, 只有以color/font-/text-/line-開頭的屬性才可以繼承麦备。
- 在CSS的繼承中不僅僅是兒子可以繼承, 只要是后代都可以繼承孽椰。
- 繼承性中的特殊性:
- a標簽的文字顏色和下劃線是不能繼承的.
- h標簽的文字大小是不能繼承的
-
** 層疊性 **
作用：CSS處理沖突的一種能力。只有在多個選擇器選中"同一個標簽", 然后又設置了"相同的屬性", 才會發(fā)生層疊性
優(yōu)先級
id>類>標簽>通配符>繼承>瀏覽器默認
-
** 優(yōu)先級的權重 **
-
** 權重的計算規(guī)則 **
- 首先先計算選擇器中有多少個id, id多的選擇器優(yōu)先級最高凛篙。
- 如果id的個數(shù)一樣, 那么再看類名的個數(shù), 類名個數(shù)多的優(yōu)先級最高黍匾。
- 如果類名的個數(shù)一樣, 那么再看標簽名稱的個數(shù), 標簽名稱個數(shù)多的優(yōu)先級最高。
- 如果id個數(shù)一樣, 類名個數(shù)也一樣, 標簽名稱個數(shù)也一樣, 那么就不會繼續(xù)往下計算了, 那么此時誰寫在后面聽誰的呛梆。
** 注意點: **
只有選擇器是直接選中標簽的才需要計算權重, 否則一定會聽直接選中的選擇器的
- ** !important **
作用: 用于提升某個直接選中標簽的選擇器中的某個屬性的優(yōu)先級的, 可以將被指定的屬性的優(yōu)先級提升為最高
-
注意點:
- !important只能用于直接選中, 不能用于間接選中锐涯。
- 通配符選擇器選中的標簽也是直接選中的。
- !important只能提升被指定的屬性的優(yōu)先級, 其它的屬性的優(yōu)先級不會被提升削彬。
- !important必須寫在屬性值得分號前面全庸。
- !important前面的感嘆號不能省略。
-
五融痛、CSS的顯示模式
在HTML中HTML將所有的標簽分為兩類, 分別是容器級和文本級壶笼。
在CSS中CSS也將所有的標簽分為兩類, 分別是塊級元素和行內元素(其實還有一類, 行內塊級)
常見容器級標簽
div h ul ol dl li dt dd ...
- 常見文本級標簽
span p buis stong em ins del ...
- 常用的塊級元素
p div h ul ol dl li dt dd ...
- 常用的行內元素
span buis strong em ins del ...
- ** CSS元素顯示模式轉換 **
display: block(塊級) / inline(行內) / inline-block(行內塊級);
六、CSS的盒模型
- 盒模型指那些可以設置寬度高度/內邊距/邊框/外邊距的標簽
-
內容的寬度和高度
- 就是通過width/height屬性設置的寬度和高度
元素的寬度和高度
寬度 = 左邊框 + 左內邊距 + width + 右內邊距 + 右邊框 (同理可以算出高度)
增加了padding/border之后元素的寬高也會發(fā)生變化雁刷，如果增加了padding/border之后還想保持元素的寬高, 那么就必須減去內容的寬高
-
元素空間的寬度和高度
- 寬度 = 左外邊距 + 左邊框 + 左內邊距 + width + 右內邊距 + 右邊框 + 右外邊距 (同理可以算出高度)
七覆劈、透明度設置
opacity：0 完全透明
opacity：1 不透明
八、CSS插入樣式表
- 內嵌式
<span style="color:blue;font-size:12px">內嵌式</span>
- 嵌入式
<style type="text/css"> span{ color:red; } </style>
- 外鏈式
<link rel="stylesheet" href="css/style.css">
九沛励、補充
-
多行文字垂直居中的方法
父元素的高度必須要用line-height屬性撐高责语，不能用height屬性設置。
文字必須得用一個 行內塊元素（display：inline-block;）包裹住目派，然后設置這個行內塊元素的 行高（line-height;）坤候。
最后還需要設置vertical-align：middle;
注意：
- 如果一個盒子沒有設置高度，那么它的高度是被它當中的 line-height撐高的企蹭，并不是被文字撐高的白筹。
- 如果想要vertical-align屬性生效智末，那么元素必須是一個 inline 或者 inline-block 元素。
