l  什么是CSS？

CSS 指层叠样式表 (Cascading Style Sheets)。

主要用来控制HTML文档显示时的样式，比如颜色、字体、位置、间距等。

l  CSS的语法

CSS都是由一个一个的规则组成的，格式：

选择器{

属性1:值1;

属性2:值2;

.....

}

l  应用CSS到HTML页面

在一个HTML页面中使用CSS设置样式有三种方式：

方式一、内联样式：直接把css的规则写到HTML的标签上的style属性中

扩展：好的准确：HTML的结构尽量简洁。所以我们一般不会使用这种方式来应用CSS，因为CSS写多了标签会特别的混乱。

方式二、内部样式表：可以在页面的head标签中添加一个<style>标签然后把CSS规则写在里面

选择器：选择页面中需要设置样式的标签，然后在{}里面为选择出来的这个标签设置样式：

选择器{

属性1:值1;

属性2:值2;

.....

}

方式三、外部样式表：我们可以单独创建一个.css文件然后把css的规则写进去，然后在html页面中使用link标签引入这个css文件

1. 创建单独的css文件保存css的代码

2. 在html页面中的head标签中使用link引入CSS

l  颜色

十六进制整数表示

颜色是由r【red】g【green】b【blue】三源色组成的。在CSS中是使用6位十六进制【0~9,A,B,C,D,EF】的整数组成的，前两位代表红色，中间两位代表绿色，最后两位代表蓝色。以下是几个常见的蓝色：

#000000 ：黑色

#FFFFFF：白色

#FF0000：红色

#00FF00：绿色

#0000FF：蓝色

如果颜色的数字两两相等，那么可以简写，比如以上颜色可以简写为：？

#000 ： 黑色

#FFF ： 白色

#F00 ： 红色

#0F0 ： 绿色

#00F ： 蓝色

rgba表示

也可以使用rgba的方式显示数据，前三个还是红、绿、蓝，最后一个a代表透明度。

可以在谷歌浏览器中选择颜色

l  尺寸单位

px：像素

%：百分比【相对于上级元素】

em：字体大小的倍数

cm：厘米

l  注释

注释：给程序员看的，是不会运行的代码

格式：/* 注释的内容 */

l  选择所有标签

*：选择页面中所有的标签。

应用场景：为页面中所有标签设置一个通用的样式，比如设置字体、外边距、内边距等等。

浏览器在显示一个页面时有默认的样式，这些样式我们可能需要去掉。比如：很多标签默认就有内、外边距。

l  class选择器

扩展：一个标签上可以同时设置多个class的值，多个用空格隔开：

l  id选择器

为页面中某一个标签设置样式时使用id【id的值在页面中不能重复】：

使用场景：在一个页面某个标签特别特殊，和别的标签都不一样时使用。

l  包含选择器

可以使用空格选择一个标签里面的子孙标签：

l  选择器组

可以使用,把之前所有学过的标签放到一起统设置样式：

l  选择器的优先级

1. 内联 > id选择符 > class选择符 > 标签选择符’

内联>id

id>class

class>标签

2. 越准确的选择器优先级越高

当选择器相同时，越准确优化级越高

l  如何选择使用哪种选择器

使用选择器的原则：1. 尽量准确  2. 尽量简洁

建议：

1. 多使用class选择器【页面中每个地方的样式是类似的，所以用class可以一次设置多个样式相同的标签】

2. li、td、dd等这种会连续出现的标签，使用类选择器+包含选择器设置样式，如：.xx li。

3. 极少数情况下使用id选择器

比如下面这种结构应该使用第二种：

第一种：

第二种：更好的做法：

小技巧：当要修改页面中多个相同的东西时可以使用Ctrl+h查找并替换。

背景

l  背景色

属性：background-color

l  背景图

说明：图片和页面放到一起。

属性：

background-image：url(图片路径); 背景图片

background-repeat：背景图片重复：no-repeat【不重复】 | repeat-x【横向重复】 | repeat-y【纵向重复】

background-size：背景图片尺寸：cover【把父级元素铺满，哪怕截取图片一部分】 | contain【要显示完整的图片，

恐怕撑不满父级元素】

background-position：背景图位置

background-position:  left|right   top|bottom;   左右、上下

background-position:    xxpx     xxpx   ;    距离左边、距离上边，单位：像素

background-position:    xx%     xx%   ;    左右、上下的距离，百分离

background-position:    center           ;   居中

简写

可以把以上背景的设置写到一行中：

语法：background: 背景色 背景图 重复 位置;

文本

l  颜色

属性：color：字体的颜色

l  字体

属性：font-family

说明：不同的电脑上拥有的字体不一样，所以一般我们用一些比较通用的字体，我们也可以同时设置多个字体，用户电脑上有哪个字体就使用哪个字体:

l  尺寸

属性：font-size：字段的大小，一般用像素做为单位。

l  粗细

属性：font-weight：normal【普通】|bold【加粗】;

l  行高

属性：line-height

行和行之间的距离。

小技巧：如果height=line-height：垂直居中：不过只适用于一行的情况：

当有多行时就不行了：

解决办法：方法很多，可以使用这个：以table-cell的方式显示并设置垂直居中

l  修饰

属性：text-decoration: none|underline|overline|line-through;

简写

语法：font:  粗细  尺寸/行高  字体;

l  对齐

水平对齐

属性：text-align: left|center|right;

小技巧：如何让一个DIV整个居中使用：margin：

