1.css选择符
选择符又称为选择器，定义了将影响文档中的哪些部分。
-1.元素选择符
通配符：*{}
下面的例子（test.css） 匹配文档中所有的标签
*{
background-color: blue;
}
一般情况下，我们会在html初始化的时候使用通配符，例子如下，将上和左边距都设为0
*{
padding: 0;
margin: 0;
}
类选择敷：.类名称{}
下面的例子，将p标签的内容变为绿色
1 index.html代码如下
2 <!DOCTYPE html>
3 <html>
4 <head lang="en">
5 <meta charset="UTF-8">
6 <title></title>
7 <link rel="stylesheet" href="css.css" type="text/css"/>
8 </head>
9 <body>
10 <p class="hp">haha</p>
11 <span>hehe</span>
12 </body>
13 </html>
14
15 css.css代码如下
16 *{
17 padding: 0;
18 margin: 0;
19 }
20
21 .hp{
22 color:green;
23 }
id选择符：#id名称{}
下面的例子，将span标签内容变为紫色
index.html代码如下
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css.css" type="text/css"/>
</head>
<body>
<p class="hp">haha</p>
<span id="hs">hehe</span>
</body>
</html>
css.css代码如下
*{
padding: 0;
margin: 0;
}
.hp{
color:green;
}
#hs{
color: purple;
}
类型选择符（标签选择符）：标签{}
下面的例子将li标签内容变为红色
index.html代码如下
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css.css" type="text/css"/>
</head>
<body>
<p class="hp">haha</p>
<span id="hs">hehe</span>
<ul>
<li>我是列表</li>
<li>我是列表</li>
<li>我是列表</li>
<li>我是列表</li>
</ul>
</body>
</html>
css.css代码如下
*{
padding: 0;
margin: 0;
}
.hp{
color:green;
}
#hs{
color: purple;
}
li{
color: red;
}
-2.关系选择符
- 子元素选择器：父亲>儿子
- 兄弟选择器：你自己~你的兄弟
1.本身不起作用
2.之前的元素不起作用
例子：下面的代码只有第二个和第三个h3标签会变色
inde.html代码如下
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css.css" type="text/css"/>
</head>
<body>
<h3>这是一个标题</h3>
<P>这是一个文字段落</P>
<P>这是一个文字段落</P>
<h3>这是一个标题</h3>
<p>这是一个文字段落</p>
<h3>这是一个标题</h3>
<P>这是一个文字段落</P>
<P>这是一个文字段落</P>
</body>
</html>
css.css代码如下
p~h3{
color: brown;
}
- 相邻选择器：E+F
下面的例子中，第三行和最后一行变色
index.html代码如下
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css.css" type="text/css"/>
</head>
<body>
<h3>这是一个标题</h3>
<P>这是一个文字段落</P>
<P>这是一个文字段落</P>
<h3>这是一个标题</h3>
<p>这是一个文字段落</p>
<h3>这是一个标题</h3>
<P>这是一个文字段落</P>
<P>这是一个文字段落</P>
</body>
</html>
css.css代码如下
p+p{
color: red;
}
- 包含选择器：EF
下面的例子，所有的ul，li标签内容全部变成红色
inde.html代码如下
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css.css" type="text/css"/>
</head>
<body>
<ul>
<li>列表项目</li>
<li>
<ul>
<li>列表项目</li>
<li>列表项目</li>
<li>列表项目</li>
<li>列表项目</li>
</ul>
</li>
<li>列表项目</li>
<li>列表项目</li>
</ul>
</body>
</html>
css.css代码如下
ul li{
color: red;
}
-3.属性选择符
1.属性
2.写法:
1)当前元素[属性]{}
例子：haha变色而hehe不变色
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
a[href]{
color: red;
}
a[href=""]
</style>
</head>
<body>
<a href="#">haha</a>
<a>hehe</a>
</body>
</html>
2)当前元素[属性=“属性值”]{}
例子，第一个百度标签会变为红色
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
a[href="www.baidu.com"]{
color: red;
}
</style>
</head>
<body>
<a href="www.baidu.com">百度一下</a>
<a href="www.baidu1.com">百度一下</a>
<a href="www.baidu2.com">百度一下</a>
<a href="www.baidu3.com">百度一下</a>
</body>
</html>
-4.伪类选择符
- 定义：它允许给html标签的某种状态设置样式
1）元素：link：设置超链接a在未被访问前的样式
2）元素：visited：设置超链接a在其链接地址已被访问过时的样式
3）元素：hover：设置元素在其鼠标悬停时的样式
4）元素：active：设置元素在被用户激活(在鼠标点击与释放之间的事件)时的样式
- 注意：
1）a：hover必须位于a：link和a：visited之后，a：active必须位于a:hover之后
2）可靠的顺序是：l(link)ov(visited)e h(hover)a(active)te(active)，即使用love，hate两个单词来记忆
例子：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
ul li a{
font-size: 50px;
}
ul li a:link{
color: blue;
}
ul li a:visited{
color: red;
}
ul li a:hover{
color: yellow;
}
ul li a:active{
color: purple;
}
</style>
</head>
<body>
<ul>
<li><a href="#">伪类选择器</a></li>
</ul>
</body>
</html>
-5.伪对象选择符
-1.元素：before{}：设置在对象前发生的内容，用来和content属性一起使用，并且必须定义content属性。
-2.元素：after{}：设置在对象后发生的内容。用来和content属性一起使用，并且必须定义content属性。
选择器的优先级：！important>内联>ID>类>标签|伪类|属性选择器>伪对象>继承>通配符
注：！important要写在属性值后面，分号的前面。
例:
p{
color: red !important;
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
span{
/*1*/
color: red!important;
}
p span{
/*1+1*/
color: blue;
}
p .sc{
/*1+10*/
color: aqua;
}
p #si{
/*1+100*/
color: green;
}
</style>
</head>
<body>
<p>
<span class="sc" id="si">优先级</span>
</p>
</body>
</html>
2.css的背景，颜色，边框
1.背景：纯色，图片
background-attchment：背景图像是否固定或者随着页面的其余部分滚动。
background-color：设置元素的背景颜色
background-image：把图片设置为背景
background-position：设置背景图片的起始位置
background-repeat：背景图片是否以及如何重复
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body {
background-image: url("pic/timg1.jpg");
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
}
</style>
</head>
<body>
<p>哈哈</p>
<p>哈哈</p>
<p>哈哈</p>
</body>
</html>
2.边框
border-width：边框宽度
border-style：边框样式
border-color：边框颜色
border-radius：设置圆角边框
box-shadow：设置对角阴影
boder-image：边框背景图片
3.颜色
1.颜色值
1.color name(用颜色名称表示)：color：red；
2.HEX（十六进制数值表示法）：color：#ff0000；
3.RGB(三原色：红绿蓝)
4.RGBA(三原色+不透明度[0.0-1.0])
5.透明色：color：transparent
2.属性
opacity：<number> 设置对象的不透明度
1：不透明
0：完全透明
例子：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.container{
width: 200px;
height: 200px;
background-color: antiquewhite;
border-width: 5px;
border-color: aqua;
border-top-color: red;
border-style: solid;
border-left-style: dashed;
border-radius: 5px;
box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>