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章
- 下一篇: 我辞职了准备系统学习新知识和技提升自己