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