當(dāng)前位置：首頁 > 前端技术 > CSS >内容正文

CSS

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

發(fā)布時間：2025/3/21 CSS 43 豆豆

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

文章目錄

一、什么是CSS
二、CSS基本使用
- 2.1、行內(nèi)式(內(nèi)聯(lián)樣式)
- 2.2、內(nèi)部樣式
- 2.3、外部樣式
- - 2.3.1、嵌入式
  - 2.3.2、導(dǎo)入式
三、選擇器
- 3.1、基礎(chǔ)選擇器
- - 3.1.1、標(biāo)簽選擇器
  - 3.1.2、id 選擇器
  - 3.1.3、類選擇器
  - 3.1.4、通配符選擇器
- 3.2、復(fù)合選擇器
- - 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，層疊樣式表)是用于控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標(biāo)記性語言。HTML 和CSS 就是“內(nèi)容”和“形式”的關(guān)系，由HTML 組織網(wǎng)頁的結(jié)構(gòu)，而通過CSS 來決定頁面的表現(xiàn)形式。

由于HTML 的主要功能是描述網(wǎng)頁的結(jié)構(gòu)，所以控制網(wǎng)頁外觀的能力很差，如無法精確調(diào)整文字大小、行距等結(jié)構(gòu)，而且不能對多個網(wǎng)頁元素進(jìn)行統(tǒng)一的樣式設(shè)置，只能一個一個元素地設(shè)置。使用CSS 可實現(xiàn)對網(wǎng)頁的外觀和排版進(jìn)行更靈活的控制，使網(wǎng)頁更美觀。

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

二、CSS基本使用

**優(yōu)先級：**行內(nèi)式 > 內(nèi)聯(lián)式 > 外部式

2.1、行內(nèi)式(內(nèi)聯(lián)樣式)

所有 HTML 標(biāo)記都有一個通用的屬性 style，行內(nèi)式就是將元素的 CSS 規(guī)則作為 style 屬性的屬性值寫在元素的標(biāo)記內(nèi)。

書寫格式如下：

<開始標(biāo)簽 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>

結(jié)果展示：

行內(nèi)式的優(yōu)點是：由于 CSS 規(guī)則就寫在標(biāo)記內(nèi)，其作用對象就是該元素，所以無須書寫 CSS 的選擇器。有時需要做測試或?qū)€別元素設(shè)置 CSS 屬性，這時可以使用這種方式，只需書寫屬性和值，但它沒有體現(xiàn)出 CSS 統(tǒng)一設(shè)置許多元素樣式的優(yōu)勢。

2.2、內(nèi)部樣式

內(nèi)部樣式也稱嵌入式，將頁面中的各種元素的 CSS 樣式設(shè)置集中寫在<style> 和</stytle> 之間，<style>標(biāo)記是專用于引入嵌入式 CSS 的一個 HTML 標(biāo)記，它只能放置在文檔頭部，即<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>這是內(nèi)部樣式！</span> </body> </html>

結(jié)果展示：

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

2.3、外部樣式

當(dāng) CSS 樣式需要應(yīng)用于很多頁面時.外部樣式表(外部 CSS 文件)將是理想的選擇。所謂外部樣式表，就是將 CSS 規(guī)則寫人到一一個單獨的文本文件中,并將該文件的后綴名命名為. css。然后使用鏈接式或?qū)耸降姆椒▽⑼獠?CSS 文件引人到HTML文件中，其優(yōu)點是可以讓很多個網(wǎng)頁共享一個 CSS 文件設(shè)置的樣式。

在學(xué)習(xí) CSS 或制作單個網(wǎng)頁時，為了方便可采取行內(nèi)式或嵌人式方法引人 CSS ，但若要制作網(wǎng)站，則主要應(yīng)采用鏈接式引人外部 CSS 文件，以便使網(wǎng)站內(nèi)的所有網(wǎng)頁風(fēng)格統(tǒng)一。而且在使用外部樣式表的情況下，可以通過改變一個外部 CSS 文件來改變整個站所有頁面的外觀。下面介紹引人外部 CSS 文件的方法。

