ID Selectors - 聲明式 CSS 選擇的

ID Selectors - 聲明式 CSS 選擇的精髓

CSS 中，ID 選擇器（ID selectors）是一種強(qiáng)力的選擇器類型，它們?cè)试S你根據(jù) HTML 元素的 id 屬性來選擇元素。該選擇器使得找到特定的元素變得非常容易和直觀。在這篇文章中，我們將深入探討 ID selectors 的優(yōu)勢(shì)和巧妙使用方法。

優(yōu)勢(shì)：

具體性：ID selectors 只選擇具有特定 id 值的元素，這可以確保選擇元素是盡可能的精確和確定性的。
優(yōu)先級(jí)：ID selectors 具有高的優(yōu)先級(jí)，這意味著它們?cè)?CSS 決定如何處理一組沖突選擇器時(shí)，會(huì)根據(jù)具有更專門的匹配來獲得較高的優(yōu)先級(jí)。
唯一性：HTML 中的每個(gè) id 必須是唯一的，這使得 ID selectors 很適合應(yīng)用局部樣式，因?yàn)槊總€(gè)元素都可以有獨(dú)特的樣式。

巧妙用法：

選擇特定元素：ID selectors 可以用于選擇特定的 HTML 元素，例如通過為特定行內(nèi)元素（如鏈接）添加 id，并使用 ID selectors 來為其應(yīng)用樣式。
與其他選擇器結(jié)合：ID selectors 可以與其他選擇器（如類選擇器和屬性選擇器）和偽類一起使用，以創(chuàng)建更復(fù)雜的選擇器和樣式。
創(chuàng)建可復(fù)用的樣式：通過為 ID selectors 定義復(fù)雜樣式，我們可以將它們應(yīng)用于多個(gè)不同的元素，從而實(shí)現(xiàn)樣式的重復(fù)使用和減少冗余代碼。

掌握 ID selectors 編寫 CSS 時(shí)的關(guān)鍵點(diǎn)包括：

確保在你的 HTML 文件中每個(gè) id 是唯一的。這免去了為這些元素編寫過多的復(fù)雜選擇器，并提高了編碼效率。
使用 cure CSS 的 collapse 規(guī)則。因?yàn)?ID selectors 具有較高的優(yōu)先級(jí)，可能會(huì)導(dǎo)致沖突，所以使用 collapse 規(guī)則可以幫助解決這個(gè)問題。
始終盡量在 CSS 中使用 ID selectors。雖然類 selectors 也使得選擇定義更加容易，但 ID selectors 提供了更高的精確性和優(yōu)先級(jí)，因此在合適的情況下使用它們是明智的。

現(xiàn)在，使用 ID selectors 時(shí)請(qǐng)確保你已經(jīng)掌握了這些關(guān)鍵點(diǎn)和推薦最佳實(shí)踐。

讓我們開始，讓你的 HTML 變得更具特色和動(dòng)態(tài)性！

在開篇

如果您是一名運(yùn)維開發(fā)工程師，未來想要打造B/S架構(gòu)產(chǎn)品，那么前端必須得攻破，筆者會(huì)和你一起堅(jiān)持，請(qǐng)跟隨我的步伐一起出發(fā)吧！

本篇帶你一起復(fù)習(xí)鞏固HTML常用的元素和HTML屬性，記住，所有的HTML文檔是由HTML元素定義的，且HTML屬性是HTML元素提供的附加信息。

HTML元素有哪些？

HTML 元素指的是從開始標(biāo)簽（start tag）到結(jié)束標(biāo)簽（end tag）的所有代碼。

代碼如下:

<!DOCTYPE html>
<html>
    <head >
        <title>彩虹運(yùn)維技術(shù)棧社區(qū)，公眾號(hào)ID：TtrOpsStack</title>
        <meta charset="utf-8" />
    </head>
    <body>
        <h1>彩虹運(yùn)維技術(shù)棧社區(qū)公眾號(hào)ID：TtrOpsStack</h1>
        <br>
        <p>我們會(huì)持續(xù)分享原創(chuàng)技術(shù)文章</p>
    </body>
</html>

說明：

如：開始標(biāo)簽是<h1>，中間是內(nèi)容，結(jié)束標(biāo)簽是</h1>，
特別說明：某些HTML元素沒有內(nèi)容 (如 <br> )。這些元素稱為空元素。空元素沒有結(jié)束標(biāo)記！

效果如下:

嵌套的HTML元素

說明：

