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樣式表標籤