2.3.1、嵌入式

鏈接式是在網(wǎng)頁頭部使用 HTML 標(biāo)記<link>引入外部CSS文件,語法如下:

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

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>

結(jié)果展示：

2.3.2、導(dǎo)入式

導(dǎo)入式是通過 CSS 規(guī)則中的@import 指令來導(dǎo)入外部 CSS 文件，語法如下：

示例：

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

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

三、選擇器

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

3.1、基礎(chǔ)選擇器

選擇器優(yōu)先級比較：id 選擇器 > 類選擇器 > 標(biāo)簽選擇器

3.1.1、標(biāo)簽選擇器

可以把某一類標(biāo)簽全部選擇出來。

示例：

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

結(jié)果展示：

3.1.2、id 選擇器

根據(jù)id屬性值來進(jìn)行選擇，使用以#開頭。

注意：要應(yīng)用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>

結(jié)果展示：

3.1.3、類選擇器

根據(jù) class 屬性值來進(jìn)行選擇,使用時以.開頭。

示例：

<!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>

結(jié)果展示：

3.1.4、通配符選擇器

匹配所有標(biāo)簽，使用以*開頭。

示例：

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

結(jié)果展示：

3.2、復(fù)合選擇器

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>

結(jié)果展示：

示例 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>

結(jié)果展示：

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

使用>分隔開，如：

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

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

示例：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>示例</title><style>div>span{ /*如果我們這里用div span的話所有的span標(biāo)簽的字體都會發(fā)生改變*/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>

結(jié)果展示：

3.2.3、交集選擇器

注意用.分隔

既是···又是···，以下例子為例：既是p標(biāo)簽又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">藍(lán)色</p><p class="py">藍(lán)色</p><p>黑色</p><p>黑色</p><div class="py">藍(lán)色</div><div class="py">藍(lán)色</div> </body> </html>

結(jié)果展示：

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標(biāo)簽</p><p>p標(biāo)簽</p><div>div標(biāo)簽</div><div>div標(biāo)簽</div><span>span標(biāo)簽</span><span>span標(biāo)簽</span><h1>h1標(biāo)簽</h1><h1>h1標(biāo)簽</h1> </body> </html>

結(jié)果展示：

3.2.5、偽類選擇器

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

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

為了更直觀的學(xué)習(xí)，下面以<a>標(biāo)簽為例：

超鏈接 a 標(biāo)簽的4個偽類偽類作業(yè)

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

示例：

<!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>

結(jié)果展示：

四、字體/文本

4.1、字體常用樣式

CSS屬性含義舉例

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

復(fù)合樣式

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{*/ /*復(fù)合樣式*//*font:italic bold 40px "微軟雅黑 Light"*//*}*/</style> </head> <body><span>pyhton</span> </body> </html>

結(jié)果展示：

4.2、文本常用樣式

CSS屬性含義舉例

text-align	對齊方式	text-align:center
text-indent	首行縮進(jìn)	text-indent:2em
text-decoration	文本線	text-decoration:underline
letter-spacing	字距	letter-spacing:1.5px
text-transform	大小寫轉(zhuǎn)換	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>這個世界，有儒；有道；有佛；有妖；有術(shù)士。警校畢業(yè)的許七安幽幽醒來，發(fā)現(xiàn)自己身處牢獄之中，三日后流放邊陲.....他起初的目的只是自保，順便在這個沒有人權(quán)的社會里當(dāng)個富家翁悠閑度日。......多年后，許七安回首前塵，身后是早已逝去的敵人，以及累累白骨。滾滾長江東逝水，浪花淘盡英雄，是非成敗轉(zhuǎn)頭空。青山依舊在，幾度夕陽紅。</p> </body> </html>

結(jié)果展示：

五、背景

5.1、背景常用樣式

CSS屬性含義可用值

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

復(fù)合樣式
（順序固定）

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;/*復(fù)合樣式*//*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>

結(jié)果展示：

想學(xué)習(xí) CSS 基本使用的可以看我這兩篇博客：
學(xué)習(xí)筆記（二）——CSS基礎(chǔ)

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。