Python之Web前端（02—CSS层叠样式表
一、CSS介绍
1、定义
CSS:层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
简单来说：CSS 指层叠样式表 (Cascading Style Sheets)定义如何显示控制 HTML 元素,从而实现美化HTML网页。
2、特点及优势
1）特点：
CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。总体来说，CSS具有以下特点：
丰富的样式定义。CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。
易于使用和修改。CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。另外，可以将相同样式的元素进行归类，使用同一个样式进行定义，也可以将某个样式应用到所有同名的HTML标签中，也可以将一个CSS样式指定到某个页面元素中。如果要修改样式，我们只需要在样式列表中找到相应的样式声明进行修改。
多页面应用。CSS样式表可以单独存放在一个CSS文件中，这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。
层叠。简单的说，层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的样式设置进行重写，在浏览器中看到的将是最后面设置的样式效果。
页面压缩。在使用HTML定义页面效果的网站中，往往需要大量或重复的表格和font元素形成各种规格的文字样式，这样做的后果就是会产生大量的HTML标签，从而使页面文件的大小增加。而将样式的声明单独放到CSS样式表中，可以大大的减小页面的体积，这样在加载页面时使用的时间也会大大的减少。另外，CSS样式表的复用更大程度的缩减了页面的体积，减少下载的时间。 为了让网页元素的样式更加丰富,也为了让网页的内容和样式能拆分开,CSS由此思想而诞生,有了CSS,html中大部分表现样式的标签就废弃不用了,html只负责文档的结构和内容,表现形式完全交给CSS,html文档变得更加简洁。
2）优势：
为了让网页元素的样式更加丰富,也为了让网页的内容和样式能拆分开,CSS由此思想而诞生,有了CSS,html中大部分表现样式的标签就废弃不用了,html只负责文档的结构和内容,表现形式完全交给CSS,html文档变得更加简洁。
二、基本语法
1、CSS页面引入
格式： 选择器{属性:值;属性:值;属性:值;…}
方法一：内联式
内联式:通过标签的style属性,在标签上直接写样式
简单代码实现如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css内联式引入</title>
</head>
<body>
<div style="color: red ;font-size:50px">css页面引入方法1</div>
</body>
</html>
如上面的代码所示，我在div标签内直接通过style属性直接写样式。那么这里我们设置了字体的颜色为红色，字体大小为50px。
注：这种方法在开发中是最不常用的一种，因为在标签内写方法会让代码看起来很乱，而且也不利于管理和查找，所以只有在某些情况下才会使用这种方式来写样式。
方法二：嵌入式
嵌入式:通过style标签,在网页上创建嵌入的样式表。比较常用，需要写在head里
简单代码实现如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>嵌入式引入 </title>
<!--
css样式的声明：写在head标签里面
1、div是最简单的标签选择器
-->
<style type="text/css">
div {
border:1px solid red;
width:700px;
height:200px
}
</style>
</head>
<body>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
</html>
网页实现结果展示：
注：这种方法是比较常用的一种，一般在写首页的时候通常会用到这种方式，因为网站首页加载快慢会直接影响用户的体验，所以网页的加载速度就要快。那么这种方式不会影响加载速度，又将样式整合到了标签中，所以是比较适用的。但是也不会大量的使用。最后一种才是我们经常用的方式。
法三：外联式
外联式:通过link标签,链接到外部样式表到页面中。最常用，写在head里。
简单代码实现如下：
main.css文件：
/*外联式css样式信息*/
div {
border: 1px solid red;
width: 700px;
height: 200px
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 外联式：通过link标签，链接到外部样式表到页面中。-->
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
</html>
网页实现结果如下：
注意：样式表位置建议写相对路径，CSS样式文件建议直接存到CSS目录中，创建一个CSS目录，再在里面创建一个main.css文件，用来编辑样式代码。
另外：我们可以看到这次用了两个文件，一个是css文件，一个是html文件。css文件里写的东西和style标签中的写法是一模一样的。只是单独写在一个文件中。然后通过link标签将css样式文件引入到页面。rel里面的东西我们不用管，herf中的路径就是css文件的逻辑路径。我们看一下效果。
三、常用CSS样式
1、文本设置
2、颜色表示法
刚开始我们在模仿别人的页面去做的时候，如果看到人家用的好看的颜色想拿来用，直接看页面的源代码去找，箭头点击想要的颜色区域，右边查看源代码使用到的颜色。
关于CSS的样式有很多很多，用的时候去官网查看即可，点击可以进入:
菜鸟教程
W3C
简单的代码示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*标签名叫a*/
a{
text-decoration: none; /*text-...用来去掉超链接的文本装饰下划线*/
}
ul>li{
/*list...用来去掉列表的文本装饰前面的点*/
list-style: none; #用来去掉ul列表前的样式
line-height: 30px; #设置ul列表的行高为30px
}
</style>
</head>
<body>
<a href="#">
百度一下
</a>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
网页展示结果：
上一篇： 项目总结之前端页面常用插件
下一篇： haproxy负载均衡