zoukankan      html  css  js  c++  java
  • 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样式表标签

  • 相关阅读:
    SparkSql初级编程实践
    云时代架构之苏宁安全架构演进及实践
    云时代架构之知乎网站架构变迁史
    质量属性的六个常见属性场景之《淘宝网》
    云时代架构之游戏服务器的架构演进
    《架构漫谈阅读心得》
    转换后缀表达式
    约瑟夫环(改进3.0)
    栈结构之后缀表达式
    约瑟夫环(改进2.0)
  • 原文地址:https://www.cnblogs.com/yufeihlf/p/5807624.html
Copyright © 2011-2022 走看看