CSS 入門指南（一）CSS 概述

CSS 概述

CSS 介紹

CSS（Cascading Style Sheets）通常稱為 CSS 樣式或層疊樣式表，是一種用來為結構化文檔（如 HTML 文檔或 XML 應用）添加樣式（字體、間距和顏色等）以及版面的布局等外觀顯示樣式的計算機語言，CSS 文件擴展名為 .css。

  • 樣式：給 HTML 標簽添加需要顯示的效果。
  • 層疊：使用不同的添加方式，給同一個 HTML 標簽添加樣式，最后所有的樣式都疊加到一起，共同作用于該標簽。

CSS 可以使 HTML 頁面更好看，CSS 色系的搭配可以讓用戶更舒服，CSS + DIV 布局更佳靈活，更容易繪制出用戶需要的結構。


CSS 樣式規則

  • CSS 樣式規則需要寫在一個 **style（樣式）**標簽中

  • CSS 樣式規則由兩個主要的部分構成：選擇器，以及一條或多條聲明

    • 選擇器通常是需要改變樣式的 HTML 元素

      選擇要添加 CSS 樣式的 html 標簽的方式：根據標簽的名稱，標簽的 id 屬性值，標簽的 class 屬性值等方式

    • 每條聲明由一個屬性和一個值組成

      屬性（property）是希望給標簽設置的樣式屬性（style attribute），例如大小，顏色等。

      每個屬性有一個值。屬性和值被冒號分開。

  • 格式：

    <style type="text/css">選擇器{屬性名:屬性值;...屬性名:屬性值;}
</style>

    CSS 聲明總是以分號 ; 結束，聲明總以大括號 {} 括起來

  • CSS 注釋

    注釋是用來解釋代碼，并且可以隨意編輯它，瀏覽器會忽略它。

    CSS注釋以 /* 開始, 以 */ 結束，實例如下：

    /*這是個注釋*/

  • 示例：

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS樣式規則</title><style type="text/css">/*使用標簽選擇器:根據標簽名稱選擇到對應的標簽*/h1{/*給h1標簽添加一個字體顏色*/color: red;}h2,div{/*字體顏色*/color: blue;/*字體大小*/font-size: 50px;}</style>
</head>
<body><h1>我是一個h1標題標簽</h1><h1>我是一個h1標題標簽</h1><h1>我是一個h1標題標簽</h1><h2>我是一個h2標題標簽</h2><div>我是div標簽</div>
</body>
</html>

引入 css 樣式的方式

  • 方式1：行內樣式：在標簽上直接寫 style 屬性，屬性值就是要設置的樣式

    格式：

    <標簽 style="屬性名:屬性值;屬性名:屬性值;屬性名:屬性值;..屬性名:屬性值;"></標簽>

    作用域：只針對當前的標簽有效

  • 方式2：內部（內嵌）樣式：在頁面中創建一個 style 標簽，在標簽中寫 css 的樣式規則

    格式：

    <style type="text/css">選擇器{屬性名:屬性值;...屬性名:屬性值;}
</style>

    作用域：在當前頁面中，針對選擇器選擇到的所有標簽都有效

  • 方式3：外部（外聯）樣式：把 css 的樣式規則，寫在一個以 .css 結尾的文件中

    需要在 html 中使用 link 標簽引入外部的 css 文件使用

    格式：

    <link href="外部css文件的路徑" type="text/css" rel="stylesheet" />
    • href=“外部css文件的路徑” ：css 文件一般都放在當前項目的 css 文件夾中，所以一般使用相對路徑
    • type=“text/css” ：說明引入的文件是文本類型的 css 文件（固定寫法），可省略
    • rel=“stylesheet” ：stylesheet：樣式表，說明引入的 css 文件，是 html 文件的一個樣式表（固定寫法）

    作用域：css 文件可以被多個頁面同時引用，哪個頁面引用的，對哪個頁面中的標簽有效

  • 樣式的優先級：行內樣式 > 內部樣式|外部樣式（內部和外部寫在后邊的樣式會覆蓋前邊的樣式）

  • 示例：

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>引入css樣式的方式</title>
</head>
<!--內部(內嵌)樣式-->
<style>/*選擇所有的h1標簽*/h1{color: pink;}
</style>
<!--外部(外聯)樣式-->
<link href="css/1.css"  rel="stylesheet"/>
<body><!--1.行內樣式--><div style="color: red;font-size: 20px">我是一個div</div><div style="color: green">我是一個div</div><div style="color:yellow;">我是一個div</div><!--2.內部(內嵌)樣式--><h1 style="color: gold">我是h1標題標簽</h1><h1>我是h1標題標簽</h1>
</body>
</html>

    1.css文件

    h1{color: blue;font-size: 50px;
}

