一丶css基本语法
外联式
<link rel="stylesheet" href="">
内联式
在head标签中写一个style标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
background-color: aqua;
}
</style>
</head>
<body>
<p>段落标签</p>
</body>
</html>
行内引入
<p style="background-color: aqua;color: blue;font-size: 50px;">段落标签</p>
二丶css基本样式
1.width 宽
2.height 高
3.background-color 背景颜色
4.list-style: none; 清除li默认样式
三丶css选择器
1. *号:通配符选择器
*{
background-color: aqua;
}
2.标签选择器
p{
background-color: aqua;
}
3.类选择器
<style>
.la{
background-color: aqua;color: blue;font-size: 40px;
}
</style>
</head>
<body>
<p class="la">段落标签</p>
</body>
4.id选择器
<style>
#la{
background-color: aqua;color: blue;font-size: 40px;
}
</style>
</head>
<body>
<p id="la">段落标签</p>
</body>
5.群组选择器
/* 群组选择器 */
.div1,.div2,.div3{
/* 高100px */
height: 100px;
/* 颜色 */
background-color: green;
}
.div1{
/* 宽150px */
width: 150px;
/* 颜色 */
background-color: aqua;
}
.div2{
/* 宽250px */
width: 250px;
/* 颜色 */
background-color: blue;
}
.div3{
/* 宽350px */
width: 350px;
/* 颜色 */
background-color: pink;
}
6.子代选择器
.ulBig > li{
/* 去掉基础样式 */
list-style: none;
/* 设置字体大小为30px */
font-size: 30px;
color: aqua;
}
7.后代选择器
.uiBig li{
/* 去掉基础样式 */
list-style: none;
background-color: aquamarine;
}
8.兄弟选择器
.li4{
/* 颜色 */
color: red;
}
9.相邻兄弟选择器
.li4+li{
/* 颜色 */
color: orange;
}
10.通用兄弟选择器
.li4~li{
/* 颜色 */
color: yellow;
}
兄弟选择器 相邻兄弟 + 只修改她下面的相邻的选择器
兄弟选择器 通用兄弟 ~ 修改他后面所有选择器
11.伪类选择器
.li4:hover{
/* 颜色 */
color: rgb(45, 24, 235);
/* 鼠标变手 */
cursor: pointer;
}