十年網(wǎng)站開發(fā)經(jīng)驗(yàn) + 多家企業(yè)客戶 + 靠譜的建站團(tuán)隊(duì)
量身定制 + 運(yùn)營(yíng)維護(hù)+專業(yè)推廣+無憂售后,網(wǎng)站問題一站解決
這篇文章主要講解了“Html5+CSS3基礎(chǔ)知識(shí)有哪些”,文中的講解內(nèi)容簡(jiǎn)單清晰,易于學(xué)習(xí)與理解,下面請(qǐng)大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“Html5+CSS3基礎(chǔ)知識(shí)有哪些”吧!
創(chuàng)新互聯(lián)建站從2013年成立,是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司,擁有項(xiàng)目網(wǎng)站制作、做網(wǎng)站網(wǎng)站策劃,項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命,1280元個(gè)舊做網(wǎng)站,已為上家服務(wù),為個(gè)舊各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:13518219792
CSS選擇器:使用CSS對(duì)html頁面中的元素實(shí)現(xiàn)一對(duì)一,一對(duì)多或者多對(duì)一的控制:
1.屬性選擇器
在CSS3中追加了三個(gè)選擇器:[att*=val];[att^=val];[att$=val]–>att表示為屬性,val表示為屬性的屬性值。
[att*=val]:如果元素用att表示的屬性的值中包含val指定的字符,那么該元素使用這個(gè)樣式。
[att$=val]:如果元素用att表示的屬性的屬性值的結(jié)尾字符用val指定的字符,那么該元素使用這個(gè)樣式。
[att^=val]:如果元素用att表示的屬性的屬性值的開頭字符為用val指定的字符,那么該元素使用這個(gè)樣式。
注意: /如果純用數(shù)字的時(shí)候該樣式不會(huì)顯示成功,需要用\連接與數(shù)字最近的符號(hào) 注意!只有’-‘的字符需要加’\’/
2.結(jié)構(gòu)性偽類選擇器 (1)類選擇器 使用類選擇器把相同的元素定義成不同的樣式,偽類選擇器是已經(jīng)定義好的不可以隨便起名。
(2)偽類選擇器—-最常見的偽類選擇器:a(使用順序?yàn)椋何?,已,懸,停?/p>
(3)偽元素選擇器 針對(duì)于CSS中已經(jīng)定義好的偽元素使用的選擇器(first-line;first-letter;before;after)。
我自己是一名從事了多年開發(fā)的web前端老程序員,目前辭職在做自己的web前端私人定制課程,今年年初我花了一個(gè)月整理了一份最適合2019年學(xué)習(xí)的web前端學(xué)習(xí)干貨,各種框架都有整理,送給每一位前端小伙伴,想要獲取的可以關(guān)注我的頭條號(hào)并在后臺(tái)私信我:前端,即可免費(fèi)獲取
first-line偽元素選擇器:向某個(gè)元素中的第一行文字使用樣式。
first-letter偽類選擇器:向某個(gè)元素中的文字的首字母或者第一個(gè)文字使用樣式。
before:在某個(gè)元素之前插入一些內(nèi)容。
after:在某個(gè)元素之后插入一些內(nèi)容。
可以使用before和after偽元素在頁面中插入文字,圖像,項(xiàng)目編號(hào)等。
插入文字:E:before/after
排除一些不需要插入內(nèi)容的元素:E:none:before/after
插入圖像
插入項(xiàng)目編號(hào)
a.在多個(gè)標(biāo)題前加上編號(hào):counter屬性對(duì)項(xiàng)目追加編號(hào)
(4)結(jié)構(gòu)性偽類選擇器
first-child:?jiǎn)为?dú)指定第一個(gè)子元素的樣式。
last-child:?jiǎn)为?dú)指定最后一個(gè)子元素的樣式。
nth-child:選擇器匹配正數(shù)下來的第N個(gè)子元素,nth-child(odd)為第奇數(shù)個(gè)子元素,nth-child(even)為第偶數(shù)個(gè)子元素。
nth-last-child(n):匹配倒數(shù)數(shù)下來第n個(gè)子元素。
nth-of-type:正數(shù),當(dāng)指定元素為標(biāo)題加內(nèi)容的時(shí)候,如果使用上面的方法會(huì)導(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:只對(duì)一個(gè)元素起作用。
3.UI元素狀態(tài)偽類選擇器 指定的樣式只有在元素處于某種狀態(tài)下才起作用,在默認(rèn)狀態(tài)下不起作用!
first-line偽元素選擇器:向某個(gè)元素中的第一行文字使用樣式。
first-letter偽類選擇器:向某個(gè)元素中的文字的首字母或者第一個(gè)文字使用樣式。
before:在某個(gè)元素之前插入一些內(nèi)容。
after:在某個(gè)元素之后插入一些內(nèi)容。
可以使用before和after偽元素在頁面中插入文字,圖像,項(xiàng)目編號(hào)等。
插入文字:E:before/after
排除一些不需要插入內(nèi)容的元素:E:none:before/after
插入圖像
插入項(xiàng)目編號(hào)
a.在多個(gè)標(biāo)題前加上編號(hào):counter屬性對(duì)項(xiàng)目追加編號(hào)
(4)結(jié)構(gòu)性偽類選擇器
first-child:?jiǎn)为?dú)指定第一個(gè)子元素的樣式。
last-child:?jiǎn)为?dú)指定最后一個(gè)子元素的樣式。
nth-child:選擇器匹配正數(shù)下來的第N個(gè)子元素,nth-child(odd)為第奇數(shù)個(gè)子元素,nth-child(even)為第偶數(shù)個(gè)子元素。
nth-last-child(n):匹配倒數(shù)數(shù)下來第n個(gè)子元素。
nth-of-type:正數(shù),當(dāng)指定元素為標(biāo)題加內(nèi)容的時(shí)候,如果使用上面的方法會(huì)導(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:只對(duì)一個(gè)元素起作用。
3.UI元素狀態(tài)偽類選擇器 指定的樣式只有在元素處于某種狀態(tài)下才起作用,在默認(rèn)狀態(tài)下不起作用!
Html5+CSS3基礎(chǔ)知識(shí)匯總-CSS3篇
4.兄弟元素選擇器 用來指定位于同一父元素之中的某個(gè)元素之后的所有其他某個(gè)種類的兄弟元素所使用的樣式。一定要是之后的兄弟元素!
位移距離:前兩個(gè)參數(shù)代表的陰影離開文字的橫(縱)方向距離,不可省略。
第三個(gè)參數(shù)代表模糊半徑,代表陰影向外模糊時(shí)候的范圍,數(shù)值越大越模糊。
當(dāng)沒有指定顏色值時(shí),會(huì)使用默認(rèn)文字的顏色。
指定多個(gè)陰影,并且可以針對(duì)每個(gè)陰影用逗號(hào)分隔。
2.word-break:瀏覽器文本自動(dòng)換行。
3.word-wrap: 長(zhǎng)單詞與URL地址自動(dòng)換行。
4.服務(wù)器端字體和@font-face屬性
定義斜體或粗體:在定義字體的時(shí)候,可以把字體定義成斜體或者粗體,在使用服務(wù)器服務(wù)器端字體的時(shí)候,需要根據(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類型
可以將多個(gè)元素作為列表顯示,同時(shí)在元素的開頭加上列表的標(biāo)記。
run-in類型和compact類型
none類型
當(dāng)元素被指定none后,該元素不會(huì)顯示
2.顯示不下的內(nèi)容
overflow屬性:指定對(duì)盒子中容納不下的內(nèi)容的顯示辦法
Html5+CSS3基礎(chǔ)知識(shí)匯總-CSS3篇
overflow-x屬性與overflow-y屬性
textoverflow:在盒子的末尾顯示代表省略符號(hào)的‘…’,但是該屬性只在內(nèi)容在水平位置上超出時(shí)顯示。
3.盒子陰影
box-shadow:讓盒在顯示的時(shí)候產(chǎn)生陰影的效果
對(duì)盒內(nèi)子元素設(shè)置陰影
對(duì)一個(gè)文字或第一行設(shè)置陰影:通過first-line或者first-letter
對(duì)表格和對(duì)單元格使用陰影
4.box-sizing寬高計(jì)算
指定針對(duì)元素的寬度和高度的計(jì)算方法
2.4.邊框和背景樣式
1.新增的背景屬性
background-clip:指定背景的顯示范圍
border-box:從邊框開始
padding-box:從內(nèi)邊框開始
content-box:從內(nèi)容開始
background-orgin:指定繪制背景圖像的起點(diǎn)
可以指定繪制時(shí)的起始位置,默認(rèn)為padding,可以為border或者content左上角開始繪制。
background-size:指定背景中圖像的尺寸
auto
length
percentage:以父元素的百分比設(shè)置背景圖像的寬高度。
cover:全覆蓋。
contain :與cover相反,主要將背景圖片縮小,來適合布滿整個(gè)容器。
2.顯示多個(gè)背景屬性: 第一個(gè)圖像在最上面
3.圓角邊框:border-radius
指定兩個(gè)半徑:左上右下+左下右上
當(dāng)不顯示邊框的時(shí)候,瀏覽器會(huì)把四個(gè)角繪制成圓角
修改邊框種類。
繪制四個(gè)不同半徑的邊框
4.圖像邊框:border-image
可以讓元素的長(zhǎng)度或?qū)挾忍幱陔S時(shí)變化時(shí),變化狀態(tài)的邊框統(tǒng)一使用一個(gè)圖像文件來進(jìn)行繪制。
2.5.CSS3變形功能
1.利用transform實(shí)現(xiàn)文字或圖像的旋轉(zhuǎn),縮放,傾斜移動(dòng)這四種類型的變形處理。
旋轉(zhuǎn):totate(角度)
縮放:scale(值):0.5即為縮放到50%
傾斜:skew(值),值為角度
移動(dòng):translate(值)
對(duì)一個(gè)元素使用多個(gè)方法
transform:方法1 方法2 方法 3 方法4
改變?cè)鼗c(diǎn)
transform-origin:
2.6.CSS3的動(dòng)功能
1.transition功能:支持從一個(gè)屬性值平滑到另外一個(gè)屬性值
允許CSS屬性值在一定的時(shí)間內(nèi)平滑的過度,這種效果可以在單擊,獲得焦點(diǎn),被點(diǎn)擊或?qū)υ厝魏胃淖冎杏|發(fā),并圓滑的以動(dòng)畫效果改變CSS屬性值。
(1)執(zhí)行變換的屬性:transition-property:過渡即將開始
none:沒有屬性會(huì)獲得過渡效果
all:所以屬性會(huì)獲得過渡效果
property:定義應(yīng)用過渡效果的CSS屬性名稱列表,以逗號(hào)分隔
(2)變換延續(xù)時(shí)間:transition-duration:規(guī)定完成過渡需要花費(fèi)的時(shí)間,默認(rèn)值零沒有效果。
(3)在延續(xù)時(shí)間段,變換速率的變化:transition-timing-function。
(4)變換延遲時(shí)間:transition-delay:指定一個(gè)動(dòng)畫開始執(zhí)行的時(shí)間,也就是當(dāng)改變?cè)貙傩灾岛蠖嚅L(zhǎng)時(shí)間開始執(zhí)行過渡效果。
2.Animations功能:支持通過關(guān)鍵幀的指定來在頁面上產(chǎn)生更復(fù)雜的動(dòng)畫現(xiàn)象。
2.7.CSS3的分頁
1.點(diǎn)擊及鼠標(biāo)懸停分頁樣式
2.鼠標(biāo)懸停過渡效果:transition: background-color .9s;
3.圓角樣式:border-radius
4.邊框:border:2px solid darkviolet;
2.8.布局相關(guān)樣式
1.多欄布局
column-count屬性:將一個(gè)元素中的內(nèi)容分成多欄進(jìn)行顯示,要將元素的寬度設(shè)置成多個(gè)欄目的總寬度
column-width屬性:指定欄目的寬度來生成分欄
column-gap屬性:指定欄目之間的距離
column-rule:欄目之間添加分隔線
2.盒布局: 多欄布局的欄目寬度必須相等,指定欄目的寬度的時(shí)候也只能統(tǒng)一指定,但是欄目的寬度不可能全部都一樣,所以多欄布局比較適合在文字內(nèi)容頁面顯示,比如新聞。并不適合整個(gè)網(wǎng)頁編排時(shí)使用。而盒布局就相對(duì)比較隨意一些,可以定義成不同的頁面。
3.彈性盒子布局
(1)box-flex:使得盒子布局變成彈性布局:可以自適應(yīng)窗口
(2)box-ordinal-group:改變?cè)氐娘@示順序
(3)box-orient:改變?cè)嘏帕蟹较?/p>
horizontal:在水平行中從左向右排列子元素
vertical:從上向下垂直排列子元素
Html5+CSS3基礎(chǔ)知識(shí)匯總-CSS3篇
Html5+CSS3基礎(chǔ)知識(shí)匯總-CSS3篇
(4)元素的高度寬度自適應(yīng):就是元素的高度和寬度可以根據(jù)排列的方向改變而改變。 (5)使用彈性布局來消除空白:方法就是給子div中加入一個(gè)box-flex屬性。
Html5+CSS3基礎(chǔ)知識(shí)匯總-CSS3篇
(6)對(duì)多個(gè)元素使用box-flex屬性,讓瀏覽器或者容器中的元素的總寬度或者總高度都等于瀏覽器或者容器高度。
(7)box-pack屬性和box-align屬性:指定水平方向與垂直方向的對(duì)齊方式(文字,圖像,以及子元素的水平方向或是垂直方向上的對(duì)齊方式)
2.9.不同瀏覽器加載不同的CSS樣式
Media Queries模塊是CSS3中的一個(gè)和各種媒體相關(guān)的重要模塊
Html5+CSS3基礎(chǔ)知識(shí)匯總-CSS3篇
Html5+CSS3基礎(chǔ)知識(shí)匯總-CSS3篇
Html5+CSS3基礎(chǔ)知識(shí)匯總-CSS3篇
感謝各位的閱讀,以上就是“Html5+CSS3基礎(chǔ)知識(shí)有哪些”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對(duì)Html5+CSS3基礎(chǔ)知識(shí)有哪些這一問題有了更深刻的體會(huì),具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián),小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章,歡迎關(guān)注!