一、简单选择器
至于什么意思按我自己的理解（可能不准确）就是按不同选择器HTML按css不同的样式布局
- 通用选择器
*{
background-color: white;
}
用*号来定义会在引用的HTML的所有标签里都应用一遍
- 元素选择器
body{
background-color: lightgrey;
}
用HTML里的标签来定义同城是HTML的标签都可以指定一类标签来应用
- 类选择器
.table_css{
background-color: #ffffff;
border: 1px solid #cccccc;
border-radius: 2px;
}
用.xxx来定义其中xxx不能以数字开头不能有中文
- ID选择器
#table_css{
background-color: #ffffff;
border: 1px solid #cccccc;
border-radius: 2px;
}
用#xxx来定义其中xxx不能以数字开头不能有中文
二、css样式的引用
既然定义了这么多选择器怎么使用呢？
- 内联
<div style="background-color: white"></div>
把样式直接写在标签的里面（尽量少用）
- 定义在HTML<head>中
<style>
div{
width: 200px;
height: 200px;
border: 2px solid black;
}
</style>
- 单独定义css文件再引用到HTML中
<link rel="stylesheet" href="selectedcss.css">
三、css样式的使用
- 内联的方式就不多解释了
<div style="background-color: white"></div>
在哪个标签里写的哪个标签就会应用写的样式
- 通用选择器定义的当你引用css样式时所以标签都会应用
- 元素选择器定义的
body{
background-color: lightgrey;
}
类似于这样定义的只是所有body会应用
- 类选择器
.table_css{
background-color: #ffffff;
border: 1px solid #cccccc;
border-radius: 2px;
}
<table class="table_css">
定义好的类选择器在需要应用的标签位置用class来应用
- 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
网友评论