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

CSS

CSS学习笔记 01、CSS3基础知识学习

發(fā)布時(shí)間：2024/1/8 CSS 25 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS学习笔记 01、CSS3基础知识学习小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

文章目錄

前言
CSS3基本了解
- 如何學(xué)習(xí)？
一、什么是CSS
- 1.1、發(fā)展史
- 1.2、快速入門(三種引用方式)
- 擴(kuò)展：外部樣式兩種寫法
二、選擇器
- 2.1、基本選擇器(標(biāo)簽、類、id)
- 2.2、元素關(guān)系選擇器(三個(gè)，層次位置)
- 2.3、屬性選擇器(6種)
- 2.4、復(fù)合選擇器(后代、交集、并集)
- 2.5、序號(hào)選擇器(用于定位)
- - :firstchild與:lastchild
  - :nth-child()與:nth-of-type()
三、偽類選擇器、元素
- 基本偽類(4個(gè))
- 新增偽類(css新增，6個(gè))
- 偽元素(CSS新增，5個(gè))
四、層疊性與選擇器權(quán)重計(jì)算
- 4.1、層疊性沖突處理
- 4.2、復(fù)雜選擇器權(quán)重計(jì)算
- 4.3、!important權(quán)重提升
參考資料

前言

本篇博客是關(guān)于CSS的基礎(chǔ)知識(shí)，若文章中出現(xiàn)相關(guān)問(wèn)題，請(qǐng)指出！

所有博客文件目錄索引：博客目錄索引(持續(xù)更新)

CSS3基本了解

如何學(xué)習(xí)？

css是什么

css怎么用(快速入門)

css選擇器(重點(diǎn)+難點(diǎn))

美化網(wǎng)頁(yè)(文字、陰影、超鏈接、列表、漸變…)

盒子模型

浮動(dòng)

定位

網(wǎng)頁(yè)動(dòng)畫(特效、效果)

一、什么是CSS

Cascading Style Sheet 層疊樣式表

CSS：表現(xiàn)(美化網(wǎng)頁(yè))

字體、顏色、邊距、高度、寬度、背景圖片、網(wǎng)頁(yè)定位、網(wǎng)頁(yè)浮動(dòng)

本質(zhì)就是簡(jiǎn)單直接的羅列樣式。

1.1、發(fā)展史

CSS1.0

? CSS2.0 提出DIV(塊)+css，HTML與css結(jié)構(gòu)分離的思路網(wǎng)頁(yè)變得簡(jiǎn)單利于SEO

? CSS2.1 浮動(dòng)，定位

? CSS3.0 圓角，陰影，動(dòng)畫… 以及瀏覽器兼容性問(wèn)題

1.2、快速入門(三種引用方式)

方式一：style標(biāo)簽中使用選擇器

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style>h1{color: red;}</style> </head><body><h1>我是標(biāo)題1</h1></body> </html>

方式二：外部引用css文件

方式三：使用內(nèi)嵌式，直接寫在html標(biāo)簽中(不建議)

<h1 style="color: red;">我是標(biāo)題1</h1>

優(yōu)先級(jí)說(shuō)明：就近原則，后使用的會(huì)將前面使用的覆蓋掉

css優(yōu)勢(shì)：

內(nèi)容和表現(xiàn)分離

網(wǎng)頁(yè)結(jié)構(gòu)表現(xiàn)統(tǒng)一，可以實(shí)現(xiàn)復(fù)用

樣式十分的豐富

建議使用獨(dú)立于html的css文件

利用SEO，容易被搜索引擎收錄！

擴(kuò)展：外部樣式兩種寫法

鏈接式：html

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

導(dǎo)入式：@import是css2.1特有的，需要被style標(biāo)簽包裹

兩者區(qū)別

鏈接式：會(huì)在裝載頁(yè)面主體部分之前裝載css文件，這樣現(xiàn)實(shí)出來(lái)的頁(yè)面從一開(kāi)始就是帶有樣式效果的。(簡(jiǎn)單來(lái)說(shuō)就是加載頁(yè)面時(shí)先裝載css樣式)

