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

 

posted @ 2016-08-25 17:22  啄木鸟儿  阅读(2539)  评论(0编辑  收藏  举报