🚀 Python-web开发学习笔记系列往期文章：
🍃 Python-web开发学习笔记（1）--- HTML基础
🍃 Python-web开发学习笔记（2）--- HTML基础
🍃 Python-web开发学习笔记（3）：Flask Demo，一个网站开发小案例
通过对HTML的学习，我们一起了解了HTML的相关基础知识。从本篇文章开始，我们又要一起学习前端另一个重要的知识板块：CSS。
目录
1. 快速了解css
2. CSS使用方式
3. 选择器
4. 常见样式
4.1 高度和宽度
4.2 字体
4.3 文字对齐方式
4.4 浮动
4.5 内边距
4.6 外边距
5. 总结
1. 快速了解css
说白了，我们写的HTML标签，仅仅是一些朴素的文本样式，就像我们素描一样，而CSS是干嘛的？CSS就好比我们在素描的基础上，图上色彩。因此可以说，css是用来美化我们的HTML标签的。
通常，为了修饰我们的标签，我们会在HTML标签内部加上“style”属性，通过给style属性赋予不同的值，使标签拥有不同的样式。
2. CSS使用方式
我们要用到css样式，除了上述直接在标签内部定义外，还有以下几种方式：
- 在<head>标签中预定义
预先在head标签中，通过<style>标签以及标签的类名class来定义同属该类名下所有标签的样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css学习</title>
<style>
.c1{
color:red;
}
</style>
</head>
<body>
<h1 class='c1'>用户登录</h1>
<h2 class='c1'>用户登录</h2>
<h3 class='c1'>用户登录</h3>
</body>
</html>
上述我们让所有class=c1的标签内容呈现红色样式。
- 直接在标签中定义：
<div style="height: 200px;background-color: dodgerblue;"></div>- 从css文件导入
这种方式需要将预设的css样式提前写进一个文件中，例如文件中定义了所有class=c1的标签都是红色字体，所有class=c2的标签都是蓝色字体：
.c1{
color:red;
}
.c2{
color:blue;
}将文件命名为learn.css，然后在html文件中的head标签里导入该文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css学习</title>
<link rel="stylesheet" href="learn.css">
</head>
<body>
<h1 class='c1'>我是c1</h1>
<h1 class='c1'>我也是c1</h1>
<h2 class='c2'>那么我是c2</h2>
<h2 class="c2">那么我也是c2</h2>
</body>
</html>上述href属性定义了css文件所在的路径。rel属性定义了当前页与href所指向的链接之间的关系，这里的关系是stylesheet，表示这是一个css样式的外部链接，这里只需记住外链css样式表就是这么写即可。运行结果如下：
3. 选择器
如果你要在 HTML 元素中设置 CSS 样式，那么你需要通过选择器来获取相应的元素。选择器通常有以下几种：
- ID选择器
通过“#"来调用元素：
//给所有id=c1的标签设置css样式
#c1{
}
<div id='c1'></div>- 类选择器
通过“.”来调用元素：
// 给所有class=c1的标签设置css样式
.c1{
}
<div class='c1'></div>- 标签选择器
//给所有div标签设置css样式
div{
}
<div>xxx</div>- 属性选择器
//找到所有input标签且属性type=text的标签设置css样式
input[type='text']{
border: 1px solid red; //将边框设置成1像素红色
}
//找到所有类名class=tag的且属性name=2的标签设置css样式
.tag[name="2"]{
color: blue;
}
<div class="tag" name="1">a</div>
<div class="tag" name="2">b</div>
<div class="tag" name="3">c</div>- 后代选择器
//先找到class=xx的标签，在该标签内部找到所有li标签进行设置
.xx li{
color: pink;
}
//先找到class=xx的标签，在该标签内部找到子代标签a进行设置，如果不写">"，那么会将该标签下所有的a标签进行设置
.xx > a{
color: dodgerblue;
}
<div class="xx">
<a href="http://www.baidu.com">百度</a>
<div>
<a href="https://www.csdn.net/">CSDN</a>
</div>
<ul>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
</ul>
</div>例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css学习</title> <style> #c1{ color: red; } .c1{ color: blueviolet; } div { color: aqua; } input[type='text']{ border: 2px solid red; } .tag[name='2']{ color: blue; } .xx li{ color: darkcyan; } .xx > a{ color: coral; } </style> </head> <body> <div id='c1'>我是id选择器</div> <div class='c1'>我是类选择器</div> <div>我是标签选择器</div> <div>-------------------</div> <input type="text"> <input type="password"> <div class="tag" name="1">a</div> <div class="tag" name="2">b</div> <div class="tag" name="3">c</div> <div>-------------------</div> <div class="xx"> <a href="http://www.baidu.com">百度</a> <div> <a href="https://www.csdn.net/">CSDN</a> </div> <ul> <li>第一行</li> <li>第二行</li> <li>第三行</li> </ul> </div> </body> </html>执行结果：
关于选择器的使用，通常是类选择器用的最多，其次是标签选择器，再次是后代选择器；而属性选择器和ID选择器用的比较少。当然，具体使用情况还需根据具体业务场景而定。另外，有时候我们会看见class后面跟着多个用空格隔开的类名：class="c1 c2 c3"，那么，如果给这三个类名都设置css样式，则后设置的class会覆盖掉之前设置的class，如果不想出现这种覆盖，则应在css中对不想被覆盖的样式后面加上“!important”，如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
color: red !important;
}
.c2{
font-size: 20px;
color: green;
}
</style>
</head>
<body>
<div class="c1 c2">c2的color=green不会生效，我是c1的red</div>
</body>
</html>
4. 常见样式
4.1 高度和宽度
.c1 {
height: 200px;
width: 400px;
}
需要注意，在HTML文章中我说过，div是块级标签，块级标签是占用一整行的，所以这里宽度虽然设置了，但是它在页面上的效果仍然是它的所在行不能放置其它内容了，通过浏览器的检查，可以看到效果：
把鼠标放在右侧箭头处，在页面上即可看到一块蓝色一块橘色的区域，蓝色区域显示了我们设置的400*200px，但是橘色区域仍然是当前div所占的区域。
那么，如果我就是想在块级标签后面加上内容怎么办呢？毕竟如果某个块只有两个字，占了一整行，还不让加其它内容，显得很不合理。这个时候，我们只需要加上一行设置就行，如下：
.c1 {
display: inline-block;
height: 200px;
width: 400px;
}此时，我们在div后再加上div内容看看效果：
可以看到，两个div内容放在了同一行了。这个方法也可以用在span、div+span这几种场景：
我们先不作处理看看：
可以看到，高度和宽度的设置对于行内标签span是不起作用的。但是加上display后，再看看效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {
display: inline-block;
height: 200px;
width: 400px;
}
</style>
</head>
<body>
<span class="c1">块级标签</span>
<span class="c2">xxx</span>
</body>
</html>
总的来说，inline表示行内、block表示块，inline-block表示行内块，如果display设置成inline，意味着将以行内标签span的属性展示，如果设置成block，将以块级标签div的属性展示，如果是inline-block，那么标签将既具有行内属性又具有块级属性。
4.2 字体
字体的基本属性有颜色color、大小size、 格式font-family等：
.c1 {
color: #2aabd2;
font-size: 60px;
font-family: "Microsoft YaHei";
...
}
框框处可以看到我们设置的字体属性。color的值可以直接写“red、blue、green”等，也可以写成如图的颜色编码，目前计算机能识别的所有颜色都有固定编码，感兴趣可以上网查一下，巨多。
4.3 文字对齐方式
除了上述属性，我们经常还会看到文字对齐方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
height: 500px;
width: 1000px;
border: 1px solid red;
text-align: center; /* 水平方向居中 */
line-height: 250px; /* 垂直方向居中 */
}
</style>
</head>
<body>
<div class="c1">文字内容</div>
</body>
</html>
可以看到，文字内容的位置相对于div块的大小（500*1000） 处于水平居中，垂直方向距离上边250像素的位置。
4.4 浮动
如果想让文字灵活的在页面上左右浮动，那么可以设置浮动属性style="float"：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<span>左边</span>
<span style="float: right">右边</span>
</div>
</body>
</html>
我们再来看一个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
float: left;
width: 280px;
height: 170px;
border: 1px solid red;
}
</style>
</head>
<body>
<div style="background-color: #2aabd2">
<div class="c1">11111111</div>
<div class="c1">222222222</div>
<div class="c1">33333333</div>
<div class="c1">4444444444</div>
<div class="c1">555555555</div>
</div>
<div>你好你好</div>
</body>
</html>
看起来很正常对不对？真的是这样吗？现在我们给这几个div填充背景颜色：
<div style="background-color: red">
<div class="c1">11111111</div>
<div class="c1">222222222</div>
<div class="c1">33333333</div>
<div class="c1">4444444444</div>
<div class="c1">555555555</div>
</div>再看一下效果：
背景效果不起作用了。理论上，我给上述5个div所在的块填充了红色，但是实际上并没有任何变化，为什么呢？其实并不是没变化，而是由于我给5个div设置了float属性，名曰浮动，所以它们实际上就“飘起来”了，飘起来，自然就脱离了下面一层“红色”的块，所以这里根本不起作用。如果要解决此问题，我们可以如下：
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div style="clear: both;"></div>加上“<div style="clear: both;"></div>”后我们再来看下效果：
背景效果出来了，说明浮起来的块被底下的块给拽回来了。浮动的效果，可以用来将块内容横着排列，这在有时候页面的展示上式必须的。
4.5 内边距
内边距，顾名思义，内容距离自己所在块的边界的上下左右距离，用padding-top、padding-bottom、padding-left、padding-right。比如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.outer{
border: 1px solid red;
height: 200px;
width: 200px;
padding-top: 100px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
}
</style>
</head>
<body>
<div class="outer">
<div style="background-color: gold; font-size: 30px">主题</div>
<div>
内容
</div>
</div>
</body>
</html>上述代码中，为了方便展示，给div添加了边框，最终效果如下：
从上图看出，“主题”和“内容”所在的块，距离外框上为100像素，左右下各为20像素。
4.6 外边距
与内边距相反，外边距是指块与块之间的距离，我们先来看一个不设置外边距的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 200px;background-color: dodgerblue;"></div>
<div style="background-color: red;height: 100px;"></div>
</body>
</html>
可以看到两个块紧挨在一起了，现在设置一下外边距：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 200px;background-color: dodgerblue;"></div>
<div style="background-color: red;height: 100px;margin-top: 10px"></div>
</body>
</html>
上述margin-top设置成10px，意味着红色块距离上方蓝色块10像素，这里还可以在红色块下再加一个块，然后设置margin-bottom看看效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 200px;background-color: dodgerblue;"></div>
<div style="background-color: red;height: 100px;margin-top: 10px;margin-bottom: 20px"></div>
<div style="height: 200px;background-color: dodgerblue;"></div>
</body>
</html> 
除此之外，还有margin-left，margin-right，可根据需要进行设置。
5. 总结
至此，CSS基础知识咱们学习完毕，还是那句话，样式千千万，不可能全部都学也不可能全都记住，哪怕是我们本次笔记学习过的，也不可能全都记住，毕竟每种属性还会有多种不同的值设置，每个标签也能有多种不同的css样式设置，所以我们最重要的是掌握css的用法，多看多学多写，做到今后在读别人的代码或者修改别人的样式时，不至于抓瞎，这不仅是分享给大家的，也是敲我自己记住的，因为本人也是在不断学习中~
本文主要介绍了一下几方面内容：
1. css的三种使用方式：在head中、在标签中、从css文件导入；
2. 五种选择器：id选择器、类选择器、标签选择器、属性选择器、后代选择器；
3. 高度和宽度。要注意对span标签默认无效、通过display实现块级标签和行内标签互相转换；
4. 字体格式：大小font-size、颜色color、样式font-family等；
5. 文字对齐方式：注意垂直方向无center属性值；
6. 浮动：能够让块内容顺序排列。但要注意避免块漂浮而脱离文档流，可以用clear: both解决；
7. 内边距、外边距
