Html篇里提到过css是啥，CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
1、一个CSS样式示例：
CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。
例子：从代码可以看到，我在<head>结构里定义了一个名字为c的css样式，并且在<body>里对其中一个Dathon使用了它。
<style type="text/css">
c{font-size:20px;/*设置文字字号*/ color:red;/*设置文字颜色*/ font-weight:bold;/*设置字体加粗*/}
</style>
</head>
<body>
<p><c>Dathon,</c>Dathon</p>
</body>
</html>
结果：
2、CSS样式语法
2.1）css 样式由选择符和声明组成，而声明又由属性和值组成，如下图所示：
2.2）选择符：又称选择器，指明网页中要应用样式规则的元素。
2.3）声明：在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”。
注意：为了使用样式更加容易阅读，可以将每条代码写在一个新行内，如下所示：
p{font-size:12px;color:red;}
3、CSS样式的种类
3.1)、内敛式css样式，直接写在现有的html标签中，代码如下：
<p style="color:red">这里文字是红色。</p>
若有多条css样式代码可以写在一起，中间用分号隔开，代码如下：
<p style="color:red;font-size:12px">这里文字是红色。</p>
内联式的缺点：若多个元素都需要用css样式，那么代码量就多很多。
3.2)、嵌入式css样式，写在当前的文件中，嵌入式css样式，就是可以把css样式代码写在<style type="text/css"></style>标签之间，代码如下：
<style type="text/css">span{color:red;}</style>
注：嵌入式css样式必须写在<style></style>之间，并且一般情况下嵌入式css样式写在<head></head>之间。
3.3）、外部式css样式，写在单独的一个文件中。简单来说就是我们新创一个文件，写上css样式并命名为style.css例如：
span{color:red;}
然后我们在另一个html文档中使用<link>标签将样式文件链接，代码如下：
<link href="base.css" target="_blank" rel="external nofollow" rel="stylesheet" type="text/css" />
注：
1、css样式文件名称以有意义的英文字母命名，如 main.css。
2、rel="stylesheet" type="text/css" 是固定写法不可修改。
3、<link>标签位置一般写在<head>标签之内。
3.4）、三种方法的优先级
如果你将这几种方法都用于某个元素，那么它最后会程序哪个CSS样式呢，这其实涉及权值的问题，可以大致的理解为优先级：内联式 > 嵌入式 > 外部式
4、CSS选择器
4.1）、什么是选择器？
在{}之前的部分就是“选择器”，如：
选择器{
样式;}
4.2）、标签选择器
标签选择器其实就是html代码中的标签。如<html>、<body>、<h1>、<p>、<img>。例如下面代码：
p{font-size:12px;line-height:1.6em;}
4.3）、类选择器
类选择器在css样式编码中是最常用到的，语法：
.类选器名称{css样式代码;}
注：
1、英文圆点开头
2、其中类选器名称可以任意起名（但不要起中文噢）
使用方法：
（1）创建css样式：
.setgGeen{color:green;}
（2）将类选择器使用到某个元素中去：
<span class"setgGeen">Dathon</span>
4.4）、ID选择器
语法：与类选择器仅只是.和#的区别
#setGreen{color:green;}
使用方法：与类选择器一致，但class变为id。
4.5）、类和ID选择器的区别
1、ID选择器只能在文档中使用一次。
2、可以使用类选择器词列表方法为一个元素同时设置多个样式。（ID选择器不行）
4.6）、通用选择器
它使用一个（*）号指定，它的作用是匹配html中所有标签元素，如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色，语法：
* {color:red;}
5、CSS的性质
5.1）、继承
CSS的某些样式是具有继承性的，继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。比如下面代码：如某种颜色应用于p标签，这个颜色设置不仅应用p标签，还应用于p标签中的所有子元素文本，这里子元素为span标签。但注意有一些css样式是不具有继承性的。如border:1px solid red。
p{color:red;}
<p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
5.2）、层叠
如果在html文件中对于同一个元素可以有多个css样式存在并且这多个css样式具有相同权重值怎么办？
标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。
层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。
5.3）、重要性
我们在做网页代码的时，有些特殊的情况需要为某些样式设置具有最高权值，怎么办？这时候我们可以使用!important来解决，语法：
p{color:red!important;}
6、CSS样式语法
6.1）、字体设置，语法：
body{font-family:"宋体";}
6.2）、字号与颜色设置，#666灰色
body{font-size:12px;color:#666}
6.3）、粗体。当然也可以用html<strong>等去做
span{font-weight:bold;}
6.4）、斜体
a{font-style:italic;}
6.5）、下划线
a{text-decoration:underline;}
6.6）、删除线
.oldPrice{text-decoration:line-through;}
6.7）、段落排版 -- 缩进：以下为缩进文字2倍大小的意思（可理解为缩进两个空格），再也不用一直打 
p{text-indent:2em;}
6.8）、段落排版 -- 行高
p{line-height:1.5em;}
6.9）、段落排版 -- 文字间距
h1{letter-spacing:50px;}
...
<h3>Dathon</h3>
结果：
6.10）、段落排版 -- 单词间距
h1{ word-spacing:50px;}
...
<h3>Dathon=Data+python</h3>
结果：
6.11）、段落排版 -- 对齐
h1{text-align:center;}
css相关的内容暂时就总结这些，非常基础，主要是辅助自身工作用，而不是做前端。那数据分析所需要的前端技能篇就暂时告一段落，往后应该是写机器学习入门篇。
一个记录会计到数据、算法路上所学的微信公众号：Dathon