導(dǎo)入式：使用導(dǎo)入式引入css文件，不會(huì)等待css文件加載完畢后進(jìn)行渲染，而是會(huì)立即渲染HTML結(jié)構(gòu)。(簡(jiǎn)單來(lái)說(shuō)就是html文件與css樣式可能同時(shí)裝載，就會(huì)出現(xiàn)剛加載頁(yè)面時(shí)標(biāo)簽沒(méi)有被渲染問(wèn)題)

總結(jié)：最好使用鏈接式，這樣的話用戶體驗(yàn)會(huì)更好一些。

二、選擇器

作用：選擇頁(yè)面上的某一個(gè)或者某一類元素

2.1、基本選擇器(標(biāo)簽、類、id)

標(biāo)簽選擇器、類選擇器、id選擇器

小方法：可以在瀏覽器開(kāi)發(fā)者模式上進(jìn)行修改實(shí)時(shí)查看，之后直接復(fù)制過(guò)來(lái)即可！！！

標(biāo)簽選擇器：直接定義所有指定標(biāo)簽的樣式，語(yǔ)法為標(biāo)簽名{}

類選擇器：可以跨標(biāo)簽復(fù)用,指定一個(gè)標(biāo)簽，對(duì)應(yīng)標(biāo)簽的class名稱，語(yǔ)法為 .類名{}

id選擇器：全局唯一，不能重復(fù)，語(yǔ)法為 #id名稱{}

優(yōu)先級(jí)說(shuō)明：id選擇器>class選擇器>標(biāo)簽選擇器

小提示：在{}中的最后一個(gè)樣式可以不寫;。

注意點(diǎn)：對(duì)于id選擇器，我試了一下多個(gè)標(biāo)簽使用同一個(gè)id，也都是能夠使用的。我查了下百度這么解釋：

id只能用一次是語(yǔ)法上的要求，你用了兩次id語(yǔ)法書有錯(cuò)誤，但是實(shí)現(xiàn)效果上沒(méi)錯(cuò)誤，這是屬于編程邏輯上錯(cuò)誤，就好比你有身份證可以自己拿去上網(wǎng)，別人也可以拿去上網(wǎng)，但是你上網(wǎng)是合法的，別人拿去上網(wǎng)是違法的，可以都可以實(shí)現(xiàn)上網(wǎng)的目的。

2.2、元素關(guān)系選擇器(三個(gè)，層次位置)

子選擇器(>)、相鄰兄弟選擇器(+)、通用兄弟選擇器(~)

案例展示：

1、子選擇器，一代，兒子 >