CSS 的選擇器

使用何種方式選擇要添加樣式的 html 標簽

基本選擇器（元素、id、class 選擇器）

  • 元素（標簽，標記）選擇器：根據元素（標簽，標記）的名稱，選擇對應的元素

    格式：元素（標簽，標記）的名稱{屬性名:屬性值;...}

    示例：

    <h1></h1>   	選擇器: h1{屬性名:屬性值;...}
<div></div>   	選擇器: div{屬性名:屬性值;...}

  • id 選擇器

    id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式

    需要給元素添加一個 id 屬性，通過 id 的屬性值選擇到元素

    格式：#元素id的屬性值{屬性名:屬性值;...}

    示例：

    <h1 id="d001"></h1>
<div id="d002"></div>選擇器：#d001{屬性名:屬性值;...}

    注：

    • html 標簽的 id 屬性不要以數字開頭，數字開頭的 id 在 Mozilla/Firefox 瀏覽器中不起作用

    • 不可以給多個 html 元素添加相同的 id 屬性值，id 在頁面中具有唯一性

      如果多個元素的 id 屬性值是相同的，JavaScript 可能會出錯

  • class（類）選擇器

    class 選擇器用于描述一組元素的樣式，class 選擇器有別于 id 選擇器，class 可以在多個元素中使用

    需要給元素添加一個 class 屬性，通過 class 的屬性值選擇到元素

    格式：.元素的class屬性值{屬性名:屬性值;...}

    示例：

    <h1 class="c001"></h1>
<div class="c001"></div>選擇器: .c001{屬性名:屬性值;...}

    注：

    • **類名的第一個字符不能使用數字！**它無法在 Mozilla 或 Firefox 中起作用。

    • 多個 class 選擇器可以使用空格分開

    • 可以指定特定的 HTML 元素使用 class

      例如：所有的 p 元素使用 class=“center” 讓該元素的文本居中

      p.center {text-align:center;}

  • 案例

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的選擇器</title>
</head><style>/*1.元素(標簽,標記)選擇器*/h1{color: red;}a{color: green;}/*2.id選擇器*/#d001{color: #880088;}/*2.class(類)選擇器*/.c001{color: chocolate;}</style>
<body><!--元素(標簽,標記)選擇器--><h1>標題標簽</h1><h1>標題標簽</h1><a href="#">我是一個超鏈接標簽</a><a href="#">我是一個超鏈接標簽</a><!--id選擇器--><div id="d001">我是一個div</div><h2 id="d002">我是一個h2標題標簽</h2><!--class(類)選擇器--><div class="c001">我是一個div</div><h2 class="c001">我是一個h2標題標簽</h2>
</body>
</html>