列表

l  样式

属性：list-style-type:

l  列表图标位置

属性：list-style-position：inside|outside;

l  列表图片

属性：list-style-image

盒模型

l  什么是盒模型？

每个标签都像一个盒子一样由：宽、高、内边距、边框、外边距组成。

l  边框

属性：

border-width：宽

border-style：样式：none【无】|solid【实心】|dotted【虚线】|dashed|double|inset|outset|groove|ridge

border-color：颜色

说明：每个属性都可以为四个边框【top、bottom、left、right】设置不同的值，比如宽：

border-top-width：上边框宽

border-top-color：上边框颜色

border-top-style：样式

边框简写

border: 宽 样式 颜色;

小技巧：transparent：透明。

l  内边距

内边距：内容和边框的距离。

属性：

padding-left：左内边距

padding-top：上内边距

padding-bottom：下内边距

padding-right：右内边距

内边距简写：

padding: 上      右    下     左;  -> padding: 10px  20px  30px  40px;

padding: 上   左右    下           -> padding: 10px 20px 30px;

padding：上下     左右;            -> padding: 10px 20px;

padding: 上下左右;                  -> padding: 10px;

l  外边距

属性：

margin-left：左外边距

margin-top：上外边距

margin-bottom：下外边距

margin-right：右外边距

外边距简写：

margin: 上      右    下     左;  -> margin: 10px  20px  30px  40px;

margin: 上   左右    下           -> margin: 10px 20px 30px;

margin：上下     左右;            -> margin: 10px 20px;

margin: 上下左右;                  -> margin: 10px;

小技巧：可以使用外边距来实现一个盒子的居中：

说明：上面的是让一个盒子整体居中，如果想让盒子里面的内容居中要使用text-align属性：

l  宽、高

属性：width【宽】、height【高】、min-width【最小宽度】、max-width【最大宽度】、min-height、max-height

行级元素：无法设置宽、高，内容决定宽、高。

块级元素：可以设置宽、高，不设置时宽100%，高由内容的高决定。

说明：1.如果使用height把高度定死，内容多了就出去了：

如果使用min-height：最小这么大，如果内容多的话还可以自动撑开：

内容少时也有最小高度：

内容多时就撑开

l  显示的宽、高计算方式

box-sizing：计算实际显示时的方式。

方式一、box-sizing: content-box：

这种方式我们平时必须非常小心的所有值计算好，理算错位置就不够大了！

实际显示的宽、高 = width + 2 * 边框宽 + 2 * 内边距【不定是我们设置的width】

方式二、box-sizing: border-box;

推荐使用这种。

实际显示的宽 = width

实际显示的高 = height

l  溢出

属性：overflow: hidden|scroll|auto;

当指定宽、高之后，如果内容非常多就撑出去了。可以使用overflow对出现的内容进行设置：

overflow:hidden;

overflow:scroll;

左、右都加滚动条，即使内容没有撑出去也有。

overflow:auto;

哪 个方向上面内容溢出了就在哪个方向上加滚动条，如果没有溢出就不加滚动条。

l  阴影

属性：box-shadow: 左右偏移量  上下偏移量   模糊程度   外扩范围   颜色   内外;

外阴影：

内阴影：

小技巧：使用阴影做出发光效果：

l  角弧度

属性：

border-radius: xxpx;  ：四个角弧度

border-radius: xxpx  xxpx;  左上右下   右上左下;

border-radius: xxpx  xxpx  xxpx;     左上   右上下左    右下;

border-radius: xxp   xxpx  xxpx  xxpx;   左上  右上   右下  左下;

一个参数：

二个参数：

三个参数：

四个参数：

显示

l  显示

属性：display: none|inline|inline-block|block

none：隐藏。

inline：以行级标签显示

block：以块级别元素显示

inline-block：行级块元素

特点：1. 在同一行  2. 可以设置width、height【一般的行级元素是不能设置宽、高的】

小技巧：如果把li设置为行级列表就横过来了：【除了这种之外 还可以使用浮动让列表横过来】。

定位

HTML中的元素都是至左至向，至上向下一个挨一个排放时，我们可以使用position来对元素精确的定位。定位分为四种：静态定位、绝对定位、相对定位、固定定位。

l  绝对定位

属性：position:absolute;

特点：

1. 脱离原文档流【飞起来了】

2. 原位置丢失，后面的元素会占用这个元素的位置

3. 可以使用left,top,right,和bottom设置相对于窗口中具体的位置

l  相对定位

属性：position:relative;

特点：

1. 脱离原文档流【飞起来了】

2. 原位置保留，其他元素不能占用这个元素的位置

3. 可以使用left,top,right,和bottom设置相对于元素原来所在的位置定位

l  固定定位

属性：position:fixed;

特点：

1. 脱离原文档流【飞起来了】

2. 原位置丢失，后面的元素被占用这个元素的位置

3. 可以使用left,top,right,和bottom设置相对于窗口定位

4. 滚动条滚动之后还在原位置：

实例：京东里面左右这两块，无论如何拉滚动条，这两位置都不动

l  静态定位

正常情况下的定位形式，无须单独设置。

属性：position:static;

l  绝对变相对

当一个元素设置成绝对定位时，如果这个元素祖先元素中有一个元素是绝对、相对或者固定定位的，那么这个元素就是相对于这个祖先元素定位。

例子：

z-index：定位的层级

当多个定位元素在同一个位置时可以使用z-index指定层级顺序：