當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

学习笔记（二）——CSS基础

發布時間：2025/3/21 CSS 45 豆豆

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

文章目錄

一、什么是CSS
二、CSS基本使用
- 2.1、行內式(內聯樣式)
- 2.2、內部樣式
- 2.3、外部樣式
- - 2.3.1、嵌入式
  - 2.3.2、導入式
三、選擇器
- 3.1、基礎選擇器
- - 3.1.1、標簽選擇器
  - 3.1.2、id 選擇器
  - 3.1.3、類選擇器
  - 3.1.4、通配符選擇器
- 3.2、復合選擇器
- - 3.2.1、后代選擇器
  - 3.2.2、子元素選擇器(子代選擇器)
  - 3.2.3、交集選擇器
  - 3.2.4、并集選擇器
  - 3.2.5、偽類選擇器
四、字體/文本
- 4.1、字體常用樣式
- 4.2、文本常用樣式
五、背景
- 5.1、背景常用樣式

一、什么是CSS

CSS (全稱Cascading Style Sheets，層疊樣式表)是用于控制網頁樣式并允許將樣式信息與網頁內容分離的一種標記性語言。HTML 和CSS 就是“內容”和“形式”的關系，由HTML 組織網頁的結構，而通過CSS 來決定頁面的表現形式。

由于HTML 的主要功能是描述網頁的結構，所以控制網頁外觀的能力很差，如無法精確調整文字大小、行距等結構，而且不能對多個網頁元素進行統一的樣式設置，只能一個一個元素地設置。使用CSS 可實現對網頁的外觀和排版進行更靈活的控制，使網頁更美觀。

CSS樣式表是由一系列樣式規則組成的，瀏覽器將這些規則應用到相應的元素上，CSS語言實際上是一種描述HTML 元素外觀（樣式）的語言。

二、CSS基本使用

**優先級：**行內式 > 內聯式 > 外部式

2.1、行內式(內聯樣式)

所有 HTML 標記都有一個通用的屬性 style，行內式就是將元素的 CSS 規則作為 style 屬性的屬性值寫在元素的標記內。

書寫格式如下：

<開始標簽 style="css屬性1:屬性值1;css屬性2:屬性值2···">

示例：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>示例</title> </head> <body><span style="color: aquamarine; font-size: 50px">大家好啊！</span> </body> </html>

結果展示：

行內式的優點是：由于 CSS 規則就寫在標記內，其作用對象就是該元素，所以無須書寫 CSS 的選擇器。有時需要做測試或對個別元素設置 CSS 屬性，這時可以使用這種方式，只需書寫屬性和值，但它沒有體現出 CSS 統一設置許多元素樣式的優勢。

2.2、內部樣式

內部樣式也稱嵌入式，將頁面中的各種元素的 CSS 樣式設置集中寫在<style> 和</stytle> 之間，<style>標記是專用于引入嵌入式 CSS 的一個 HTML 標記，它只能放置在文檔頭部，即<style>···</style>只能放置在文檔的<head>和</head>之間。

書寫格式如下：

選擇器{css屬性1:屬性值1;css屬性2:屬性值2;····· }

示例：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>示例</title><style>span{color: aqua;font-size: 50px;}</style> </head> <body><span>這是內部樣式！</span> </body> </html>

結果展示：

為單一的網頁設置樣式，嵌入式很方便且最常用。但是對于一個包容很多網頁的網站來說，如果每個網頁都以嵌入式的方式設置各自的樣式，不僅麻煩，冗余代碼多，而且網站中各個頁面的風格不好統一。因此，對于一個網站來說，通常都是編寫獨立的 CSS 文件，使用外部樣式方法，引入到網站的所有 HTML網頁文檔中。

2.3、外部樣式

當 CSS 樣式需要應用于很多頁面時.外部樣式表(外部 CSS 文件)將是理想的選擇。所謂外部樣式表，就是將 CSS 規則寫人到一一個單獨的文本文件中,并將該文件的后綴名命名為. css。然后使用鏈接式或導人式的方法將外部 CSS 文件引人到HTML文件中，其優點是可以讓很多個網頁共享一個 CSS 文件設置的樣式。

在學習 CSS 或制作單個網頁時，為了方便可采取行內式或嵌人式方法引人 CSS ，但若要制作網站，則主要應采用鏈接式引人外部 CSS 文件，以便使網站內的所有網頁風格統一。而且在使用外部樣式表的情況下，可以通過改變一個外部 CSS 文件來改變整個站所有頁面的外觀。下面介紹引人外部 CSS 文件的方法。

2.3.1、嵌入式

鏈接式是在網頁頭部使用 HTML 標記<link>引入外部CSS文件,語法如下:

示例：
it.css文件:（注意該文件中不需要書寫<style>標記）

span{color: aqua;font-size: 50px;}

