w3school之CSS學習筆記


    由於web自動化測試中,會用到比較復雜的定位方式:CSS定位,這種定位方式比較簡潔,定位速度較快,所以繼續學習前端的CSS知識,總結下學習筆記,以便后續查看。同時,也希望能幫助到大家。

    學習網址:http://www.w3school.com.cn/css/css_intro.asp

    CSS 指層疊樣式表 (Cascading Style Sheets)。樣式定義如何顯示 HTML 元素。樣式通常存儲在樣式表(CSS文件)中。外部樣式表可以極大提高工作效率。

 

目錄

CSS語法

CSS選擇器selector

CSS屬性

如何插入CSS樣式表

 

CSS語法

點擊返回目錄

CSS 規則由兩個主要的部分構成:選擇器,以及一條或多條聲明。聲明由屬性值對組成。

selector {屬性1屬性1值; 屬性2:屬性2值; ... 屬性N:屬性N值; }

若屬性值有空格,屬性值記得加引號。

 

CSS選擇器selector

點擊返回目錄

可查看另一篇博文:http://www.cnblogs.com/yufeihlf/p/5717291.html#test7

關於selenium的CSS定位,也有對CSS選擇器定位說明。

兩者選擇器語法一樣,一個通過CSS定位到元素,對元素進行操作。一個通過CSS定位到元素,對元素設置相關樣式。

1.單個標簽

如:h1{...}

 

2.多個標簽

如:h1,h2,h3,h4,h5,h6{...}

 

3.樣式繼承

如:body{...},那么body下的子元素如 p, td, ul, ol, ul, li, dl, dt,和 dd都繼承body的屬性。

但如何子元素重新定義樣式,優先子元素自己的樣式。

如:p{...},則p標簽下就按照自己所設置的樣式來。

 

4.派生選擇器

通過依據元素在其位置的上下文關系來定義樣式。

4.1后代選擇器

有關后代選擇器有一個易被忽視的方面,即兩個元素之間的層次間隔可以是無限的。

例如,如果寫作 ul em,這個語法就會選擇從 ul 元素繼承的所有 em 元素,而不論 em 的嵌套層次多深。

如:ul em{...},則ul下面的em元素設置相應的樣式。

4.2子元素選擇器

與后代選擇器相比,子元素選擇器(Child selectors)只能選擇作為某元素子元素的元素。

如:ul em{...}

4.3相鄰兄弟選擇器

如果需要選擇緊接在另一個元素后的元素,而且二者有相同的父元素,可以使用相鄰兄弟選擇器

如:h1 + p {margin-top:50px;},選擇緊接在 h1 元素后出現的段落,h1 和 p 元素擁有共同的父元素

 

5.id選擇器

語法:#id屬性值

實例1:id為center的所有元素設置樣式。

#center {text-align: center}

實例2:id為fancy的元素內部的表格單元td元素設置樣式。

#fancy td {
color: #f60;
background: #666;
}

實例3:id為fancy的表格單元td元素設置樣式。

td#fancy {
color: #f60;
background: #666;
}

 

6.類選擇器

語法:.class屬性值

實例1:類名為center的所有元素設置樣式。

.center {text-align: center}

實例2:類名為fancy的元素內部的表格單元td元素設置樣式。

.fancy td {
color: #f60;
background: #666;
}

實例3:類名為fancy的表格單元td元素設置樣式。

td.fancy {
color: #f60;
background: #666;
}

 

7.屬性選擇器

語法:[屬性][屬性=屬性值]

 

8.鏈接選擇器

a:link - 普通的、未被訪問的鏈接。a:visited - 用戶已訪問的鏈接。a:hover - 鼠標指針位於鏈接的上方。a:active - 鏈接被點擊的時刻。

實例:

a:link {color:#FF0000;} /* 未被訪問的鏈接 */
a:visited {color:#00FF00;} /* 已被訪問的鏈接 */
a:hover {color:#FF00FF;} /* 鼠標指針移動到鏈接上 */
a:active {color:#0000FF;} /* 正在被點擊的鏈接 */

 

CSS屬性

點擊返回目錄

color:字體顏色:如red或#ff0000。

font-family:字體樣式,如Times。

font-style:最常用於規定斜體文本。normal(文本正常顯示)。italic(文本斜體顯示)。oblique (文本傾斜顯示)

font-weight:設置文本的粗細,如使用 bold 關鍵字可以將文本設置為粗體。

font-size:字體大小,如14px。

text-align:文字對齊方式,如center(居中)。

text-transform:字符轉換:none(無),uppercase(大寫),lowercase(小寫),capitalize(首字母大寫)。

text-decoration:文本裝飾屬性。none(無,如鏈接不加下划線)。underline 會對元素加下划線。overline 會在文本的頂端畫一個上划線。值 line-through 則在文本中間畫一個貫穿線。blink 會讓文本閃爍。

background-color:背景顏色。

list-style-type:ul列表的列表項標志類型。如square(設置為方塊)

 

如何插入樣式表

點擊返回目錄

詳見另外一篇博文:關於外部樣式表,內部樣式表,內聯樣式的說明:w3school之HTML學習筆記-CSS樣式表標簽

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM