这周学习开始接触CSS样式表了，能制作的网页也开始了各种高大上，各种属性与属性值也纷至沓来，编程的世界确实很精彩。
首先，咱们先来看看样式表的类型。主要分为3种：
【1.行内样式表】
（1）将CSS样式，与HTML代码完全糅杂在一起，不符合W3C关于“内容与表现分离”的基础规范，不利于后期维护。
（2）优先级最高，但是不推荐使用。
【2.内部样式表】
（1）一定程度的将CSS样式与HTML代码进行了分离，但是分离不够彻底，无法实现样式复用。
（2）优先级低于行内样式表。
<style type="text/css">
...
</style>
【3.外部样式表】
（1）实现了CSS样式与代码的彻底分离，方便样式复用与后期维护，符合W3C规范;
（2） 优先级要求低于内部样式表。
（3）后续开发，土建使用此种方式。
rel ：声明被链接文档与当前文档的光系关系，必选。
type：被链接文档的类型，可选。
href：被链接文档的地址，必选。
<link rel="stylesheet" type="text/css" href="css/CSS02.css"
或者：
<style type="text/css">
@import url("css/test.css");
</style>
【两种导入方式的区别】
（1）link标签是标准的HTML标签，而import不是；
（2）link可以链接各种形式的文件，而import只能导入CSS；
（3）link使用的是链接的方式，相当于在HTML与CSS文件中的桥梁，
import使用的是导入的方式，会在文档加载时，将CSS文件的代码导入到HTML文档中；
（4）link在网页边加载的时候，变链接CSS文件，而import会在HTML文档完全加载完后，在导入CSS文件；
看完了CSS样式表的类型和导入方式，咱们来看看如何使用各个选择器，和选择器的样式：
/*【选择器的命名规则】
*1.只能有字母，数字，下划线组成，不能由其他字符组成。
* 2.开头不能是数字
* */
/*【标签选择器】
* 1.写法：HTML标签名{样式属性：样式属性值；……}
* 2.作用：选中页面中所有的对应标签。
*/
/*【通用选择器】
* 1.写法：*{}
* 2.作用：选择页面中的所有标签。
* 3.优先级：最低。
*/
*{
font-size: 20px;
background-color: #cccccc;
}
/*【后代选择器】
* 1.写法：选择器1 选择器2 选择器3……{}
* 例如：div .li{}需满足div里面的class="li"的元素可以是div的子代，也可以是div的后代（孙代往后）
* 【子代选择器】
* 1.写法：选择器1>选择器2>选择器3……{}
* 例如：div>ul{}则，ul必须是div的直接子代，孙带以后选不中。
*/
div .li{
font-size: 50px;
}
div>ul>#li{
font-size: 60px;
}
/*【类选择器class选择器】
* 1.写法：.选择器名称{}
* 调用：在需要改变样式的标签上，使用class="选择器名称"调用对应选择器
* 2.作用：修改所有调用选择器的标签。
* 3.优先级：高于标签选择器。
*/
/*【ID选择器】
*1.写法：#选择器名称{}
* 调用：在需要改变样式的标签上，使用id="选择器名称*调用对应选择器
*注意事项：ID是唯一的，同一页面，只能有一个ID。
*/
/*【交集选择器】
* 1.写法：选择器1选择器2……{}
* 例如：.li#li{}元素必须同时具备class="li"并且id="li"才能生效
*/
/*【并级选择器】
* 1.写法：选择器1，选择器2……{}
* 例如：.li,#li{}元素只要具备class="li"或者id="li"，即可生效
*/
/*【选择器的优先级】
* 1.第一原则：“近者优先”，最内层选择器永远大于外层
* 例如：div ul li >div #ul ,li在ul内层，所以li标签选择器，能覆盖外层ID选择器
* 2.当作用在同一层时，ID选择器>class选择器>标签选择器
* 例如：div #li > div .li > div li 只要最后一个选择器都作用于li上，哪无论之前
* 有多少层选择器嵌套，均没有远近关系。
* 3.当作用于同一层且最后一层为同等选择器（均为class或id或标签）
* 例如：div ul .li > div .li作用范围选的更精准，则优先级更高。
* 4.当优先级完全相同时，写在后面的选择器会覆盖前面的选择器。
*/
选择器说完了，咱们来说说CSS样式中的属性及其运用：
【颜色单位】
1.直接写颜色的英文名字：red,green,blue；
2.十六进制写法：#FFFFFF白色，或者#FFF，分别对应红绿蓝的比例；（最常用）
3.RGB写法：RGB(0~255,0~255,0~255)
RGBA（0~255,0~255,0~255，0~1）第四位数表示透明度，0全透明1不透明；
【常用的文本属性】
1、字体、字号：
font-weight:字体的粗细，可选属性值：bold加粗lighter细体 100~900数值（400正常，700=bold）
font-size:字体大小**px **%（浏览器默认字体大小的百分比，绝大部分默认16px）
font-family：字体族，设置字体
>>>多个字体样式之间用逗号分隔，浏览器解析时，会从左往右依次解析，选择可用字体。
>>>一般前面使用具体字体名称，最后一个使用字体族类名称。
（常用字体族名称：衬线体serif 非衬线体sans-serif（常用）等宽字体Monospace）
>>>例如：font-family：Arial,‘Micrsoft Yahei‘,sans-serif
font-style:正常 (normal)斜体（italic）
font-variant：small-caps;将字母转为小号大写字母
(了解)font缩写形式：font-style font-variant font-weight font-size line-height font-famiy
>>>使用注意事项：
1.顺序必须严格按照上述顺序；
2.多个样式之间用空格分割，而且font-size/line-hight必须作为一对用/分割
3.font-size和font-family必须指定，其他样式不指定将采用默认样式显示；
>>>例如：font：italic bold 75%/1.8 ‘Microsoft Yahei‘，sans-serif;
斜体 加粗 字号/行号 字体族（微软雅黑，非衬线字体族）
2、字体颜色：
color：字体颜色。
opacity ：透明度，0~1之间的数字。调整时控件以及子空间均会透明，而使用RGBA调整时，
只会使本控件透明，子控件不会发生透明度变化。
3、行距、对齐等：
line-height ：行高，
1.像素单位，如48px
2.不带px正常行高的倍数
2.百分数，同2.
>>>典型应用，调整控件中文字垂直居中的方式：控件的height=控件的line-height
text-align ：块级元素中文字的水平对齐方式left center right
letter-spacing :字符间距,字与字之间的间距。
text-decoration ：文本修饰 ，下划线underline，删除线line-through，上划线overline。
overflow：控制超出范围文本的显示方式（auto根据文字多少自动显示滚动条，scoll始终显示滚动条，hidden 超出范围文本隐藏）可以通过overflow-x和overflow-y分别设置水平垂直方向。
text-overflow：设置多余文字的显示方式clip裁剪，ellipse省略号
【重点】让每行多余文字显示省略号：
1.white-space: nowrap;
2.overflow：hidden；
3.text-overflow：ellipse；
text-shadow：文本阴影，四个属性值：
1.水平阴影距离：必选，数值越大，阴影右移；
2.垂直阴影距离：必选，数值越大，阴影下移；
3.阴影模糊距离：可选，数值越大，阴影越模糊，默认为0，不模糊；
4.阴影颜色：可选，默认黑色。
text-indent：首行缩进，可用像素值调整缩进距离。
text-stroke:-webkit-text-stroke: 0.5px red;描边的粗细，描边的颜色。
white-space: nowrap;中文行末不断行显示
word-break: 设置英文行末断行：浏览器默认在空格出断行，当一个单词长度超出范围时，break-all允许在单词内断行
【CSS常用背景属性】
background 缩写形式
background-color背景色
background-image背景图 background-image: url(图片地址相对路径);背景图和背景色同时存在时
背景图会覆盖背景色。
background-repeat背景图重复方式 :no-repeat不平铺，repeat平铺（默认），repeat-x水平平铺，
repeat-y垂直平铺
background-size背景图大小：两个属性：宽高，高度
>>>宽高的写法：第一个属性值为宽度，第二个属性值为高度；
（1）直接写像素（2）写百分比（父容器宽高的百分比）
>>>当只用一个属性值时，默认为宽高等比缩放。
>>>当有两个属性值时，会按照指定的高度宽度进行压缩/拉伸显示。
【其他属性值】
>>>contain：图片等比缩放，缩放到宽或高的某一边等于父容器的 宽高，另一边按照图片大小缩放（可能空余部分区域无法覆盖）
>>>cover:图片等比缩放，使背景图像完全覆盖背景区域。（
可能导致背景图部分区域无法显示）
background-position位置坐标、偏移量
>>>指定位置：left/center/right top/center/bottom
当只写一个属性值得时候，另一个默认居中。
>>>填写坐标：水平位置 垂直位置（像素或百分比形式）
（1）当只写一个属性值时，默认写的为水平方向，则垂直居中
(2) 当使用像素时：图片的左上角往各个方向移动的实际距离
水平方向：正数右移，负数左移；垂直方向：正数下移，负数上移
（左负右正，上负下正）
（3）当使用百分数时，只能用正数。代表去掉图片后剩余距离的空白比比例。
例如：background-position：30%；水平方向去掉图片后，剩余区域3：7.
background-clip：裁剪背景图和背景颜色显示区域。不改变定位位置，只是通过裁剪显示部分区域。
border-box：从边框外缘开始显示，
padding-box:从边框内缘开始显示，
content-box:从文字内容区开始。
不在显示区域内的背景图或背景色，会被裁剪不显示。
background-origin：设置背景图的定位方式。不改变背景图显示区域的大小，只决定左上角定位位置。
border-box：从边框外缘开始，
padding-box:从边框内缘开始，
content-box:从文字内容区开始。
【常见列表属性】
none:无风格。
disc：实心圆（ul默认类型）
circle：空心圆。
square：实心正方形。
decimal：数字（ol默认类型）。
【margin（外边距）】
* 1.写一个值：上下左右四个方向均为指定数值；
* 2.写两个数值：第一个数=上下margin，第二个数=左右margin
* 3.写三个数值：上，右，下，左边默认等于右边。
* 4.写四个数值：上，右，下，左 四个方向。
* 5.margin: 0 auto;块级盒子在父容器中水平居中。
* 【border（边框）】
* 1.三个属性值：宽度，样式，颜色，原则上不能少，顺序可随意安排。
* 2.可以通过top，right，left分别修改4个方向。
* 【padding（内边距）】
* 1.padding为内边距，会使盒模型的可视区域变大，使用时需注意盒模型实际显示的区域大小。
* 2.其他使用同margin。
* 【border-radius 圆角】
* 1.可以接受8个属性值：X轴（左上，右上，右下，左下）/Y轴
* 例如：border-radius：50px 0px 50px 50px /50px 0px 50px 50px
* 2.只写X轴时，Y轴默认等于X轴。只写左上角，默认=右下角。只写右上角默认=左下角。
* 例如：border-radius：50px 0px;
* =border-radius:50px 0px 50px 0px;
【border-image】图片边框
* 1.十个属性：
* （1）图片路径：url()
* （2）图片切片宽度：4个值，分别代表上，右，下，左，四条切线。通过四条切线
* 切割后，会把图片分成九宫格，四个角分别对应边框的四角（不会进行任何拉伸）
* ，四个边分别对应边框的四边（根据设置进行拉伸/平铺/铺满）。
* 写的时候，不能带px单位。
* （3）图片边框的宽度：4个值，分别代表上，右，下，左四条边框，
* 写的时候必须带PX单位。
* （4）边框背景重复方式：stretch（拉伸），round（铺满），repeat（平铺）
* 【铺满和平铺的区别】
* 平铺：会保持原有四条边的宽度，进行平铺。可能导致角落处无法显示完整一个图标；
* 铺满：会对四条边进行适当的拉伸收缩，确保可以正好完全显示。
* 2.属性值的写法：border-image：（1）（2）/（3）px （4）；
* （3）可以省略，默认宽度等于（2）.
* （2）可以只写一个值/两个值/三个值，判断方式同margin
【盒子模型】
欲知后事如何，且听下回分解~~~~
H5基础标签浅谈（二）