擴展選擇器（屬性、包含、偽類選擇器）

  • 屬性選擇器：在一個標簽選擇器后面使用中括號標記，是對一組標簽進一步過濾

    語法格式：標簽選擇器[標簽屬性=’標簽屬性值’]{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

  • 包含選擇器：兩個標簽之間使用空格，給指定父標簽的后代標簽設置樣式，是對一個標簽內部所有后代標簽進一步過濾

    格式：父標簽選擇器 后代標簽選擇器{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

  • 案例：

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的擴展選擇器</title><style>/*input{!*背景色*!background-color: green;}*//*給type="text"標簽添加樣式*/input[type='text']{background-color: green;}/*給type="password"標簽添加樣式*/input[type='password']{background-color: pink;}/*2.包含選擇器(子父類選擇器)*//*給div中的div添加樣式*/div div{color: yellow;}#d001 h3{color: aqua;}</style>
</head>
<body><!--1.屬性選擇器--><input type="text" name="username"/><input type="password" name="password"/><!--2.包含選擇器(子父類選擇器)--><div>我是div</div><div id="d001"><div>我是div中的div</div><h3>我是div中的h3</h3></div>
</body>
</html>

偽類選擇器

  • 偽類選擇器：描述一個元素的特殊狀態

    由于狀態的變化是非靜態的，所以元素達到一個特定狀態時，它可能得到一個偽類的樣式；當狀態改變時，它又會失去這個樣式。由此可以看出，它的功能和 class 有些類似，但它是基于文檔之外的抽象，所以叫偽類。

  • 常用的偽類選擇器：

    • 動態偽類選擇器

      • :link ：元素被定義了超鏈接但并未被訪問過
      • :visited ：元素被定義了超鏈接并已被訪問過
      • :active ：元素被激活
      • :hover ：鼠標懸停
      • :focus ：元素獲取焦點

      注：在 CSS 定義中，a:hover 必須被置于 a:link 和 a:visited 之后；a:active 必須被置于 a:hover 之后。所以，a 標簽的這四種偽類選擇器的順序為：a:link ，a:visited，a:hover ，a:active。必須嚴格按照此規則來設置屬性，否則無效。

    • UI 元素狀態偽類選擇器

      • :checked ：選中的復選按鈕或者單選按鈕表單元素
      • :enabled ：所有啟用的表單元素
      • :disabled ：所有禁用的表單元素

      注：UI 元素狀態偽類選擇器主要是針對 Form 表單元素進行操作，最常見的使用方式如設置 "type=“text” 有 enable 和 disabled 兩種狀態，enable 為可寫狀態，disabled 為不可狀態。

    • 結構偽類選擇器

      • :fisrt-child ：父元素的第一個子元素
      • :last-child ：父元素的最后一個子元素的元素
      • :root ：元素所在文檔的根元素。在 HTML 文檔中，根元素始終是 html，此時該選擇器與 html 類型選擇器匹配的內容相同
      • :nth-child(n) ：父元素的第 n 個子元素。其中 n 可以是整數（1，2，3）、關鍵字（even，odd）、也可以是公式（2n+1）,而且 n 值起始值為 1，而不是 0。
      • :nth-last-child(n) ：父元素的倒數第 n 個子元素。此選擇器與 :nth-child(n) 選擇器計算順序剛好相反，但使用方法都是一樣的，其中 :nth-last-child(1) 始終匹配最后一個元素，與 last-child 等同。
      • :nth-of-type(n) ：父元素內具有指定類型的第 n 個元素
      • :nth-last-of-type(n) ：父元素內具有指定類型的倒數第 n 個元素
      • :first-of-type ：父元素內具有指定類型的第一個元素，與 nth-of-type(1) 等同
      • :last-of-tye ：父元素內具有指定類型的最后一個元素，與 :nth-last-of-type(1) 等同
      • :only-child ：父元素只包含一個子元素，且該子元素匹配元素
      • :only-of-type ：選擇父元素只包含一個同類型子元素，且該子元素匹配選擇元素
      • :empty ：選擇沒有子元素的元素，而且該元素也不包含任何文本節點

      注：使用結構偽類選擇器的好處是可以根據元素在文檔中所處的位置，來動態地選擇元素，從而減少 HTML 文檔對 id 或類的依賴，有助于保持代碼干凈整潔。另外需要注意的是，在結構偽類選擇器中，子元素的序號是從 1 開始的。

    • 否定偽類選擇器

      • E:not(F) ：選擇所有除元素 F 外的 E 元素

    • 案例：

      <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS的擴展選擇器</title><style>/*偽類選擇器*/  a:link {color: #FF0000}	/* 未訪問的鏈接 */a:visited {color: #00FF00}	/* 已訪問的鏈接 */a:hover {color: #FF00FF}	/* 鼠標移動到鏈接上 */a:active {color: #0000FF}	/* 選定的鏈接 */</style>
</head>
<body><a href="http://www.itcast.cn" target="_blank">點擊我到傳智</a>
</body>
</html>

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

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

相關文章

《MySQL數據庫》day1

《MySQL數據庫》day1

文章目錄 1.名詞解釋2.如何啟動mysql數據庫3.mysql常用命令4.數據庫當中最基本的單元是表&#xff1a;table5.關于SQL語句的分類6.簡單查詢7.條件查詢8.排序9.數據處理函數單行處理函數常見的有哪些&#xff1f; 10.分組函數&#xff08;多行處理函數&#xff09; 1.名詞解釋 …
閱讀更多...
VUE2與VUE3之間的主要區別

VUE2與VUE3之間的主要區別

當談到 Vue.js 的版本時&#xff0c;Vue 2 和 Vue 3 是最常被提及的兩個版本。下面是 Vue 2 和 Vue 3 之間的一些主要區別&#xff1a; 1. 性能提升&#xff1a; Vue 3 在底層核心重寫了響應式系統&#xff0c;采用了 Proxy 對象&#xff0c;大幅提高了性能。Vue 3 還引入了靜…
閱讀更多...
徹底解決華為手機安裝谷歌框架后出現未認證的彈窗問題

徹底解決華為手機安裝谷歌框架后出現未認證的彈窗問題

引言 本人使用華為手機通過B站等平臺學習如何安裝谷歌框架與商店后&#xff0c;發現安裝谷歌框架后出現未認證的彈窗問題少有解決辦法&#xff0c;而且容易復發&#xff0c;在借鑒相關視頻后找到解決辦法&#xff0c;但視頻中的華谷框架需要付費才能使用&#xff0c;本文將提出…
閱讀更多...
spring注解驅動系列--自動裝配

spring注解驅動系列--自動裝配

Spring利用依賴注入&#xff08;DI&#xff09;&#xff0c;完成對IOC容器中中各個組件的依賴關系賦值&#xff1b;依賴注入是spring ioc的具體體現&#xff0c;主要是通過各種注解進行屬性的自動注入。 一、Autowired&#xff1a;自動注入 一、注解介紹 1、默認優先按照類型去…
閱讀更多...
高中數學：函數奇偶性

高中數學：函數奇偶性

一、定義 偶函數&#xff1a;定義域關于原點對稱&#xff0c;圖像關于Y軸對稱 f(x)f(-x) 奇函數&#xff1a;定義域關于原點對稱&#xff0c;圖像關于原點中心對稱 f(x)f(-x)0 等價于 f(-x)-f(x) 二、函數奇偶性的四種情況 注意&#xff1a; 即奇又偶的函數&#xff0c;只有…
閱讀更多...
Linux入門到入土

Linux入門到入土

Linxu Linux 簡介 Linux 內核最初只是由芬蘭人林納斯托瓦茲&#xff08;Linus Torvalds&#xff09;在赫爾辛基大學上學時出于個人愛好而編寫的。 Linux 是一套免費使用和自由傳播的類 Unix 操作系統&#xff0c;是一個基于 POSIX&#xff08;可移植操作系統接口&#xff09…
閱讀更多...
【復現】宏景HCM 任意文件讀取漏洞_63

【復現】宏景HCM 任意文件讀取漏洞_63

目錄 一.概述 二 .漏洞影響 三.漏洞復現 1. 漏洞一&#xff1a; 四.修復建議&#xff1a; 五. 搜索語法&#xff1a; 六.免責聲明 一.概述 宏景HCM 將人才標簽技術應用于員工招聘、人才選拔等環節&#xff0c;通過多維度的標簽體系&#xff0c;形成不同專業序列的人才畫…
閱讀更多...
CV | 醫學影像上的圖像分割模型調研【更新于20240304】

CV | 醫學影像上的圖像分割模型調研【更新于20240304】

mamba相關的圖像分割&#xff1a;VM-Unet,Manba-Unet,BRAU-Net,MDD-Unet,EGE-Unet,U-Mamba 2024.01.01_BRAU-Net Paper:BRAU-Net: U-Shaped Hybrid CNN-Transformer Network for Medical Image Segmentation https://arxiv.org/pdf/2401.00722.pdf 2024.01.09_U-Mamba Paper:U…
閱讀更多...
猴子吃桃問題（python版）

猴子吃桃問題（python版）

文章預覽&#xff1a; 題目python解法一&#xff1a;運行結果 python解法二&#xff1a;運行結果 python解法三&#xff1a;運行結果 題目 猴子吃桃問題&#xff1a;猴子第一天摘下若干個桃子&#xff0c;當即吃了一半&#xff0c;還不過癮&#xff0c;又多吃了一個。 第二天早…
閱讀更多...
python 腳本設置輸出顏色

python 腳本設置輸出顏色

在Python腳本中設置輸出顏色&#xff0c;通常可以使用colorama庫&#xff0c;它可以在Windows、Linux和macOS等平臺上工作。colorama庫擴展了Python的標準庫&#xff0c;使得在控制臺輸出彩色文本更加簡單。 首先&#xff0c;你需要安裝colorama庫。如果你還沒有安裝&#xff…
閱讀更多...
數據倉庫 vs. 數據湖：解析兩者的區別與優劣

數據倉庫 vs. 數據湖：解析兩者的區別與優劣

在當今數字化時代&#xff0c;數據成為了企業最寶貴的資產之一。為了更好地管理和利用數據&#xff0c;企業需要建立合適的數據存儲和管理系統。在這個過程中&#xff0c;數據倉庫和數據湖成為了兩種常見的選擇。雖然它們都旨在幫助企業管理數據&#xff0c;但在實際應用中&…
閱讀更多...
flurl升級之后沒有FlurlNewtonsoftJsonSerializer

flurl升級之后沒有FlurlNewtonsoftJsonSerializer

新建NewtonsoftJsonSerializer.cs /// <summary> /// ISerializer implementation based on Newtonsoft.Json. /// Default serializer used in calls to GetJsonAsync, PostJsonAsync, etc. /// </summary> public class NewtonsoftJsonSerializer : IJsonSerial…
閱讀更多...
Qt 簡約美觀的加載動畫 第九季

Qt 簡約美觀的加載動畫 第九季

這次和大家分享6個非常清爽的加載動畫. &#x1f60a; 效果如下 &#x1f60a; 一共三個文件 , 可以直接編譯運行的呢 //main.cpp #include "LoadingAnimWidget.h" #include <QApplication> #include <QGridLayout> int main(int argc, char *argv[]) …
閱讀更多...
原理篇-- 定時任務xxl-job-服務端(admin)項目啟動過程--JobTriggerPoolHelper 初始化 (3)

原理篇-- 定時任務xxl-job-服務端(admin)項目啟動過程--JobTriggerPoolHelper 初始化 (3)

文章目錄 前言一、JobTriggerPoolHelper 作用&#xff1a;二、JobTriggerPoolHelper 源碼介紹&#xff1a;2.1. start() 方法&#xff1a;2.2 任務觸發&#xff1a;2.3 XxlJobTrigger.trigger 任務執行&#xff1a;2.4 processTrigger 任務的執行&#xff1a;2.5 runExecutor 任…
閱讀更多...
【JAVA重要知識 | 第三篇】深入理解并暴打AQS原理、ReentrantLock鎖

【JAVA重要知識 | 第三篇】深入理解并暴打AQS原理、ReentrantLock鎖

文章目錄 3.深入理解AQS、ReentrantLock3.1AQS3.1.1AQS簡介3.1.2核心結構&#xff08;1&#xff09;設計模型&#xff08;2&#xff09;組成部分&#xff08;3&#xff09;State關鍵字 3.1.3實現的兩類隊列&#xff08;1&#xff09;同步隊列①CLH②Node③主要行為 img條件隊列…
閱讀更多...
中霖教育：注冊安全工程師考是科目有哪些?

中霖教育：注冊安全工程師考是科目有哪些?

注冊安全工程師的類型是職業資格證書&#xff0c;需要滿足報名條件才能參加考試&#xff0c;考試通過就能發放證書。報名時間一般在八月份&#xff0c;考試時間在十月底左右。 考試科目&#xff1a; 《安全生產法律法規》 《安全生產管理》 《安全生產技術基礎》 《安全生…
閱讀更多...
golang實現openssl自簽名雙向認證

golang實現openssl自簽名雙向認證

第一步&#xff1a;生成CA、服務端、客戶端證書 1. 生成CA根證書 生成CA證書私鑰 openssl genrsa -out ca.key 4096創建ca.conf 文件 [ req ] default_bits 4096 distinguished_name req_distinguished_name[ req_distinguished_name ] countryName …
閱讀更多...
Node.js基礎---Express路由

Node.js基礎---Express路由

1. 路由的概念 1. 什么是路由 廣義上來講&#xff0c;路由就是映射關系 2. Express 中的路由 在 Express 中&#xff0c;路由指的是客戶端的請求與服務器處理函數之間的映射關系 Express 中的路由分三部分&#xff1a;請求的類型、請求的URL地址&#xff0c;處理函數。如下&am…
閱讀更多...
怎么使用curl2py自動構造爬蟲代碼并進行網絡爬蟲

怎么使用curl2py自動構造爬蟲代碼并進行網絡爬蟲

目錄 一、了解curl2py 二、安裝curl2py 三、使用curl2py生成爬蟲代碼 四、實際案例&#xff1a;爬取網頁數據 五、總結與建議 在當今數據驅動的時代&#xff0c;網絡爬蟲成為了獲取數據的重要工具。對于初學者來說&#xff0c;手動編寫爬蟲代碼可能是一項挑戰。幸運的是&a…
閱讀更多...
PyTorch-神經網絡

PyTorch-神經網絡

神經網絡&#xff0c;這也是深度學習的基石&#xff0c;所謂的深度學習&#xff0c;也可以理解為很深層的神經網絡。說起這里&#xff0c;有一個小段子&#xff0c;神經網絡曾經被打入了冷宮&#xff0c;因為SVM派的崛起&#xff0c;SVM不了解的同學可以去google一下&#xff0…
閱讀更多...
最新文章

Copyright @ 2022~2023