大多數(shù) HTML 元素可以嵌套（可以包含其他 HTML 元素）。
HTML 文檔由嵌套的 HTML 元素構(gòu)成。
下面的示例包含四個(gè)HTML元素 (<html>, <body>, <h1> , <p>):

小栗子

<!DOCTYPE html>
<html>
    <body>
        <h1>彩虹運(yùn)維技術(shù)棧社區(qū)</h1>
        <p>公賬號(hào)ID：TtrOpsStack</p>
    </body>
</html>

小栗子解析

<html> 元素定義了整個(gè) HTML 文檔。
它有一個(gè)開始標(biāo)簽 <html> ，以及一個(gè)結(jié)束標(biāo)簽 </html>。
在 <html> 元素內(nèi)部還有其他元素： <body>:

代碼如下:

<!DOCTYPE html>
<html>
    <head>
        <title>彩虹運(yùn)維技術(shù)棧社區(qū)</title>
        <meta charset="UTF-8" />
    </head>
    <body>
        <h1>彩虹運(yùn)維技術(shù)棧社區(qū)</h1>
        <p>公賬號(hào)ID：TtrOpsStack</p>
    </body>
</html>

說明:

<body> 元素定義了 HTML 文檔的主體。
它有一個(gè)開始標(biāo)簽 <body> ，以及一個(gè)結(jié)束標(biāo)簽 </body>。
在 <body> 元素內(nèi)部還有兩個(gè)其他元素：<h1> 和 
<p>:

代碼如下:

<!DOCTYPE html>
<html>
    <head>
        <title>彩虹運(yùn)維技術(shù)棧社區(qū)</title>
        <meta charset="UTF-8" />
    </head>
    <body>
        <h1>彩虹運(yùn)維技術(shù)棧社區(qū)</h1>
        <p>公賬號(hào)ID：TtrOpsStack</p>
    </body>
</html>

說明：

<h1> 元素定義標(biāo)題。
它有一個(gè)開始標(biāo)簽 <h1> ，以及一個(gè)結(jié)束標(biāo)簽 </h1>:

代碼如下:

<!doctype html>
<html>
    <head>
        <title>TtrOpsStack</title>
        <meta charset="UTF-8" />
    </head>
    <body>
        <h1>彩虹運(yùn)維技術(shù)棧社區(qū)</h1>
    </body>
</html>

說明：

<p> 元素定義段落。
它有一個(gè)開始標(biāo)簽 <p> ，以及一個(gè)結(jié)束標(biāo)簽 </p>:

代碼如下：

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="UTF-8"/>
    </head>
    <body>
        <p>公賬號(hào)ID：TtrOpsStack</p>
    </body>
</html>

HTML空元素

說明：

沒有內(nèi)容的 HTML 元素被稱為空元素。空元素是在開始標(biāo)簽中關(guān)閉的。
<br> 就是沒有關(guān)閉標(biāo)簽的空元素:

代碼如下：

<!DOCTYPE html>
<html>
    <head >
        <title>彩虹運(yùn)維技術(shù)棧社區(qū)，公眾號(hào)ID：TtrOpsStack</title>
        <meta charset="utf-8" />
    </head>
    <body>
        <p>這是 <br> 彩虹運(yùn)維技術(shù)棧社區(qū)。<br> 公眾號(hào)ID：TtrOpsStack</p>
    </body>
</html>

HTML屬性

什么是HTML屬性？

HTML元素可以設(shè)置屬性
屬性可以在元素中添加附加信息
屬性一般描述于開始標(biāo)簽
屬性總是以名稱/值對(duì)的形式出現(xiàn)，比如：name="value"

href屬性

說明：

<a> 標(biāo)簽用于定義HTML 鏈接。 鏈接的地址在 href 屬性中指定：

代碼如下:

<!DOCTYPE html>
<html>
    <head>
        <title>彩虹運(yùn)維技術(shù)棧社區(qū)-TtrOpsStack</title>
        <meta charset="UTF-8" />
    </head>
    <body>
        <a href="https://mp.weixin.qq.com/s/Zjdes2iHZ4rdpQayoWPVWQ">重磅！DIY的Prometheus主備方案，全網(wǎng)唯一。生產(chǎn)未上，測(cè)試先行。</a>
    </body>
</html>

src屬性

說明：

<img> 標(biāo)簽用于在HTML頁面中嵌入圖像。 src 屬性指定要顯示的圖像的路徑：

代碼如下：

<!DOCTYPE html>
<html>
    <head>
        <title>微信公眾號(hào)ID:TtrOpsStack(彩虹運(yùn)維技術(shù)棧社區(qū))</title>
        <meta charset="UTF-8" />
    </head>
    <body>
        <h1>TtrOpsStack的Logo</h1>
        <img src="img/logo-wechat-id.jpg">
    </body>
