柚子快報(bào)邀請(qǐng)碼778899分享：css3 CSS樣式表的使用
柚子快報(bào)邀請(qǐng)碼778899分享：css3 CSS樣式表的使用
文章目錄
前言一、CSS樣式表是什么？二、使用內(nèi)容
1.CSS選擇器2.在頁(yè)面中包含CSS總結(jié)
前言
? ? ? ? 如果我們只是使用HTML那些東西做個(gè)網(wǎng)站的前端界面，毫無(wú)疑問(wèn)會(huì)是10年、05年才有翻蓋手機(jī)時(shí)候的上網(wǎng)風(fēng)格。因?yàn)閭鹘y(tǒng)的HTML語(yǔ)句要實(shí)現(xiàn)頁(yè)面美化在設(shè)計(jì)上時(shí)十分麻煩的，而CSS的出現(xiàn)改變了這個(gè)情況。
一、CSS樣式表是什么？
????????CSS樣式表是為彌補(bǔ)HTML在顯示屬性設(shè)定上的不足而指定的一套拓展樣式標(biāo)準(zhǔn)。
?????????CSS規(guī)則：CSS樣式表包含三部分，選擇器、屬性和屬性值。語(yǔ)法格式如下：
選擇器{ 屬性1:屬性值;
屬性2：屬性值；
}
? ? ? ? 選擇器：? 所有的HTML語(yǔ)言中的標(biāo)記都是通過(guò)不同的CSS選擇器來(lái)控制的。對(duì)于選擇器的命名，和我們創(chuàng)建類名時(shí)一樣，可以自定義，但不同的是有的選擇器命名時(shí)，需要按照一定的格式。
? ? ? ? 屬性：主要包括字體屬性、文本屬性、背景屬性、布局屬性、邊界屬性、列表屬性、表格屬性等內(nèi)容。當(dāng)有多個(gè)屬性時(shí)用“;”分號(hào)隔開。這些屬性的使用取決于瀏覽器的支持程度，因此，當(dāng)我們?cè)谝粋€(gè)高級(jí)瀏覽器中搭建網(wǎng)站時(shí)，可能在其他的瀏覽器不適用，需要進(jìn)行調(diào)試。
? ? ? ? 屬性值：某屬性的指定值。屬性值和屬性之間用冒號(hào)（:）分開。
? ? ? ? ?以下表格將介紹CSS樣式表各個(gè)屬性，以及各個(gè)屬性的屬性值：
CSS樣式表各個(gè)屬性及解釋
屬性解釋對(duì)應(yīng)屬性值舉例color定義文本顏色red、#00ff00、rgb(255,0,0)font-size定義字體大小12px、16px等像素值font-family定義字體類型宋體、楷體background-color定義背景顏色blue、#00ff00、rgb(255,0,0)margin定義元素外邊距18px、10px等像素值padding定義元素內(nèi)邊距20px、9px等像素值border定義邊框的樣式、寬度和顏色1px solid black（1px厚，實(shí)心，黑色的邊框）width定義元素寬度24px、36px等像素值height定義元素高度28px、30px等像素值text-align定義文本對(duì)齊方式left、right、center、jusify等display定義元素的顯示方式block、inline、inline-block、flex、grid等position定義元素的定義方式static、relative、absolute、fixed等f(wàn)loat定義元素的浮動(dòng)方式left、right、none等text-decoration定義文本裝飾效果none、underline、overline、line-through等text-transform定義文本轉(zhuǎn)換效果uppercase、lowercase、capitalize、nonetext-overflow定義文本溢出時(shí)的處理效果clip、ellipsis、stringbox-shadow定義元素的陰影效果h-shadow v-shadow blur spread color inset（控制陰影效果的六個(gè)不同的屬性值）border-radius定義元素的圓角效果24px、36px等像素值opacity定義元素的透明度0（完全透明）到1（不透明）之間的值z(mì)-index定義元素的堆疊順序整數(shù)值
? ? ? ? 實(shí)操展示：
????????
? ? ? ? 這便是一個(gè)普普通通的標(biāo)記選擇器。?
? ? ? ? 進(jìn)一步展示一下它是如何使用的：
仙人已乘黃鶴去 此地空余黃鶴樓
? ? ? ? 運(yùn)行結(jié)果：
?
? ? ? ? 第一，無(wú)論是什么選擇器，
????????使用標(biāo)記選擇器十分便捷，但是使用它后，所有該標(biāo)記的樣式都會(huì)被迫統(tǒng)一，無(wú)法實(shí)現(xiàn)每個(gè)標(biāo)記的樣式不同。這時(shí)候使用如上的類別選擇器就十分輕巧了。將對(duì)于的效果引用于不同的標(biāo)記即可。
????????實(shí)操展示：
這是一個(gè)紅色標(biāo)題
這是一個(gè)藍(lán)色標(biāo)題
這是一個(gè)綠色標(biāo)題
? ? ? ? 運(yùn)行結(jié)果：
? ? ? ? 第一，在標(biāo)記中，使用class來(lái)選擇相同類別的不同樣式的選擇器，直接在引號(hào)中輸入名稱即可，沒(méi)有“.”點(diǎn)號(hào)。
? ? ? ? 第二，類別選擇器可以下劃線區(qū)分樣式的不同，更加直觀的引用。
? ? ? ? （3）id選擇器
? ? ? ? ?id選擇器是通過(guò)HTML中的id屬性來(lái)選擇并添加樣式的，與類別選擇器基本相同。不同之處在于id是唯一的，即開發(fā)者定義的id選擇器只能被使用一次。
? ? ? ? 命名id選擇器以"#"號(hào)開始，語(yǔ)法如下：
? ? ? ? ?id選擇器以"#"號(hào)開頭，只能使用一次。id選擇器名稱自定義，建議直觀些。
? ? ? ? 實(shí)操展示：
震驚！數(shù)年的食用油竟然被工業(yè)用油污染！
據(jù)XX社報(bào)報(bào)道，河北散裝食用油罐裝車出現(xiàn)運(yùn)完煤油、柴油等工業(yè)用油后，未經(jīng)清洗，直接罐裝食用油。食用油安全令人擔(dān)憂。
? ? ? ? 運(yùn)行結(jié)果：?
? ? ? ? ?如上圖所示，在使用id選擇器時(shí)，在標(biāo)記中直接引用id值即可，寫入引號(hào)中。id選擇器以#號(hào)開頭，同時(shí)只能使用一次。
2.在頁(yè)面中包含CSS
? ? ? ? 所謂“在頁(yè)面中包含CSS”，就是在實(shí)際開發(fā)中向HTML寫入CSS碼的具體操作。
? ? ? ? （1）行內(nèi)樣式
? ? ? ? 行內(nèi)樣式比較簡(jiǎn)單粗暴，直接定義在HTML標(biāo)記里邊，通過(guò)style屬性來(lái)實(shí)現(xiàn)。
? ? ? ? 語(yǔ)法如下：
<標(biāo)記 >
? ? ? ? 行內(nèi)樣式直接通過(guò)style關(guān)鍵字在標(biāo)記中明確了樣式類型。?
? ? ? ? 實(shí)操展示：
紅色標(biāo)題
藍(lán)色標(biāo)題
綠色標(biāo)題
? ? ? ? 運(yùn)行結(jié)果：
?????????不足之處在于不能靈活多變，只是硬板地敲出標(biāo)記的樣式。
? ? ? ? （2）內(nèi)嵌式
? ? ? ? 內(nèi)嵌式樣式表就是在
標(biāo)記中使用標(biāo)記將CSS樣式包含在頁(yè)面中。語(yǔ)法格式如下：? ? ? ? 所謂內(nèi)嵌式，不過(guò)是我們剛接觸到看到的寫法，在
標(biāo)記中使用