css样式，是专门用来“美化”标签的。
1.快速了解css
<img src="..." style="height:100px" />
<div style="color:red">hello</div>这里的style="height:100px"和style="color:red"就是css
2.css通用方式
2.1在标签上
<img src="..." style="height:100px" />
<div style="color:red">hello</div>2.2在head里
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户登陆</title>
<style>
.c1{
color=red;
}
</style>
</head>
<body>
<h1 class='c1'>登陆</h1>
<h1 class='c1'>登陆</h1>
<h1 class='c1'>登陆</h1>
</body>
</html>2.3在文件里
common.css
.c1{
height:100px;
}
.c2{
color:red;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户登陆</title>
<link rel="styleheet" href="common.css" />
</head>
<body>
<h1 class='c1'>登陆</h1>
<h1 class='c1'>登陆</h1>
<h1 class='c1'>登陆</h1>
</body>
</html>适用于多个文件都需要这个样式的情形
.css文件可以和引用的图片一样放在static目录下
案例：flask中的应用
登陆界面：将css写在head里
注册界面：将css写在.css文件里
问题：使用Flask框架开发不方便
每次都需要重启
规定有些文件必须放在特定的文件夹
新创建一个界面，需要重新写一个
函数
HTML文件
PyCharm提供了一个非常便捷的开发前端的工具
如果想要实时观察页面的改变，就打开设置，如下图所示修改：
这样，预览界面就会随着html文件的改变而改变。
3.CSS选择性
3.1类选择器
.c1{
}
<div class="c1"></div>3.2ID选择器
#c1{
}
<div id="c1"></div>3.3标签选择器
li{
}
<li>xxx</li>
div{
}
<div>xxx<div>3.4属性选择器
input[type='text']{
border: 1px solid red;
}
.v1[xx='456']{
color:gold;
}
<input type="text">
<input type="password">
<div class="v1" xx="123">a</div>
<div class="v1" xx="789">b</div>
<div class="v1" xx="456">c</div>3.5后代选择器
.yy li{
color: pink;
}
.yy > a{
color: orange;
}什么都不加，表示到类名为yy的类里去找他的所有后代；而添加尖括号，则表示仅仅到yy类的儿子里去找。
<div class="yy">
<a href="https://www.baidu.com">百度</a>
<div>
<a href="https://www.sogou.com">搜狗</a>
</div>
<ul>
<li>city</li>
<li>country</li>
<li>world</li>
</ul>
</div>关于选择器：
使用的多：类选择器，标签选择器，后代选择器
使用的少：ID选择器，属性选择器
3.6使用多个选择器时
.c3{
color:blue;
border: 1px solid red;
}
.c4{
color:green;
font-size: 28px;
}<!--使用多个样式时，重复的样式会被后定义的样式所覆盖，类似于就近原则-->
<div class="c3 c4">
<ul>
<li>abc</li>
<li>def</li>
<li>ghj</li>
</ul>
</div>如果不想被后面定义的样式所覆盖，css样式可以这样定义：
.c3{
color:blue !important;
border: 1px solid red;
}4.CSS的样式
4.1高度和宽度
.c1{
height: 300px;
width: 50%;
}宽度支持百分比，而高度不支持，因为页面可以无限长。
对行内标签而言，高度和宽度的设置是无效的
对块级标签而言，默认情况下是有效的
4.2块级和行内标签
display:inline-block使标签同时具有块级和行内标签的特性
.c2{
display: inline-block;
height: 100px;
width: 300px;
border: 1px solid red;
}<!--块级和行内标签-->
<div>
<span class="c2">chinese</span>
<span class="c2">chinese</span>
<span class="c2">chinese</span>
</div>效果如下：
块级变行内标签，行内标签变为块级标签
<div style="display: inline">中国</div>
<span class="c2" style="display: block">外国</span>4.3字体颜色、大小、加粗、字体格式
.c3{
color: gold;
font-size: 20px;
font-weight: 100;
font-family: "Apple Color Emoji", serif;
}4.4浮动
float:left\right
.c4{
float:left;
width: 200px;
height: 150px;
border: 1px solid red;
}<!--浮动-->
<div>
<span>左边</span>
<span style="float: right">右边</span>
</div>
<div style="background-color: lightblue">
<div class="c4"></div>
<div class="c4"></div>
<div class="c4"></div>
<!--如果不添加下面一行，就会脱离文档流-->
<div style="clear: both"></div>
</div>4.5内边距
padding-left
padding-right
padding-top
padding-button
padding
.c5{
border: 1px solid red;
height: 400px;
width: 200px;
padding: 20px;
}<!--内边距-->
<div class="c5">
<div style="background-color: gold">听妈妈的话</div>
<div>才是好孩子</div>
</div>4.6外边距
margin
margin-left
margin-right
margin-top
margin-button
<!--外边距-->
<div style="background-color: gold; height:100px"></div>
<div style="background-color: lightblue; height:100px; margin: 20px"></div>4.7区域居中
margin: 0 auto其中0表示无上边距，auto表示区域自动居中
.c6{
width: 500px;
background-color: pink;
height: 1000px;
margin: 0 auto;
}<!--区域居中-->
<div class="c6"></div>