2.CSS
2.1CSS概念
CSS是一组样式设置的规则，称为层叠样式表，用于控制页面的外观样式。
使用CSS能够对网页中元素位置的排版进行像素控制，实现美化页面的效果，也能够做到页面的样式和结构分离。
2.2基本语法
通常都是：在head标签里头添加一个style样式标签，样式标签里添加要修改的样式
<head>
<title>标题</title>
<style>
选择器{
属性名：属性值;
属性名：属性值;
……
}
</style>
</head>
注：不同的选择器写法不一样；这种写法是内部样式的写法，对于样式较少的代码适合用内部样式。
2.3引入方式
- 内部样式表
- 行内样式表
行内样式的写法比内部样式优先级更高！
- 外部样式表
将CSS与Html分开来，创建一个css后缀的文件，将内部样式的style标签里的内容写法一样，再将html后缀的文件与css后缀的文件链接起来。
<link rel="stylesheet" href="xxx.css">
2.4CSS基本用法
1.选择器的种类
基础选择器
1）标签选择器：只要出现了该标签的位置都被修改了样式。使用时只需要加上标签即可，如下图的p标签（第一个）；
2）类选择器：使同一个标签出现不同的样式。给每个标签定义一个class，对应的内容在使用时需要加上一个点（.），如下图：
3）id选择器：每个id对应的值只能出现一次，所以往后设计id 时最好唯一。使用id对应的css需要加上一个井号（#），如下图：
4）通配符选择器：在实际开发中针对页面种所有元素默认样式进行消除，只要用来消除边距。使用时一个（*+空格）就会选取所有标签，如下图：
复合选择器
1）后代选择器：选择某个父元素中的某个子元素（子元素只要是父元素的后辈都可以）
元素1 元素2 {样式声明}
1）元素1和元素2要使用空格分割
2）元素1是父级，元素2是子集，只影响元素2
2）子选择器：父元素下只能选择子标签，改变的样式是子标签
元素1>元素2 { 样式声明 }
1）使用大于号分割
2）只选亲儿子, 不选孙子元素
3） 并集选择器：多个选择器同时实现同一样式
元素1, 元素2 { 样式声明 }
1）通过逗号分割等多个元素.
2）表示同时选中元素1和元素 2.
3）任何基础选择器都可以使用并集选择器. 
4）伪类选择器：将一个超链接设置颜色，默认情况下、鼠标悬停该链接是、鼠标点击该链接时
a { 样式声明 }//默认情况下超链接的样式
a:hover { 样式声明 }//当鼠标悬停在超链接时的样式
a:action { 样式声明 }//当鼠标点击该链接字时的样式
2.常用元素属性
字体属性
1）字体 font-famliy：'宋体'等；
2）大小 font-size：20px；
3）字体粗细 font-weight：
4）字体倾斜 font-style：
文本属性
1）颜色 color：有以下三种方法表示颜色
- color：red；
- color：#ff0000；//第一个ff代表红的，第二个ff代表绿色，第三个ff代表蓝色
- color：rgb(255,0,0)；同第二种相同，只是将ff转成十进制255
2）对齐方式 text-align： left、center、right（左、中、右）
3）首段缩进 text-indent：2em（缩进两个元素）、20px（缩进20个像素）
4）文本装饰 text-decoration：以下是常用取值
- underline 下划线
- none 什么都没有，可以用来去除超链接的下划线
- overline 上划线
- line-through 删除线
5）行高 line-height： 行高=上边距+字体大小+下边距
背景属性
1）背景颜色 background-color：在该选择器下的背景样式。如果要整个页面都设置那就在body或者*中设置样式。
2）背景图片 backgound-image：url（//添加图片链接）
3）平铺方式 background-repeat：平铺就是在该范围内放一张图片后，还有剩余空间往后继续添加图片直至铺满。以下是常用取值
- repeat 平铺（默认）
- no-repeat 不平铺
- repeat-x 水平平铺
- repeat-y 竖直平铺
4）背景位置 background-position：将背景图片设置位置（都是以左上角为原点），以下是参数取值
- 方位名词：top、left、right、bottom
- 精确单位：坐标或者百分比
- 混合单位：同时包含方位名词和精确单位（比如水平居中，竖直在20px）
5）背景图片大小background-size：背景图片大小。参数取值如下
- cover：将背景尽可能地放大到最大
- contain：将背景图片尽可能地最大完整地显现出来
圆角矩形
圆角矩形 border-radius：设置四个角地内切圆半径，以下是一些特殊圆角矩形（前提是需要设置一个矩形，可以通过设置width，height 和 边框border（border:2px green solid））
- 生成圆形：矩形为正方形的基础上，border-radius的取值是正方形边长的一半
- 生成圆角矩形：border-radius是矩形height的一半
- 对四个角设置不同的圆弧：border-top-left-radius(顶左)、border-top-right-radius(顶右)、border-bottom-left-radius(底左)、border-bottom-right-radius(底右)
3.元素的显示模式
1）常见的显示模式
- 行内元素：不独占一行的标签（像：a、b、span等）
- 块级元素：独占一行的标签（像：div、h1~h6、p等）
2）改变显示模式 display：修改元素的显示模式。以下是参数取值
- block：改成块级元素
- inline：改成行内元素（不常用）
- inline-block：改成行内块级元素
4.盒模型
1）边框 border：边框属性如下
- border-width：边框粗细
- border-style：默认没边框，1.solid 实线边框；2.dashed 虚线边框；3.dotted 点线边框
- border-color：边框颜色
- border-top / bottom / left / right：可以改变四个方向的边框。
注：如果我们呢设置一个200*100的矩形，那么边框的粗细会影响实际矩形的大小，为了不影响设置的矩形还是200*100，那么就要使用box-sizing：border-box（这样可以将边框粗细包含在内）
2）内边距 padding： 有下面五种方式表示内边距
- padding：5px；四个方向都是5px
- padding：5px 10px；上下是5px，左右时10px
- padding：5px 10px 20px；上是5px，左右是10px，下是20px
- padding：5px 10px 20px 30px；上5，右10，下20，左30（按照顺时针顺序）
- padding--top / bottom / left / right：可以设置四个方向的内边距
注： 内边距也会占用空间，同上边的边框原理相同
3） 外边距 margin ：同内边距的五种方式相同
- 取值为auto可以将矩形居中但是字体不居中（字体居中用text-align：center）
5.弹性布局（需要设置在父元素中）
正常情况下设置一个如下图会出现的情况
1）flex属性：主盒子中包含副盒子，如果要在主盒子中设置一个副盒子的长和宽，是没有变化的。如果想要设置副盒子的大小就要添加display：flex，添加之后副盒子才可以设置成想要的长和宽，再加上justify-content：space-around可以让每个副盒子之间的间隙相等，并且使每一个副盒子的前后都有间隙，如果想要修改竖直方向的排列方式可以修改align-items。效果如下：
2）justify-content： 设置水平上的子元素排列方式。常见参数取值：
- start（flex-start）：默认值，位于容器的开头
- end（flex-end）：位于容器的结尾
- center：位于容器的中央
- space-between：项目在行与行之间留右间隙
- space-around：项目在行之前，行之间和行之后留有空间
3）align-items：设置竖直上的元素排列方式。常见参数取值
- stretch：默认值，行拉伸以占据剩余空间
- center：朝着弹性容器的中央对行打包
- start：朝着弹性容器的开头对行打包
- end：朝着弹性容器的结尾对行打包
- space-between：行均匀分布在弹性容器中
- space-around：行均匀分布在弹性容器中，两端各占一半
align-items只能针对单行元素来实现，如果有多行元素，就需要使用item-contents；