/* 2、子類選擇器(>)：一代，兒子*/ body>p{background: #F5DEB3; }

2、相鄰兄弟選擇器：只有一個(gè)相鄰向下 +

/* 3、相鄰兄弟選擇器(+)：選擇相鄰、向下、一個(gè)元素*/ .active+p{background: #F5DEB3; }

3、通用兄弟選擇器：當(dāng)前選中元素的向下的所有兄弟元素 ~

/* 4、通用兄弟選擇器(~)：當(dāng)前選中元素向下的所有兄弟元素*/ .active~p{background: #F5DEB3; }

2.3、屬性選擇器(6種)

列舉6種：

舉例意義

img[alt]	選擇有alt屬性的img屬性
img[alt=‘故宮’]	選擇alt屬性是故宮的img屬性
img[alt^=‘北京’]	選擇alt屬性以北京開(kāi)頭的img標(biāo)簽
img[alt$=‘北京’]	選擇alt屬性以北京結(jié)尾的img標(biāo)簽
img[alt*=‘美’]	選擇alt屬性中含有美字的img標(biāo)簽
img[alt~=‘手機(jī)拍攝’]	選擇有alt屬性中有空格隔開(kāi)的手機(jī)拍攝字樣的img標(biāo)簽

id與class相結(jié)合使用，CSS2出現(xiàn)

主要格式：標(biāo)簽[屬性值=屬性名]{} *[title]則表示所有帶有title標(biāo)簽進(jìn)行填充效果

其中=可以作為正則表達(dá)式使用

例如：

=：表示絕對(duì)等于
*=：表示包含這個(gè)元素
^=：表示以這個(gè)為開(kāi)頭
$=：表示以這個(gè)為結(jié)尾

實(shí)際案例：

<!DOCTYPE html> <html><head><meta charset="utf-8"><title>06、屬性選擇器</title><style type="text/css">p a{float: left;display: block;height: 50px;width: 50px;background: #0000FF;border-radius: 10px;color: gainsboro;text-align: center;text-decoration: none;font: bold 20px/50px arial;margin-right: 5px;}/* =：絕對(duì)等于 */ /* a[id=ppp]{background-color: #FFFF00;} *//* *=：包含這個(gè)元素 */ /* a[class*=title]{background-color: #F5DEB3;} *//* ^=：開(kāi)頭包含這個(gè)元素 */ /* a[href^=images]{background-color: #FF0000;} *//* $=：以指定元素結(jié)尾 */a[href$=pdf]{background-color: #FF0000;}</style></head><body><p><a href="https://www.baidu.com" class="http title active" id="abc">1</a><a href="https://changlujava.gitee.io" class="http title active">2</a><a href="https://www.baidu.com" class="http title active">3</a><a href="images/1.jpg" class="images title active">4</a><a href="images/2.jpg" class="http active">5</a><a href="images/3.png" class="images title active">6</a><a href="images/1.png" class="http title active">7</a><a href="1.pdf" class="http title active">8</a><a href="2.pdf" class="http title active">9</a><a href="4.pdf" class="images pdf" id="ppp">10</a></p></body> </html>

效果：

2.4、復(fù)合選擇器(后代、交集、并集)

后代選擇器：示例.box .spec，意思是選擇類名為box的標(biāo)簽內(nèi)部的類名為spec的標(biāo)簽。

可以有多個(gè)空格，確定某個(gè)元素。

交集選擇器：示例li.spec，意思是選擇既是li標(biāo)簽，也屬于spec類的標(biāo)簽。

<head><style>span.span1 {color: red;}</style> </head><body><span class="span1">hello</span><span>123456</span> </body>

并集選擇器：示例ul,ol，意思是選擇所有ul和ol標(biāo)簽。

總結(jié)：這幾個(gè)選擇都可以進(jìn)行混合使用。

2.5、序號(hào)選擇器(用于定位)

舉例六個(gè)：

舉例意義

:first-child	第一個(gè)子元素
:last-child	最后一個(gè)子元素
:nth-child(3)	第3個(gè)子元素
:nth-of-type(3)	第3個(gè)某類型子元素
:nth-last-child(3)	倒數(shù)第3個(gè)子元素
:nth-last-of-type(3)	倒數(shù)第3個(gè)某類型子元素

總結(jié)：想要定位某個(gè)元素，只需要先確定好位置接著配合使用對(duì)應(yīng)的序號(hào)選擇器即可確定位置。

:firstchild與:lastchild

:firstchild

:first-child：用于選取屬于其父元素的首個(gè)子元素的指定選擇器

目的：想要為下面第一個(gè)span修改顏色。

正確寫法：

:last-child

:last-child：用于選取屬于其父元素的最后一個(gè)子元素的指定選擇器。

目的：想要為下面第一個(gè)span修改顏色。

正確寫法：

:nth-child()與:nth-of-type()

:nth-child()：用來(lái)指定父元素的指定位置元素。

:th-child()：可填數(shù)字定位或帶有N表達(dá)式式，或者指定英文單詞odd以及even：

odd就是奇數(shù)，等同于2n+1。
even就是偶數(shù)，等同于2n。

示例1(定位元素)：p:th-child(3)，會(huì)先找p元素，定位到它的父元素找其對(duì)應(yīng)位置的子元素，如果該子元素也是p元素的話產(chǎn)生效果，不是就無(wú)效果。像下面圖中第一個(gè)p顯然定位之后不是，所以沒(méi)效果，只有第三個(gè)p才有效果

示例2(任意位置開(kāi)始，中間隔)：:nth-child(3n+2)，從第2個(gè)開(kāi)始選，每次隔三個(gè)。

:nth-of-type(N)：用來(lái)指定父元素下指定元素類型的N位置元素。

例子：

三、偽類選擇器、元素

基本偽類(4個(gè))

介紹四個(gè)偽類

/* 不太重要 */ a:link {color: #FF0000} /* 未訪問(wèn)過(guò)的鏈接 */ a:visited {color: #00FF00} /* 已訪問(wèn)過(guò)的鏈接 */ /* 比較重要是：a:hover 以及 a:active */ a:hover {color: #FF00FF} /* 當(dāng)有鼠標(biāo)懸停在鏈接上 */ a:active {color: #0000FF} /* 鼠標(biāo)點(diǎn)擊未松開(kāi)狀態(tài) */

注意書寫偽類的順序應(yīng)該是：:link => :visited => :hover => :active，若是單個(gè)標(biāo)簽使用多個(gè)偽類不按照這個(gè)熟悉寫會(huì)無(wú)效。

實(shí)際案例

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style type="text/css">/* 將超鏈接的下劃線去除，更改顏色 */a{text-decoration: none;color: #000000;}/* :hover 觸碰到效果 */a:hover{color: #FF0000;}/* :active 點(diǎn)擊不松開(kāi)效果 */a:active{color: #0000FF;}/* text-shadow 文本陰影效果三個(gè)數(shù)字分別為：水平陰影的位置垂直陰影的位置模糊的距離十六進(jìn)制表示：陰影的顏色*/.p1{text-shadow: 3px 3px 2px #000000 ;}</style></head><body><p><img src="./images/1234.jpg" ></p><p><a href="#">長(zhǎng)路's寵物</a></p><p><a href="#">布丁布丁</a></p><p class="p1"><a href="#">$9999.99</a></p></body> </html>

效果：

新增偽類(css新增，6個(gè))

下面六個(gè)是CSS新增的偽類：

偽類意義

:empty	選擇空標(biāo)簽(空格不算空標(biāo)簽)
:focus	選擇當(dāng)前獲得焦點(diǎn)的表單元素
:enabled	選擇當(dāng)前有效的表單元素
:disabled	選擇當(dāng)前無(wú)效的表單元素
:checked	選擇當(dāng)前已經(jīng)勾選的單選按鈕或者復(fù)選框
:root	選擇根元素(即可看做標(biāo)簽)

示例：

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 50px;height: 50px;border: 1px solid red;display: inline-block;}/* 空元素：背景元素為藍(lán)色 */div:empty {background-color: blue;}/* 獲得焦點(diǎn)元素：背景顏色為橙色 */input:focus {background-color: orange;}/* 有效的表單：設(shè)置長(zhǎng)寬 */input[type='text']:enabled {width: 70px;height: 20px;}/* 無(wú)效的表單(disabled)：背景顏色為藍(lán)色 */input:disabled {background-color: blue;}/* 勾選選中：字體顏色為紅色 */input[type='radio']:checked+span {color: red;}/* :root(選擇根元素，相當(dāng)于html標(biāo)簽)：令字體為20px */:root {font-size: 20px;}</style> </head><body><div></div><div><span>123</span></div><div></div><div>123</div><div></div><p><input type="text"><input type="text"><input type="text" disabled><input type="text" disabled><input type="text"></p><p><input type="radio" name="exercise"><span>跑步</span><input type="radio" name="exercise"><span>籃球</span><input type="radio" name="exercise"><span>足球</span><input type="radio" name="exercise"><span>音樂(lè)</span></p></body></html>

效果：

偽元素(CSS新增，5個(gè))

CSS3新增了"偽元素"特性，顧名思義就是表示虛擬動(dòng)態(tài)創(chuàng)建的元素。

語(yǔ)法：偽元素使用雙冒號(hào)::表示，IE8可以兼容單冒號(hào)：。

偽元素含義

::before	創(chuàng)建一個(gè)偽元素，將其稱為匹配選中的元素的第一個(gè)子元素，必須設(shè)置content屬性表示其中的內(nèi)容
::after	創(chuàng)建一個(gè)偽元素，將其稱為匹配選中的元素的最后一個(gè)子元素，必須設(shè)置content屬性表示其中的內(nèi)容
::selection	應(yīng)用被用戶選中的部分(一般使用于文字，即使用鼠標(biāo)圈選的部分)
::first-letter	會(huì)選中某元素中(必須是塊級(jí)元素)第一行的第一個(gè)字母
::first-line	會(huì)選中某元素中(必須是塊級(jí)元素)第一行全部文字

說(shuō)明：虛擬創(chuàng)建的內(nèi)容都會(huì)被添加到指定元素的內(nèi)部。

應(yīng)用：可以在列表項(xiàng)前面添加小圖標(biāo)。

示例

①::before與::after使用

效果：

②::selection文字選中效果示例

效果：

③::first-letter與::first-line示例

效果：

四、層疊性與選擇器權(quán)重計(jì)算

4.1、層疊性沖突處理

CSS全名叫做"層疊式樣式表"。

層疊性：多個(gè)選擇器能夠同時(shí)作用于同一個(gè)標(biāo)簽，效果疊加。

層疊性的沖突處理：如果多個(gè)選擇器定義的屬性有沖突？CSS中有嚴(yán)密的處理沖突的規(guī)則。

id選擇器>class選擇器>標(biāo)簽權(quán)重

4.2、復(fù)雜選擇器權(quán)重計(jì)算

當(dāng)若是出現(xiàn)復(fù)雜的的多個(gè)css選擇器情況時(shí)，如何計(jì)算權(quán)重呢？

答：通過(guò)**(id個(gè)數(shù)、class個(gè)數(shù)、標(biāo)簽的個(gè)數(shù))**的形式來(lái)計(jì)算權(quán)重。計(jì)算好權(quán)重后依次從()中從前往后比較即可獲取權(quán)重大小。

實(shí)例演示：

下面三個(gè)權(quán)重表從左往右進(jìn)行比較，即可比較出對(duì)應(yīng)的權(quán)重：

(2,0,1)

(2,1,2)

(0,3,1)

4.3、!important權(quán)重提升

認(rèn)識(shí)!import

若是我們需要將某個(gè)選擇器的某條屬性提升權(quán)重，可以在屬性后面寫!important。

首先我們要清楚三種引用css樣式方法：①link。②head標(biāo)簽中寫style選擇器。③在行內(nèi)樣式中使用樣式。

引用權(quán)重從大到小為：③>②>①

引發(fā)的問(wèn)題：容易引發(fā)沖突問(wèn)題，即多個(gè)選擇器都使用了!important就會(huì)引起沖突，造成不必要的問(wèn)題，一般我們使用現(xiàn)成的框架組件時(shí)要進(jìn)行適當(dāng)自定義就會(huì)使用!important。

公司中一般不使用!important方式來(lái)提升權(quán)重的，而是通過(guò)使用復(fù)雜選擇器權(quán)重的方式來(lái)設(shè)置樣式！

案例

下面分別使用了①②③方式引用

之前說(shuō)了普通情況下第③中權(quán)重最大，所以這里會(huì)是紅色。

此時(shí)我有個(gè)想法，在上面情況下，我想將其顏色變?yōu)榻鹕趺崔k？

見(jiàn)效果：

參考資料

[1].【狂神說(shuō)Java】CSS3最新教程快速入門通俗易懂

[2]. 不是說(shuō)ID選擇器只可以用一次么，不是說(shuō)ID選擇器只能選擇一個(gè)標(biāo)簽么？

[3]. 菜鳥教程-盒子模型

[4]. 菜鳥教程-padding案例

[5]. [display:inline-block 和float:left 的區(qū)別

[6]. CSS中的clear屬性

[7]. 利用@media screen實(shí)現(xiàn)網(wǎng)頁(yè)布局的自適應(yīng)（響應(yīng)式布局）對(duì)于@media有著詳細(xì)介紹及使用方式，包括參數(shù)

我是長(zhǎng)路，感謝你的耐心閱讀。如有問(wèn)題請(qǐng)指出，我會(huì)積極采納！
歡迎關(guān)注我的公眾號(hào)【長(zhǎng)路Java】，分享Java學(xué)習(xí)文章及相關(guān)資料
Q群：851968786 我們可以一起探討學(xué)習(xí)
注明：轉(zhuǎn)載可，需要附帶上文章鏈接

總結(jié)

以上是生活随笔為你收集整理的CSS学习笔记 01、CSS3基础知识学习的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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

上一篇：《PyQT5软件开发 - 控件篇》第3章
下一篇： CSS 基本样式