CSS引入方式和選擇符的講解和運(yùn)用小結(jié)
我要評(píng)論一、前言
CSS 是一種格式化網(wǎng)頁(yè)的標(biāo)準(zhǔn)方式，它拓展了 HTML 的功能，使網(wǎng)頁(yè)設(shè)計(jì)者能夠以更有效、更易維護(hù)的方式設(shè)置網(wǎng)頁(yè)格式。CSS 功能強(qiáng)大，CSS 的樣式設(shè)定功能比 HTML 多，幾乎可以定義所有的網(wǎng)頁(yè)元素。
二、CSS 是什么
CSS 即層疊樣式表（Cascading Style Sheets），是一種用于描述網(wǎng)頁(yè)文檔（如 HTML 或 XML）外觀和格式的樣式表語(yǔ)言。它主要用于將網(wǎng)頁(yè)內(nèi)容的呈現(xiàn)（外觀）和結(jié)構(gòu)（內(nèi)容）分離，從而實(shí)現(xiàn)更靈活、更高效的網(wǎng)頁(yè)設(shè)計(jì)。
CSS 能夠?qū)ξ谋镜淖煮w、顏色、大小、行間距等進(jìn)行設(shè)置，還能為元素添加背景顏色、背景圖片，設(shè)置元素的邊框樣式、圓角效果等，讓網(wǎng)頁(yè)更美觀。例如：
p {
color: blue;
font-size: 16px;
}在 CSS 里，注釋是用來(lái)給代碼添加說明或者解釋的內(nèi)容，瀏覽器會(huì)忽略這些注釋內(nèi)容。CSS 注釋有且只有一種格式 /**/ ：
/* 這是一個(gè)單行的CSS注釋 */
p {
/* 為段落文本設(shè)置顏色為藍(lán)色 */
color: blue;
/*
這是一個(gè)多行注釋
這里可以寫更多的說明內(nèi)容
*/
font-size: 16px;
}三、CSS 引入方式
1、行內(nèi)樣式
行內(nèi)樣式也叫內(nèi)聯(lián)樣式，是各種引用 CSS 方式中最直接的一種。行內(nèi)樣式就是通過直接設(shè)置各個(gè)元素的 style 屬性，從而達(dá)到設(shè)置樣式的目的。行內(nèi)樣式的格式為：
<標(biāo)簽 style="屬性: 屬性值;">
2、內(nèi)部樣式表
內(nèi)部樣式表是指樣式表的定義處于 HTML 文件一個(gè)單獨(dú)的區(qū)域，與 HTML 的內(nèi)容和結(jié)構(gòu)標(biāo)簽分離開來(lái)，從而實(shí)現(xiàn)對(duì)整個(gè)頁(yè)面范圍的內(nèi)容、結(jié)構(gòu)和表現(xiàn)進(jìn)行統(tǒng)一的控制和管理。
內(nèi)部樣式表處于頁(yè)面的 <head> 與 </head> 標(biāo)簽之間，內(nèi)部樣式表的格式為：
<head>
<style>
標(biāo)簽 {
屬性: 屬性值;
}
</style>
</head>3、鏈入外部樣式表
外部樣式表把聲明的樣式存放在獨(dú)立的樣式文件（.css 文件）中，當(dāng)頁(yè)面需要使用樣式時(shí)，通過 < link >標(biāo)簽外鏈接外部樣式表的文件即可。使用外部樣式表，改變一個(gè)文件就能改變整個(gè)站點(diǎn)的外觀。
①用< link >標(biāo)簽鏈接樣式表文件
< link >標(biāo)簽必須放到頁(yè)面的<head> ...</head> 標(biāo)簽對(duì)內(nèi)。其格式為：
<head> ... <link rel="stylesheet" href="外部樣式表文件名.css"> ... </head>
其中，rel 屬性用于指定鏈接的文檔與當(dāng)前文檔的關(guān)系，當(dāng)鏈入外部樣式表時(shí)，它的值需設(shè)為 “ stylesheet ”；href 屬性用于指定外部 CSS 文件的路徑，可以是相對(duì)路徑，也可以是絕對(duì)路徑。
②樣式表文件的格式
樣式表文件可以用任何文本編輯器（如記事本）打開并編輯，一般樣式表文件的擴(kuò)展名為 .css 。樣式表文件的內(nèi)容是定義的樣式表，不包含 HTML 標(biāo)簽。樣式表文件的格式為：
?選擇器 {
屬性1: 屬性值1;
屬性2: 屬性值2;
/* 可以有更多屬性 */
}四、CSS 選擇符（選擇器）
基本選擇符包括標(biāo)簽選擇符、class 類選擇符和 id 選擇符。
1、標(biāo)簽選擇符
CSS 中的標(biāo)簽選擇符（也稱為元素選擇器）是最基礎(chǔ)的選擇符類型，它通過 HTML 標(biāo)簽的名稱來(lái)選擇頁(yè)面中所有該類型的元素，并為這些元素應(yīng)用統(tǒng)一的樣式。語(yǔ)法如下：
標(biāo)簽名 {
屬性: 屬性值;
/* 可以有更多的屬性 - 值對(duì) */
}2、class 類選擇符
在 CSS 里，class 類選擇符是一種極為實(shí)用的選擇符，它能夠依據(jù)元素的 class 屬性值來(lái)選擇元素并應(yīng)用樣式。類選擇符以點(diǎn)號(hào)（.）開頭，后面緊跟類名，語(yǔ)法如下：
.class-name {
屬性: 屬性值;
/* 可以有更多屬性 - 值對(duì) */
}3、id 選擇符
在 CSS 里，id 選擇符是一種用于精準(zhǔn)選擇特定元素的選擇器，它依據(jù)元素的 id 屬性值來(lái)定位元素。id 選擇符以井號(hào)（#）開頭，后面緊跟元素的 id 屬性值，語(yǔ)法如下：
#id-name {
屬性:屬性值;
/* 可添加更多的屬性 - 值對(duì) */
}五、練習(xí)
1、練習(xí)一下三種 CSS 引入方式
示例代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css三種引入方式</title>
<style>
h3{
color: blue;
font-size: 30px;
font-family: 宋體;
}
</style>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h2 style="color: brown; font-size: 30px; font-family:楷體">
測(cè)試CSS的引入方式：行內(nèi)式
</h2>
<h3>
測(cè)試CSS的引入方式：內(nèi)嵌式
</h3>
<h4>
測(cè)試CSS的引入方式：外鏈?zhǔn)?
</h4>
</body>
</html>運(yùn)行結(jié)果：
2、練習(xí)一下 CSS 三種選擇符
示例代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 標(biāo)簽選擇器 */
p {
color: blue;
}
/* 類選擇器 */
.red-text {
color: red;
}
/* id選擇器 */
#green-text {
color: green;
}
</style>
</head>
<body>
<p>這是使用標(biāo)簽選擇器設(shè)置為藍(lán)色的文本。</p>
<span class="red-text">這是使用類選擇器設(shè)置為紅色的文本。</span>
<p id="green-text">這是使用id選擇器設(shè)置為綠色的文本。</p>
</body>
</html>運(yùn)行結(jié)果：
到此這篇關(guān)于CSS引入方式和選擇符的講解和運(yùn)用的文章就介紹到這了,更多相關(guān)CSS引入方式和選擇符內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
詳解CSS文件中的4種引入方式:行內(nèi),內(nèi)聯(lián)式,外部式,導(dǎo)入式
這篇文章主要介紹了CSS文件中的4種引入方式:行內(nèi),內(nèi)聯(lián)式,外部式,導(dǎo)入式,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-07-29
這篇文章主要介紹了CSS中的4種引入方式及優(yōu)先級(jí)，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2020-04-02
這篇文章主要介紹了css樣式引入及優(yōu)缺點(diǎn)，本文給大家分享三種css的引入方式，通過代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下2020-04-02
關(guān)于CSS引入方式的詳細(xì)見解小結(jié)
這篇文章主要介紹了關(guān)于CSS引入方式的詳細(xì)見解小結(jié)的相關(guān)資料，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2019-02-25
這篇文章主要介紹了詳解CSS文件的三種引入方式的相關(guān)資料，CSS的引入方式共有三種：行內(nèi)樣式、內(nèi)部樣式表、外部樣式表。具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-09-27- 在本文將為大家介紹下css的引入方式、css的基本語(yǔ)法等等，新手朋友們可以參考下哈，希望對(duì)大家有所幫助2013-09-12
這篇文章主要介紹了CSS 類選擇符和ID選擇符的區(qū)別，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-12-27- 下面小編就為大家?guī)?lái)一篇淺談css之屬性及剩余的選擇符。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2016-08-11
- 這篇文章主要介紹了CSS中的類和ID選擇符,是CSS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-08-01
- 成天都要與樣式打交道的朋友，相信對(duì)CSS選擇符(CSS Selectors)都不會(huì)陌生。不過對(duì)于剛接觸或者還不是很熟悉css的朋友來(lái)說，能夠找到一份對(duì)于CSS選擇符的相關(guān)例子集合，還是2009-12-08
