Html篇里提到过css是啥，CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
1、一个CSS样式示例：
CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。
例子：从代码可以看到，我在结构里定义了一个名字为c的css样式，并且在里对其中一个Dathon使用了它。
<style type="text/css">c{font-size:20px;/*设置文字字号*/ color:red;/*设置文字颜色*/ font-weight:bold;/*设置字体加粗*/}style>head><body><p><c>Dathon,c>Dathonp>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">span{color:red;}style>注：嵌入式css样式必须写在之间，并且一般情况下嵌入式css样式写在之间。
3.3)、外部式css样式，写在单独的一个文件中。简单来说就是我们新创一个文件，写上css样式并命名为style.css例如：
span{color:red;}然后我们在另一个html文档中使用标签将样式文件链接，代码如下：
"base.css" rel="stylesheet" type="text/css" />注：
1、css样式文件名称以有意义的英文字母命名，如 main.css。
2、rel="stylesheet" type="text/css" 是固定写法不可修改。
3、标签位置一般写在标签之内。
3.4)、三种方法的优先级
如果你将这几种方法都用于某个元素，那么它最后会程序哪个CSS样式呢，这其实涉及权值的问题，可以大致的理解为优先级：内联式 > 嵌入式 > 外部式
4、CSS选择器
4.1)、什么是选择器？
在{}之前的部分就是“选择器”，如：
选择器{样式;}4.2)、标签选择器
标签选择器其实就是html代码中的标签。如、、
、
、。例如下面代码：
p{font-size:12px;line-height:1.6em;}4.3)、类选择器
类选择器在css样式编码中是最常用到的，语法：
.类选器名称{css样式代码;}注：
1、英文圆点开头
2、其中类选器名称可以任意起名(但不要起中文噢)
使用方法：
(1)创建css样式：
.setgGeen{color:green;}(2)将类选择器使用到某个元素中去：
class"setgGeen">Dathonspan>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等去做
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>Dathonh3>结果：
6.10)、段落排版 -- 单词间距
h1{ word-spacing:50px;}...<h3>Dathon=Data+pythonh3>结果：
6.11)、段落排版 -- 对齐
h1{text-align:center;}css相关的内容暂时就总结这些，非常基础，主要是辅助自身工作用，而不是做前端。那数据分析所需要的前端技能篇就暂时告一段落，往后应该是写机器学习入门篇。
姊妹篇数据分析师所需的编程技能 - html篇：https://mp.weixin.qq.com/s/XKbm1pmwIE9qUKZPwt4yGw
扫一扫
7898
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
