第二周在學(xué)習(xí)css各種選擇器還有各種字體樣式中度過，也涉及了一些框模型的知識(shí)。。然鵝彈幕說還沒有步入門檻，emmmm...任重而道遠(yuǎn)哈～
同時(shí)補(bǔ)充了些html的標(biāo)簽，主要補(bǔ)充了兩類，分別是文本標(biāo)簽和列表標(biāo)簽，比較簡單，但是讓我更加明白語意標(biāo)簽的含義了。在html中，基本上標(biāo)簽都是語意標(biāo)簽，正如上周總結(jié)的那樣，html設(shè)置的是網(wǎng)頁的骨架，這些標(biāo)簽的表現(xiàn)形式是什么不重要，重要的是它的含義，比如h1就是告訴瀏覽器這是一級(jí)標(biāo)簽，且搜索引擎檢索完title后就會(huì)檢索h1的內(nèi)容；strong標(biāo)簽就是標(biāo)記這是重要內(nèi)容，雖然它們有個(gè)默認(rèn)的樣式（要做個(gè)基本的區(qū)分），如strong中的內(nèi)容會(huì)被加粗顯示，但是最后要呈現(xiàn)什么樣式是由css設(shè)置的。
主要還是初步學(xué)習(xí)了css的一些知識(shí)，總結(jié)一哈子～
一.css編寫位置
css全稱是Cascading Style Sheets，即層疊樣式表，網(wǎng)頁可以看作是由一層層的疊加而成的，css就可以分別為網(wǎng)頁的各個(gè)層次設(shè)置樣式，編寫位置有三種，以結(jié)構(gòu)與表現(xiàn)的分離程度來分，以完全分離為佳。
(1）內(nèi)聯(lián)樣式表：
內(nèi)聯(lián)樣式最不建議使用，它是嵌入在每個(gè)標(biāo)簽中書寫的，使用style屬性，例：
<p style="color:red;font-size:20px;">我是內(nèi)聯(lián)樣式</p>
這個(gè)意思就是，使p標(biāo)簽中的內(nèi)容顏色變?yōu)榧t色，字號(hào)大小變?yōu)?0px.
(2）內(nèi)部樣式表：
為了使結(jié)構(gòu)和標(biāo)簽進(jìn)一步分離，可以將css樣式編寫在head中的style標(biāo)簽里，例：
<head>
<style type="text/css">
使用選擇器+聲明塊來書寫指定標(biāo)簽的樣式
</style>
</head>
在style標(biāo)簽中使用選擇器+聲明塊的結(jié)構(gòu)來書寫指定標(biāo)簽的樣式，如p{color:red;font-size:20px;}意思就是選中body中所有p元素，將其中的內(nèi)容改成紅色，字號(hào)變?yōu)?0px。
（3）外部樣式表
將css樣式表編寫到外部css文件中，然后通過link標(biāo)簽將外部文件引入到當(dāng)前頁面中，例：
<link rel="stylesheet" type="text/css" href="文件名.css" />
link標(biāo)簽是自結(jié)束標(biāo)簽，固定屬性rel=“stylesheet”和 type=“text/css” ，用href相對路徑引入css樣式文件。這種方式將css樣式統(tǒng)一編寫到外部樣式表中，使結(jié)構(gòu)和表現(xiàn)完全分離，可以使樣式表在不同頁面中使用，最大限度的使樣式復(fù)用，并且可以利用瀏覽器緩存，提高打開速度，提升用戶體驗(yàn)。
二.css基本語法
內(nèi)聯(lián)樣式中樣式已經(jīng)寫在標(biāo)簽里面了，但是另外兩種位置無法確定要賦予的元素，因此基本結(jié)構(gòu)首先要選擇需要賦予的元素，使用選擇器來進(jìn)行選擇，緊跟著聲明塊，表示對這個(gè)/這些元素賦予的樣式，聲明塊由一組組名值對組成，由大括號(hào){}擴(kuò)起來，名值對間以分號(hào)；表示結(jié)束，即：
選擇器{名值對1；名值對2；...;}
1.選擇器
（1）元素選擇器
直接輸入需要選擇的元素名，即可選中body中的所有該元素，例：
p{color:red;} 表示選中所有元素，并賦予紅色
（2）id選擇器
以#開始接著設(shè)置好的id值，即可選中特定id的元素，例：
假使有一個(gè)p元素，為這個(gè)p元素設(shè)置的id為p1,<p id=p1></p> ，此時(shí)選中它可以用id選擇器，即：#p1{color:red;}
（3）類選擇器
同一頁面中每個(gè)元素的id值不可重復(fù)，選擇多個(gè)元素使就可以使用類選擇器，以.開始后接著設(shè)置好的class值，即可選中擁有同一class值的元素。例：
假使有多個(gè)元素，通過賦予同一個(gè)class的值，
<p class=c1>我是一個(gè)段落</p>
<p class=c1>我也是一個(gè)段落</p>
<p class=c1>我還是一個(gè)段落</p>
<div class=c1>我是一個(gè)div塊元素</div>
使用類選擇器將它們都選中，即
.c1{color:red} 表示所有class值為c1的元素顏色變?yōu)榧t色
（4）子元素選擇器、后代元素選擇器和兄弟元素選擇器
首先要明白元素間的“父子”關(guān)系（hhh）。html中有明確的層級(jí)關(guān)系：
1）父元素是指直接包含子元素的元素，父元素也是祖先元素；子元素：直接被父元素包含的元素；
2）祖先元素：直接或間接包含后代元素的元素；后代元素：直接或間接被祖先元素包含的元素，子元素也是后代元素；
3）兄弟元素：擁有相同父元素的叫做兄弟元素。
比如
<body>
<div>
<span></span>
<p></p>
</div>
</body>
這里span和p元素都是div的子元素，也是body的后代元素，反之div是span和p的父元素，body是祖先元素；子元素也可以叫做后代元素，父元素也可以叫做祖先元素；同一級(jí)的span和p互為對方的兄弟元素。
子元素選擇器即是選擇指定父元素的指定子元素：
父元素>子元素
即如果要選擇上文中span元素，可以用子元素選擇器，即：
div > span
后代元素選擇器即是選擇指定元素的指定后代元素：
祖先元素 子孫元素
中間用空格隔開，即如果要選擇上文中p元素，可以用后代元素選擇器，即：
body p
兄弟元素選擇器
<div>
<span></span>
<p></p>
<p></p>
</div>
①選中一個(gè)元素后緊挨著的指定元素，如果不是緊挨的那就選不中：
前一個(gè)元素 + 后一個(gè)元素
如果要選中第一個(gè)p元素，即:
span+p{color:red;}
②選中一個(gè)元素后面的所有指定兄弟元素：
前一個(gè)元素 + 后一個(gè)元素
如果要選中所有p元素，即:
span～p{color:red;}
（5）偽類選擇器
偽類表示一些特殊的狀態(tài)，或者一些特殊的子元素，或者用偽元素表示一些特殊的位置，用冒號(hào)連接標(biāo)簽名（或選擇器）和特殊狀態(tài)/子元素/位置。
①表示特殊狀態(tài)
比如網(wǎng)頁的超鏈接有四種狀態(tài)：
a:link{}設(shè)置未訪問過的普通鏈接樣式；
a:visited{}設(shè)置曾訪問過的鏈接樣式；
a:hover{}設(shè)置鼠標(biāo)懸停在鏈接上樣式；
a:active{}設(shè)置點(diǎn)擊鏈接時(shí)的樣式。
也可以設(shè)置其他標(biāo)簽的這四種狀態(tài)樣式
:focus表示獲取焦點(diǎn)的狀態(tài)，例：input:focus ,表示在創(chuàng)建文本輸入框，鼠標(biāo)點(diǎn)擊框內(nèi)即獲取焦點(diǎn)時(shí)的狀態(tài)樣式設(shè)置
②表示一些特殊的子元素
<div>
<span></span>
<p></p>
<p></p>
<p></p>
</div>
-選擇指定元素，且它在所有子元素中屬于第一個(gè)/最后一個(gè)/第n個(gè)/奇數(shù)行/偶數(shù)行 的子標(biāo)簽（只要是子標(biāo)簽即可，無論父標(biāo)簽是什么）：
標(biāo)簽名:first-child{}
標(biāo)簽名:last-child{}
標(biāo)簽名:nth-child(number){}
標(biāo)簽名:nth-child(odd){}
標(biāo)簽名:nth-child(even){}
例如，
選div中第一個(gè)p元素： p:first-child，此時(shí)第一個(gè)p元素不會(huì)被選中，因?yàn)樗皇窃赿iv中的第一個(gè)子元素
選div中最后個(gè)p元素： p:lastt-child
選div中第二個(gè)p元素： p:nth-child(2)
-選擇指定元素，且它在所有子元素的指定元素中屬于第一個(gè)/最后一個(gè)/第n個(gè)/第an+b個(gè)：
標(biāo)簽名:first-of-type{}
標(biāo)簽名:last-of-type{}
標(biāo)簽名:nth-of-type(number){}
標(biāo)簽名:nth-of-type(an+b){} a表示周期，n表示計(jì)數(shù)器（從0開始），b表示從滴b個(gè)開始選
此時(shí)輸入p:first-of-type可以選中第一個(gè)p元素
③表示一些特殊位置（偽元素）
-::first-letter 表示選擇首字母
-::first-line 表示選擇首行
-::selection 表示為在頁面內(nèi)選中的文本設(shè)置樣式，例：p::selection{background-color:red;} 表示當(dāng)在頁面框選p元素中的文字內(nèi)容時(shí)，其文字背景顏色會(huì)變成紅色。
-::before 表示在標(biāo)簽內(nèi)容前，一般結(jié)合content屬性，即::before{content:"xxx";}，在頁面中無法被選中
-::after 表示在標(biāo)簽內(nèi)容后，一般結(jié)合content屬性，即::after{content:"xxx";}，在頁面中無法被選中
（6）屬性選擇器
用屬性選擇器來選擇指定元素中有特定屬性或?qū)傩灾档脑兀?br>
標(biāo)簽名[屬性名] 選取含有該屬性的元素
標(biāo)簽名[屬性名=“屬性值”] 選取含有該屬性且有指定屬性值的元素
標(biāo)簽名[屬性名^=“屬性值”] 選取含有該屬性，且屬性值以指定內(nèi)容開頭的元素
標(biāo)簽名[屬性名$=“屬性值”] 選取含有該屬性，且屬性值以指定內(nèi)容結(jié)尾的元素
標(biāo)簽名[屬性名=“屬性值”]* 選取含有該屬性，且屬性值包含指定內(nèi)容的元素
（7）選擇器分組
通過選擇器分組可以選中多個(gè)選擇器對應(yīng)的元素，
-語法：
選擇器1，選擇器2，選擇器N{}
-例子：#p1,.p2,h1{background-color:yellow;}
（8）復(fù)合選擇器（交集選擇器）
可以選中滿足多個(gè)選擇器的元素，但對id選擇器來說不建議使用復(fù)合選擇器
-語法：
選擇器1選擇器2選擇器3 （之間無空格）
-例子：span.c1{} 表示選擇class值為c1的span元素
（9）通配選擇器
-選擇頁面中所有的元素
-語法：*{}
終于整理完選擇器的內(nèi)容了。。好多==，初學(xué)記憶可以用cssdinner來練習(xí)選擇器的內(nèi)容，搞清楚這各式各樣的選擇器～，網(wǎng)址如下：https://flukeout.github.io/
練完一次趕腳還不太夠，沒事的時(shí)候玩玩鞏固下挺好的～
