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
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><!-- 方式一：內部編寫引用語法：選擇器{聲明1；聲明2；聲明3；} --><style>h1{color: red;}</style> </head><body><h1>我是標題1</h1></body> </html>方式二：外部引用css文件
方式三：使用內嵌式，直接寫在html標簽中(不建議)
<!--方式三：行內樣式 使用style屬性指定css樣式 --> <h1 style="color: red;">我是標題1</h1>優先級說明：就近原則，后使用的會將前面使用的覆蓋掉
css優勢：
擴展：外部樣式兩種寫法
鏈接式：html
<!-- 鏈接式 --> <link rel="stylesheet" type="text/css" href="./css/header.css"/>導入式：@import是css2.1特有的，需要被style標簽包裹
<style type="text/css">@import url("css/header.css"); </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修改顏色。
<body><p><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span></p> </body>正確寫法：
<style>/* 先定位到p元素，之后來確定span基于其父元素的位置 */p span:last-child {color: red;} </style>:last-child
:last-child：用于選取屬于其父元素的最后一個子元素的指定選擇器。
目的：想要為下面第一個span修改顏色。
<body><p><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span></p> </body>正確寫法：
<style>/* 先定位到p元素，之后來確定span基于其父元素的位置 */p span:last-child {color: red;} </style>: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使用
<style>/* a標簽前虛擬動態創建☆ */a::before {content: '☆';}/* a標簽后虛擬動態創建☆ */a::after {content: '?';} </style><body><a href="#">點我試試</a><a href="#">點我試試</a><a href="#">點我試試</a><a href="#">點我試試</a> </body>效果：
②::selection文字選中效果示例
<style>div.box1 {width: 400px;height: 400px;border: 1px solid black;}/* 設置鼠標選中的文字 */div::selection {background-color: gold;color: red;} </style><body><div class="box1">1231321313212311231321313212311123132131321231123132131321231123132131321231231321313212311231321313212311231321313212312313213132123112313213132123112313213132123123132131321231123132131321231123132131321231</div> </body>效果：
③::first-letter與::first-line示例
<style>div.box1 {width: 400px;height: 400px;border: 1px solid black;}/* 塊級元素中第一行的第一個文字：字號變大 */div.box1::first-letter {font-size: 30px;}/* 塊級元素中第一行的所有文字：下劃線 */div.box1::first-line {text-decoration: underline;} </style><body><div class="box1">1231321313212311231321313212311123132131321231123132131321231123132131321231231321313212311231321313212311231321313212312313213132123112313213132123112313213132123123132131321231123132131321231123132131321231</div> </body>效果：
四、層疊性與選擇器權重計算
4.1、層疊性沖突處理
CSS全名叫做"層疊式樣式表"。
層疊性：多個選擇器能夠同時作用于同一個標簽，效果疊加。
層疊性的沖突處理：如果多個選擇器定義的屬性有沖突？CSS中有嚴密的處理沖突的規則。
- id選擇器>class選擇器>標簽權重
4.2、復雜選擇器權重計算
當若是出現復雜的的多個css選擇器情況時，如何計算權重呢？
- 答：通過**(id個數、class個數、標簽的個數)**的形式來計算權重。計算好權重后依次從()中從前往后比較即可獲取權重大小。
實例演示：
<style>/* (2,0,1)：第二大 */#box1 #box2 p {color: red;}/* (2,1,2)：最大 */#box1 div.box2 #box3 p {color: green;}/* (0,3,1)：第三大 */.box1 .box2 .box3 p {color: blue;} </style><body><div id="box1" class="box1"><div id="box2" class="box2"><div id="box3" class="box3"><p>我是段落</p></div></div></div> </body>下面三個權重表從左往右進行比較，即可比較出對應的權重：
(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章
- 下一篇： 我辞职了准备系统学习新知识和技提升自己