當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

css的学习

發布時間：2023/12/3 编程问答 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 css的学习小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

文章目錄

內聯樣式
內部樣式
外部樣式
CSS語法格式
選擇器
- 基本選擇器
- - ID 選擇器
  - 元素選擇器
  - 類選擇器
  - - 不帶標簽名
    - 帶標簽名
  - 通用選擇器
  - 并集選擇器
  - 選擇器的優先級
- 擴展選擇器
- - 組合選擇器
  - 屬性選擇器
  - 偽類選擇器
  - 偽元素選擇器

css 是 Cascading Style Sheets，層疊樣式表。
層疊含義是多種樣式可以作用于同一個html元素上，且都會有獨立的表現效果。

內聯樣式

在標簽內使用 style 屬性指定 css 代碼。

<div style="color:red;">hello css</div>

內聯樣式不推薦使用，因為表現和內容耦合在一起，不好維護。

內部樣式

在 head 標簽內定義 style 標簽，style 的標簽體內容就是 css 代碼。

<head> <style> div{color:blue;} </style> </head>

外部樣式

在 head 標簽內定義 link 標簽，引入外部的 css 資源文件。

或者

<head> <style> @import “css/1.css”； </style> </head>

CSS語法格式

選擇器 {屬性名1: 屬性值1屬性名2: 屬性值2屬性名3: 屬性值3... }

選擇器：篩選具有相同特征的元素。
屬性對：屬性名和屬性值使用冒號分隔，而屬性對之間使用分號分隔。

選擇器

基本選擇器

基本選擇器也叫簡單選擇器，點擊查看更多詳情。

ID 選擇器

語法：

#id屬性值{}

例如：

元素選擇器

直接寫標簽名，語法：

標簽名稱 {屬性名1: 屬性值1屬性名2: 屬性值2屬性名3: 屬性值3... }

類選擇器

不帶標簽名

語法：

.class屬性值 {屬性名1: 屬性值1屬性名2: 屬性值2屬性名3: 屬性值3... }

說明：將樣式作用于 class 屬性值匹配的元素上

帶標簽名

語法：

標簽名稱.class屬性值 {屬性名1: 屬性值1屬性名2: 屬性值2屬性名3: 屬性值3... }

說明：上面的選擇器，是將樣式作用于標簽名稱和 class 屬性值都匹配的元素上。

通用選擇器

通用選擇器（*）選擇頁面上的所有的 HTML 元素。

語法：

* {屬性名1: 屬性值1屬性名2: 屬性值2屬性名3: 屬性值3... }

并集選擇器

并集選擇器也叫分組選擇器。

選取 h1，h2，h3 元素，將它們的文本顏色設為 green：

h1, h2, h3 { color: green; }

選取 id 值分別為 name，password，age 的元素，將它們的文本顏色設為 green：

#name, #password, #age { color: green; }

選擇器的優先級

id 選擇器 > 類選擇器 > 元素選擇器

擴展選擇器

組合選擇器

后代選擇器匹配屬于指定元素后代的所有元素。

#d2 p {font-size: 120px; }

說明：表示將 id 屬性值為 d2 的元素內部的所有 p 元素的字號設為 120px。

點擊查看更多組合選擇器。

屬性選擇器

屬性選擇器用于選取帶有指定屬性的元素。

下例選擇所有帶有 target 屬性的 <a> 元素：

a[target] {background-color: yellow; }

點擊查看更多屬性選擇器。

偽類選擇器

語法：

選擇器:狀態 {}

錨偽類：

/* 未訪問的鏈接 */ a:link {color: #FF0000; }/* 已訪問的鏈接 */ a:visited {color: #00FF00; }/* 鼠標懸停鏈接 */ a:hover {color: #FF00FF; }/* 已選擇的鏈接，即按鼠標左鍵點擊未松開的狀態 */ a:active {color: #0000FF; }

點擊查看詳情。

偽元素選擇器

點擊查看詳情。

總結

以上是生活随笔為你收集整理的css的学习的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。