柚子快報(bào)邀請(qǐng)碼778899分享：前端 html 初識(shí)CSS
柚子快報(bào)邀請(qǐng)碼778899分享：前端 html 初識(shí)CSS
目錄
前言：
? ? ? ? CSS的介紹：
? ? ? ? CSS的發(fā)展：
? ? ? ? 1）CSS1.0：
? ? ? ? 2)CSS2.0:
? ? ? ? 3)CSS2.1:
? ? ? ? 4）CSS3：
CSS特點(diǎn)：
? ? ? ? 1）豐富的樣式定義：
? ? ? ? 2）易于設(shè)置和修改：
? ? ? ? 3）可以多頁(yè)面應(yīng)用：
? ? ? ? 4）層疊：
5）頁(yè)面壓縮：
? ? ? ? CSS語(yǔ)法規(guī)則：
CSS選擇器：
說(shuō)明：
1.通用選擇器：
2.標(biāo)簽選擇器：
3.ID選擇器：
4.類選擇器：
5.后代選擇器：
6.子代選擇器：
7.相鄰兄弟選擇器：
8.通用兄弟選擇器：
9.分組選擇器：
10.屬性選擇器：
在HTML使用CSS的方式：?
1.內(nèi)嵌樣式表：
2.內(nèi)聯(lián)樣式：
3.外部樣式：
4.導(dǎo)入樣式表：
CSS注釋：
說(shuō)明：
方法：
總結(jié)：
前言：
CSS在Web開發(fā)領(lǐng)域中有著舉足輕重的地位，是一名前端工程師必備的技能之一，如下是CSS的優(yōu)勢(shì)：
簡(jiǎn)單：CSS很容易學(xué)習(xí)和理解不像很多語(yǔ)言具有邏輯思維復(fù)雜且關(guān)聯(lián)多，對(duì)于HTML文檔來(lái)說(shuō)CSS是不可替代的，因?yàn)樵诤芏郒TML文檔中都需要使用CSS來(lái)設(shè)置樣式。?節(jié)省時(shí)間：你可以把所有的CSS樣式都寫到一個(gè).css格式的文件中，然后再HTML頁(yè)面中引用。修改方便:當(dāng)你將所有的CSS保存在.css文件中在其他多個(gè)HTML文件中引用了的話，那么修改一個(gè).css文件里面的東西就可以一起修改所有的HTML文檔中的樣式，不需要一個(gè)個(gè)的去修改了。?兼容性：css還可以根據(jù)不同的設(shè)備來(lái)設(shè)計(jì)網(wǎng)頁(yè)的樣式。
0基礎(chǔ)看這一篇就夠了HTML教程(詳細(xì)匯總)-CSDN博客
? ? ? ? CSS的介紹：
? ? ? ? CSS是"Cascading Style Sheet"的縮寫，中文意思是"層疊樣式表",它是一種標(biāo)準(zhǔn)的樣式表語(yǔ)言，用于描述網(wǎng)頁(yè)的表現(xiàn)形式。
? ? ? ? CSS的主要作用是修改屬性的樣式，比如字體的顏色，背景，元素所在的位置等等，不僅如此市面上所有的瀏覽器都支持CSS。
? ? ? ? CSS的發(fā)展：
? ? ? ? 20世界90年代的時(shí)候HTML誕生了，這個(gè)時(shí)候的HTML只能用來(lái)控制網(wǎng)頁(yè)的顯示的效果，但是經(jīng)過了不斷地發(fā)展HTML中新添加了很多屬性用來(lái)設(shè)計(jì)頁(yè)面，隨著屬性的增多，HTML變得越來(lái)越慢，內(nèi)容越來(lái)越多越雜越亂。于是CSS誕生了。
? ? ? ? 1994年，哈坤-利提出了CSS的建議，并決定與伯特-波斯(Bert Bos)合作，共同開發(fā)CSS。
? ? ? ? 1994年底，哈坤-利在芝加哥的一次會(huì)議上正式提出了CSS建議，之后又在1995年的www網(wǎng)絡(luò)會(huì)議上再次提出了CSS，在會(huì)議上的伯特-波斯展示了支持CSS的Argo瀏覽器，哈坤-利也展示了支持CSS的Arena瀏覽器。
? ? ? ? 同年，W3C組織(World WideWeb Consortium)成立，該組織對(duì)CSS的發(fā)展很感興趣，為此還專門組織了一次討論會(huì)，最終CSS的全部開發(fā)成員都加入了W3C組織，并負(fù)責(zé)CSS標(biāo)準(zhǔn)的制定，至此CSS的發(fā)展上走上正軌。
? ? ? ? W3C,中文名為"萬(wàn)維網(wǎng)聯(lián)盟"，也稱為"W3C理事會(huì)"，由萬(wàn)維網(wǎng)的發(fā)明者"蒂姆-波奈斯-李"于1994年10在麻省理工學(xué)院計(jì)算機(jī)科學(xué)實(shí)驗(yàn)室成立，是Web技術(shù)領(lǐng)域最具權(quán)威和影響力的國(guó)際中立性技術(shù)標(biāo)注機(jī)構(gòu)。
? ? ? ? 至今為止，CSS經(jīng)歷了4個(gè)版本的迭代更新：
? ? ? ? 1）CSS1.0：
? ? ? ? 1996年12月W3C發(fā)布了CSS的第一個(gè)版本--CSS1.0,參考說(shuō)明如：(https://www.w3.org/TR/CSS1/)
? ? ? ? 2)CSS2.0:
? ? ? ? 1998年5月，CSS2.0版本正式發(fā)布,參考說(shuō)明如:(https://www.w3.org/TR/CSS2/).
? ? ? ? 3)CSS2.1:
? ? ? ? 2004年2月，CSS2.1正式發(fā)布，該版本在CSS2.0的基礎(chǔ)上略微做了改動(dòng)，上刪除了許多不被瀏覽器支持的屬性。
? ? ? ? 4）CSS3：
? ? ? ? 在2001年的時(shí)候，W3C就開始準(zhǔn)備CSS的三個(gè)版本，目前為止該版本雖然還沒定稿，但是很多瀏覽器已經(jīng)開始支持其中大部分特性。
CSS特點(diǎn)：
? ? ? ? CSS是Web利于中的一個(gè)突破，他為HTML提供了一種描述元素樣式的方法，使用CSS和HTML可以制作出精美的網(wǎng)頁(yè)，CSS有以下特點(diǎn)：
? ? ? ? 1）豐富的樣式定義：
? ? ? ? CSS為HTML標(biāo)簽提供了豐富的外觀屬性，可以在網(wǎng)頁(yè)中顯示各種效果，如:
? ? ? ? 為元素設(shè)置不同的邊框(border)，以及邊框和元素之間的內(nèi)外邊距(padding,margin).? ? ? ? 改變文字的顏色，大小，字體，為文字添加修飾（刪除線，下劃線）。? ? ? ? 為網(wǎng)頁(yè)設(shè)置背景圖或者顏色等等。
? ? ? ? 2）易于設(shè)置和修改：
? ? ? ? CSS樣式信息不僅可以在HTML元素的style屬性中定義，也可以定義在HTML文檔
標(biāo)簽里面的? ? ? ? 3）可以多頁(yè)面應(yīng)用：
? ? ? ? 多頁(yè)面應(yīng)用就是將CSS樣式統(tǒng)一放到一個(gè).css格式的文件中，這個(gè)文件不是頁(yè)面，但我們可以在不同的頁(yè)面引用這個(gè).css格式的文件，這樣就可以統(tǒng)一頁(yè)面的風(fēng)格。
? ? ? ? 4）層疊：
? ? ? ? 層疊就是指可以對(duì)同一個(gè)HTML元素多次定義CSS樣式，后面定義的樣式會(huì)覆蓋前面定義的演示。
h1 {
text-align: center;
color: aqua;
}
h1{
color:red;
}
?如下是h1標(biāo)簽的運(yùn)行結(jié)果：可以看到的是h1標(biāo)題的顏色為紅色
? ? ? ? 如整個(gè)站點(diǎn)引用了同樣的CSS樣式文件，但想要調(diào)整其中某個(gè)頁(yè)面的元素，這個(gè)時(shí)候就可以針對(duì)想要調(diào)整的元素單獨(dú)定義一份樣式文件并引用到頁(yè)面中，這樣后來(lái)單獨(dú)定義的樣式就會(huì)覆蓋前面的樣式，在瀏覽器中只會(huì)看到最后設(shè)置的效果。
5）頁(yè)面壓縮：
? ? ? ? CSS語(yǔ)法規(guī)則：
? ? ? ? CSS樣式由一系列規(guī)則組成，這些規(guī)則由Web瀏覽器解析，然后引用與HTML文檔對(duì)應(yīng)的元素上面，CSS樣式規(guī)則由三個(gè)部分組成，分別是選擇器，屬性和值：? ? ? ? 選擇器：由HTML元素的id屬性或class屬性或者元素的名字以及一些特殊的符號(hào)構(gòu)成，用來(lái)指定要為那個(gè)HTML元素定義樣式，如選擇器p就表為示頁(yè)面中的所有
標(biāo)簽定義樣式。? ? ? ? 屬性：如果要給HTML元素設(shè)置樣式名稱，由一系列的關(guān)鍵字組成，如color(顏色)，border(邊框)，font(字體)等等，CSS提供了多種屬性，可以通過https://www.w3.org/TR/CSS2/propidx.html來(lái)查看。? ? ? ? 值：由數(shù)值和單位或者關(guān)鍵字組成，用來(lái)定義某個(gè)標(biāo)簽的屬性，如color屬性的值可以是red，#0F0F0F等等
? ? ? ? 如標(biāo)題標(biāo)簽h1定義CSS樣式的語(yǔ)法規(guī)則：
h1{color:red;text-align:center;}
? ? ? ? 從上述代碼中可以看出來(lái)在CSS中語(yǔ)法規(guī)則中，屬性和值之間需要使用冒號(hào):進(jìn)行分隔，每個(gè)屬性和值的組成可以看做一個(gè)聲明，每個(gè)聲明的結(jié)尾都需要使用分號(hào);作為結(jié)尾，屬于同一選擇器的聲明需要使用花括號(hào){}包裹起來(lái)。
? ? ? ? 上述代碼說(shuō)明：
? ? ? ? 選擇器的h1表示為網(wǎng)頁(yè)中所有的
標(biāo)簽定義樣式：? ? ? ? 其中color表示字體的顏色的屬性，值是red表示將字體設(shè)置為紅色；? ? ? ? 屬性text-align表示文本的對(duì)齊方式(上下左右中間)，值center表示將文本對(duì)齊方式設(shè)置為居中對(duì)齊。
? ? ? ? 上列代碼可以寫成以下形式? ? ? ?
h1{
color:red;
text-align:center;
}
? ? ? ? 這樣分明的寫法更有利于我們的讀寫；
? ? ? ? 在CSS中的屬性和大部分的值都是不區(qū)分大小寫的，但是CSS選擇器中常用的大小寫，如選擇器，.bianchengbang和.BianChengBang表示兩個(gè)不同的選擇器。
CSS選擇器：
說(shuō)明：
選擇器是由HTML中的元素id，class屬性或者元素本身的名字，以及一些符號(hào)如*+等等組成，選擇器的作用一般都是讓我們選擇要為那個(gè)HTML元素定義樣式，選擇器是CSS規(guī)則中重要的組成部分，在選擇器中定義的樣式的效果只對(duì)選擇器選中那些元素有效果。如下是幾種選擇器的分類。
1.通用選擇器：
通用選擇器用*來(lái)表示，它匹配的是HTML文檔中所有的元素，需要注意的是：因?yàn)樗瞧ヅ銱TML文檔中的每一個(gè)元素，如果頻繁使用的話那么將對(duì)瀏覽器造成壓力。
*{
color: red;
}
2.標(biāo)簽選擇器：
標(biāo)簽選擇器一般都是匹配HTML所有相同的標(biāo)簽，如下:
span{
color: red;
}
?上述標(biāo)簽選擇器是匹配HTML文檔里面的所有標(biāo)簽將其文本內(nèi)容變?yōu)榧t色。
3.ID選擇器：
ID選擇器是用來(lái)匹配HTML文檔中具有相同ID的元素，ID選擇器定義的時(shí)候需要在前面加#然后ID名。如下：
#overstriking{
color:blueviolet;
}
上述代碼匹配的是HTML文檔中具有id="overstriking"屬性的標(biāo)簽。
4.類選擇器：
類選擇器是匹配HTML文檔中所有class屬性值相同的標(biāo)簽，類選擇器的定義更ID很想但是不同的是id是#符號(hào)，類選擇器是.符號(hào),代碼如下：
.text{
color:red;
}
5.后代選擇器：
當(dāng)一個(gè)標(biāo)簽嵌套在另一個(gè)標(biāo)簽里面的時(shí)候，我們就可以稱里面這個(gè)標(biāo)簽為嵌套他的后代，如我用一個(gè)
標(biāo)簽,此時(shí)標(biāo)簽就是的后代標(biāo)簽，選中后代標(biāo)簽的方式一般都是選擇它的父標(biāo)簽的class，id或者標(biāo)簽名，然后按照等級(jí)從外到內(nèi)依次列出，使用空格隔開，如下:.text ul li a{
color:red;
}
#text ul li a{
color:red;
}
ul li a{
color:red;
}
6.子代選擇器：
子代選擇器匹配機(jī)制很像后代嗎選擇器，但是子代選擇器之間只能隔一層嵌套，子代選擇器一般使用>分隔,如下:
div>h2{
color:red;
}
7.相鄰兄弟選擇器：
兄弟選擇器一般都是匹配具有相同父級(jí)元素，并且需要兄弟之間是相鄰的，并且不存在嵌套關(guān)系，相鄰兄弟選擇器定義的時(shí)候需要使用+,加號(hào)的兩邊為相鄰的兩個(gè)元素，選擇器會(huì)匹配加號(hào)后面的元素，如下:
h2+ul{
color:red;
}
ul.text+span{
color:red;
}
8.通用兄弟選擇器：
通用兄弟選擇器會(huì)匹配同一父級(jí)元素下的兄弟元素，但是兄弟之間無(wú)需緊鄰，定義通用兄弟選擇器需要使用~波浪號(hào)，波浪號(hào)鏈表是同一父級(jí)元素下的兩個(gè)元素，示例如下:
h2~span{
color:red;
}
9.分組選擇器：
分組選擇器可以將同樣樣式規(guī)則的選擇器應(yīng)用到一個(gè)選擇器里面，每個(gè)選擇器之間使用,逗號(hào)分隔，這么做可以避免代碼冗余，如下:
h2{
color:red;
font-size:23px;
}
span{
color:
font-size:90px;
}
p{
color:red;
font-size:80px;
}
?上述代碼使用分組選擇器之后就會(huì) 變成：
h2,span,p{
color:red;
}
h2{
font-size:23px;
}
span{
font-size:90px;
}
p{
font-size:80px;
}
10.屬性選擇器：
屬性選擇器一般用來(lái)匹配具有特定屬性的元素屬性選擇器的定義方式是使用一對(duì)[]括號(hào)來(lái)指定具有的屬性信息，如下:
input[type="text"]{
color:red;
}
上述選擇器會(huì)匹配所有具有type="text"屬性的標(biāo)簽。
屬性選擇器還有一下幾種寫法:
[target]：選擇所有target屬性的元素。
[target=_blank]：選擇所有target="_blank"屬性的元素。
[title~=flower]：選擇所有title屬性包含"flower"的元素。
[lang|=en]：選擇lang屬性正好是"en"或者"en"為開頭的所有元素。
下列是一部分測(cè)試實(shí)例:
Document 這只是一段文本
這只是一段加粗文本
在HTML使用CSS的方式：?
如果要在HTML中使用CSS有以下幾種方式：
1.內(nèi)嵌樣式表：
在HTML的
標(biāo)簽內(nèi)的這是一個(gè)最大的標(biāo)題
這是一個(gè)段落
.text ul li a{
color:red;
}
#text ul li a{
color:red;
}
ul li a{
color:red;
}
6.子代選擇器：
子代選擇器匹配機(jī)制很像后代嗎選擇器，但是子代選擇器之間只能隔一層嵌套，子代選擇器一般使用>分隔,如下:
div>h2{
color:red;
}
7.相鄰兄弟選擇器：
兄弟選擇器一般都是匹配具有相同父級(jí)元素，并且需要兄弟之間是相鄰的，并且不存在嵌套關(guān)系，相鄰兄弟選擇器定義的時(shí)候需要使用+,加號(hào)的兩邊為相鄰的兩個(gè)元素，選擇器會(huì)匹配加號(hào)后面的元素，如下:
h2+ul{
color:red;
}
ul.text+span{
color:red;
}
8.通用兄弟選擇器：
通用兄弟選擇器會(huì)匹配同一父級(jí)元素下的兄弟元素，但是兄弟之間無(wú)需緊鄰，定義通用兄弟選擇器需要使用~波浪號(hào)，波浪號(hào)鏈表是同一父級(jí)元素下的兩個(gè)元素，示例如下:
h2~span{
color:red;
}
9.分組選擇器：
分組選擇器可以將同樣樣式規(guī)則的選擇器應(yīng)用到一個(gè)選擇器里面，每個(gè)選擇器之間使用,逗號(hào)分隔，這么做可以避免代碼冗余，如下:
h2{
color:red;
font-size:23px;
}
span{
color:
font-size:90px;
}
p{
color:red;
font-size:80px;
}
?上述代碼使用分組選擇器之后就會(huì) 變成：
h2,span,p{
color:red;
}
h2{
font-size:23px;
}
span{
font-size:90px;
}
p{
font-size:80px;
}
10.屬性選擇器：
屬性選擇器一般用來(lái)匹配具有特定屬性的元素屬性選擇器的定義方式是使用一對(duì)[]括號(hào)來(lái)指定具有的屬性信息，如下:
input[type="text"]{
color:red;
}
上述選擇器會(huì)匹配所有具有type="text"屬性的標(biāo)簽。
屬性選擇器還有一下幾種寫法:
[target]：選擇所有target屬性的元素。
[target=_blank]：選擇所有target="_blank"屬性的元素。
[title~=flower]：選擇所有title屬性包含"flower"的元素。
[lang|=en]：選擇lang屬性正好是"en"或者"en"為開頭的所有元素。
下列是一部分測(cè)試實(shí)例:
這只是一段文本
這只是一段加粗文本
在HTML使用CSS的方式：?
如果要在HTML中使用CSS有以下幾種方式：
1.內(nèi)嵌樣式表：
在HTML的
標(biāo)簽內(nèi)的這是一個(gè)最大的標(biāo)題
這是一個(gè)段落