引子
成文原因有二：其一，復習鞏固知識、站在巨人的肩膀上，老羅講話：“人生苦短，能一步走完的路，盡量別走三步”；其二，分享快樂，“畢竟共享技術的快樂不是什么時候都會有的”。
HTML只有一個作用就是用來添加語義，所以在企業開發中修改樣式都是交給CSS來做。下面有請CSS閃亮登場???
一、文字屬性
1.規定文字樣式的屬性
- 格式：font-style: italic;
- 取值：normal ： 正常的， 默認就是正常的；italic : 傾斜的
- 快捷鍵：
fs font-style: italic;
fsn font-style: normal;
2.規定文字粗細的屬性
- 格式： font-weight: bold;
- 單詞取值：bold 加粗、bolder 比加粗還要粗、lighter：細線， 默認就是細線
- 快捷鍵：
fw font-weight:;
fwb font-weight: bold;
fwbr font-weight: bolder;
3.規定文字大小的屬性
- 格式：font-size: 30px;
- 單位：px（像素 pixel）注意：通過font-size設置大小一定要帶單位， 也就是一定要寫px
- 快捷鍵
fz font-size:;
fz30 font-size: 30px;
4.規定文字字體的屬性
- 格式：font-family:"楷體";
- 注意點：
1.如果取值是中文， 需要用雙引號或者單引號括起來
2.設置的字體必須是用戶電腦里面已經安裝的字體
- 快捷鍵
ff font-family:;
補充：如果想給界面中的英文單獨設置字體, 那么英文的字體必須寫在中文的前面
5.文本裝飾屬性
- 格式：text-decoration: underline;
- 取值：underline:下劃線、line-through:刪除線、overline:上劃線、none:什么都沒有, 最常見的用途就是用于去掉超鏈接的下劃線。
- 快捷鍵：
td text-decoration: none;
tdu text-decoration: underline;
tdl text-decoration: line-through;
tdo text-decoration: overline;
6.文本水平對齊的屬性
- 格式：text-align: right;
- 取值：left 左、right 右、center 中。
- 快捷鍵
ta text-align: left;
tar text-align: right;
tac text-align: center;
7.文本縮進的屬性
- 格式：text-indent: 2em;
- 取值：2em, 其中em是單位, 一個em代表縮進一個文字的寬度
- 快捷鍵
ti text-indent:;
ti2e text-indent: 2em;
二、標簽選擇器
id選擇器
- 每個HTML標簽都有一個屬性叫做id, 也就是說每個標簽都可以設置id
- 在編寫id選擇器時一定要在id名稱前面加上#
- 在企業開發中一般情況下如果僅僅是為了設置樣式, 我們不會使用id ,因為在前端開發中id是留給js使用的
類選擇器
- 作用：根據指定的類名稱找到對應的標簽, 然后設置屬性
- 格式：
.類名{
屬性:值;
}
后代選擇器
- 格式：
//先找到所有名稱叫做"標簽名稱1"的標簽, 然后再在這個標簽下面去查找所有名稱叫做"標簽名稱2"的標簽, 然后在設置屬性
標簽名稱1 標簽名稱2{
屬性:值;
}
注意點:
1.后代選擇器必須用空格隔開
2.后代不僅僅是兒子, 也包括孫子/重孫子, 只要最終是放到指定標簽中的都是后代
3.后代選擇器不僅僅可以使用標簽名稱, 還可以使用其它選擇器
4.后代選擇器可以通過空格一直延續下去
子元素選擇器
- 作用：找到指定標簽中所有特定的直接子元素, 然后設置屬性
- 格式:
//先找到所有名稱叫做"標簽名稱1"的標簽, 然后在這個標簽中查找所有直接子元素名稱叫做"標簽名稱2"的元素
標簽名稱1>標簽名稱2{
屬性:值;
}
注意點:
1.子元素選擇器只會查找兒子, 不會查找其他被嵌套的標簽
2.子元素選擇器之間需要用>符號連接, 并且不能有空格
3.子元素選擇器不僅僅可以使用標簽名稱, 還可以使用其它選擇器
4.子元素選擇器可以通過>符號一直延續下去
通用兄弟選擇器（CSS3）
- 作用：給指定選擇器后面的所有選擇器選中的所有標簽設置屬性
- 格式:
選擇器1~選擇器2{
屬性:值;
}
注意點:
1.通用兄弟選擇器必須用~連接
2.通用兄弟選擇器選中的是指定選擇器后面某個選擇器選中的所有標簽, 無論有沒有被隔開都可以選中
序選擇器（CSS3）
- 同級別的第幾個:（不區分類型）
first-child 選中同級別中的第一個標簽
last-child 選中同級別中的最后一個標簽
nth-child(n) 選中同級別中的第n個標簽
nth-last-child(n) 選中同級別中的倒數第n個標簽
only-child 選中父元素中唯一的標簽 - 同類型的第幾個:
first-of-type 選中同級別中同類型的第一個標簽
last-of-type 選中同級別中同類型的最后一個標簽
nth-of-type(n) 選中同級別中同類型的第n個標簽
nth-last-of-type(n) 選中同級別中同類型的倒數第n個標簽
only-of-type 選中父元素中唯一類型的某個標簽
nth-child(odd) 選中同級別中的所有奇數
nth-child(even) 選中同級別中的所有偶數
屬性選擇器
- 格式:
//根據指定的屬性名稱找到對應的標簽, 然后設置屬性
[attribute]
//找到有指定屬性, 并且屬性的取值等于value的標簽, 然后設置屬性
[attribute=value] - 最常見的應用場景：用于區分input屬性
input[type=password]{}
<input type="text" name="" id="">
<input type="password" name="" id="">
---------------------------------CSS--------------------------------
//標簽選擇器
p{
color: red;
}
//id選擇器
#identity1{
color: red;
}
#identity2{
color: red;
}
//類選擇器
.para{
color: red;
}
//后代選擇器
div p{
color: red;
}
//子元素選擇器
div>p{
color: red;
}
//交集選擇器
p.para{
color: red;
}
//并集選擇器
#identity1,#identity2{
color: red;
}
//通用兄弟選擇器h1~p{
color: red;
}
//序選擇器p:nth-of-type(n+1){
color: red;
}
//屬性選擇器
p[id]{
color: red;
font-size: 10px;
text-decoration: underline;
}
---------------------------------HTML--------------------------------
<body>
<div>
<h1>我是標題</h1>
<p id="identity1" class="para">我是段落1</p>
<p id="identity2" class="para">我是段落2</p>
</div>
</body>
三、CSS三大特性
繼承性
- 作用: 給父元素設置一些屬性, 子元素也可以使用, 這個我們就稱之為繼承性
注意點:
1.并不是所有的屬性都可以繼承, 只有以color/font-/text-/line-開頭的屬性才可以繼承
2.在CSS的繼承中不僅僅是兒子可以繼承, 只要是后代都可以繼承
3.a標簽的文字顏色和下劃線是不能繼承的
4.h標簽的文字大小是不能繼承的
- 應用場景：一般用于設置網頁上的一些共性信息, 例如網頁的文字顏色, 字體,文字大小等內容
層疊性
- 作用:當多個選擇器選中同一個標簽, 并且給同一個標簽設置相同的屬性時, 如何層疊就由優先級來確定
優先級判斷的三種方式
1.間接選中就是指繼承如果是間接選中, 那么就是誰離目標標簽比較近就聽誰的
2.相同選擇器(直接選中)：如果都是直接選中, 并且都是同類型的選擇器, 那么就是誰寫在后面就聽誰的
3.不同選擇器(直接選中)：如果都是直接選中, 并且不是相同類型的選擇器, 那么就會按照選擇器的優先級來層疊id>類>標簽>通配符>繼承>瀏覽器默認
優先級之important
- 作用: 用于提升某個直接選中標簽的選擇器中的某個屬性的優先級的, 可以將被指定的屬性的優先級提升為最高
注意點:
1.!important只能用于直接選中, 不能用于間接選中
2.通配符選擇器選中的標簽也是直接選中的
3.!important只能提升被指定的屬性的優先級, 其它的屬性的優先級不會被提升
4.!important必須寫在屬性值得分號前面5.!important前面的感嘆號不能省略
優先級之權重
- 作用: 當多個選擇器混合在一起使用時, 我們可以通過計算權重來判斷誰的優先級最高
權重的計算規則
1.首先先計算選擇器中有多少個id, id多的選擇器優先級最高
2.如果id的個數一樣, 那么再看類名的個數, 類名個數多的優先級最高
3.如果類名的個數一樣, 那么再看標簽名稱的個數, 標簽名稱個數多的優先級最高
4.如果id個數一樣, 類名個數也一樣, 標簽名稱個數也一樣, 那么就不會繼續往下計算了, 那么此時誰寫在后面聽誰的也就是說優先級如果一樣, 那么誰寫在后面聽誰的
- 注意點: 只有選擇器是直接選中標簽的才需要計算權重, 否則一定會聽直接選中的選擇器的
div和span
div: 一般用于配合css完成網頁的基本布局
span: 一般用于配合css修改網頁中的一些局部信息
-
div和span有什么區別?
- div會單獨的占領一行,而span不會單獨占領一行
- div是一個容器級的標簽, 而span是一個文本級的標簽
-
容器級的標簽和文本級的標簽的區別?
- 容器級的標簽中可以嵌套其它所有的標簽(容器級的標簽div h ul ol dl li dt dd ...)
- 文本級的標簽中只能嵌套文字/圖片/超鏈接(文本級的標簽span p buis strong em ins del ...)
在HTML中HTML將所有的標簽分為兩類, 分別是容器級和文本級
在CSS中CSS也將所有的標簽分為兩類, 分別是塊級元素和行內元素
-
名詞解釋：
- 塊級元素會獨占一行(塊級元素p div h ul ol dl li dt dd)
- 行內元素不會獨占一行行內元素span buis strong em ins del
-
塊級元素和行內元素的區別?
- 塊級元素獨占一行如果沒有設置寬度, 那么默認和父元素一樣寬，如果設置了寬高, 那么就按照設置的來顯示
- 行內元素不會獨占一行如果沒有設置寬度, 那么默認和內容一樣寬、行內元素是不可以設置寬度和高度的
- 行內塊級元素為了能夠讓元素既能夠不獨占一行, 又可以設置寬度和高度, 那么就出現了行內塊級元素
快捷鍵
di display: inline; 行內
db display: block; 塊級
dib display: inline-block; 行內塊級
背景平鋪屬性
- 介紹：在CSS中有一個background-repeat屬性, 就是專門用于控制背景圖片的平鋪方式的
- 取值:
- repeat 默認, 在水平和垂直都需要平鋪
- no-repeat 在水平和垂直都不需要平鋪
- repeat-x 只在水平方向平鋪
- repeat-y 只在垂直方向平鋪
- 快捷鍵
bgr background-repeat: - 應用場景:可以通過背景圖片的平鋪來降低圖片的大小, 提升網頁的訪問速度
背景定位屬性
- 介紹：在CSS中有一個叫做background-position:屬性, 就是專門用于控制背景圖片的位置
- 格式:
background-position: 水平方向 垂直方向; - 取值：
- 水平方向: left center right
- 垂直方向: top center bottom
- 如寫具體值、例如:
background-position: 100px 200px;記住一定要寫單位, 也就是一定要寫px記住具體的像素是可以接收負數的 - 快捷鍵:
bp background-position: 0 0; - 注意點: 同一個標簽可以同時設置背景顏色和背景圖片, 如果顏色和圖片同時存在, 那么圖片會覆蓋顏色
背景屬性縮寫
- 格式：
background: 背景顏色 背景圖片 平鋪方式 關聯方式 定位方式;（其中任何一個屬性都可以被省略） - 快捷鍵:
bg+ background: #fff url() 0 0 no-repeat; - 背景關聯方式：默認情況下背景圖片會隨著滾動條的滾動而滾動， 如果不想讓背景圖片隨著滾動條的滾動而滾動， 那么我們就可以修改背景圖片和滾動條的關聯方式。可通過background-attachment屬性修改關聯方式
- 格式：
background-attachment：scroll; - 取值：
- scroll 默認值， 會隨著滾動條的滾動而滾動
- fixed 不會隨著滾動條的滾動而滾動
- 快捷鍵:
ba background-attachment:;
背景圖片和插入圖片的區別：
1.背景圖片僅僅是一個裝飾, 不會占用位置插入圖片會占用位置
2.背景圖片有定位屬性, 所以可以很方便的控制圖片的位置插入圖片沒有定位屬性, 所有控制圖片的位置不太方便
3.插入圖片的語義比背景圖片的語義要強, 所以在企業開發中如果你的圖片想被搜索引擎收錄, 那么推薦使用插入圖片
邊框
- 邊框就是環繞在標簽寬度和高度周圍的線條
- 邊框屬性的格式
border: 邊框的寬度 邊框的樣式 邊框的顏色;
//快捷鍵:
bd+ border: 1px solid #000; //所有邊框
bd+ border: none; //none 代表不需要邊框
bt+ border-top: 1px solid #000; //上邊框
br+ border-right: 1px solid #000; //右邊框
bb+ border-bottom: 1px solid #000; //下邊框
bl+ border-left: 1px solid #000; //左邊框
//也可以分別設置四條邊的邊框（注意方向）
border-width: //上 右 下 左;
border-style: //上 右 下 左;
border-color: //上 右 下 左;
注意點:
1.連寫格式中顏色屬性可以省略, 省略之后默認就是黑色
2.連寫格式中樣式不能省略, 省略之后就看不到邊框了
3.連寫格式中寬度可以省略, 省略之后還是可以看到邊框
padding(內邊距)
- 名詞解釋：邊框和內容之間的距離就是內邊距
注意點:
1.給標簽設置內邊距之后, 標簽占有的寬度和高度會發生變化
2.給標簽設置內邊距之后, 內邊距也會有背景顏色
margin(外邊距)
- 名詞解釋：標簽和標簽之間的距離就是外邊距
- 用法同內邊距
盒子模型的寬和高
- 內容的寬度和高度
- 通過width/height屬性設置的寬度和高度
- 元素的寬度和高度
- 寬度 = 左邊框 + 左內邊距 + width + 右內邊距 + 右邊框
- 高度 同理可證
- 元素空間的寬度和高度
- 寬度 = 左外邊距 + 左邊框 + 左內邊距 + width + 右內邊距 + 右邊框 + 右外邊距
- 高度 同理可證
box-sizing屬性
- 介紹：CSS3中新增了一個box-sizing屬性, 這個屬性可以保證我們給盒子新增padding和border之后, 盒子元素的寬度和高度不變
- box-sizing屬性是如何保證增加padding和border之后, 盒子元素的寬度和高度不變。（原理是增加padding和border之后要想保證盒子元素的寬高不變, 那么就必須減去一部分內容的寬度和高度）
- box-sizing取值：
- content-box元素的寬高 = 邊框 + 內邊距 + 內容寬高
- border-box元素的寬高 = width/height的寬高
注意：
1.在企業開發中, 一般情況下如果需要控制嵌套關系盒子之間的距離, 應該首先考慮padding, 其次再考慮margin
2.在嵌套關系的盒子中, 我們可以利用margin: 0 auto;的方式來讓里面的盒子在外面的盒子中水平居中
3.margin: 0 auto; 只對水平方向有效, 對垂直方向無效
text-align:center;和margin:0 auto;區別？
- text-align: center;的作用是設置盒子中存儲的文字/圖片水平居中
- margin:0 auto;的作用是讓盒子自己水平居中
清空默認邊距
- 原因：為了更好的控制盒子的寬高和計算盒子的寬高等
- 清空默認邊距的相關代碼：
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
margin:0;padding:0
}
行高和字號
- 行高指的是每行內容的高度（盒子高指的是元素的高度）
注意區分
規律：
1.在企業開發中我們經常將盒子的高度和行高設置為一樣, 那么這樣就可以保證一行文字在盒子的高度中是垂直居中的簡而言之就是: 要想一行文字在盒子中垂直居中, 那么只需要設置這行文字的"行高等于盒子的高"即可
2.在企業開發中如果一個盒子中有多行文字, 那么我們就不能使用設置行高等于盒子高來實現讓文字垂直居中, 只能通過設置padding來讓文字居中
本文主要借鑒小碼哥（很不錯的培訓機構）視頻之跟著江哥狂虐H5，不做商業目的，如有侵權，立即刪除，學習CSS的路還長呢，少年莫慌~~
參考資料：
[http://bbs.520it.com/portal.php]
http://www.lxweimin.com/users/4312c933b9db/latest_articles
