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

CSS

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

發布時間：2024/1/8 CSS 32 豆豆

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

文章目錄

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

前言

本篇博客是關于CSS的基礎知識，若文章中出現相關問題，請指出！

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

CSS3基本了解

如何學習？

css是什么

css怎么用(快速入門)

css選擇器(重點+難點)

美化網頁(文字、陰影、超鏈接、列表、漸變…)

盒子模型

浮動

定位

網頁動畫(特效、效果)

一、什么是CSS

Cascading Style Sheet 層疊樣式表

CSS：表現(美化網頁)

字體、顏色、邊距、高度、寬度、背景圖片、網頁定位、網頁浮動

本質就是簡單直接的羅列樣式。

1.1、發展史

CSS1.0

? CSS2.0 提出DIV(塊)+css，HTML與css結構分離的思路網頁變得簡單利于SEO

? CSS2.1 浮動，定位

? CSS3.0 圓角，陰影，動畫… 以及瀏覽器兼容性問題

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

方式一：style標簽中使用選擇器

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

方式二：外部引用css文件

方式三：使用內嵌式，直接寫在html標簽中(不建議)

<h1 style="color: red;">我是標題1</h1>

優先級說明：就近原則，后使用的會將前面使用的覆蓋掉

css優勢：

內容和表現分離

網頁結構表現統一，可以實現復用

樣式十分的豐富

建議使用獨立于html的css文件

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

擴展：外部樣式兩種寫法

鏈接式：html

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

導入式：@import是css2.1特有的，需要被style標簽包裹

兩者區別

鏈接式：會在裝載頁面主體部分之前裝載css文件，這樣現實出來的頁面從一開始就是帶有樣式效果的。(簡單來說就是加載頁面時先裝載css樣式)

導入式：使用導入式引入css文件，不會等待css文件加載完畢后進行渲染，而是會立即渲染HTML結構。(簡單來說就是html文件與css樣式可能同時裝載，就會出現剛加載頁面時標簽沒有被渲染問題)

總結：最好使用鏈接式，這樣的話用戶體驗會更好一些。

二、選擇器

作用：選擇頁面上的某一個或者某一類元素

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

標簽選擇器、類選擇器、id選擇器

小方法：可以在瀏覽器開發者模式上進行修改實時查看，之后直接復制過來即可！！！

標簽選擇器：直接定義所有指定標簽的樣式，語法為標簽名{}

類選擇器：可以跨標簽復用,指定一個標簽，對應標簽的class名稱，語法為 .類名{}

id選擇器：全局唯一，不能重復，語法為 #id名稱{}

優先級說明：id選擇器>class選擇器>標簽選擇器

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

注意點：對于id選擇器，我試了一下多個標簽使用同一個id，也都是能夠使用的。我查了下百度這么解釋：

id只能用一次是語法上的要求，你用了兩次id語法書有錯誤，但是實現效果上沒錯誤，這是屬于編程邏輯上錯誤，就好比你有身份證可以自己拿去上網，別人也可以拿去上網，但是你上網是合法的，別人拿去上網是違法的，可以都可以實現上網的目的。

2.2、元素關系選擇器(三個，層次位置)

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

案例展示：

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

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

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

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

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

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

2.3、屬性選擇器(6種)

列舉6種：

舉例意義

img[alt]	選擇有alt屬性的img屬性
img[alt=‘故宮’]	選擇alt屬性是故宮的img屬性
img[alt^=‘北京’]	選擇alt屬性以北京開頭的img標簽
img[alt$=‘北京’]	選擇alt屬性以北京結尾的img標簽
img[alt*=‘美’]	選擇alt屬性中含有美字的img標簽
img[alt~=‘手機拍攝’]	選擇有alt屬性中有空格隔開的手機拍攝字樣的img標簽

id與class相結合使用，CSS2出現

主要格式：標簽[屬性值=屬性名]{} *[title]則表示所有帶有title標簽進行填充效果

其中=可以作為正則表達式使用

例如：

=：表示絕對等于
*=：表示包含這個元素
^=：表示以這個為開頭
$=：表示以這個為結尾

實際案例：

<!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;}/* =：絕對等于 */ /* a[id=ppp]{background-color: #FFFF00;} *//* *=：包含這個元素 */ /* a[class*=title]{background-color: #F5DEB3;} *//* ^=：開頭包含這個元素 */ /* a[href^=images]{background-color: #FF0000;} *//* $=：以指定元素結尾 */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、復合選擇器(后代、交集、并集)

后代選擇器：示例.box .spec，意思是選擇類名為box的標簽內部的類名為spec的標簽。

可以有多個空格，確定某個元素。

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

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

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

總結：這幾個選擇都可以進行混合使用。

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

舉例六個：

舉例意義

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

總結：想要定位某個元素，只需要先確定好位置接著配合使用對應的序號選擇器即可確定位置。

:firstchild與:lastchild

:firstchild

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

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

正確寫法：

:last-child

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

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

正確寫法：

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

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

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

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

示例1(定位元素)：p:th-child(3)，會先找p元素，定位到它的父元素找其對應位置的子元素，如果該子元素也是p元素的話產生效果，不是就無效果。像下面圖中第一個p顯然定位之后不是，所以沒效果，只有第三個p才有效果

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

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

