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样式表标签