亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

CSS引入方式和選擇符的講解和運(yùn)用小結(jié)

  發(fā)布時間：2025-05-14 15:46:03   作者：博客喵喵   我要評論
CSS 即層疊樣式表，是一種用于描述網(wǎng)頁文檔（如 HTML 或 XML）外觀和格式的樣式表語言,它主要用于將網(wǎng)頁內(nèi)容的呈現(xiàn)（外觀）和結(jié)構(gòu)（內(nèi)容）分離，從而實(shí)現(xiàn)更靈活、更高效的網(wǎng)頁設(shè)計(jì)，本文給大家介紹CSS引入方式和選擇符的講解和運(yùn)用，感興趣的朋友一起看看吧

一、前言

CSS 是一種格式化網(wǎng)頁的標(biāo)準(zhǔn)方式，它拓展了 HTML 的功能，使網(wǎng)頁設(shè)計(jì)者能夠以更有效、更易維護(hù)的方式設(shè)置網(wǎng)頁格式。CSS 功能強(qiáng)大，CSS 的樣式設(shè)定功能比 HTML 多，幾乎可以定義所有的網(wǎng)頁元素。

二、CSS 是什么

CSS 即層疊樣式表（Cascading Style Sheets），是一種用于描述網(wǎng)頁文檔（如 HTML 或 XML）外觀和格式的樣式表語言。它主要用于將網(wǎng)頁內(nèi)容的呈現(xiàn)（外觀）和結(jié)構(gòu)（內(nèi)容）分離，從而實(shí)現(xiàn)更靈活、更高效的網(wǎng)頁設(shè)計(jì)。

CSS 能夠?qū)ξ谋镜淖煮w、顏色、大小、行間距等進(jìn)行設(shè)置，還能為元素添加背景顏色、背景圖片，設(shè)置元素的邊框樣式、圓角效果等，讓網(wǎng)頁更美觀。例如：

p {
    color: blue;
    font-size: 16px;
}

在 CSS 里，注釋是用來給代碼添加說明或者解釋的內(nèi)容，瀏覽器會忽略這些注釋內(nèi)容。CSS 注釋有且只有一種格式 /**/ ：

/* 這是一個單行的CSS注釋 */
p {
    /* 為段落文本設(shè)置顏色為藍(lán)色 */
    color: blue;
    /* 
    這是一個多行注釋
    這里可以寫更多的說明內(nèi)容
    */
    font-size: 16px;
}

三、CSS 引入方式

1、行內(nèi)樣式

行內(nèi)樣式也叫內(nèi)聯(lián)樣式，是各種引用 CSS 方式中最直接的一種。行內(nèi)樣式就是通過直接設(shè)置各個元素的 style 屬性，從而達(dá)到設(shè)置樣式的目的。行內(nèi)樣式的格式為：

<標(biāo)簽 style="屬性: 屬性值;">

2、內(nèi)部樣式表

內(nèi)部樣式表是指樣式表的定義處于 HTML 文件一個單獨(dú)的區(qū)域，與 HTML 的內(nèi)容和結(jié)構(gòu)標(biāo)簽分離開來，從而實(shí)現(xiàn)對整個頁面范圍的內(nèi)容、結(jié)構(gòu)和表現(xiàn)進(jìn)行統(tǒng)一的控制和管理。

內(nèi)部樣式表處于頁面的 <head> 與 </head> 標(biāo)簽之間，內(nèi)部樣式表的格式為：

<head>
    <style>
        標(biāo)簽 {
            屬性: 屬性值;
        }
    </style>
</head>

3、鏈入外部樣式表

外部樣式表把聲明的樣式存放在獨(dú)立的樣式文件（.css 文件）中，當(dāng)頁面需要使用樣式時，通過   < link >標(biāo)簽外鏈接外部樣式表的文件即可。使用外部樣式表，改變一個文件就能改變整個站點(diǎn)的外觀。

①用< link >標(biāo)簽鏈接樣式表文件

