Html5+CSS3基礎(chǔ)知識有哪些

這篇文章主要講解了“Html5+CSS3基礎(chǔ)知識有哪些”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“Html5+CSS3基礎(chǔ)知識有哪些”吧！

CSS選擇器：使用CSS對html頁面中的元素實現(xiàn)一對一，一對多或者多對一的控制：

1.屬性選擇器

在CSS3中追加了三個選擇器:[att*=val];[att^=val];[att$=val]–>att表示為屬性，val表示為屬性的屬性值。

[att*=val]:如果元素用att表示的屬性的值中包含val指定的字符，那么該元素使用這個樣式。

[att$=val]:如果元素用att表示的屬性的屬性值的結(jié)尾字符用val指定的字符，那么該元素使用這個樣式。

[att^=val]:如果元素用att表示的屬性的屬性值的開頭字符為用val指定的字符，那么該元素使用這個樣式。

注意： /如果純用數(shù)字的時候該樣式不會顯示成功，需要用\連接與數(shù)字最近的符號 注意！只有’-‘的字符需要加’\’/

2.結(jié)構(gòu)性偽類選擇器 (1)類選擇器 使用類選擇器把相同的元素定義成不同的樣式，偽類選擇器是已經(jīng)定義好的不可以隨便起名。

(2)偽類選擇器—-最常見的偽類選擇器：a（使用順序為：未，已，懸，停）

(3)偽元素選擇器 針對于CSS中已經(jīng)定義好的偽元素使用的選擇器(first-line;first-letter;before;after)。

我自己是一名從事了多年開發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學(xué)習(xí)的web前端學(xué)習(xí)干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關(guān)注我的頭條號并在后臺私信我：前端，即可免費獲取

first-line偽元素選擇器：向某個元素中的第一行文字使用樣式。

first-letter偽類選擇器：向某個元素中的文字的首字母或者第一個文字使用樣式。

before：在某個元素之前插入一些內(nèi)容。

after：在某個元素之后插入一些內(nèi)容。

可以使用before和after偽元素在頁面中插入文字，圖像，項目編號等。

插入文字：E:before/after

排除一些不需要插入內(nèi)容的元素：E:none：before/after

插入圖像

插入項目編號

a.在多個標(biāo)題前加上編號：counter屬性對項目追加編號

(4)結(jié)構(gòu)性偽類選擇器

first-child：單獨指定第一個子元素的樣式。

last-child：單獨指定最后一個子元素的樣式。

nth-child：選擇器匹配正數(shù)下來的第N個子元素，nth-child(odd)為第奇數(shù)個子元素，nth-child(even)為第偶數(shù)個子元素。

nth-last-child(n)：匹配倒數(shù)數(shù)下來第n個子元素。

nth-of-type：正數(shù)，當(dāng)指定元素為標(biāo)題加內(nèi)容的時候，如果使用上面的方法會導(dǎo)致真正的指定元素不被成功指定，因此需要使用nth-first-type方法進(jìn)行指定。

nth-last-type：倒數(shù)，同nth-first-type。

循環(huán)使用樣式：nth-child(An+B)–A 表示每次循環(huán)中共包括幾種樣式，B表示指定的樣式在循環(huán)中所處的位置。

only-child：只對一個元素起作用。

3.UI元素狀態(tài)偽類選擇器 指定的樣式只有在元素處于某種狀態(tài)下才起作用，在默認(rèn)狀態(tài)下不起作用！

first-line偽元素選擇器：向某個元素中的第一行文字使用樣式。

first-letter偽類選擇器：向某個元素中的文字的首字母或者第一個文字使用樣式。

before：在某個元素之前插入一些內(nèi)容。

after：在某個元素之后插入一些內(nèi)容。

可以使用before和after偽元素在頁面中插入文字，圖像，項目編號等。

插入文字：E:before/after

排除一些不需要插入內(nèi)容的元素：E:none：before/after

插入圖像

插入項目編號

a.在多個標(biāo)題前加上編號：counter屬性對項目追加編號

(4)結(jié)構(gòu)性偽類選擇器

first-child：單獨指定第一個子元素的樣式。

last-child：單獨指定最后一個子元素的樣式。

nth-child：選擇器匹配正數(shù)下來的第N個子元素，nth-child(odd)為第奇數(shù)個子元素，nth-child(even)為第偶數(shù)個子元素。

