HTML学习笔记(二)

一、简单选择器

至于什么意思按我自己的理解(可能不准确)就是按不同选择器HTML按css不同的样式布局

  1. 通用选择器
*{
    background-color: white;
}

用*号来定义会在引用的HTML的所有标签里都应用一遍

  1. 元素选择器
body{
    background-color: lightgrey;
}

用HTML里的标签来定义同城是HTML的标签都可以指定一类标签来应用

  1. 类选择器
.table_css{
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 2px;
}

用.xxx来定义其中xxx不能以数字开头不能有中文

  1. ID选择器
#table_css{
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 2px;
}

用#xxx来定义其中xxx不能以数字开头不能有中文

二、css样式的引用

既然定义了这么多选择器怎么使用呢?

  1. 内联

把样式直接写在标签的里面(尽量少用)

  1. 定义在HTML中
    
  1. 单独定义css文件再引用到HTML中

三、css样式的使用

  1. 内联的方式就不多解释了

在哪个标签里写的哪个标签就会应用写的样式

  1. 通用选择器定义的当你引用css样式时所以标签都会应用
  2. 元素选择器定义的
body{
    background-color: lightgrey;
}

类似于这样定义的只是所有body会应用

  1. 类选择器
.table_css{
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 2px;
}
  

定义好的类选择器在需要应用的标签位置用class来应用

  1. ID选择器
  < table id="table_css">

同类选择器差不多也是在需要应用的标签位置用id来应用

四、伪类选择器

  • hover 鼠标悬停
  • link 未访问过链接
  • visited 访问过链接
  • active 鼠标点击的时候
  • focus 获取焦点时候的样式
    使用方式是在对应的选择器后加:hover
.table_css:hover{
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 2px;
}

五、选择器权值

  • 元素选择器 1
  • 类选择器 10
  • 伪类选择器 10
  • ID选择器 100
  • 内联选择器 1000

你可能感兴趣的:(HTML学习笔记(二))