it.html文件：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><link href="it.css" rel="stylesheet"><title>示例</title> </head> <body><span>這是鏈接式！</span> </body> </html>

結果展示：

2.3.2、導入式

導入式是通過 CSS 規則中的@import 指令來導入外部 CSS 文件，語法如下：

示例：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>示例</title><style>@import "it.css"; /*這里文件和上面一樣*/</style> </head> <body><span>這是鏈接式！</span> </body> </html> /*執行結果和上面鏈接式一樣這里就不展示了*/

此外,這兩種方式的顯示效果也略有不同。使用鏈接式時，會在裝載頁面主體部分之前裝載 CSS 文件,這樣顯示出來的網頁從一開始就是帶有樣式效果的;而使用導人式時，要在整個頁面裝載完之后再裝載 CSS 文件，如果頁面文件比較大，則開始裝載時會顯示無樣式的頁面。從瀏覽者的感受來說,這是使用導人式的一個缺陷。

三、選擇器

選擇器就是為了選中文檔中要應用樣式的那些元素，為了能夠靈活選中文檔中的某類或某些元素,CSS定義了很多種選擇器。其中,主要分為基礎選擇器和復合選擇器兩大類。

3.1、基礎選擇器

選擇器優先級比較：id 選擇器 > 類選擇器 > 標簽選擇器

3.1.1、標簽選擇器

可以把某一類標簽全部選擇出來。

示例：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>示例</title><style>span{ /*標簽選擇器*/ color: red;font-size: 50px;}</style> </head> <body><span>標記選擇器</span> </body> </html>

結果展示：

3.1.2、id 選擇器

根據id屬性值來進行選擇，使用以#開頭。

注意：要應用id 選擇器，首先必須給某個元素添加 id 屬性。

示例：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>示例</title><style>#text{ /*注意以 # 開頭，text為id名*/ /*id 選擇器#text*/color: blue; font-size: 50px;}</style> </head> <body><span id="text">id 選擇器</span> </body> </html>

結果展示：

3.1.3、類選擇器

根據 class 屬性值來進行選擇,使用時以.開頭。

示例：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>示例</title><style>.text{ /*類選擇器.text*/color: red;font-size: 50px;}</style> </head> <body><span class="text">類選擇器</span> </body> </html>

結果展示：

3.1.4、通配符選擇器

匹配所有標簽，使用以*開頭。

示例：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>示例</title><style>*{color: red;font-size: 20px;}</style> </head> <body><span>span標簽</span><p>p標簽</p><h1>h1標簽</h1><div>div標簽</div> </body> </html>

結果展示：

3.2、復合選擇器

3.2.1、后代選擇器

使用空格分隔開，如：

div a{color: chartreuse;font-size: 30px;}

后代選擇器有什么用？以下面示例 2來講，<div>就是爺爺，<ul>是兒子，<li>就是孫子，后代選擇器可以將兒子和孫子的字體屬性等全部修改掉。

示例 1：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>示例</title><style>div a{color: chartreuse;font-size: 30px;}</style> </head> <body><div><a href="https://www.baidu.com">兒子</a></div><a href="https://https://www.baidu.com">兒子</a> </body> </html>

結果展示：

示例 2：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>示例</title><style>.py ul{color: chartreuse;font-size: 30px;}</style> </head> <body><div class="py"><ul><li>孫子</li><li>孫子</li></ul></div><ul><li>human</li><li>human</li></ul> </body> </html>

結果展示：

3.2.2、子元素選擇器(子代選擇器)

使用>分隔開，如：

div>span{color: chartreuse;font-size: 30px;}

后代選擇器的作用范圍為全部后代，其范圍比較廣，根據需要有時我們會選擇作用范圍較小的子代選擇器，其作用范圍為：直接的親屬的子元素，不包含孫子元素。

示例：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>示例</title><style>div>span{ /*如果我們這里用div span的話所有的span標簽的字體都會發生改變*/color: chartreuse;font-size: 30px;}</style> </head> <body><div><span>兒子</span><span>兒子</span><span>兒子</span></div><div><p><span>孫子</span><span>孫子</span><span>孫子</span></p></div></body> </html>

結果展示：

3.2.3、交集選擇器

注意用.分隔

既是···又是···，以下例子為例：既是p標簽又class為py

示例：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>示例</title><style>p.py{color: blue;}</style> </head> <body><p class="py">藍色</p><p class="py">藍色</p><p>黑色</p><p>黑色</p><div class="py">藍色</div><div class="py">藍色</div> </body> </html>

結果展示：

3.2.4、并集選擇器

注意用,分隔開

示例：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>示例</title><style>p,span{color: blue;}</style> </head> <body><p>p標簽</p><p>p標簽</p><div>div標簽</div><div>div標簽</div><span>span標簽</span><span>span標簽</span><h1>h1標簽</h1><h1>h1標簽</h1> </body> </html>