</html>

有兩種方法可以在src屬性中指定URL：

絕對(duì)URL：鏈接到另一個(gè)網(wǎng)站上的一個(gè)圖像。

注意: 外部圖像可能受版權(quán)保護(hù)。如果你沒有得到使用它的許可，你可能違反了版權(quán)法。此外，您無法控制外部圖像；它可能會(huì)突然被刪除或更改。

相對(duì)URL：鏈接到網(wǎng)站中托管的圖像。在這里，URL不包括域名。如果URL開頭沒有斜杠，它將相對(duì)于當(dāng)前頁面。比如: src="logo-wechat-id.jpg". 如果URL以斜杠開頭，它將是相對(duì)于當(dāng)前域名的。 Example: src="/images/logo-wechat-id.jpg".

注意: 使用相對(duì)URL幾乎總是最好的。如果您更改域，它們將不會(huì)中斷。

width和height屬性

說明：

<img> 標(biāo)簽還應(yīng)包含 width 和 
height 屬性，該屬性指定圖像的寬度和高度（以像素為單位）：

代碼如下:

<!DOCTYPE html>
<html>
    <head>
        <title>微信公眾號(hào)ID:TtrOpsStack(彩虹運(yùn)維技術(shù)棧社區(qū))</title>
        <meta charset="UTF-8" />
    </head>
    <body>
        <h1>TtrOpsStack的Logo</h1>
        <img src="img/logo-wechat-id.jpg" width="200" height="200">
    </body>
</html>

效果如下:

alt屬性

說明：

如果由于某種原因無法顯示圖像，則<img> 標(biāo)簽的 alt 屬性指定圖像的備用文本。 這可能是由于連接速度慢，或者src屬性中的錯(cuò)誤，或者如果用戶瀏覽器異常。

代碼如下：

<!DOCTYPE html>
<html>
    <head>
        <title>微信公眾號(hào)ID:TtrOpsStack(彩虹運(yùn)維技術(shù)棧社區(qū))</title>
        <meta charset="UTF-8" />
    </head>
    <body>
        <h1>TtrOpsStack的Logo</h1>
        <img src="imga/logo-wechat-id.jpg" width="200" height="200" alt="圖片缺失">
    </body>
</html>

效果如下：

style屬性

說明

style 屬性用于設(shè)置樣式，如顏色、字體、大小等。

代碼如下:

<!DOCTYPE html>
<html>
    <head>
        <title>微信公眾號(hào)ID:TtrOpsStack(彩虹運(yùn)維技術(shù)棧社區(qū))</title>
        <meta charset="UTF-8" />
    </head>
    <body>
        <p style="color:red;">微信公眾號(hào)ID:TtrOpsStack(彩虹運(yùn)維技術(shù)棧社區(qū))</p>
    </body>
</html>

元素中的內(nèi)容字體就會(huì)變成紅色

lang屬性

說明：

在<html>標(biāo)記中包含lang屬性，以聲明網(wǎng)頁的語言。這是為了幫助搜索引擎和瀏覽器。
以下示例指定國(guó)家代碼為中文：

代碼如下：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <title>微信公眾號(hào)ID:TtrOpsStack(彩虹運(yùn)維技術(shù)棧社區(qū))</title>
        <meta charset="UTF-8" />
    </head>
    <body>
        <p style="color:red;">微信公眾號(hào)ID:TtrOpsStack(彩虹運(yùn)維技術(shù)棧社區(qū))</p>
    </body>
</html>

上述代碼，關(guān)鍵的地方是：

<html lang="zh">

進(jìn)一步剖析：

國(guó)家代碼也可以添加到lang 屬性中。前兩個(gè)字符定義HTML頁面的語言，后兩個(gè)字符定義國(guó)家。
以下示例指定中文為語言，國(guó)家為中國(guó)：

代碼如下:

<!DOCTYPE html>
<html lang="zh-Hans-CN">
    <head>
        <title>微信公眾號(hào)ID:TtrOpsStack(彩虹運(yùn)維技術(shù)棧社區(qū))</title>
        <meta charset="UTF-8" />
    </head>
    <body>
        <p style="color:red;">微信公眾號(hào)ID:TtrOpsStack(彩虹運(yùn)維技術(shù)棧社區(qū))</p>
    </body>
</html>

zh-Hans-CN是最新版本標(biāo)準(zhǔn)，其實(shí)也還是可以暫時(shí)繼續(xù)使用：zh-CN的寫法。

title屬性

說明：