例子：

三、偽類選擇器、元素

基本偽類(4個)

介紹四個偽類

/* 不太重要 */ a:link {color: #FF0000} /* 未訪問過的鏈接 */ a:visited {color: #00FF00} /* 已訪問過的鏈接 */ /* 比較重要是：a:hover 以及 a:active */ a:hover {color: #FF00FF} /* 當有鼠標懸停在鏈接上 */ a:active {color: #0000FF} /* 鼠標點擊未松開狀態 */

注意書寫偽類的順序應該是：:link => :visited => :hover => :active，若是單個標簽使用多個偽類不按照這個熟悉寫會無效。

實際案例

<!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 點擊不松開效果 */a:active{color: #0000FF;}/* text-shadow 文本陰影效果三個數字分別為：水平陰影的位置垂直陰影的位置模糊的距離十六進制表示：陰影的顏色*/.p1{text-shadow: 3px 3px 2px #000000 ;}</style></head><body><p><img src="./images/1234.jpg" ></p><p><a href="#">長路's寵物</a></p><p><a href="#">布丁布丁</a></p><p class="p1"><a href="#">$9999.99</a></p></body> </html>

效果：

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

下面六個是CSS新增的偽類：

偽類意義

:empty	選擇空標簽(空格不算空標簽)
:focus	選擇當前獲得焦點的表單元素
:enabled	選擇當前有效的表單元素
:disabled	選擇當前無效的表單元素
:checked	選擇當前已經勾選的單選按鈕或者復選框
:root	選擇根元素(即可看做標簽)

示例：

<!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;}/* 空元素：背景元素為藍色 */div:empty {background-color: blue;}/* 獲得焦點元素：背景顏色為橙色 */input:focus {background-color: orange;}/* 有效的表單：設置長寬 */input[type='text']:enabled {width: 70px;height: 20px;}/* 無效的表單(disabled)：背景顏色為藍色 */input:disabled {background-color: blue;}/* 勾選選中：字體顏色為紅色 */input[type='radio']:checked+span {color: red;}/* :root(選擇根元素，相當于html標簽)：令字體為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>音樂</span></p></body></html>

效果：

偽元素(CSS新增，5個)

CSS3新增了"偽元素"特性，顧名思義就是表示虛擬動態創建的元素。

語法：偽元素使用雙冒號::表示，IE8可以兼容單冒號：。

偽元素含義

::before	創建一個偽元素，將其稱為匹配選中的元素的第一個子元素，必須設置content屬性表示其中的內容
::after	創建一個偽元素，將其稱為匹配選中的元素的最后一個子元素，必須設置content屬性表示其中的內容
::selection	應用被用戶選中的部分(一般使用于文字，即使用鼠標圈選的部分)
::first-letter	會選中某元素中(必須是塊級元素)第一行的第一個字母
::first-line	會選中某元素中(必須是塊級元素)第一行全部文字

說明：虛擬創建的內容都會被添加到指定元素的內部。

應用：可以在列表項前面添加小圖標。

示例

①::before與::after使用

效果：

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

效果：

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

效果：

四、層疊性與選擇器權重計算

4.1、層疊性沖突處理

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

層疊性：多個選擇器能夠同時作用于同一個標簽，效果疊加。

層疊性的沖突處理：如果多個選擇器定義的屬性有沖突？CSS中有嚴密的處理沖突的規則。

id選擇器>class選擇器>標簽權重

4.2、復雜選擇器權重計算

當若是出現復雜的的多個css選擇器情況時，如何計算權重呢？

答：通過**(id個數、class個數、標簽的個數)**的形式來計算權重。計算好權重后依次從()中從前往后比較即可獲取權重大小。

實例演示：

下面三個權重表從左往右進行比較，即可比較出對應的權重：

(2,0,1)

(2,1,2)

(0,3,1)

4.3、!important權重提升

認識!import

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

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

引用權重從大到小為：③>②>①

引發的問題：容易引發沖突問題，即多個選擇器都使用了!important就會引起沖突，造成不必要的問題，一般我們使用現成的框架組件時要進行適當自定義就會使用!important。

公司中一般不使用!important方式來提升權重的，而是通過使用復雜選擇器權重的方式來設置樣式！

案例

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

之前說了普通情況下第③中權重最大，所以這里會是紅色。

此時我有個想法，在上面情況下，我想將其顏色變為金色怎么辦？

見效果：

參考資料

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

[2]. 不是說ID選擇器只可以用一次么，不是說ID選擇器只能選擇一個標簽么？

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

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

[5]. [display:inline-block 和float:left 的區別

[6]. CSS中的clear屬性

[7]. 利用@media screen實現網頁布局的自適應（響應式布局）對于@media有著詳細介紹及使用方式，包括參數

我是長路，感謝你的耐心閱讀。如有問題請指出，我會積極采納！
歡迎關注我的公眾號【長路Java】，分享Java學習文章及相關資料
Q群：851968786 我們可以一起探討學習
注明：轉載可，需要附帶上文章鏈接

總結

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

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

上一篇：《PyQT5软件开发 - 控件篇》第3章
下一篇： CSS选择器和层叠性