CSS初识
CSS:cascading style sheets，css样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。
CSS以HTML为基础，提供丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还针对不同的浏览器设置不同的样式。
引入CSS样式（书写位置）
内部样式表
内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并用style标签定义，语法就是在
行内式（内联样式）
内联样式，又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式，其基本语法格式如下：
外部样式表（外链式）
链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中，其基本语法格式如下：
Link是单标签，且必须指定link标签的三个属性：href、type、rel。
Href定义所链接外部样式表文件的URL，可以是相对路径 ，也可以是绝对路径。
Type:定义所链接文档的类型，在这里需要指定为：type/css，表示链接的外部文件。
Rel:定义当前文档与被链接文档之间的关系，在这里需要指定为：stylesheet,表示被链接的文档是一个样式表文件。
CSS样式规则
在上面的样式规则中：
- 选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。
- 属性和属性值以“键值对”的形式出现
- 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
- 属性和属性值之间用英文“：”连接
- 多个“键值对”之间用英文“；”进行区分
选择器（重点）
CSS基础选择器
每一条CSS样式声明（定义）由两部分组成，如下：
标签选择器（元素选择器）
标签选择器就是html标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基础语法格式如下：
Class(类)选择器
类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：
类选择器最大的优势是可以为元素对象定义单独或相同的样式。
多类名选择器
样式显示效果跟HTML元素中的类名先后顺序没有关系，受css样式书写的上下顺序有关。
且各个类名中间用空格隔开。
ID选择器
类和ID选择器的区别
相同点：可以应用于任何元素
不同点：
ID选择器只能在文档中使用一次。而类选择器可以使用多次：
可以使用类选择器词列表方法为一个元素同时设置多个样式。
我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）：
通配符选择器
复合选择器
复合选择器是由2个或多个基础选择器，通过不同的方式组合而成的，目的是可以选择更准确更精细的目标元素标签。
交集选择器
标签连写 div.one div#two
交集选择器由2个选择器构成，第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格。
并集选择器
用逗号隔开，集体声明，相同样式。
后代选择器
用空格隔开，选取子孙后代的。
后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就称为外层标签的后代。
包含选择器，即加入空格,用于选择指定标签元素下的后辈元素。
选择器与子选择器的区别，子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。
总结：>作用于元素的第一代后代，空格作用于元素的所有后代。
子元素选择器
用>隔开，选取亲儿子
还有一个比较有用的选择器子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。
Class=food下的子元素li加入红色实线边框
伪类选择器
伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果，比如可以选择第一个，第n个元素。
链接伪类选择器：标签选择器:link ?/*未访问的链接*/标签选择器:visited ：/*已访问的链接*/标签选择器:hover /*鼠标移动到链接上*/标签选择器:active /*选定的链接*/
注意写的时候，顺序不要写反了，按照lv ha顺序进行编写。
属性选择器
紧邻兄弟选择器
分组选择符
当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，）
CSS字体样式属性
font-size:字号大小
相对长度单位 | 说明 |
em | 相对于当前对象内文本的字体尺寸 |
px | 像素、最常用，推荐使用 |
绝对长度单位 | 说明 |
in | 英寸 |
cm | 厘米 |
mm | 毫米 |
pt | 点 |
font-family:字体设置
font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等。
- 现在网页中普遍使用14px+
- 尽量使用偶数的数字字号。
- 各种字体之间必须使用英文状态下的逗号隔开
- 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体必须位于中文字体之前。
- 如果字体名称中包含空格、#、$等符号，则该字体必须加英状态下的单引号或双引号，例如：font-family、”times new roman”
- 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。
CSS Unicode字体
黑体 | 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 |
font-weight:字体粗细
字体加粗除了用b和strong标签之外，可以使用CSS来实现。
Font-weight属性用于定义字体的粗细，其可用属性值：normal、bold、bolder、lighter、100~900(100的整数倍)
数字400 等于 normal
数字700 等于 bold
font-weight:400 ?/*400 = normal*字体粗细/font-weight:700 ?/*700 = bold*/
font-style：字体风格
字体倾斜除了用i 和 em标签之外，可以使用CSS来实现，但是CSS是没有定义的。
font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：
normal:默认值，浏览器会显示标准的字体样式
Italic:浏览器会显示斜体的字体样式
Oblique:浏览器会显示倾斜的字体样式
font：综合设置字体样式（重点）
font属性用于对字体样式进行综合设置，其基本语法格式如下：
Font属性必须按如上格式进行顺序书写，不能更换顺序，各个属性以空格隔开。可以取默认值，但是font-size font-family属性，必须保留。
CSS外观属性
color:文本颜色
Color属性用于定义文本的颜色，其取值方式有如下3种：
- 预定义的颜色值，如red,green,blue等
- 十六进制，如#FF0000
- RGB代码，如红色可以表示rgb（255,0,0）
line-height:行间距
Line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。Line-height常用的属性主要有3种，像素px,相对值em和百分比%，最常用的是px，一般情况下，行距比字号大7.8个像素左右就可以了。
text-align:水平对齐方式
Text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性，其可用属性值如下：
Left:左对齐
right：右对齐
Center：居中对齐
是让盒子里面的内容水平居中，而不是让盒子居中对齐
text-indent:首行缩进
Text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数，或相对于浏览器窗口宽度的百分比%，允许使用负值，建议使用em作为设置单位。
1em就是一个字的宽度，如果是汉字的段落，1em就是一个汉字的宽度。
text-decoration:文本的装饰
Text-decoration:通常我们用于给链接修改装饰效果。
值 | 描述 |
none | 默认，定义标准的文本，取消删除线 |
underline | 定义文本下的一条线，下划线也是我们链接自带的，下划线 |
overline | 默认文本上的一条线，上划线 |
line-though | 定义穿过文本下的一条线,删除线 |
开发者工具（chrome）
1、左边是HTML元素结构，右边是CSS样式。CSS+滚轮可以放大开发者工具代码大小。
标签显示模式(display)
HTML标签一般分为块标签和行内标签两种类型，也称为块元素和行内元素。
块级元素(block-level)
每个块元素通常独自占一整行或多整行，可以对其设置宽度、高度、对其等属性，常用语网页布局和网页结构的搭建。
块级元素的特点：
- 总是从新行开始
- 高度，行高、外边距以及内边距都可以控制
- 宽度默认是容器的100%
- 可以容纳内联元素和其他块元素
行内元素(inline-level)
行内元素（内联元素）不占有独立的区域，靠自身字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用语控制页面中文本的样式。
行内元素特点：
- 和相邻行内元素在一行
- 高、宽无效，但水平方向的padding和margin可以设置，垂直方向无效
- 默认宽度就是它本身内容的宽度
- 行内元素只能容纳文本或则其他行内元素。
行内块元素(inline-block)
在行内元素中有几个特殊的标签：<img /> <input> <td>，可以对它们设置宽高和对齐属性。
行内块元素特点：
- 和相邻行内元素（行内块）在一行上，但是之间会有空白缝隙
- 默认宽度就是它本身内容的宽度
- 高度，行高、外边距以及内边距都可以控制
标签显示模式转换display
块转行内：display:inline;行内转块：display：block;块、行内元素转换为行内块：display:inline-block;
行高的测量
行高利用最多的一个地方是：可以让一行文本在盒子中垂直居中对齐
做法就是：文字的行高等于盒子的高度
CSS三大特性
CSS层叠性
所谓的层叠性是指多种CSS样式的叠加。
是浏览器处理冲突的一个能力，如果一个属性通过两个相同选择器设置到同一个元素上，那么这个属性就会将另一个属性层叠掉。
一般出现冲突后，会按照CSS书写的顺序，以最后的样式为准
1、样式冲突，就近原则，哪个样式离结构近，就执行那个样式
2、样式不冲突，不会层叠
CSS继承性
子标签会继承父标签的某些样式，如文本颜色和字号。
子元素可以继承父元素的text- font- line- color等
CSS优先级
继承或者*的贡献值 | 0，0,0，0 |
每个元素（标签）贡献值为 | 0，0，0，1 |
每个类，伪类贡献值为 . class ： | 0，0，1，0 |
每个ID贡献值为 # id | 0，1，0，0 |
每个行内样式贡献值 | 1，0，0，0 |
每个!important贡献值 重要的 | ∞ |
权重如下：
CSS背景
CSS可以添加背景颜色和背景图片，以及来进行图片设置。
background-color | 背景颜色 |
background-image | 背景图片地址 |
background-repeat | 是否平铺 |
background-position | 背景位置 |
background-attachment | 背景固定还是滚动 |
背景的合写（复合属性） | |
background：背景颜色、背景图片地址、背景平铺、背景滚动、背景位置 |
背景平铺：background-repeat
background-repeat：repeat | no-repeat| repeat-x| repeat-y|repeat: ??背景图像在纵向和横向上平铺no-repeat: 背景图像不平铺repeat-x: ?背景图像在横向上平铺repeat-y: ?背景图像在纵向平铺
背景图片地址：backgroun-image
背景位置:backgroud-position
backgroud-position:length | position
- position后面可以跟方位名词，他们之间可以没有上下顺序
- Position如果只写一个方位名词，另外一个默认是居中的
- Position 后面也可以跟 值px 但是 必须有顺序 x 在前面， y后面 不能颠倒
background-position:left; top 上 bottom 下 left 左 right 右 background-position:bottom; ??top 上 bottom 下 left 左 right 右 background-position:12px 50px; background-position:50px 12px;
背景附着:background-attachment
background-attachment：scroll | fixedscroll:背景图像是随对象内容滚动Fixed:背景图像固定
说明：设置或检索背景图像是随对象内容滚动还是固定的。
背景简写:background
background属性的值的书写顺序官方并没有强制标准的。
background：背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
背景透明:background：rgba
background：rgba(0,0,0,0.3)
最后一个参数是alpha透明度，取值0-3之间
注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响。
盒子模型（CSS重点）
CSS就3个大模块：盒子模型、浮动、定位，其余都是细节。
所谓盒子模型就是把HTML页面中的元素看做是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框(border)、外边距(margin)组成。
看透网页布局的本质
本质：把网页元素比如文字图片等等，放入盒子里面，然后利用CSS摆放盒子的过程，就是网页布局。
盒子模型（Box Model）
盒子边框（border）
边框就是那层皮。
语法如下：
Border:border-width || border-style || border-color
边框属性-设置边框样式（border-style）
边框样式用于定义页面中边框的风格，常用属性值如下：
None：没有边框即忽略所有边框的宽度（默认值）
Solid:边框为单实线（最常用）
Dashed:边框为虚线
Dotted:边框为点线
Double：边框为双实线
掌握如下： ???????/*border: 1px solid blue;*/ ???????border-top: 1px solid red; /*上边框*/ ???????border-bottom: 2px solid green;/*下边框*/ ???????border-left: 1px solid blue;/*左边框*/ ???????border-right: 5px solid pink; /*右边框*/
盒子边框写法总结表
边框 宽度、边框 颜色设置 、边框 综合设置（按顺时针进行展示：上 右 下 左）
???????/*border-width: 1px; ???????border-color: red;*/ ???????/*border-style: solid; 实线*/ ???????/*border-style: dashed; 虚线 大使的 */ ???????/*border-style: dotted; 点线 大使的 */ ???????/*border: 1px solid blue;*/ ???????border-top: 1px solid red; /*上边框*/ ???????border-bottom: 2px solid green; ???????border-left: 1px solid blue; ???????border-right: 5px solid pink; ???????border: 1px solid blue;
表格的细线边框
Table {border-collapse:collapse;}collapse单词是合并的意思，表示相邻边框合并在一起。
园角边框（CSS3）
radius半径（距离），语法格式：
border-radius: 50%
内边距(padding)
padding属性用于设置内边距，是指边框与内容之间的距离。
上下 10 左右 20*/ ???????/*padding: 10px 20px 30px; 上 10 左右 20 下 是 30 */ ???????padding: 10px 20px 30px 40px; /* 上 10 右20 下 30 左 40*/