title 屬性 定義有關(guān)元素的一些額外信息。
當(dāng)您將鼠標(biāo)移到元素上時(shí)，title屬性的值將顯示提示：

代碼如下：

<!DOCTYPE html>
<html lang="zh-Hans-CN">
    <head>
        <title>微信公眾號(hào)ID:TtrOpsStack(彩虹運(yùn)維技術(shù)棧社區(qū))</title>
        <meta charset="UTF-8" />
    </head>
    <body>
        <p title="公眾號(hào)ID：TtrOpsStack">彩虹運(yùn)維技術(shù)棧社區(qū)</p>
    </body>
</html>

效果如下：

寫在最后

HTML標(biāo)簽對(duì)大小寫不敏感，例如：

HTML 標(biāo)簽不區(qū)分大小寫: <P> 等同 <p>。
萬維網(wǎng)聯(lián)盟（W3C）在 HTML 4 中推薦使用小寫，而在未來 (X)HTML 版本中強(qiáng)制使用小寫。

HTML元素語法總結(jié)

HTML 元素以開始標(biāo)簽起始
HTML 元素以結(jié)束標(biāo)簽終止
元素的內(nèi)容是開始標(biāo)簽與結(jié)束標(biāo)簽之間的內(nèi)容
某些 HTML 元素具有空內(nèi)容（empty content）
空元素在開始標(biāo)簽中進(jìn)行關(guān)閉（以開始標(biāo)簽的結(jié)束而結(jié)束）
大多數(shù) HTML 元素可擁有屬性

屬性和屬性值對(duì)大小寫不敏。 title 等同 TITLE，但是建議始終使用小寫屬性，不過,W3C建議在HTML中使用小寫屬性，對(duì)于更嚴(yán)格的文檔類型（如XHTML）要求使用小寫屬性。
屬性值應(yīng)該始終被包括在引號(hào)內(nèi)。雙引號(hào)是最常用的，不過使用單引號(hào)也沒有問題。但是，W3C建議在HTML中使用單引號(hào)，并對(duì)XHTML要求更嚴(yán)格的文檔類型中使用單引號(hào)。在某些個(gè)別的情況下，比如屬性值本身就含有雙引號(hào)，那么您必須使用單引號(hào)

本篇轉(zhuǎn)載于：https://mp.weixin.qq.com/s/ESQkGSwOkRsTyBo0uPWEgQ

性為 HTML 元素提供附加信息。

HTML 屬性

HTML 標(biāo)簽可以擁有屬性。屬性提供了有關(guān) HTML 元素的更多的信息。

屬性總是以名稱/值對(duì)的形式出現(xiàn)，比如：name="value"。

屬性總是在 HTML 元素的開始標(biāo)簽中規(guī)定。

屬性實(shí)例

HTML 鏈接由 <a> 標(biāo)簽定義。鏈接的地址在 href 屬性中指定：

<a >This is a link</a>

屬性例子 1

<h1> 定義標(biāo)題的開始。

<h1 align="center"> 擁有關(guān)于對(duì)齊方式的附加信息。

屬性例子 2

<body> 定義 HTML 文檔的主體。

<body bgcolor="yellow"> 擁有關(guān)于背景顏色的附加信息。

屬性例子 3:

<table> 定義 HTML 表格。

<table border="1"> 擁有關(guān)于表格邊框的附加信息。

HTML 提示：使用小寫屬性

屬性和屬性值對(duì)大小寫不敏感。

不過，萬維網(wǎng)聯(lián)盟在其 HTML 4 推薦標(biāo)準(zhǔn)中推薦小寫的屬性/屬性值。

而新版本的 (X)HTML 要求使用小寫屬性。

始終為屬性值加引號(hào)

屬性值應(yīng)該始終被包括在引號(hào)內(nèi)。雙引號(hào)是最常用的，不過使用單引號(hào)也沒有問題。

在某些個(gè)別的情況下，比如屬性值本身就含有雙引號(hào)，那么必須使用單引號(hào)，例如：

name='Bill "HelloWorld" Gates'

下面列出了適用于大多數(shù) HTML 元素的屬性：

屬性值描述

class classname 規(guī)定元素的類名（classname）

id id 規(guī)定元素的唯一 id

style style_definition 規(guī)定元素的行內(nèi)樣式（inline style）

title text 規(guī)定元素的額外信息（可在工具提示中顯示）

在線咨詢

上一篇：「笑容征集令」獲獎(jiǎng)結(jié)果公布 - 被鏡頭定格的笑容與美
下一篇：認(rèn)識(shí) HTML5

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商