nth-last-child(n)：匹配倒數(shù)數(shù)下來第n個子元素。

nth-of-type：正數(shù)，當(dāng)指定元素為標(biāo)題加內(nèi)容的時候，如果使用上面的方法會導(dǎo)致真正的指定元素不被成功指定，因此需要使用nth-first-type方法進(jìn)行指定。

nth-last-type：倒數(shù)，同nth-first-type。

循環(huán)使用樣式：nth-child(An+B)–A 表示每次循環(huán)中共包括幾種樣式，B表示指定的樣式在循環(huán)中所處的位置。

only-child：只對一個元素起作用。

3.UI元素狀態(tài)偽類選擇器 指定的樣式只有在元素處于某種狀態(tài)下才起作用，在默認(rèn)狀態(tài)下不起作用！

Html5+CSS3基礎(chǔ)知識匯總-CSS3篇

4.兄弟元素選擇器 用來指定位于同一父元素之中的某個元素之后的所有其他某個種類的兄弟元素所使用的樣式。一定要是之后的兄弟元素！

位移距離：前兩個參數(shù)代表的陰影離開文字的橫(縱)方向距離，不可省略。

第三個參數(shù)代表模糊半徑，代表陰影向外模糊時候的范圍，數(shù)值越大越模糊。

當(dāng)沒有指定顏色值時，會使用默認(rèn)文字的顏色。

指定多個陰影，并且可以針對每個陰影用逗號分隔。

2.word-break：瀏覽器文本自動換行。

3.word-wrap： 長單詞與URL地址自動換行。

4.服務(wù)器端字體和@font-face屬性

定義斜體或粗體：在定義字體的時候，可以把字體定義成斜體或者粗體，在使用服務(wù)器服務(wù)器端字體的時候，需要根據(jù)斜體還是粗體使用不同的漢字。

顯示客戶端字體：首先將font-family設(shè)置為本地的字體名，然后將src屬性設(shè)置為local(‘字體’)。

font-variant：設(shè)置文本是否大小寫。

font-weight：設(shè)置文本的粗細(xì)。

font-stretch：設(shè)置文本是否橫向的拉伸變形。

2.3.盒模型

1.各種盒模型

inline-block類型

使用inline-block類型來執(zhí)行分列顯示

list-item類型

可以將多個元素作為列表顯示，同時在元素的開頭加上列表的標(biāo)記。

run-in類型和compact類型

none類型

當(dāng)元素被指定none后，該元素不會顯示

2.顯示不下的內(nèi)容

overflow屬性：指定對盒子中容納不下的內(nèi)容的顯示辦法

Html5+CSS3基礎(chǔ)知識匯總-CSS3篇

overflow-x屬性與overflow-y屬性

textoverflow：在盒子的末尾顯示代表省略符號的‘…’，但是該屬性只在內(nèi)容在水平位置上超出時顯示。

3.盒子陰影

box-shadow:讓盒在顯示的時候產(chǎn)生陰影的效果

對盒內(nèi)子元素設(shè)置陰影

對一個文字或第一行設(shè)置陰影：通過first-line或者first-letter

對表格和對單元格使用陰影

4.box-sizing寬高計算

指定針對元素的寬度和高度的計算方法

2.4.邊框和背景樣式

1.新增的背景屬性

background-clip:指定背景的顯示范圍

border-box：從邊框開始

padding-box：從內(nèi)邊框開始

content-box：從內(nèi)容開始

background-orgin:指定繪制背景圖像的起點

可以指定繪制時的起始位置，默認(rèn)為padding，可以為border或者content左上角開始繪制。

background-size:指定背景中圖像的尺寸

auto

length

percentage：以父元素的百分比設(shè)置背景圖像的寬高度。

cover：全覆蓋。

contain ：與cover相反，主要將背景圖片縮小，來適合布滿整個容器。

2.顯示多個背景屬性： 第一個圖像在最上面

3.圓角邊框：border-radius

指定兩個半徑：左上右下+左下右上

當(dāng)不顯示邊框的時候，瀏覽器會把四個角繪制成圓角

修改邊框種類。

繪制四個不同半徑的邊框

4.圖像邊框：border-image

可以讓元素的長度或?qū)挾忍幱陔S時變化時，變化狀態(tài)的邊框統(tǒng)一使用一個圖像文件來進(jìn)行繪制。

