1、 css基礎(chǔ)選擇器的類型及表達(dá)方法,css設(shè)計(jì)器怎么用?
1、首先打開DreamweaverCC2018軟件新建一個(gè)html文件,在右上角點(diǎn)擊CSS設(shè)計(jì)器,并在下方點(diǎn)擊加號(hào),然后選擇創(chuàng)建新的CSS文件:
2、在創(chuàng)建窗口中,點(diǎn)擊瀏覽按鈕。
3、然后選擇站點(diǎn)創(chuàng)建好CSS文件夾,然后輸入創(chuàng)建的CSS的名字,點(diǎn)擊保存插件文件:
4、然后把添加為設(shè)置成鏈接,點(diǎn)擊確定按鈕:
5、添加完成后就可以在右側(cè)的站點(diǎn)中的CSS文件夾下看到剛創(chuàng)建好的CSS樣式表文件了:
6、此時(shí)在html文件中的head標(biāo)簽中,就多了一行鏈接到CSS文件的代碼。在頂部tab標(biāo)簽中也可以看到鏈接的樣式表:
7、接下來(lái)在html網(wǎng)頁(yè)編輯頁(yè)面,在body標(biāo)簽中輸入一個(gè)div:
8、然后在頂部tab標(biāo)簽中選擇剛才創(chuàng)建的CSS樣式表,并在樣式表中寫一個(gè)樣式,命名為aaa,并按下快捷鍵Ctrl+S保存樣式表:
9、最后回到html編輯頁(yè)面,在div標(biāo)簽中引入class,輸入剛才寫的樣式的名稱aaa并保存網(wǎng)頁(yè):
10、最后點(diǎn)擊頂部的設(shè)計(jì)按鈕,就可以看到實(shí)時(shí)效果了,此時(shí)css文件就成功鏈接進(jìn)去了:
2、 css選擇器中后代選擇器與子選擇器的區(qū)別?
css后代選擇器和子選擇器的區(qū)別介紹:
1 css后代選擇器語(yǔ)法:h1 em {color:red;} 表示的是從h1開始里面包含的所有的em元素變成紅色,h1為祖先,其他的em都是后代,即選中后代,不管是兒子還是孫子,只要是都會(huì)被選中,為后代選擇器。2、css子元素選擇器語(yǔ)法:h1>em{color:red;} 表示的是從h1開始里面的第一層em元素變成紅色,h1為祖先,em為兒子,就像世襲制一樣,只能傳給兒子,孫子和其他堂親都不行
3、 css按照定義位置可分為哪幾種?
css定位有四種不同類型,position值分別為:static(靜態(tài)定位), relative(相對(duì)定位),absolute(絕對(duì)定位),fixed(固定定位)。下面本篇文章就來(lái)給大家介紹一下,希望對(duì)大家有所幫助。
1、relative(相對(duì)定位)
相對(duì)定位的偏移參考元素是元素本身,不會(huì)使元素脫離文檔流。元素的初始位置占據(jù)的空間會(huì)被保留。相對(duì)定位元素常常作為絕對(duì)定位元素的父元素。并且定位元素經(jīng)常與z-index屬性進(jìn)行層次分級(jí)
2、absolute(絕對(duì)定位)
絕對(duì)定位元素以父輩元素中最近的定位元素為參考坐標(biāo),如果絕對(duì)定位元素的父輩元素中沒有采用定位的,那么此絕對(duì)定位元素的參考對(duì)象是html,元素會(huì)脫離文檔流。就好像文檔流中被刪除了一樣。并且定位元素經(jīng)常與z-index屬性進(jìn)行層次分級(jí)
3、fixed(固定定位)
位移的參考坐標(biāo)是可視窗口,使用fixed的元素脫離文檔流。并且定位元素經(jīng)常與z-index屬性進(jìn)行層次分級(jí)
4、static (靜態(tài)定位)
默認(rèn)值,元素框正常生成的,top left bottom right這幾個(gè)偏移屬性不會(huì)影響其靜態(tài)定位的正常顯示
4、 css復(fù)合選擇器有哪三種?
1、元素選擇器 標(biāo)簽名{ }
2、id選擇器 #id屬性值{ }
3、類選擇器 .class屬性值{ }
4、選擇器分組(并集選擇器)
作用:通過(guò)它可以同時(shí)選中多個(gè)選擇器對(duì)應(yīng)的元素(通常用于集體聲明)
語(yǔ)法:選擇器1,選擇器2,選擇器n{ }
5、復(fù)合選擇器(交集選擇器)
作用:選擇更準(zhǔn)確更精細(xì)的目標(biāo)元素并為其設(shè)置屬性
語(yǔ)法:選擇器1選擇器2選擇器n{ }
!注意選擇器之間不能有空格,要緊挨在一起
6、通配選擇器
作用:用來(lái)選中頁(yè)面中所有的元素
語(yǔ)法:*{ }
7、后代元素選擇器
作用:選中指定元素的指定后代元素
語(yǔ)法:祖先元素 后代元素{ }
8、子元素選擇器
作用:選中指定父元素的子元素
語(yǔ)法:父元素>子元素
9、偽類選擇器
偽類表示元素的一種特殊狀態(tài)
:hover 移入時(shí)元素的狀態(tài)
:visited 已被訪問過(guò)后的元素的狀態(tài)
:active 被點(diǎn)擊時(shí)元素的狀態(tài)
10、 屬性選擇器
作用:根據(jù)元素中的屬性或?qū)傩灾祦?lái)選取指定元素
語(yǔ)法:[屬性名]選取含有指定屬性的元素
? [屬性名=“屬性值”]選取含指定屬性值的元素
? [屬性名^="屬性值"] 選取屬性值以指定內(nèi)容開頭的元素
? [屬性名$="屬性值"] 選取屬性值以指定內(nèi)容結(jié)尾的元素
? [屬性名*="屬性值"] 選取屬性值包含指定內(nèi)容的元素
11、兄弟元素選擇器
+選擇器
作用:選中一個(gè)元素后緊挨著的指定的兄弟元素
語(yǔ)法:前一個(gè)+后一個(gè)(作用在后一個(gè))
~選擇器
作用:選中后邊所有的制定兄弟元素
語(yǔ)法:前一個(gè)~后邊所有