結果展示：

3.2.5、偽類選擇器

偽類(pseudo-class)是用來表示動態事件、狀態改變或者是在文檔中以其他方法不能
輕易實現的情況——例如用戶的鼠標懸停或單擊某元素。總的來說，偽類可以對目標元
素出現某種特殊的狀態應用樣式。這種狀態可以是鼠標停留在某個元素上，或者是訪問
一個超鏈接。偽類允許設計者自由指定元素在一種狀態下的外觀。

常用的偽類有4個，分別是: link(鏈接)、: visited(已訪問的鏈接)、hover(鼠標懸停狀態)和:active(激活狀態)。其中前面兩個稱為鏈接偽類，只能應用于鏈接a元素，后兩種稱為動態偽類，理論上可以應用于任何元素,但IE6只支持a元素的上述偽類。其他的一些偽類如:focus(獲得焦點時的狀態)因為在IE 6中不支持，所以用得較少。

為了更直觀的學習，下面以<a>標簽為例：

超鏈接 a 標簽的4個偽類偽類作業

a:link	正常瀏覽狀態的樣式
a:visited	被單擊過的超鏈接的樣式風格
a:hover	鼠標指針懸停在超鏈接上時的風格
a:active	當前激活(在鼠標單擊與釋放之間發生)的樣式風格

示例：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>示例</title><style>a:link{color: blue;}a:visited{color: chartreuse;}a:hover{color: darkorange;}a:active{color: blueviolet;}</style> </head> <body><a href="http://www.baidu.com" style="font-size: 50px">百度一下</a> </body> </html>

結果展示：

四、字體/文本

4.1、字體常用樣式

CSS屬性含義舉例

font-family	字體類型	font-family=“宋體”
font-weight	字體粗細	font-weight:bold字體加粗
font-style	字體樣式	font-style：italic字體傾斜
font-size	字體大小	font-size:100px

復合樣式

font:font-style font-weight font-size font-family

如：

div{font:italic bold 100px "宋體" }

示例：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>示例</title><style>span{font-size: 40px;font-family: "微軟雅黑 Light";font-weight: bold;font-style: italic;}/*span{*/ /*復合樣式*//*font:italic bold 40px "微軟雅黑 Light"*//*}*/</style> </head> <body><span>pyhton</span> </body> </html>

結果展示：

4.2、文本常用樣式

CSS屬性含義舉例

text-align	對齊方式	text-align:center
text-indent	首行縮進	text-indent:2em
text-decoration	文本線	text-decoration:underline
letter-spacing	字距	letter-spacing:1.5px
text-transform	大小寫轉換	text-transform:uppercase
word-spacing	詞距	word-spacing:10px
line-height	行高	line-height:30px

示例：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>示例</title><style>p{text-align: center;text-indent: 2em;letter-spacing: 1.5px;word-spacing: 10px;line-height: 30px;}</style> </head> <body><p>這個世界，有儒；有道；有佛；有妖；有術士。警校畢業的許七安幽幽醒來，發現自己身處牢獄之中，三日后流放邊陲.....他起初的目的只是自保，順便在這個沒有人權的社會里當個富家翁悠閑度日。......多年后，許七安回首前塵，身后是早已逝去的敵人，以及累累白骨。滾滾長江東逝水，浪花淘盡英雄，是非成敗轉頭空。青山依舊在，幾度夕陽紅。</p> </body> </html>

結果展示：

五、背景

5.1、背景常用樣式

CSS屬性含義可用值

background-color	背景顏色	命名顏色、十六進制顏色等
background-image	背景圖片	url(URL)
background-repeat	背景鋪蓋	repeat、repeat-x、repeat-y、no-repeat
background-attachment	背景圖固定還是隨內容滾動	scroll、fixed
background-size	背景大小	width、height
background-position	背景定位	[left \| center \| right] [top \| center \| bottom]或[x%] [y%]或[x-pos] [y-pos]

復合樣式
（順序固定）

background:顏色圖片是否平鋪固定還是滾動背景定位/背景大小

如：

background: red url('圖片.png') no-repeat scroll center/100px 100px

示例：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>示例</title><style>div{width: 300px;height: 300px;background-color: yellow;background-image: url("https://www.cc148.com/files/article/image/44/44955/44955s.jpg");background-repeat: no-repeat;background-position: center;background-size: 100px 150px;/*復合樣式*//*background: yellow url('https://www.cc148.com/files/article/image/44/44955/44955s.jpg') no-repeat center/100px 150px*/}</style> </head> <body><div></div> </body> </html>

結果展示：

想學習 CSS 基本使用的可以看我這兩篇博客：
學習筆記（二）——CSS基礎

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

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

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