一、CSS初识
HTML 满足不了设计者的需求；操作 html 属性不方便；html 里面添加样式带来的是无尽的臃肿和繁琐。
CSS 网页的美容师，CSS 的最大贡献是：让 html 从样式中脱离，实现了 html 专注去做 结构呈现，样式交给 css。
理想中的结果是：结构（html）与样式（css）相分离。
1、CSS初识
- 概念：CSS(Cascading Style Sheets) ，通常称为CSS样式表或层叠样式表（级联样式表）。
作用：
（1）、主要用于设置 HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
（2）、CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。
要书写 css 样式，首先就是要引入 css。css 有三种引入方式，分别是：行内式（内联样式）、内部样式表（内嵌样式表）、外部样式表（外链式）。
2、行内式（内联样式）
- 概念：称行内样式、行间样式.；是通过标签的style属性来设置元素的样式。
基本语法格式如下：<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
实际上任何HTML标签都拥有style属性，用来设置行内式。
示例：<div style="color: red; font-size: 12px;">人生苦短，我用 Python</div>
注意：
（1）、style 其实就是标签的属性；
（2）、样式属性和值中间是英文冒号（:）；
（3）、多组属性值之间用英文分号（;）隔开；
（4）、只能控制当前的标签，以及嵌套在其中的子标签，造成代码冗余。
缺点：没有实现样式和结构相分离。
3、内部样式表（内嵌样式表）
- 概念：称为内嵌套式；是将 CSS 代码集中写在 HTML 文档的 head 头部标签中，并且用 style 标签定义。
基本语法格式如下：
<head>
<style type="text/CSS">
选择器（选择的标签） {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
</style>
</head>示例：
<style>
div {
color: red;
font-size: 12px;
}
</style>注意：
（1）、style 标签一般位于 head 标签中，当然也可以放在 html 文档的任何地方，但不建议这样做。
（2）、type="text/css" 属性在html5中可以省略。
（3）、只能控制当前的页面。
缺点：没有彻底实现样式和结构相分离。
4、外部样式表（外链式）
- 概念：也称为链入式；是将所有的样式放在一个或多个以 .css 为扩展名的外部样式表文件中；通过 link 标签将外部样式表文件链接到HTML 文档中。
基本语法格式如下：
<head>
<link rel="stylesheet" type="text/css" href="css文件路径">
</head>注意：
（1）、link 是个单标签；
（2）、link 标签需要放在 head 头部标签中，并且指定 link 标签的三个属性。
关于 link 标签的三个属性的作用如下所示：
| rel | 定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。 |
| type | 定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。可以省略。 |
| href | 定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。 |
使用 外链式样式表，可以同时被多个页面的 HTML 所使用，如果样式有变化，也只需修改 css 文件的样式即可。
5、三种样式表总结
| 行内样式表 | 书写方便，权重高 | 没有实现样式和结构相分离 | 较少 | 控制一个标签（少） |
| 内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面（中） |
| 外部样式表 | 完全实现结构和样式相分离 | 需要引入 | 最多，强烈推荐 | 控制整个站点（多） |
6、约定-代码风格
样式书写一般有两种
一种是紧凑格式 (Compact)，例如：h3 { color: deeppink;font-size: 20px;}
一种是展开格式（推荐）
h3 {
color: deeppink;
font-size: 20px;
}此外，样式选择器，属性名，属性值关键字全部使用小写字母书写，属性字符串允许使用大小写。
/* 推荐 */
h3{
color: pink;
}
/* 不推荐 */
H3{
COLOR: PINK;
}7、 总结CSS样式规则
使用 html 需要遵从一定的规范。CSS亦是如此，要想熟练地使用CSS对网页进行修饰，首先需要了解CSS样式规则。
二、CSS选择器
要求能够使用基础选择器给页面元素添加样式。
1、CSS选择器作用
- 找到特定的HTML页面元素。主要是选择标签用的，把我们想要的标签选择出来。
- CSS所做的可分两件事，选对人，做对事。例如下面这个简单的CSS选择器：
h3 {
color: red;
}这个选择器做了两件事，把 h3 标签选出来，然后把它变成红色。
此外，CSS选择器分为基础选择器和复合选择器，下面先来理解基础选择器。
2、CSS基础选择器
2.1、标签选择器
- 概念：标签选择器（或者叫元素选择器）是指用 HTML标签名 称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
语法：标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
- 作用：可以把某一类标签全部选择出来，比如所有的 div 标签，所有的 span 标签等。
- 优点：能快速为页面中同类型的标签统一样式。
- 缺点：不能设计差异化样式。
口诀：标签选择器，页面同选起；直接写标签，全部不放弃。
2.2、类选择器
类选择器使用英文点号（.）进行标识，后面紧跟类名。
语法：
在类名选择器中：
.类名 {
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}在标签中的使用：<p class='类名'></p>
优点：可以为元素对象定义单独或相同的样式。 可以选择一个或者多个标签 。
注意点：
（1）、类选择器使用英文点号（.）进行标识，后面紧跟类名，类是是自定义的。
（2）、长名称或词组可以使用中横线来为选择器命名。
（3）、不要纯数字、中文等命名，尽量使用英文字母来表示。
关于命名规范，参考：Web前端开发规范手册.doc
命名是通俗约定的，并不是强制性的。
类选择器记忆口诀：
- 差异化选择，一个或多个，上面点定义，类名别写错，谁用谁调用，class来做。
在实际使用中，类选择器是使用最多的。
2.3、类选择器特殊用法- 多类名
- 可以给标签指定多个类名，从而达到更多的选择目的。
注意：
（1）、各个类名中间用空格隔开。
（2）、多类名选择器在以后的页面布局比较复杂的情况下，使用较多。
例如：
<span class="blue font100">G</span>
<span class="red font100">o</span>
<span class="orange font100">o</span>
<span class="blue font100">g</span>
<span class="green font100">l</span>
<span class="red font100">e</span>2.4、id选择器
id选择器使用#进行标识，后面紧跟id名
基本语法如下：#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
在标签中的使用方法：<p id="id名"></p>
元素的 id 值是唯一的，只能对应于文档中某一个具体的元素。用法基本和类选择器相同。
2.5、id选择器和类选择器区别
- W3C 标签规定，在同一个页面内，不允许有相同名字的 id 对象出现，但是允许相同名字的 class 出现。
- 类选择器（class）就好比是人的名字，可以多次重复使用的。id 选择就好比是人的身份证号码，是唯一的，不能重复。
重点（一定要记住）：id 选择器和类选择器最大的不同在于使用次数上。
总结：类选择器在修改样式中，用的最多。id 选择器一般用于页面唯一性的元素身上，经常和 JavaScript 搭配使用。
2.6、通配符选择器
通配符选择器用星号（*）表示，星号表示选择所有标签。它是所有选择器中作用范围最广的，能匹配页面中所有的元素。
基本语法格式如下：* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。
* {
margin: 0; /* 定义外边距*/
padding: 0; /* 定义内边距*/
}注意：会匹配页面所有的元素，降低页面响应速度，不建议随便使用。
2.7、基础选择器总结
| 标签选择器 | 可以选出所有相同的标签，比如p | 不能差异化选择 | 较多 | p { color：red;} |
| 类选择器 | 可以选出1个或者多个标签 | 可以根据需求选择 | 非常多 | .nav { color: red; } |
| id选择器 | 一次只能选择器1个标签 | 只能使用一次 | 不推荐使用 | #nav {color: red;} |
| 通配符选择器 | 选择所有的标签 | 选择的太多 | 不推荐使用 | * {color: red;} |
上面4个类选择器都有自己的存在价值，可能在某个地方会用到。但是类选择器是使用最多的。
2.8、约定
选择器中尽量少用通配符选择器，尽量少用 id 选择器。另外，不使用无具体语义定义的标签选择器 div 和 span。
/* 推荐 */
.jdc {}
li {}
p {}
/* 不推荐 */
*{}
#jdc {}
div{} 因为div 没有语义，要尽量少用三、CSS文字文本样式
接下来学习：CSS字体样式属性调试工具
要求达到下面几点目标：
（1）、使用 css 字体样式完成对字体的设置。
（2）、使用 css 外观属性给页面元素添加样式。
（3）、使用常用的 emment 语法。
（4）、能够使用开发人员工具进行代码调试。
另外，在 CSS 中注释方式是：/*注释文字，可以有多行*/。在 html 中的注释是 <!--注释文字-->
1、font字体
1.1、font-size:大小
作用：font-size 属性用于设置字号，单位是像素（px）。例如要给 p 标签内的文字设置大小：
p {
font-size: 20px;
}字体大小的单位有相对长度单位和绝对长度单位。相对长度单位比较常用，推荐使用像素单位 px，绝对长度单位使用较少。
相对长度单位有：
（1）、em：相对于当前对象内文本的字体尺寸。
（2）、px：像素，最常用，推荐使用。
绝对长度单位有：
（1）、in：英寸。
（2）、cm：厘米。
（3）、mm：毫米。
（4）、pt：点。
注意：
（1）、在今后的页面中，设置文字的大小，基本就使用像素 px 作为单位。
（2）、谷歌浏览器默认的文字大小是 16px。
（3）、不同的浏览器默认显示的字号大小可能不一致，所以要尽量给一个明确大小，不要默认大小，一般给 body 指定整个页面的文字的大小，通常就设置为 16px。例如下面这样：
body {
font-size: 16px;
}1.2、font-family:字体
font-family 属性用于设置哪一种字体，比如设置 宋体、微软雅黑、黑体等。例如为 p 标签内的文字设置字体样式如下：p { font-family: "微软雅黑";}
网页中常用的字体有宋体、微软雅黑、黑体等；可以同时指定多个字体，中间以英文逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体，如果都没有，则以电脑默认的字体为准。设置多个字体方式如下：p {font-family: Arial, "Microsoft Yahei", "微软雅黑";}
设置多个字体的技巧：
（1）、英文字体不区分大小写。各种字体之间必须使用英文逗号隔开。
（2）、中文字体需要加英文状态下的双引号（""），英文字体可以不加。当有英文字体和中文字体时，英文字体必须位于中文字体前面。
（3）、如果字体名中间包含空格、#、$等符号，则该字体必须加英文状态下的双引号，例如：font-family: "Times New Roman";。
CSS Unicode字体
在 CSS 中设置字体名称，直接写中文是可以的。但是在文件编码（GB2312、UTF-8等）不匹配时会产生乱码的错误；另外，xp 系统不支持类似 微软雅黑 的中文。
要解决上面的问题，可以用两种方案：
方案一：可以使用英文字体来替代，比如 font-family: "Microsoft Yahei"。
方案二：在 css 中直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称，浏览器可以正确的解析。例如下面这样：font-family: "\5FAE\8F6F\96C5\9ED1"; 表示设置字体为“微软雅黑”。
下面是常用中文字体对应的英文名称及 Unicode编码：
| 宋体 | SimSun | \5B8B\4F53 |
| 新宋体 | NSimSun | \65B0\5B8B\4F53 |
| 黑体 | SimHei | \9ED1\4F53 |
| 微软雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1 |
| 楷体_GB2312 | KaiTi_GB2312 | \6977\4F53_GB2312 |
| 隶书 | LiSu | \96B6\4E66 |
| 幼园 | YouYuan | \5E7C\5706 |
| 华文细黑 | STXihei | \534E\6587\7EC6\9ED1 |
| 细明体 | MingLiU | \7EC6\660E\4F53 |
| 新细明体 | PMingLiU | \65B0\7EC6\660E\4F53 |
在实际使用中，为了照顾不同电脑的字体安装问题，尽量使用宋体和微软雅黑中文字体。
1.3、font-weight:字体粗细
在 html 中要对字体加粗，可用 b 和 strong 标签来实现。在 css 中也可以实现，且 css 是没有语义的。
font-weight 的常用属性值有下面几个，务必要记得。
| normal | 默认值（不加粗） |
| bold | 定义粗体（加粗的） |
| 100-900 | 400等同于normal，700等同于bold，重点记住这句话 |
在设置字体粗细时，尽量使用数字来设置。
1.4 font-style:字体风格，设置字体倾斜和不倾斜
在 html 中可使用 i 和 em 标签将字体设置为倾斜。在 css 中也可以设置，且 css 是没有语义的。
font-style 属性设置字体风格，可用的属性值如下：
| normal | 默认值，浏览器会显示标准的字体样式，例如：font-style: normal; |
| italic | 浏览器会显示斜体的字体样式，例如：font-style: italic; |
技巧：平时很少用来给字体加斜体，反而喜欢给斜体标签（em，i）改为普通模式，因为标签还可以添加其它样式。
1.5 font:综合设置字体样式 (重点)
font 属性可以将字体样式进行综合设置，基本语法如下：选择器 { font: font-style font-weight font-size/line-height font-family;}
注意：
（1）、使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。
（2）、其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。
1.6 font总结
| font-size | 字号 | 常用的单位是px像素，一定要跟上单位 |
| font-family | 字体 | 实际工作中按照团队约定来写字体 |
| font-weight | 字体粗细 | 记住加粗是700或者bold不加粗是normal或者400，记住数字不要跟单位 |
| font-style | 字体样式 | 记住倾斜是italic，不倾斜是normal，工作中最常用normal |
| font | 字体连写 | 1. 字体连写是有顺序的，不能随意换位置；2. 其中字号和字体必须同时出现 |
2. CSS外观属性
2.1、color:文本颜色
作用：color 属性用于定义文本的颜色。取值方式有下面几种：
| 预定义的颜色值 | red，green，blue，以及粉红色：pink |
| 十六进制 | #FF0000，#FF6600，#29D794 |
| RGB代码 | rgb(255,0,0)或rgb(100%,0%,0%) |
从上面可知，在给文本添加颜色时，可以直接使用代表颜色的英文单词，常用的有红（red）、绿（green）、蓝（blue），例如要给文字设置成红色时可用：“color: red;”即可。除了直接使用英文单词外，还可使用十六进制来表示，在实际工作中，十六进制表示法也是使用最多的，十六进制数字前面必须要加井号（#），后面是6个十六进制数，其中每2个十六进制数分为一组，分别代表红、绿、蓝，例如这个 #FFFFFF 其含义就是全红、全绿、全蓝，相当于 #rrggbb。例如用十六进制表示红色是 #FF0000。
此外，用十六进制数字来表示颜色时，每组数字相同时，可以用简写方式表示，例如，#FFFFFF可简写为 #FFF，#FF0000或简写为#F00，#990011或简写为#901。但是#FF1234不能用简写来表示。
文本颜色还可用RGB代码来表示，例如，rgb(255, 0, 0) 或 rgb(100%, 0%, 0%) 表示红色，rgb(0, 255, 0) 或 rgb(0%, 100%, 0%) 表示绿色。
当在某个页面上看到好看的字体颜色时，可以屏幕取色器工具获取其颜色的十六进制数字或者RGB代码，并将其用于自己的样式中。
2.2、text-align:文本水平对齐方式
作用：text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。
| left | 左对齐（默认值） |
| right | 右对齐 |
| center | 居中对齐 |
需要注意的是：是让盒子里面的内容水平居中， 而不是让盒子居中对齐。
2.3、line-height:行间距
- 作用：line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。
- 单位：line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px。
一般情况下，行距比字号大7, 8像素左右就可以了。line-height: 24px;
2.4、text-indent:首行缩进
设置文本首行缩进。属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口的百分比%，允许使用负值。通常使用 em 为单位，1 em 就是一个字宽度，对于汉字，1 em就是一个汉字宽度。
p {
/*行间距*/
line-height: 25px;
/*首行缩进2个字 em 1个em 就是1个字的大小*/
text-indent: 2em;
}2.5、text-decoration 文本的装饰
常用于给链接修改装饰效果。对应的属性值和含义如下：
| none | 默认。定义标准的文本。 取消下划线（最常用） |
| underline | 定义文本下方的一条线。下划线 也是链接自带的（常用） |
| overline | 定义文本上方的一条线。（不用） |
| line-through | 定义穿过文本下的一条线，也就是删除线。（不常用） |
3.开发者工具（chrome）
该工具是开发必备工具，代码出了问题，第一时间就想到用它找问题。开发者工具常用方法有：
（1）、按F12”或者是 “shift+ctrl+i” 打开 开发者工具。
（2）、菜单： 右击网页空白出---检查。
（3）、通过开发人员工具小指针工具，查找页面元素。
（4）、左侧是html页面结构，右侧是css样式。
技巧：
（1）、 ctrl+滚轮 可以 放大开发者工具代码大小。
（2）、左边是HTML元素结构 右边是CSS样式。
（3）、在每个CSS样式的右上角都有该CSS样式对应的文件名称，及在该文件中处于哪一行（位置）。
（4）、右边CSS样式可以改动数值和颜色查看更改后效果。
（5）、ctrl + 0 复原浏览器大小
4. sublime快捷操作emmet语法
Emmet的前身是Zen coding，它使用缩写来提高 html/css 的编写速度。
- 生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键， 就可以生成
<div></div> - 如果想要生成多个相同标签 加上 * 就可以了 比如 div*3 就可以快速生成3个div
- 如果有父子级关系的标签，可以用
> 比如ul > li`就可以了。 - 如果有兄弟关系的标签，用 + 就可以了 比如 div+p
- 如果生成带有类名或者id名字的， 直接写 .demo 或者 #two tab 键就可以了
- 如果生成的div 类名或 id 名是有顺序的， 可以用 自增符号 $ 。