CSS样式
参考资料：
1、CSS样式
CSS（Cascading StyleSheets）称为层叠样式工作表，作用：用于对页面进行i美化。本质上就是对标签进行点缀。
2、初识CSS样式
2.1 方式一：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div>男同学刘思江div>
body>
html>
2.2 方式二
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div>男同学刘思江div>
<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>Titletitle>
<style>
.xx{
color:green;
font-size:28px;
background-color:red;
}
style>
head>
<body>
<div>男同学刘思江div>
<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>Titletitle>
<style>
div{
color:green;
font-size:28px;
background-color:red;
}
style>
head>
<body>
<div>男同学刘思江div>
<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>Titletitle>
<style>
#n1{
color:green;
font-size:28px;
background-color:red;
}
style>
head>
<body>
<div>男同学刘思江div>
<div style="color:red; font-size:18px; background-color:pink;">男同学刘思江div>
<div id="n1">男同学刘思江div>
body>
html>
3.3 后代相关
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<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>Titletitle>
<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 class="header">
<li>刘思江li>
<li>成龙li>
<li>李连杰li>
<li>
<a href="https://www.baidu.com">百度a>
li>
div>
<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>Titletitle>
<style>
div,a,span,h1{
color:red;
}
.c1{
display:block;
color:pink
}
style>
head>
<body>
<div>xxdiv>
<a class="c1">xxxa>
<span>xxxxspan>
<h1>xxxxxh1>
body>
html>
3.5 属性选择器
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<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>Titletitle>
<link rel="stylesheet" href="/static/v1.css">
head>
<body>
<h1 class="xx">用户注册h1>
body>
html>
demo2.html页面应用v1.css文件
Title
用户登录
总结：在页面中引用CSS样式，有三种方式：
1）标签：如2.2
2）页面head头部：如3.3 》》选择器
3）参数CSS文件：3.6 》》选择器
CSS样式》页面head头部
Title
用户注册
参数CSS文件：3.6 》》选择器
v1.css文件
.xx{ color:red } .xxx{ color:green }
register.html
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<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>
男 <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>
<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>