css基礎(chǔ)語法和選擇器的使用,類選擇器語法?
1. 標(biāo)簽名選擇器 div { color:Red;} 即頁面中的各個(gè)標(biāo)簽名的css樣式 2.類選擇器 .divClass {color:Red;} 即定義的每個(gè)標(biāo)簽的class 中的css樣式 3.ID選擇器 #myDiv {color:Red;} 即頁面中的標(biāo)簽的id 4.后代選擇器(類選擇器的后代選擇器) .divClass span { color:Red;} 即多個(gè)選擇器以逗號(hào)的格式分隔 命名找到準(zhǔn)確的標(biāo)簽 5.群組選擇器 div,span,img {color:Red} 即具有相同樣式的標(biāo)簽分組顯示
學(xué)習(xí)CSS的語法細(xì)則有何作用?
所有的東西都是從基礎(chǔ)引申而出的,如果你底層代碼學(xué)好學(xué)精的話,框架用起來就可以隨心所欲,自己改起來也輕車熟路。不然你就會(huì)被框架牽著鼻子走。
中border基本語法?
一、四個(gè)邊框
border-left 設(shè)置左邊框,一般單獨(dú)設(shè)置左邊框樣式使用
border-right 設(shè)置右邊框,一般單獨(dú)設(shè)置右邊框樣式使用
border-top 設(shè)置上邊框,一般單獨(dú)設(shè)置上邊框樣式使用
border-bottom 設(shè)置下邊框,一般單獨(dú)設(shè)置下邊框樣式使用,有時(shí)可將下邊框樣式作為css下劃線效果應(yīng)用。
二、四邊相同邊框border簡寫
#divcss5{border:1px solid #00F}
設(shè)置了divcss5對(duì)象盒子1px像素藍(lán)色實(shí)線邊框
三、邊框三個(gè)樣式
通常我們可以對(duì)邊框設(shè)置寬度(厚度)、邊框樣式、邊框顏色這三個(gè)屬性與參數(shù)。
1)、邊框顏色:border-color:#000
2)、邊框厚度(寬度):border-width:1px
使用數(shù)字+單位設(shè)置邊框厚度寬度,如1px(邊框厚度寬度為1像素),邊框必須為正數(shù)字,大于0的數(shù)值。否則設(shè)置邊框border樣式無效。
3)、border邊框樣式:border-style:solid
邊框樣式值如下:
none : 無邊框。與任何指定的border-width值無關(guān)
hidden : 隱藏邊框。IE不支持
dotted : 在MAC平臺(tái)上IE4+與WINDOWS和UNIX平臺(tái)上IE5.5+為點(diǎn)線。否則為實(shí)線(常用)
dashed : 在MAC平臺(tái)上IE4+與WINDOWS和UNIX平臺(tái)上IE5.5+為虛線。否則為實(shí)線(常
用)solid : 實(shí)線邊框(常用)
double : 雙線邊框。兩條單線與其間隔的和等于指定的border-width值
groove : 根據(jù)border-color的值畫3D凹槽
ridge : 根據(jù)border-color的值畫菱形邊框
inset : 根據(jù)border-color的值畫3D凹邊
outset : 根據(jù)border-color的值畫3D凸邊
四、CSS單獨(dú)設(shè)置左邊框、右邊框、上邊框、下邊框
以縮寫方式寫上、下、左、右邊框單獨(dú)CSS樣式設(shè)置方法
1、1px黑色虛線上邊框
border-top:1px dashed #000
2、1px黑色實(shí)線下邊框
border-bottom:1px solid #000
3、1px黑色虛線左邊框
border-left:1px dashed #000
4、1px黑色實(shí)線右邊框
border-right:1px solid #000
五、常用推薦邊框樣式
我們通常使用主流瀏覽器兼容邊框樣式有:
1、實(shí)線邊框:solid
Border:1px solid #000 設(shè)置對(duì)象1px(像素)寬厚的黑色實(shí)線邊框。
2、虛線邊框:dashed
Border:1px dashed #000 設(shè)置對(duì)象1px(像素)寬厚的黑色虛線邊框。
六、三邊有邊而一邊沒有
CSS 代碼: border:1px solid #000; border-top:none;
注意border:1px solid #000; 和border-top:none;前后順序不能調(diào)換。因?yàn)镃SS讀取有從上到下、從左到右讀取原理,而先設(shè)置了整個(gè)邊框樣式,后再加上聲明頂部上邊邊框?yàn)椤皀one”沒有意思,即實(shí)現(xiàn)該實(shí)例要的樣式。從而無需分別設(shè)置下、左、右,從而節(jié)約一定代碼。
css元素定位工具?
cssSelector定位,屬于CSS高級(jí)等位,它的定位方式,利用選擇器進(jìn)行的。在CSS 中,選擇器是一種模式,用于選擇需要添加樣式的對(duì)象。“CSS” 列指示該屬性是在哪個(gè)CSS 版本中定義的。(CSS1、CSS2 還是CSS3。);
下面羅列了一部分的CSS定位方式。看到這么多是否覺得CSS不再簡單,其實(shí)不然常用的幾種方式作者已標(biāo)記,CSS定位是平常使用過程中非常重要的一種方式。它與Xpath定位有諸多類似的地方,但是無論從性能還是語法上來說CSS都是比較有優(yōu)勢的。
1、一般情況下定位速度要比XPATH快
2、語法比Xpath要簡潔