【测试基础】之03 CSS入门基础

CSS基础

目标

  • 知道CSS的作用

  • 基本掌握CSS语法规则

CSS简介

  • CSS:(Cascading Style Sheets)指层叠样式表

  • 作用:用来定义如何显示HTML元素(定义HTML元素的样式),就像 HTML 中的字体标签和颜色属性所起的

  • 作用那样

  • 样式通常保存在外部的 .css 文件中,我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观

CSS语法

CSS规则由两个主要的部分构成:选择器,以及一条或多条声明。

  • 选择器:是用来指定要改变样式的HTML元素

  • 每条声明由一个属性和一个值组成

  • 属性代表要设置的样式属性,每个属性有一个值,属性和值被冒号分开

  • CSS声明总是以分号(;)结束,声明总以大括号({})括起来

  • 在HTML文档中,可以把样式定义在 标签中

示例:




    
    CSS
    


    

Hello World!

CSS注释

  • 注释是用来解释你的代码,并且可以随意编辑它,浏览器会忽略它

  • CSS注释以 /* 开始, 以 */ 结束

示例:

CSS选择器

目标

  • 掌握id选择器的语法

  • 掌握class选择器的语法

  • 掌握标签选择器的语法

  • 掌握属性选择器的语法

  • 掌握后代选择器的语法

  • 掌握子元素选择器的语法

CSS选择器介绍

在CSS中,选择器是一种模式,用于选择需要添加样式的元素。常用的CSS选择器有:

  • id选择器

  • class选择器

  • 标签选择器

  • 属性选择器

  • 后代选择器

  • 子元素选择器

id选择器

  • id选择器是通过元素的id属性来选择元素

  • 使用id选择器时,要求元素必须有id属性

  • CSS中id选择器以 "#" 来定义,比如: #test01




    
    CSS
    


    

Hello World!

id属性的命名规则和唯一性

命名规则:

  1. 不要以数字开头

  1. 不能使用中划线和下划线之外的符号

  1. 不推荐使用中文

  1. 尽量做到见名知意:见到名字知道意思

唯一性:

在整个HTML文档中id属性必须是唯一的

注意:HTML文档不会严格校验id属性是否唯一,在不规范的HTML文档中会出现id重复的情况!!!

class选择器

  • class选择器是通过元素的class属性来选择元素,又称类选择器

  • 使用class选择器时,要求元素必须有class属性

  • class选择器用于描述一组元素的样式,class选择器有别于id选择器,class可以在多个元素中使用

  • CSS中class选择器以 "." 来定义,比如: .center




    
    CSS
    


    

标题居中

   

第一段文字

   

第二段文字

class属性的第一个字符不能使用字符串

标签选择器

  • 标签选择器是通过元素的标签名称来选择元素,又称元素选择器

  • CSS中标签选择器直接使用标签名称来定义,比如: p 、 input




    
    CSS
    


    

标题居中

   

第一段文字

   

第二段文字

属性选择器

  • 属性选择器可以根据元素的属性及属性值来选择元素

  • 属性选择器可以使用HTML元素的任意属性,而不仅限于id和class属性

  • 简单属性选择:

  • 如果希望选择有某个属性的元素,而不论属性值是什么,可以使用简单属性选择器;

  • 格式: [属性名]

  • 根据具体属性值选择:

  • 除了选择拥有某些属性的元素,还可以进一步缩小选择范围,只选择有特定属性值的元素;

  • 格式: [属性名="属性值"]




    
    CSS
    


    软件测试
    

劝学

   

故不积跬步,无以至千里。

   

不积小流,无以成江海。

后代选择器

  • 后代选择器可以选择作为某元素后代的元素,后代元素包括(儿子、孙子、重孙子...)

  • 语法规则:多个选择器用空格分隔,例如 p span{color: red;}




    
    CSS
    


    
        我是span        

            我也是span            
            我也是span        

   

子元素选择器

  • 与后代选择器相比,子元素选择器只能选择作为某元素子元素的元素

  • 不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素

  • 语法规则:多个选择器用大于号 > 分隔,例如 div>span{color: red;}




    
    CSS
    


    
        我是span        

            我也是span            
            我也是span        

   

你可能感兴趣的:(从0-1测试之路,测试工具,css3,前端)