一、什么是CSS
1.css是web标准中的表现标准，用来设置网页上的标签的样式(尺寸、大小、颜色、位置等等)
2.css代码/css文件，我们叫样式表
3.目前，我们使用的是css3。
二、CSS样式表分类
1.内联式：将CCS代码写在标签的style属性中
2.内部式：写在head标签中的style标签的内容中
3.外联式：写在一个css文件中，通过link标签来关联
注意：内部式和外联式没有固定的优先级，谁在最后就执行谁
三、css格式
选择器 {属性：属性值；属性：属性值}
- 选择器：用来选择需要设置样式的标签
- 属性：css属性
- 属性值：如果属性值是数字，表示的是大小要在后面加px
注意：每个属性之间要用分号隔开，否则属性无效
四、选择器
1.元素选择器(标签选择器):选中所有标签名对应的标签
格式：标签名{ }
2.id选择器：每个标签都有一个id属性，在HTML中，每个标签的id是唯一的
格式：#id{ }
3. .class选择器:每个标签都有一个class属性
格式：.class名{ }
4通配符：选中所有标签
格式：*{ }
5.层级选择器：对嵌套的标签进行针对性选择
格式：选择器1 选择器2 选择器3...
6.群组选择器:对嵌套的标签进行全部选择
格式：选择器1，选择器2，选择器3，...
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*0.元素选择器*/
a{
background-color: yellow;
}
/*1.id选择器*/
#a1{
/*color: #FF0000;*/
/*color: rgb(0,255,0);*/
color: rgba(0,0,255,0.4);
}
/*2. .class选择器*/
.c1{
color: brown;
background-color: bisque
}
/*3.通配符 * */
*{
font-size: 50px;
}
/*4.层级选择器
* 例子：选择div中的所有a标签
*/
#all_a a{
color: pink;
}
div div a{
text-decoration: none;
}
/*5.群组选择器
* 同时选中所有H标签和span标签
*/
h1,span{
background-color: #9ACD32;
}
</style>
</head>
<body>
<h1>我是标题</h1>
<span id="">
我是span
</span>
<div id="">
<div id="">
<p></p>
</div>
<div id="all_a">
<a href="">1</a></a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
<a href="">5</a>
</div>
</div>
<a id="a1">我是a</a>
<a href="">我是a2</a>
<p class="c1">我是p</p>
<div id="" class="c1">
<a href="">我是a3</a>
</div>
<a href="">我是a4</a>
</body>
</html>
四、伪类选择器
作用：改变不同操作下元素的式样，一般使用于超链接
格式：选择器 : 状态
1.link:初始状态---一次都没有访问成功的状态
2.visited:超链接访问后的状态---已经访问成功后的状态
3.hover:鼠标悬停在标签上的时候对应的状态
4.active:鼠标按住的状态
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style type="text/css">
/*同时设置a标签的所有状态*/
a{
color: black;
}
a:link{
color: green;
}
a:visited{
color: pink;
}
a:hover{
color: red;
font-size: 20px;
}
a:active{
font-size: 30px;
}
</style>
</head>
<body>
<a href="http://www.taobao.com">百度一下</a>
</body>
</html>
网友评论