w3school之CSS学习笔记
由于web自动化测试中,会用到比较复杂的定位方式:CSS定位,这种定位方式比较简洁,定位速度较快,所以继续学习前端的CSS知识,总结下学习笔记,以便后续查看。同时,也希望能帮助到大家。
学习网址:http://www.w3school.com.cn/css/css_intro.asp
CSS 指层叠样式表 (Cascading Style Sheets)。样式定义如何显示 HTML 元素。样式通常存储在样式表(CSS文件)中。外部样式表可以极大提高工作效率。
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。声明由属性值对组成。
selector {属性1:属性1值; 属性2:属性2值; ... 属性N:属性N值; }
若属性值有空格,属性值记得加引号。
可查看另一篇博文: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;} /* 正在被点击的链接 */
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样式表标签