2.5.CSS3變形功能

1.利用transform實現(xiàn)文字或圖像的旋轉(zhuǎn)，縮放，傾斜移動這四種類型的變形處理。

旋轉(zhuǎn)：totate(角度)

縮放：scale(值):0.5即為縮放到50%

傾斜:skew(值),值為角度

移動：translate(值)

對一個元素使用多個方法

transform：方法1 方法2 方法 3 方法4

改變元素基點

transform-origin:

2.6.CSS3的動功能

1.transition功能：支持從一個屬性值平滑到另外一個屬性值

允許CSS屬性值在一定的時間內(nèi)平滑的過度，這種效果可以在單擊，獲得焦點，被點擊或?qū)υ厝魏胃淖冎杏|發(fā)，并圓滑的以動畫效果改變CSS屬性值。

(1)執(zhí)行變換的屬性：transition-property：過渡即將開始

none：沒有屬性會獲得過渡效果

all:所以屬性會獲得過渡效果

property：定義應(yīng)用過渡效果的CSS屬性名稱列表，以逗號分隔

(2)變換延續(xù)時間：transition-duration：規(guī)定完成過渡需要花費的時間，默認(rèn)值零沒有效果。

(3)在延續(xù)時間段，變換速率的變化：transition-timing-function。

(4)變換延遲時間：transition-delay：指定一個動畫開始執(zhí)行的時間，也就是當(dāng)改變元素屬性值后多長時間開始執(zhí)行過渡效果。

2.Animations功能：支持通過關(guān)鍵幀的指定來在頁面上產(chǎn)生更復(fù)雜的動畫現(xiàn)象。

2.7.CSS3的分頁

1.點擊及鼠標(biāo)懸停分頁樣式

2.鼠標(biāo)懸停過渡效果：transition: background-color .9s;

3.圓角樣式：border-radius

4.邊框：border:2px solid darkviolet;

2.8.布局相關(guān)樣式

1.多欄布局

column-count屬性：將一個元素中的內(nèi)容分成多欄進(jìn)行顯示，要將元素的寬度設(shè)置成多個欄目的總寬度

column-width屬性：指定欄目的寬度來生成分欄

column-gap屬性：指定欄目之間的距離

column-rule:欄目之間添加分隔線

2.盒布局： 多欄布局的欄目寬度必須相等，指定欄目的寬度的時候也只能統(tǒng)一指定，但是欄目的寬度不可能全部都一樣，所以多欄布局比較適合在文字內(nèi)容頁面顯示，比如新聞。并不適合整個網(wǎng)頁編排時使用。而盒布局就相對比較隨意一些，可以定義成不同的頁面。

3.彈性盒子布局

(1)box-flex：使得盒子布局變成彈性布局：可以自適應(yīng)窗口

(2)box-ordinal-group：改變元素的顯示順序

(3)box-orient：改變元素排列方向

horizontal:在水平行中從左向右排列子元素

vertical：從上向下垂直排列子元素

Html5+CSS3基礎(chǔ)知識匯總-CSS3篇

Html5+CSS3基礎(chǔ)知識匯總-CSS3篇

(4)元素的高度寬度自適應(yīng)：就是元素的高度和寬度可以根據(jù)排列的方向改變而改變。 (5)使用彈性布局來消除空白：方法就是給子div中加入一個box-flex屬性。

Html5+CSS3基礎(chǔ)知識匯總-CSS3篇

(6)對多個元素使用box-flex屬性，讓瀏覽器或者容器中的元素的總寬度或者總高度都等于瀏覽器或者容器高度。

(7)box-pack屬性和box-align屬性：指定水平方向與垂直方向的對齊方式(文字，圖像，以及子元素的水平方向或是垂直方向上的對齊方式)

2.9.不同瀏覽器加載不同的CSS樣式

Media Queries模塊是CSS3中的一個和各種媒體相關(guān)的重要模塊

Html5+CSS3基礎(chǔ)知識匯總-CSS3篇

Html5+CSS3基礎(chǔ)知識匯總-CSS3篇

Html5+CSS3基礎(chǔ)知識匯總-CSS3篇

感謝各位的閱讀，以上就是“Html5+CSS3基礎(chǔ)知識有哪些”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對Html5+CSS3基礎(chǔ)知識有哪些這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！