CSS学习笔记

东风不度玉门 發表於 2019-9-23 19:44:00

<h1 class="postTitle">CSS学习笔记</h1>
<div class="clear"> </div>
<div class="postBody">
<div id="cnblogs_post_body" class="blogpost-body ">
    由于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（设置为方块）

</div>

</div> 
来源：https://www.cnblogs.com/lwcjy/p/11574303.html

頁: [1]

琼殿技术论坛's Archiver

CSS学习笔记