< link >標(biāo)簽必須放到頁面的<head> ...</head> 標(biāo)簽對內(nèi)。其格式為：

<head>
  ...
  <link rel="stylesheet" href="外部樣式表文件名.css">
  ...
</head>

其中，rel 屬性用于指定鏈接的文檔與當(dāng)前文檔的關(guān)系，當(dāng)鏈入外部樣式表時，它的值需設(shè)為         “ stylesheet ”；href 屬性用于指定外部 CSS 文件的路徑，可以是相對路徑，也可以是絕對路徑。

②樣式表文件的格式

樣式表文件可以用任何文本編輯器（如記事本）打開并編輯，一般樣式表文件的擴(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)簽的名稱來選擇頁面中所有該類型的元素，并為這些元素應(yīng)用統(tǒng)一的樣式。語法如下：

標(biāo)簽名 {
    屬性: 屬性值;
    /* 可以有更多的屬性 - 值對 */
}

2、class 類選擇符

在 CSS 里，class 類選擇符是一種極為實(shí)用的選擇符，它能夠依據(jù)元素的 class 屬性值來選擇元素并應(yīng)用樣式。類選擇符以點(diǎn)號（.）開頭，后面緊跟類名，語法如下：

.class-name {
    屬性: 屬性值;
    /* 可以有更多屬性 - 值對 */
}

3、id 選擇符

在 CSS 里，id 選擇符是一種用于精準(zhǔn)選擇特定元素的選擇器，它依據(jù)元素的 id 屬性值來定位元素。id 選擇符以井號（#）開頭，后面緊跟元素的 id 屬性值，語法如下：

#id-name {
    屬性:屬性值;
    /* 可添加更多的屬性 - 值對 */
}

五、練習(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:楷體">
    測試CSS的引入方式：行內(nèi)式
    </h2>
    <h3>
        測試CSS的引入方式：內(nèi)嵌式   
    </h3>
    <h4>
        測試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)容請搜索腳本之家以前的文章或繼續(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ì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2020-07-29

  • 淺析CSS中的4種引入方式及優(yōu)先級

    這篇文章主要介紹了CSS中的4種引入方式及優(yōu)先級，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧
    2020-04-02

  • css樣式引入方式及優(yōu)缺點(diǎn)介紹

    這篇文章主要介紹了css樣式引入及優(yōu)缺點(diǎn)，本文給大家分享三種css的引入方式，通過代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下
    2020-04-02

  • 關(guān)于CSS引入方式的詳細(xì)見解小結(jié)

    這篇文章主要介紹了關(guān)于CSS引入方式的詳細(xì)見解小結(jié)的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2019-02-25

  • 詳解CSS文件的三種引入方式

    這篇文章主要介紹了詳解CSS文件的三種引入方式的相關(guān)資料，CSS的引入方式共有三種：行內(nèi)樣式、內(nèi)部樣式表、外部樣式表。具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2018-09-27

  • Css基本概念及其引入方式介紹

    在本文將為大家介紹下css的引入方式、css的基本語法等等，新手朋友們可以參考下哈，希望對大家有所幫助
    2013-09-12

  • CSS 類選擇符和ID選擇符的區(qū)別

    這篇文章主要介紹了CSS 類選擇符和ID選擇符的區(qū)別，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-12-27

  • 淺談css之屬性及剩余的選擇符

    下面小編就為大家?guī)硪黄獪\談css之屬性及剩余的選擇符。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-08-11

  • 詳解CSS中的類和ID選擇符

    這篇文章主要介紹了CSS中的類和ID選擇符,是CSS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下
    2015-08-01

  • CSS 選擇符的用法和實(shí)例

    成天都要與樣式打交道的朋友，相信對CSS選擇符(CSS Selectors)都不會陌生。不過對于剛接觸或者還不是很熟悉css的朋友來說，能夠找到一份對于CSS選擇符的相關(guān)例子集合，還是
    2009-12-08

最新評論