Java—HTML：CSS選擇器

? ? ?今天我要介紹的知識點內容是Java? HTML中的CSS選擇器；

? ? ?CSS選擇器用于定位HTML元素并為其添加樣式。它允許我們控制網頁的顏色、字體、布局和其他視覺元素。通過分離內容與樣式。

下面我將介紹CSS中選擇器的使用，并作舉例說明；

選擇器基本語法：

selector {property: value;
}
  1. Selector（選擇器）： 指定要應用樣式的HTML元素。
  2. Property（屬性）： 定義樣式的方面，如顏色、字體大小等。
  3. Value（值）： 屬性的具體設定值。

例：

p { color: blue; }

注解：這條規則會將所有設置<p>標簽內的文本顏色設置為藍色

  1. 字體樣式屬性:

在網頁設計中，字體的選擇和樣式對于用戶體驗至關重要。

font-family；

定義與用法：

font-family:指定一個或多個備用字體系列，或者是通用字體系列名稱。

注意：當瀏覽器無法使用第一個字體時，它會嘗試下一個字體，直到找到可用的字體。

語法：

font-family: "字體名稱", fallback, ...;

  • 場景模擬1：

例：

   h1{color:darkgreen}p{/* 字體顏色 */color:blue;/* 字體風格 *//* font-family:'Courier New',Courier, monospae;}

生效代碼塊：

</head><body><h1>lover all</h1><p>forever</p><p>forever</p><p>forever</p><p>forever</p><p>forever</p></body>
</html>

最終呈現：（CSS樣式（顏色變化））

對比：

這是沒有加入樣式的效果：

這是加入樣式后的效果：

font-size；

定義與用法：

font-size屬性設置字體大小。

可以使用絕對單位（如像素px）、相對單位（如百分比%、em、rem），也可以使用關鍵字（如small, medium, large等）。

語法：

font-size: size;

例：

<style>h1{color: darkgreen;}p{color: blue;font-family: 'Courier New', Courier, monospace;font-size:20px;字體大小（如像素px）、相對單位（如百分比%、em、rem），也可以使用關鍵字（如small, medium, large等）}</style>

見效果如下：

注：可以看到字體變化的明顯，數值越大字越大，反過來也是。

font-weight

定義與用法：

font-weight屬性設置字體粗細。

可以使用數字（從100到900，400等于正常，700等于加粗）或者關鍵字（如normal、bold）。

語法：

font-weight: weight;

例：

?h1{color: darkgreen;}p{color: blue;font-family: 'Courier New', Courier, monospace;font-size:20px;font-weight: 600;//字體粗細，從100到900，400等于正常，400以下則比正常還要細小，700等于加粗}??

見效果如下：

font-style

定義與用法：

font-style屬性設置字體風格，通常用于斜體化文本。

可能的值包括normal（默認）、italic（斜體）和oblique（傾斜）。

語法：

font-style: style;

例：

?h1{color: darkgreen;}p{color: blue;font-family: 'Courier New', Courier, monospace;font-size:20px;font-weight: 600;font-style: italic;}?

見效果如下：

line-height

定義與用法：

line-height屬性設置行高，即行與行之間的距離。可以通過數值、百分比或長度單位來指定。

語法：

line-height: height;

例：

            h1{color: darkgreen;}p{color: blue;font-family: 'Courier New', Courier, monospace;font-size:20px;font-weight: 600;font-style: italic;line-height: 40px;}

見效果如下：

只需要設置20單位值即可；? ==》line-height:20px;

內聯樣式

直接在HTML標簽內使用style屬性定義樣式。適用于需要特別處理的個別元素。

例：

<p style="color:green;">這段文字是綠色的。</p>

內部樣式表

在HTML文檔的<head>部分使用<style>標簽定義樣式。適用于整個頁面的一般樣式。

例：

<head><style>p { color: red; }</style>

外部樣式表

創建獨立的.css文件，在指定頁面中通過<link>標簽鏈引入外部樣式表。適用于多個頁面共享的樣式。

<link rel="stylesheet" type="text/css" href="styles.css">

注：內聯樣式的優先級高于內部和外部樣式表

基本選擇器：

標簽選擇器

定義與用法：

標簽選擇器是最基礎的選擇器，用于針對特定HTML標簽的所有實例應用樣式。當你想要統一改變某類元素的外觀時使用它。

特點：

  1. 簡單直接，作用于所有同類標簽。
  2. 不推薦用于特定化樣式，因為它影響范圍太廣。

使用場景：

  • 統一設置所有段落、標題或鏈接的樣式。

例：

<!DOCTYPE html>
<html>
<head><style>p { color: blue; } /* 設置所有<p>標簽內的文本顏色為藍色 */</style>
</head>
<body><p>這段文字是藍色的。</p>
<p>這段文字也是藍色的。</p></body>
</html>

見效果如下：

?注：標簽選擇器：針對同一類的標簽，應用同一種樣式

類選擇器

定義與用法：

以.開頭，后跟類名。它可以應用于任意數量的HTML元素，提供了一種復用樣式的方法。

特點：

  1. 可重復使用，靈活度高。
  2. 可以與其他選擇器組合使用，增強選擇能力。

使用場景：

  1. 當你需要對多個不同類型的元素應用相同的樣式時。
  2. 對特定區域或組件進行樣式定制。

例：

  1. <!DOCTYPE html>
<html>
<head><style>.highlight { background-color: yellow; } /* 設置所有具有.highlight類的元素背景色為黃色 */</style>
</head>
<body><p class="highlight">這段文字有黃色背景。</p>
<div class="highlight">這個div也有黃色背景。</div></body>
</html>

見效果如下：

?注：類選擇器：以.開頭，后面跟著類名，在標簽中使用class屬性來使用

ID選擇器

定義與用法：

以#開頭，后跟ID名稱。它只能應用于單個HTML元素，因為ID在同一頁面上應該是唯一的。

特點：

  1. 高優先級，通常用于非常具體的情況。

  2. 適合頁面上的獨特元素。

使用場景：

  • 對頁面上的唯一元素進行樣式定制。

例：

<!DOCTYPE html>
<html>
<head><style>#mainTitle { color: red; } /* 設置id為mainTitle的元素文本顏色為紅色 */</style>
</head>
<body><h1 id="mainTitle">這是主標題</h1>
<p>這是一個普通的段落。</p></body>
</html>

見效果如下：

?注：ID選擇器：以#開頭，后跟ID名稱，在標簽中使用id屬性來使用

高級選擇器

后代選擇

定義與用法：

使用空格分隔兩個選擇器，選擇第一個選擇器內部的所有后代元素。

特點：

  • 作用范圍較廣，可以選擇所有層次結構中的后代元素。

使用場景：

  • 對嵌套結構中的元素應用樣式。

例：

<!DOCTYPE html>
<html>
<head><style>div p { color: orange; } /* 設置所有位于<div>內的<p>元素文本顏色為橙色 */</style>
</head>
<body><div><p>這段文字是橙色的。</p><span><p>這段文字也是橙色的。</p></span>
</div></body>
</html>

見效果如下：

子代選擇器

定義與用法：

使用>符號，選擇直接子元素。

特點：

  • 作用范圍限于直接子元素，不包括更深的后代元素。

使用場景：

  • 對直接子元素進行精確控制。

例:

<!DOCTYPE html>
<html>
<head><style>ul > p { color: orange; } /* 設置所有作為<ul>直接子元素的<p>元素字體為橙色 */</style>
</head>
<body>
<ul><p>這個列表項是斜體。</p><li>這個列表項是斜體。</li><li><p>這個段落不是斜體。</p></li>
</ul>
</body>
</html>

見效果如下：

相鄰兄弟選擇器

定義與用法：

使用+符號，選擇緊隨其前一個元素之后的同級元素。

特點：

  • 只選擇緊跟在前一個元素后的下一個兄弟元素。

使用場景：

  • 對連續出現的同級元素進行樣式調整。

例：

<!DOCTYPE html>
<html>
<head><style>h1 + p { color: green; } /* 設置緊跟在<h1>后的第一個<p>元素文本顏色為綠色 */</style>
</head>
<body><h1>這是一個標題</h1>
<p>這段文字是綠色的。</p>
<p>這段文字不是綠色的。</p></body>
</html>

見效果如下：

?注：相鄰兄弟選擇器：使用+符號，選擇緊隨其前一個元素之后的同級元素

通用兄弟選擇器

定義與用法：

使用~符號，選擇所有位于前一個元素之后的同級元素。

特點：

  • 選擇所有后續兄弟元素，不限于緊接的下一個。

使用場景：

  • 對一組同級元素進行樣式調整。

例：

<!DOCTYPE html>
<html>
<head><style>h1 ~ p { color: purple; } /* 設置所有位于<h1>之后的<p>元素文本顏色為紫色 */</style>
</head>
<body><h1>這是一個標題</h1>
<p>這段文字是紫色的。</p>
<p>這段文字也是紫色的。</p></body>
</html>

見效果如下：

?注：通用兄弟選擇器：使用~符號，選擇所有位于前一個元素之后的同級元素

屬性選擇器（Attribute Selectors）

定義與用法：

根據元素的屬性或屬性值來選擇元素。

a[target]會選擇所有具有target屬性的<a>元素，input[type="text"]會選擇所有類型為text的<input>元素。

特點：

  • 提供了對特定屬性的精準選擇。

使用場景：

  • 對帶有特定屬性的元素進行樣式調整

例：

<!DOCTYPE html>
<html>
<head><style>a[target="_blank"] { color: purple; } /* 設置所有target屬性為"_blank"的<a>元素文本顏色為紫色 */</style>
</head>
<body><a href="http://example.com" target="_blank">超鏈接顏色設置。</a>
<a href="http://example.com">未曾設置超鏈接顏色。</a></body>
</html>

?見效果如下：

?注：屬性選擇器：根據元素的屬性或屬性值來選擇元素。

?總結：

? ? ? 希望以上有關于JavaHTML?的CSS內容知識點能給你帶來一定的幫助，同時非常感謝各位大佬的點贊與支持，我們下一篇不見不散

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/pingmian/76394.shtml
繁體地址，請注明出處：http://hk.pswp.cn/pingmian/76394.shtml
英文地址，請注明出處：http://en.pswp.cn/pingmian/76394.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

【2025藍橋杯】賽前2小時考點梳理C++版

【2025藍橋杯】賽前2小時考點梳理C++版

【2025藍橋杯】賽前2小時考點梳理 1. &#x1f9e9; STL&#xff08;優先級最高&#xff09; 核心容器/函數 vector push_back() / pop_back() / size()string substr(pos, len) / find(str) / queue push() / front() / pop()priority_queue 默認大根堆&#xff0c;小根堆&…
閱讀更多...
汽車性能的幕后保障：慧通測控電動尾翼綜合力學測試淺析

汽車性能的幕后保障：慧通測控電動尾翼綜合力學測試淺析

在汽車性能不斷追求極致的當下&#xff0c;電動尾翼已成為眾多高性能車型以及部分新能源汽車提升空氣動力學表現與操控穩定性的關鍵配置。從炫酷的超跑到注重續航與駕駛體驗的新能源車&#xff0c;電動尾翼正逐漸嶄露頭角。它絕非僅僅是外觀上的裝飾&#xff0c;而是能在車輛行…
閱讀更多...
2、文件上傳漏洞的防范

2、文件上傳漏洞的防范

原文地址:文件上傳漏洞的防范 更多內容請關注&#xff1a;代碼安全 PHP安全編碼——書寫安全的代碼 文件上傳漏洞的防范 提問 問題1&#xff1a;上傳漏洞是怎么產生的&#xff1f; 問題2&#xff1a;是否可以只用js判斷文件類型而php不判斷&#xff1f; 問題3&#…
閱讀更多...
06軟件測試需求分析案例-添加用戶

06軟件測試需求分析案例-添加用戶

給職業顧問部的老師添加用戶密碼后&#xff0c;他們才能登錄使用該軟件。只有admin賬戶具有添加用戶、修改用戶信息、刪除用戶的權利。admin是經理或團隊的第一個人的賬號&#xff0c;后面招一個教師就添加一個賬號。 通讀需求是提取信息&#xff0c;提出問題&#xff0c;輸出…
閱讀更多...
Ex-Human：在DigitalOcean云平臺之上，構建下一代 AI 數字人

Ex-Human：在DigitalOcean云平臺之上，構建下一代 AI 數字人

Ex-Human 正在通過創造極具吸引力和富有同理心的人工智能角色&#xff0c;重新定義人們與人工智能的互動方式。該公司由 Artem Rodichev 創立&#xff0c;讓用戶能夠通過文本、圖像、視頻和音頻創建能互動的獨一無二的數字人物。憑借每月超過一百萬的活躍用戶和五百萬個定制創建…
閱讀更多...
從零實現HTTP服務器

從零實現HTTP服務器

響應&#xff1a; 第一部分測試代碼&#xff0c;讀取請求 Makefile binhttpserver #生成的可執行程序 ccg #編譯器名稱 LD_FLAGS-stdc11 -lpthread #-DDEBUG1 #鏈接選項 srcmain.cc$(bin):$(src)$(cc) -o $ $^ $(LD_FLAGS).PHONY:clean clean:rm -f $(bin) 1111111 main.cc…
閱讀更多...
構建高可靠C++服務框架：從日志系統到任務調度器的完整實現

構建高可靠C++服務框架：從日志系統到任務調度器的完整實現

構建高可靠C服務框架&#xff1a;從日志系統到任務調度器的完整實現 一、深度解析示例代碼技術體系 1.1 日志系統的進階應用 示例代碼中的ZRY_LOG_XXX宏展示了基礎日志功能&#xff0c;但在生產環境中我們需要更完善的日志系統&#xff1a; 推薦技術棧組合&#xff1a; sp…
閱讀更多...
小張的工廠進化史——工廠模式

小張的工廠進化史——工廠模式

小張的工廠進化史——工廠模式 一、簡單工廠模式&#xff1a;全能生產線二、工廠方法模式&#xff1a;分品牌代工三、抽象工廠模式&#xff1a;生態產品族四、三種模式核心對比表五、結合Spring實現簡單工廠&#xff08;實踐&#xff09; 小張從華強北起家&#xff0c;最初只有…
閱讀更多...
Python中的eval()函數詳解

Python中的eval()函數詳解

文章目錄 Python中的eval()函數詳解基本語法基本用法安全性問題安全使用建議實際應用場景與exec()的區別性能考慮總結 Python中的eval()函數詳解 eval()是Python的一個內置函數&#xff0c;用于執行字符串形式的Python表達式并返回結果。它是一個強大但需要謹慎使用的函數。 …
閱讀更多...
銀行業務發展歷史

銀行業務發展歷史

銀行業務發展歷史 銀行業務的發展可以追溯到古代&#xff0c;但其現代形式的發展可以追溯到中世紀。以下是銀行業務發展的主要歷史階段&#xff1a; 1. 古代和中世紀時期 特點&#xff1a;商人提供貸款和存款服務&#xff0c;充當中間人轉移資金&#xff0c;發行紙幣作為支付…
閱讀更多...
SQL實戰篇，數據庫在Kooboo中的實際應用（一）

SQL實戰篇，數據庫在Kooboo中的實際應用（一）

本文將結合實際操作與代碼示例&#xff0c;展示SQL 在 Kooboo 中的實際應用 僅需兩步&#xff1a;動態創建表 基礎查詢&#xff0c;無需復雜配置&#xff0c;快速上手&#xff01; 一、動態創建表&#xff1a;插入數據 Kooboo 支持多種數據庫&#xff0c;以 SQLite 為例&…
閱讀更多...
克魔助手(Kemob)安裝與注冊完整教程 - Windows/macOS雙平臺指南

克魔助手(Kemob)安裝與注冊完整教程 - Windows/macOS雙平臺指南

iOS設備管理工具克魔助手便攜版使用全指南 前言&#xff1a;為什么需要專業的iOS管理工具 在iOS開發和設備管理過程中&#xff0c;開發者經常需要突破系統限制&#xff0c;實現更深層次的控制和調試。本文將詳細介紹一款實用的便攜式工具的使用方法&#xff0c;幫助開發者快速…
閱讀更多...
搜索插入位置 -- 二分查找

搜索插入位置 -- 二分查找

目錄 一&#xff1a;題目 二:算法原理 三&#xff1a;代碼分析 一&#xff1a;題目 題目鏈接&#xff1a;35. 搜索插入位置 - 力扣&#xff08;LeetCode&#xff09; 二:算法原理 三&#xff1a;代碼分析 class Solution { public:int searchInsert(vector<int>&am…
閱讀更多...
Apache Doris內存與超時參數配置詳解

Apache Doris內存與超時參數配置詳解

一、查詢任務內存限制調整 1. ?默認內存限制與問題定位 Apache Doris默認限制單個BE節點上的查詢任務內存使用不超過2GB&#xff08;即exec_mem_limit2147483648字節&#xff09;。當復雜查詢或大規模數據操作超過此限制時&#xff0c;會觸發Memory limit exceeded錯誤。通過…
閱讀更多...
龍虎榜——20250411

龍虎榜——20250411

今天縮量&#xff0c;上方壓力依然在&#xff0c;外圍還在升級&#xff0c;企穩還需要時日。 2025年4月11日龍虎榜行業方向分析 一、核心主線方向 半導體與芯片&#xff08;國產替代加速&#xff09; ? 代表標的&#xff1a;圣邦股份&#xff08;模擬芯片&#xff09;、中電…
閱讀更多...
若依前后端分離版本從mysql切換到postgresql數據庫

若依前后端分離版本從mysql切換到postgresql數據庫

一、修改依賴&#xff1a; 修改admin模塊pom.xml中的依賴,屏蔽或刪除mysql依賴&#xff0c;增加postgresql依賴。 <!-- Mysql驅動包 --> <!--<dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId> &l…
閱讀更多...
自定義排序注意點

自定義排序注意點

這段 Java 代碼展示了兩種排序方式的用法&#xff0c;分別是&#xff1a; 對普通數組進行排序&#xff08;Integer[] nums&#xff09;對對象數組進行排序&#xff08;Student[] students&#xff09; 我來一步步給你講清楚&#xff1a; ? 第1部分&#xff1a;普通數組降序排…
閱讀更多...
第十四屆藍橋杯大賽軟件賽省賽C/C++ 大學 A 組真題

第十四屆藍橋杯大賽軟件賽省賽C/C++ 大學 A 組真題

文章目錄 1 幸運數題目描述&#xff1a;答案&#xff1a;4430091 代碼&#xff1a; 2 有獎問答題目描述&#xff1a;重點&#xff1a;答案&#xff1a;8335366 代碼&#xff1a; 3 平方差題目描述&#xff1a;思路&#xff1a;數學找規律代碼&#xff1a; 4 更小的數題目描述&a…
閱讀更多...
C++ 入門四：類與對象 —— 面向對象編程的核心基石

C++ 入門四：類與對象 —— 面向對象編程的核心基石

一、類的定義 1. 類的基本形式 class 類名 { public: // 公有成員&#xff08;類內外均可訪問&#xff09;數據類型 數據成員; // 公有數據成員數據類型 成員函數(參數列表); // 公有成員函數聲明 protected: // 保護成員&#xff08;類內和派生類可訪問&…
閱讀更多...
嵌入式---電機分類

嵌入式---電機分類

一、按電流類型分類&#xff08;最基礎分類&#xff09; 1. 直流電機&#xff08;DC Motor&#xff09; 工作原理&#xff1a;通過換向器&#xff08;有刷&#xff09;或電子換向&#xff08;無刷&#xff09;將直流電源轉換為交變磁場&#xff0c;驅動轉子旋轉。 核心特點&a…
閱讀更多...
最新文章

Copyright @ 2022~2023