10分钟带你探索css中更为奇妙的奥秘
10分鐘帶你探索css中更為奇妙的奧秘
- 📖序言
- 📃一、css是啥
- 1. CSS是什么
- 2. 誕生背景
- 3. 基礎(chǔ)規(guī)則
- (1)一些基礎(chǔ)規(guī)則
- (2)其他重要的語(yǔ)法
- (3)選擇器
- (4)層疊與繼承
- 1)層疊
- 2)繼承
- 📜二、css怎么學(xué)
- 1. 在線網(wǎng)站
- (1)codecademy.com
- (2)udacity.com
- (3)w3school.com && runoob.com
- (4)freecodecamp.org
- (5)挑一個(gè)
- 2. 持續(xù)學(xué)習(xí)
- (1)MDN文檔
- (2)CSS-TRICKS
- (3)w3c CSS標(biāo)準(zhǔn)
- 📄三、CSS常用規(guī)則
- 1. 布局相關(guān)
- (1)盒模型
- 1)css的盒模型
- 2)盒模型內(nèi)容詳述
- 3)盒模型的分類
- Ⅰ. 第一種行為👇
- Ⅱ. 第二種行為👇
- Ⅲ. 第三種行為👇
- (2)正常文檔流
- 1)舉例說明
- 2)塊級(jí)元素和內(nèi)聯(lián)元素
- (3)彈性布局
- 1)彈性布局是什么
- 2)一些概念
- (4)定位
- 1)static
- 2)相對(duì)定位relative
- 3)相對(duì)定位absolute
- 4)z-index
- 5)應(yīng)用
- 2. 裝飾相關(guān)
- (1)文字
- (2)背景
- (3)邊框
- (4)陰影
- (5)交互相關(guān)
- (6)動(dòng)畫
- 📰四、css精益求精
- 1. css調(diào)試
- (1)審查css
- (2)理解盒模型
- 2. css擴(kuò)展
- (1)css預(yù)處理器
- (2)less
- 3. css革新
- 📑五、結(jié)束語(yǔ)
- 🐣彩蛋 One More Thing
- (:往期推薦
- (:番外篇
📖序言
對(duì)于前端來說, css 是入門時(shí)和 HTML 一起學(xué)習(xí)的一門語(yǔ)言,它規(guī)定了很多樣式和規(guī)范。但對(duì)于很多小伙伴來說,有時(shí)候可能只是簡(jiǎn)單的使用,但卻不知道原來 css 還能畫動(dòng)畫,又或者原來 css 還有層疊上下文等等概念。
那么在下面的這篇文章中,將帶領(lǐng)大家來探索 css 中更為奇妙的奧秘~
一起來學(xué)習(xí)吧~🧐
📃一、css是啥
1. CSS是什么
CSS ,層疊樣式表( cascading syle sheets ),是一種用來為結(jié)構(gòu)化文檔(基本就是 html )添加樣式的語(yǔ)言。
舉個(gè)例子:
假設(shè)我們現(xiàn)在要選擇一個(gè) HTML 頁(yè)面里所有的段落元素,并將其中的文本改成紅色,那么我們可以這樣寫 CSS 。代碼如下:
p {color: red; }2. 誕生背景
在沒有 css 以前,所有樣式都混在 html 里。假如一個(gè)標(biāo)題要用斜體字、紅色的字符、白色的底色的話,那么我們要這樣寫:
<h2><font color="red" bgcolor="white"><i>使用css</i></font> </h2>這樣看起來似乎也太冗余了。因此呢,現(xiàn)在有了 css 樣式,來使得樣式和文章結(jié)構(gòu)順利地達(dá)到分離的效果。
我們來看下上面這段代碼用 html 和 css 如何進(jìn)行樣式和結(jié)構(gòu)分離。代碼如下:
<h2>使用css </h2> <style>h2{color: red;background: white;font-style: italic;} </style>大家可以看到,有了 css ,這樣的文章結(jié)構(gòu)是不是就清晰了很多呢。
3. 基礎(chǔ)規(guī)則
(1)一些基礎(chǔ)規(guī)則
現(xiàn)在,讓我們用一段代碼來仔細(xì)地分析下 css 的一些規(guī)則。大家先看下圖:
在上圖中,整個(gè)結(jié)構(gòu)稱為規(guī)則集(通常簡(jiǎn)稱為“規(guī)則”),其各部分釋義如下:
- 選擇器: 選擇了一個(gè)或多個(gè)需要添加樣式的元素(在這個(gè)例子中就是 p 元素);
- 聲明: 一個(gè)單獨(dú)的規(guī)則,如 color: red; 用來指定添加樣式元素的屬性;
- 屬性: 指定要改變 HTML 元素樣式;
- 屬性的值: 從指定屬性的眾多外觀中選擇一個(gè)值(除了 red 之外還有很多 color 的值)。
(2)其他重要的語(yǔ)法
了解了以上規(guī)則集之后,同時(shí)我們還需要注意其他重要的語(yǔ)法。具體如下:
- 每個(gè)規(guī)則集(除了選擇器的部分)都應(yīng)該包含在成對(duì)的大括號(hào)里 {} 。
- 在每個(gè)聲明里要用冒號(hào) : 將屬性與屬性值分隔開。
- 在每個(gè)規(guī)則集里要用分號(hào) ; 將各個(gè)聲明分隔開。
- 如果要同時(shí)修改多個(gè)屬性,只需要將它們用分號(hào) ; 隔開。
- 也可以選擇多種類型的元素并為它們添加一組相同的樣式。將不同的選擇器用逗號(hào)分開。
(3)選擇器
現(xiàn)在,我們來對(duì) css 的選擇器做一個(gè)詳細(xì)的介紹。
選擇器有許多不同的類型,它主要是用來選擇 HTML 文檔中給定的元素。下面給出一些常用的選擇器類型:
| 元素選擇器(也稱作標(biāo)簽或類選擇器) | 所有指定(該)類型的 HTML 元素 | p,選擇 <p> |
| ID選擇器 | 具有特定 ID 的元素(單一 HTML 頁(yè)面中,每個(gè) ID 只對(duì)應(yīng)一個(gè)元素,一個(gè)元素只對(duì)應(yīng)一個(gè) ID) | #my-id,選擇 <p id="my-id"> 或者 <a id="my-id"> |
| 類選擇器 | 具有特定類的元素(單一頁(yè)面中,一個(gè)類可以有多個(gè)實(shí)例) | .my-class,選擇<p class="my-class">或者<a class="my-class"> |
| 屬性選擇器 | 擁有特定屬性的元素 | img[src],選擇 <img src="myimage.png"> 而不是 <img> |
| 偽(Pseudo)類選擇器 | 特定狀態(tài)下的特定元素(比如鼠標(biāo)指針懸停) | a:hover,僅在鼠標(biāo)指針懸停在鏈接上時(shí)選擇<a> |
(4)層疊與繼承
了解完選擇器之后,我們還需要了解 css 中一個(gè)很重要的概念,層疊與繼承。接下來就讓我們一起來學(xué)習(xí)這個(gè)概念。
1)層疊
瀏覽器由選擇器優(yōu)先級(jí)來決定規(guī)則,一般來說,一個(gè)選擇器越具體,那么它的優(yōu)先級(jí)就越高。比如:
- 一個(gè)元素選擇器不是很具體 —— 會(huì)選擇頁(yè)面上該類型的所有元素。
- 一個(gè)類選擇器稍微具體點(diǎn) —— 它會(huì)選擇該頁(yè)面中有特定 class 屬性值的元素,所以它的優(yōu)先級(jí)就要高一點(diǎn)。
我們來舉個(gè)例子看看效果,具體如下:
.main-heading {color: red; }h1 {color: blue; }<h1 class="main-heading"> This is my heading.</h1>我們來看下顯示效果:
大家可以看到,這個(gè) h1 最終顯示的是紅色字體,而不是藍(lán)色字體。那有小伙伴就會(huì)有疑惑說,不是哪個(gè)在后面才會(huì)選擇哪個(gè)嗎?
答案其實(shí)只對(duì)了一半。在上面的這段代碼中, class 選擇器的優(yōu)先級(jí)要比 h1 屬性選擇器的優(yōu)先級(jí)要高,所以最終顯示的是紅色。
2)繼承
在 css 中,一些設(shè)置在父元素上的 css 屬性是可以被子元素繼承的,有些則不能。
舉個(gè)例子:
如果你設(shè)置一個(gè)元素的 color 和 font-family ,那么每個(gè)在里面的元素也都會(huì)有相同的屬性值,除非你直接在元素上設(shè)置屬性。
來看一段代碼:
p {color: blue; }<p>text in p<span>text in span</span>.</p>在上面的這段代碼中,它將全部顯示為藍(lán)色。這是為什么呢??
理論上 span 會(huì)顯示為黑色,但是它沒有。原因在于 color 是繼承屬性,因此 span 中的文字也將繼承到 p 的樣式,所以最終顯示的也為藍(lán)色。
📜二、css怎么學(xué)
在進(jìn)一步講解 css 有哪些規(guī)則之前,先給大家分享幾個(gè)學(xué)習(xí)資源。 css 的內(nèi)容非常多,也比較適合自學(xué),因此這里分享幾個(gè)可以在課后不斷耕耘的 css 知識(shí)網(wǎng)站。
1. 在線網(wǎng)站
(1)codecademy.com
codecademy.com 是一個(gè)老牌的在線編程教育網(wǎng)站,全程交互式自助式學(xué)習(xí)體驗(yàn),非常適合 css 邊學(xué)邊練的的場(chǎng)景。
(2)udacity.com
udacity.com 也是一個(gè)老牌的在線編程教育網(wǎng)站。雖然是外文網(wǎng)站,但進(jìn)入課程內(nèi)中文是拉滿的。有以下兩點(diǎn)推薦理由:①免費(fèi);②視頻式教學(xué)+課后實(shí)驗(yàn)互動(dòng)的形式,給喜歡看著老師講解的小伙伴們推薦。
(3)w3school.com && runoob.com
一個(gè)中文一個(gè)英文。免費(fèi),交互式,內(nèi)容比較全面,不錯(cuò)的實(shí)操演練場(chǎng)。
(4)freecodecamp.org
Github 上 star 最多的項(xiàng)目。由社區(qū)貢獻(xiàn)而成的全面的程序員自學(xué)課程。
(5)挑一個(gè)
有小伙伴說,看了這么多,不知道要挑哪一個(gè)來學(xué)呢?
推薦順序的話就是從前到后推薦。就是 專業(yè)在線課程團(tuán)隊(duì)出品 > 自助式學(xué)習(xí) ≈ 社區(qū)型自助式 。
如果你是零基礎(chǔ),上面任一一個(gè)課程,一個(gè)周末左右應(yīng)該能學(xué)的差不多。有了基礎(chǔ)后,以后你再想深挖哪個(gè)場(chǎng)景下的 css 應(yīng)用規(guī)則,再去看文檔即可。什么場(chǎng)景(字體、定位、顏色等),這些內(nèi)容對(duì)應(yīng)的需要去查哪些屬性相信你心中也應(yīng)該有了自己的一個(gè)答案~
2. 持續(xù)學(xué)習(xí)
如果一直在干前端這一行的話,那么,以下這些網(wǎng)站,可能會(huì)陪你到 35歲,甚至也有可能是一輩子。(言重了hh)
下面我們一起來看一下是哪幾個(gè)網(wǎng)站吧~
(1)MDN文檔
網(wǎng)站地址為 [https://developer.mozilla.org/zh- CN/docs/Web/CSS](https://developer.mozilla.org/zh- CN/docs/Web/CSS) 。它是 css 的文檔庫(kù),基本上會(huì)是前端程序員最常來的地方,同時(shí) html 和 js 的規(guī)則也在這里面。除此之外呢,里面還有豐富的各式各樣的教程,把它當(dāng)做是一個(gè)自由探索的網(wǎng)站也是相當(dāng)不錯(cuò)滴。
(2)CSS-TRICKS
網(wǎng)站地址為 https://css-tricks.com/almanac/ 。這是另外一個(gè) css 文檔庫(kù),它擁有非常活躍的 css 社區(qū),里面有各種奇技淫巧,把它作為 mdn 的補(bǔ)充也是相當(dāng)合適的。
(3)w3c CSS標(biāo)準(zhǔn)
網(wǎng)站地址為 w3.org/Style/CSS。前面的網(wǎng)站和文檔基本上都只在告訴你一些css的用法。比如 color:red; ,就是文本變?yōu)榧t色。但其實(shí),它遠(yuǎn)不止于用來實(shí)現(xiàn)文本的顏色,那你想知道它還能干嘛么?
w3c文檔,或許就能告訴你答案。
📄三、CSS常用規(guī)則
1. 布局相關(guān)
(1)盒模型
1)css的盒模型
在介紹布局相關(guān)的屬性之前,我們要先了解一個(gè)概念:在 CSS 中,所有的元素都被一個(gè)個(gè)的 “盒子(box)” 包圍著。因此,理解這些盒子的基本原理,是我們使用 CSS 實(shí)現(xiàn)準(zhǔn)確布局、處理元素排列的關(guān)鍵。
我們先來看一張圖:
2)盒模型內(nèi)容詳述
現(xiàn)在,我們來對(duì)盒模型中的內(nèi)容進(jìn)行一個(gè)詳細(xì)的了解。具體如下👇
在 css 中,組成一個(gè)塊級(jí)盒子需要以下內(nèi)容:
- Content box:這個(gè)區(qū)域主要是用來顯示內(nèi)容,它的大小可以通過 width 和 height 來進(jìn)行設(shè)置。
- Padding box:這個(gè)區(qū)域包圍在內(nèi)容區(qū)域外部的空白區(qū)域,它的大小可以通過 padding 的相關(guān)屬性來進(jìn)行設(shè)置。
- Border box:這個(gè)區(qū)域是邊框盒,邊框盒包裹內(nèi)容和內(nèi)邊距,它的大小通過 border 的相關(guān)屬性來進(jìn)行設(shè)置。
- Margin box:這是最外面的區(qū)域,是盒子和其他元素之間的空白區(qū)域,它的大小通過 margin 的相關(guān)屬性來進(jìn)行設(shè)置。
3)盒模型的分類
盒模型中的“盒子” ,又包括塊級(jí)盒子(block box)和內(nèi)聯(lián)盒子(inline box)。這兩種盒子會(huì)在頁(yè)面流(page flow)和元素之間的關(guān)系方面表現(xiàn)出不同的行為。
我們現(xiàn)在就這兩個(gè)盒子的一些行為來進(jìn)行闡述。具體如下:
Ⅰ. 第一種行為👇
如果一個(gè)盒子對(duì)外顯示為 inline ,那么它的行為如下:
- 盒子不會(huì)產(chǎn)生換行。
- width 和 height 屬性將不起作用。
- 垂直方向的內(nèi)邊距、外邊距以及邊框會(huì)被應(yīng)用但是不會(huì)把其他處于 inline 狀態(tài)的盒子推開。
- 水平方向的內(nèi)邊距、外邊距以及邊框會(huì)被應(yīng)用且會(huì)把其他處于 inline 狀態(tài)的盒子推開。
- 用做鏈接的 <a> 元素、 <span> 都是默認(rèn)處于 inline 狀態(tài)的。
Ⅱ. 第二種行為👇
下面我們用一個(gè)例子來展示下 contet-box 。具體如下:
附上代碼:
.box {width: 350px;height: 150px;margin: 25px;padding: 25px;border: 5px solid black; }附上顯示效果:
我們來計(jì)算一下,在上面的這個(gè)例子中, box 元素真正占用的面積是多少?
模型寬度 = 350px(content) + 25px(padding) + 25px(padding) + 5px(border) + 5px(border) = 410px。
模型高度 = 150px(content) + 25px(padding) + 25px(padding) + 5px(border) + 5px(border) = 210px。
大家可以看到,對(duì)于 content-box 的盒子來說,它整個(gè)盒子包含的內(nèi)容是 content + padding + border 。
那如果我們想要修改瀏覽器這一默認(rèn)行為,也就是想要不管 padding 和 border 怎么撐開,整個(gè)盒子加起來的寬高就只能是我們定義的寬高,又該怎么處理呢?
附上代碼:
.box {width: 350px;height: 150px;margin: 25px;padding: 25px;border: 5px solid black; } .box {box-sizing: border-box; }附上顯示效果:
大家可以看到,使用了 box-sizing: border-box 之后,它的所有寬度加起來是 350px ,高度加起來是 150px 。通過這個(gè)屬性,達(dá)到了我們想要的效果。
但是細(xì)心的效果可能已經(jīng)發(fā)現(xiàn)了一個(gè)問題,如果我們每次都要去控制它具體的類選擇器來實(shí)現(xiàn)寬高,那這樣寫起來得多累人呀對(duì)吧。
因此呢,如果你希望所有元素都使用替代模式,那么你可以直接設(shè)置 box-sizing 在 <html> 元素上,然后設(shè)置所有元素來繼承該屬性,如下代碼所示:
html {box-sizing: border-box; }*, *::before, *::after {box-sizing: inherit; }Ⅲ. 第三種行為👇
display 有一個(gè)特殊的值,它在內(nèi)聯(lián)和塊之間提供了一個(gè)中間狀態(tài)。這在一種情況下非常有用,比如說,你不希望一個(gè)項(xiàng)切換到新的一行,但是呢,又希望它可以設(shè)定寬度和高度。那么我們可以設(shè)置 display: inline-block; ,來達(dá)到我們最后的效果。下面我們來看一個(gè)例子:
附上代碼:
span {margin: 20px;padding: 20px;width: 80px;height: 50px;border: 2px solid blue;display: inline-block; }附上效果圖:
到這里,關(guān)于盒模型的內(nèi)容講解就告一段落啦!還有更多的使用技巧和延伸屬性,可以進(jìn)一步前往 mdn 文檔學(xué)習(xí)。
(2)正常文檔流
1)舉例說明
盒模型解釋了一個(gè)元素塊的尺寸,那么元素塊在整篇文檔中的位置是如何確定的呢?
我們先來看一段代碼:
<style>p {background: rgba(255, 84, 104, 0.3);border: 2px solid rgb(255, 84, 104);padding: 10px;margin: 10px;}span {background: white;border: 1px solid black;} </style><p>這是 p 標(biāo)簽內(nèi)容 </p> <p>這是 p 標(biāo)簽內(nèi)容<span>這是 span 標(biāo)簽內(nèi)容</span> </p>現(xiàn)在我們來看下效果:
在上面的代碼中, <p> 標(biāo)簽是塊級(jí)元素,而 <span> 標(biāo)簽是內(nèi)聯(lián)元素。下面,我們就這兩個(gè)元素來進(jìn)行解析。
2)塊級(jí)元素和內(nèi)聯(lián)元素
塊級(jí)元素👇
- 默認(rèn)情況下,塊級(jí)元素按照基于其父元素的書寫順序(默認(rèn)值: horrizontal-tb )的塊流動(dòng)方向( block flow direction )放置;
- 每個(gè)塊級(jí)元素會(huì)在上一個(gè)元素的下方另起一行,它們會(huì)被設(shè)置好的 margin 分隔開,且塊級(jí)元素是垂直組織的。
內(nèi)聯(lián)元素👇
- 而對(duì)于內(nèi)聯(lián)元素來說,其表現(xiàn)與塊級(jí)元素有所不同,它們不會(huì)另起一行;只要其父級(jí)塊級(jí)元素的寬度內(nèi)有足夠的空間,那么塊級(jí)元素里面的內(nèi)容將與其他內(nèi)聯(lián)元素被安排在同一行。
- 但是呢,如果空間不夠,那么溢出的文本或元素將被移到新的一行。
(3)彈性布局
1)彈性布局是什么
彈性盒子是一種用于按行或按列來布局元素的一維布局方法。元素可以膨脹以填充額外的空間,收縮以適應(yīng)更小的空間。如下圖所示:
2)一些概念
第一個(gè)概念👇
只需要在容器上加 display:flex 屬性,你就可以得到一個(gè)橫排的布局。就盒模型而言,此時(shí)容器類似于塊級(jí)元素( display:block ) ,但寬度默認(rèn)由子元素決定;子元素類似 inline-block 元素,可以設(shè)置寬高且不換行。且子元素原本的 display 實(shí)行基本被無視了,這是一種隱含的盒模型狀態(tài)。
來看一段演示:
.container {display: flex; }具體顯示效果如下:
第二個(gè)概念👇
這種布局非常靈活,可以完成 90% 的布局要求。同時(shí),可以使用 flex-direction 屬性來控制子元素 的排布順序。
來看一個(gè)例子:
.container {disply: flex; }.container {flex-direction: row | row-reverse | column | column-reverse; }具體顯示效果如下:
第三個(gè)概念👇
flex 布局類似塊級(jí)盒子,可以設(shè)置比子元素所需要更大的寬度。而 justify-content 屬性,會(huì)幫你確定此時(shí)元素如何分配空間。
來看一個(gè)例子:
.container {disply: flex; }.container {justify-content: flex-start | flex-end | center | space-between; }具體顯示效果如下:
第四個(gè)概念👇
同樣地,當(dāng)父容器高度溢出時(shí), align-items 幫你確定子元素如何垂直對(duì)齊。
來看一個(gè)例子:
.container {disply: flex; }.container {align-items: stretch | flex-start | flex-end | center | baseline; }具體顯示效果如下:
以上內(nèi)容是最常用的彈性盒子用法。在 50% 的情況下,瀏覽器會(huì)幫你分配好各個(gè)元素所占的空間;但另外 50% 呢,就需要你自己來做額外調(diào)整啦!這個(gè)時(shí)候你需要了解關(guān)于彈性盒子的更多屬性。
戳此鏈接👉CSS-TRICKS —— 彈性盒子介紹
(4)定位
1)static
不管是正常的文檔流,還是彈性盒子,內(nèi)里元素排布都是相互影響的。前面的元素占了一塊地,后面的元素肯定就得稍微往后移一點(diǎn)。這其實(shí)涉及到的是一種定位情況,即靜態(tài)定位,它的 css 設(shè)置為 display: static; 。
來看一個(gè)例子:
<p>這是 p 標(biāo)簽內(nèi)容 </p> <p>這是 p 標(biāo)簽內(nèi)容<span>這是 span 標(biāo)簽內(nèi)容</span> </p>附上顯示效果:
2)相對(duì)定位relative
position 還能有其他值,比如相對(duì)定位, css 設(shè)置未 position: relative 。
相對(duì)定位在文檔流中仍然占據(jù)位置,但可以用 top, left,bottom,right 這四大屬性做一些偏移的操作。
來看一個(gè)例子:
<p>這是 p 標(biāo)簽內(nèi)容 </p> <p>這是 p 標(biāo)簽內(nèi)容<span style="position: relative; top: 16px; left: 8px;">這是 span 標(biāo)簽內(nèi)容</span> </p>附上顯示效果:
3)相對(duì)定位absolute
position: absolute ,這種叫做絕對(duì)定位。絕對(duì)定位的元素完全脫離了文檔流和個(gè)彈性盒子,且絕對(duì)定位的盒子的定位和大小,可以由你自己來完全指定。
來看一個(gè)例子:
<p>這是 p 標(biāo)簽內(nèi)容 </p> <p>這是 p 標(biāo)簽內(nèi)容<span style="position: absolute; top: 16px; left: 8px;">這是 span 標(biāo)簽內(nèi)容</span> </p>附上顯示效果:
此時(shí), top 和 left 已經(jīng)不是相對(duì)于原位置了,而是相對(duì)于一個(gè)非 static 定位的父元素容器。
同時(shí),這里再普及一個(gè)知識(shí)點(diǎn), position: fixed ,其 top 和 left 等屬性是相對(duì)于瀏覽器窗口。
4)z-index
由于非 static 值的 position 屬性讓元素之間可以相互覆蓋,因此呢, css 提供了 z-index 屬性來控制哪個(gè)元素覆蓋在最上層。
來看一個(gè)例子:
<p>這是 p 標(biāo)簽內(nèi)容 </p> <p>這是 p 標(biāo)簽內(nèi)容<span style="position: absolute; top: 16px; left: 8px; z-index: -1;">這是 span 標(biāo)簽內(nèi)容</span> </p>附上顯示效果:
5)應(yīng)用
非 static 值的定位讓元素非常獨(dú)立可控,廣泛應(yīng)用在彈窗、下拉選項(xiàng)、固定導(dǎo)航欄等場(chǎng)景。來看一下常見場(chǎng)景👇
2. 裝飾相關(guān)
(1)文字
css 可以使得文字花里胡哨,比如說變換顏色,下劃線,加粗等等樣式。
下面來看一段代碼:
<div style="border: 1px solid black; width: 250px;"><div style="">Basic document flow</div><div style="font-family: serif;">Basic document flow</div><div style="color: purple;">Basic document flow</div><div style="font-weight: bold;">Basic document flow</div><div style="font-style: italic;">Basic document flow</div><div style="text-align: center;">Basic document flow</div><div style="font-size: 24px;">Basic document flow</div> </div>具體顯示效果如下:
(2)背景
css 可以個(gè)背景設(shè)置顏色,漸變色,圖片背景等等。
下面來看一段代碼:
<style>.bg {width: 100px;height: 100px;}.bg1 {background-color: rebeccapurple;}.bg2 {background-image: url("https://mdn.mozillademos.com/");}.bg22 {background-repeat: no-repeat;background-color: blueviolet;}.bg3 {background-image: linear-gradient(to right,hsl(100, 50%, 50%),hsl(180, 50%, 50%));} </style><div class="bg bg1"></div> <div class="bg bg2"></div> <div class="bg bg2 bg22"></div> <div class="bg bg3"></div>具體顯示效果如下:
(3)邊框
有時(shí)候我們想要給我們的盒子加一些邊框來進(jìn)行點(diǎn)綴,那么我們可以用 css 中的 border 來進(jìn)行處理。
下面來看一段代碼:
border: solid; border: dashed red; border: 1rem solid; border: thick double #32a1ce; border: 4mm ridge rgba(170, 50, 220, 6);具體顯示效果如下:
(4)陰影
我們有時(shí)候在網(wǎng)頁(yè)中經(jīng)常看到好多很好看的陰影,而這些也是 css 用 box-shadow 和 text-shadow 來展示的。
我們來看一些奇妙的陰影:
box-shadow: 10px 5px 5px red; box-shadow: 60px -16px teal; box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, .2); box-shadow: inset 5em 1em gold; box-shadow: 3px 3px red, -1em 0 .4em olive;具體顯示效果如下:
或者說,我們也可以給文字來點(diǎn)陰影:
<div style="text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6)">你好</div> <div style="text-shadow: 4px 4px rgba(0, 0, 0, 0.6)">你好</div>來看下具體效果:
(5)交互相關(guān)
大家都知道,平時(shí)我們?cè)跒g覽網(wǎng)頁(yè)時(shí),有時(shí)候在點(diǎn)擊內(nèi)容時(shí),會(huì)有一只小手顯示,而這些就是 css 的交互。通常情況下,我們用 cursor:pointer; 來進(jìn)行設(shè)置。來看一些常見的交互樣式:
對(duì)于交互相關(guān)的更多內(nèi)容,大家可以到mdn中交互相關(guān)的文檔進(jìn)一步體驗(yàn)。
(6)動(dòng)畫
在 css 中,還可以用 transition 、 animation 和 transform 等寫出很多炫酷的效果。
來看一段代碼演示:
.tran {width: 100px;height: 100px;background: mediumpurple;transition: width 300ms ease-in;animation: spin 5s ease-in-out infinite; }@keyframes spin {from {transform: rotate(0deg);}to {transform: rotate(360deg);} }具體顯示效果如下:
📰四、css精益求精
1. css調(diào)試
(1)審查css
在 css 的面板里,可以直接開關(guān)、編輯、新增屬性的值。如下圖所示:
(2)理解盒模型
同時(shí),我們來可以通過 layout view 來展示一張選定元素的盒模型示意圖。如下圖所示:
2. css擴(kuò)展
(1)css預(yù)處理器
另一種組織 CSS 的方法是利用一些對(duì)于前端開發(fā)者可用的工具,它們讓你可以稍微更程式化地 編寫 CSS 。預(yù)處理工具以你的原文件為基礎(chǔ)來進(jìn)行運(yùn)行,并將它們轉(zhuǎn)化為樣式表。代表工具有:
- less
- sass
- stylus
(2)less
這里我們以 less 為例,看看能夠?yàn)?css 擴(kuò)充哪些功能。
1)變量,編譯后會(huì)填充到對(duì)應(yīng)的位置。比如:
2)mixin,類似于函數(shù)。比如:
3. css革新
隨著 CSS 的不斷發(fā)展,到現(xiàn)在,我們編寫樣式已經(jīng)不一定需要寫 css 文件了。下面羅列出幾種常見的類型:
(1) 以 styled-components 為代表的 css-in-js 方案,通過用 JavaScript 的力量來武裝 css 。
(2) 以 tailwindcss 為代表的 utility-class 方案,改樣式只需要修改 html 文件即可,用有限的選擇幫助你定好設(shè)計(jì)規(guī)范。
📑五、結(jié)束語(yǔ)
在上面的文章中,我們從 css 的誕生背景和基礎(chǔ)定義入手,先初步認(rèn)識(shí)了 css 。緊接著,介紹了如何能夠正確地學(xué)習(xí) css ,以及 css 關(guān)鍵的盒模型、文檔流、布局、定位等關(guān)鍵概念和相關(guān)的 css 屬性,并展示了 css 裝飾文檔的可能性。
最后,我們簡(jiǎn)略地了解了 css 是如何調(diào)試的,以及當(dāng)今都有什么樣的工具可以幫助到我們更好的寫 css ,又如何用更好的理念去用 css 。
到這里,關(guān)于 css 的奧秘探索就結(jié)束啦!希望文章對(duì)大家有幫助~
🐣彩蛋 One More Thing
(:往期推薦
👉值得關(guān)注的HTML基礎(chǔ)知識(shí)
👉你可能對(duì)position和z-index有一些誤解
👉誰(shuí)動(dòng)了我的選擇器?深入理解CSS選擇器優(yōu)先級(jí)
(:番外篇
- 關(guān)注公眾號(hào)星期一研究室,第一時(shí)間關(guān)注優(yōu)質(zhì)文章,更多精選專欄待你解鎖~
- 如果這篇文章對(duì)你有用,記得留個(gè)腳印jio再走哦~
- 以上就是本文的全部?jī)?nèi)容!我們下期見!👋👋👋
總結(jié)
以上是生活随笔為你收集整理的10分钟带你探索css中更为奇妙的奥秘的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 手机游戏运营商十大品牌排行榜
- 下一篇: 前端只是切图仔?来学学给开发人看的UI设