1、CSS样式
CSS（Cascading StyleSheets）称为层叠样式工作表，作用：用于对页面进行i美化。本质上就是对标签进行点缀。
2、初识CSS样式
2.1 方式一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>男同学刘思江</div>
</body>
</html>
2.2 方式二
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>男同学刘思江</div>
<!-- 加入三种样式：字体为红色，字体大小18px，字体背景为粉红色-->
<div style="color:red; font-size:18px; background-color:pink;">男同学刘思江</div>
</body>
</html>
2.3 方式三
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.xx{
color:green;
font-size:28px;
background-color:red;
}
</style>
</head>
<body>
<div>男同学刘思江</div>
<!-- 加入三种样式：字体为红色，字体大小18px，字体背景为粉红色-->
<div style="color:red; font-size:18px; background-color:pink;">男同学刘思江</div>
<div class="xx">男同学刘思江</div>
</body>
</html>
3、CSS样式的选择器
3.1 标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 标签选择器，定义div标签的样式，所有div的标签都会使用该样式-->
<style>
div{
color:green;
font-size:28px;
background-color:red;
}
</style>
</head>
<body>
<div>男同学刘思江</div>
<!-- 加入三种样式：字体为红色，字体大小18px，字体背景为粉红色-->
<div style="color:red; font-size:18px; background-color:pink;">男同学刘思江</div>
<div class="xx">男同学刘思江</div>
</body>
</html>
3.2 ID选择器（id只针对一个样式）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 标签选择器，定义div标签的样式，所有div的标签都会使用该样式-->
<style>
#n1{
color:green;
font-size:28px;
background-color:red;
}
</style>
</head>
<body>
<div>男同学刘思江</div>
<!-- 加入三种样式：字体为红色，字体大小18px，字体背景为粉红色-->
<div style="color:red; font-size:18px; background-color:pink;">男同学刘思江</div>
<!--调用n1,本质与上一行的方法一致-->
<div id="n1">男同学刘思江</div>
</body>
</html>
3.3 后代相关
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
li a{
color:green;
font-size:28px;
background-color:red;
}
</style>
</head>
<body>
<div>
<li>刘思江</li>
<li>成龙</li>
<li>李连杰</li>
<li>
<a href="https://www.baidu.com">百度</a>
</li>
</div>
<div>
<a href="https://www.baidu.com">百度</a>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.header a{
color:green;
font-size:28px;
background-color:red;
}
.footer > a{
color:green;
font-size:28px;
background-color:red;
}
</style>
</head>
<body>
<!-- 修饰div下的所有a标签-->
<div class="header">
<li>刘思江</li>
<li>成龙</li>
<li>李连杰</li>
<li>
<a href="https://www.baidu.com">百度</a>
</li>
</div>
<!-- 修饰div下的儿子级别的a标签-->
<div class="footer">
<a href="https://www.baidu.com">百度</a>
<div>
<a href="https://www.cnblogs.com/liunaixu/">博客园</a>
</div>
</div>
</body>
</html>
3.4 分组选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <style>
div{
color:red;
}
a{
color:red;
}
span{
color:red;
}
h1{
color:red;
}
</style>-->
<!-- 方法如下-->
<style>
div,a,span,h1{
color:red;
}
.c1{
display:block;
color:pink
}
</style>
</head>
<body>
<div>xx</div>
<a class="c1">xxx</a>
<span>xxxx</span>
<h1>xxxxx</h1>
</body>
</html>
3.5 属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
input[type="text"]{
color:red
}
</style>
</head>
<body>
<input type="text"/>
<input type="password"/>
</body>
</html>
3.6 扩展：如果多个页面都会用到相同的样式，你可以将样式写到一个单独的CSS文件，页面要想使用的话导入该文件即可。
v1.css
.xx{
color:red
}.xxx{
color:green
}demo1.html页面应用v1.css文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/static/v1.css">
</head>
<body>
<h1 class="xx">用户注册</h1>
</body>
</html>
demo2.html页面应用v1.css文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/static/v1.css">
</head>
<body>
<h1 class="xxx">用户登录</h1>
</body>
</html>
总结：在页面中引用CSS样式，有三种方式：
1）标签：如2.2
2）页面head头部：如3.3 》》选择器
3）参数CSS文件：3.6 》》选择器
CSS样式》页面head头部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="">
<style>
h1{
color:red
}
span{
display:inline-block;
width:80px;
text-align:right;
}
form > div{
margin-top: 8px
}
</style>
</head>
<body>
<h1>用户注册</h1>
<form action="/do/register" method="get">
<div>
<span>用户名：</span>
<input type="text" placeholder="请输入用户名" name="user">
</div>
<div>
<span>密码：</span>
<input type="password" placeholder="请输入密码" name="pwd">
</div>
<div>
<span>性别：</span>
<!-- value值的设定value="1"-->
男 <input type="radio" name="gender" value="男"/>
女 <input type="radio" name="gender" value="女"/>
</div>
<div>
<span>所在城市：</span>
<select name="city" id="11">
<option value="11">北京</option>
<option value="22">河北</option>
<option value="33">河南</option>
<option value="44">江苏</option>
<option value="55">内蒙古</option>
</select>
</div>
<div>
<!-- 如果选择了多个爱好传值方式：hobby=01&hobby=02-->
<span>爱好：</span>
篮球<input type="checkbox" name="hobby" value="01"/>
足球球<input type="checkbox" name="hobby" value="02"/>
乒乓球<input type="checkbox" name="hobby" value="03"/>
</div>
<div>
<span>其他信息：</span>
<textarea name="more"></textarea>
</div>
<div>
<input type="submit" value="提交"/>
</div>
</form>
</body>
</html>
参数CSS文件：3.6 》》选择器
v1.css文件
.xx{
color:red
}
.xxx{
color:green
}register.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/static/v1.css">
<style>
h1{
color:red
}
span{
display:inline-block;
width:80px;
text-align:right;
}
form > div{
margin-top: 8px
}
</style>
</head>
<body>
<h1>用户注册</h1>
<form action="/do/register" method="get">
<div>
<span class="xx">用户名：</span>
<input type="text" placeholder="请输入用户名" name="user">
</div>
<div>
<span class="xxx">密码：</span>
<input type="password" placeholder="请输入密码" name="pwd">
</div>
<div>
<span>性别：</span>
<!-- value值的设定value="1"-->
男 <input type="radio" name="gender" value="男"/>
女 <input type="radio" name="gender" value="女"/>
</div>
<div>
<span>所在城市：</span>
<select name="city" id="11">
<option value="11">北京</option>
<option value="22">河北</option>
<option value="33">河南</option>
<option value="44">江苏</option>
<option value="55">内蒙古</option>
</select>
</div>
<div>
<!-- 如果选择了多个爱好传值方式：hobby=01&hobby=02-->
<span>爱好：</span>
篮球<input type="checkbox" name="hobby" value="01"/>
足球球<input type="checkbox" name="hobby" value="02"/>
乒乓球<input type="checkbox" name="hobby" value="03"/>
</div>
<div>
<span>其他信息：</span>
<textarea name="more"></textarea>
</div>
<div>
<input type="submit" value="提交"/>
</div>
</form>
</body>
</html>
