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