H5取经之路——CSS基础语法

一、CSS常用选择器

【选择器的命名规则】
* 1、只能有字母数字下划线组成，不能有其他任何字符
* 2、开头不能是数字

【通用选择器】
* 1、写法：*{}
* 2、选中页面中的所有标签
* 3、优先级：低于所有选择器

*{
            background-color: gray;
        }

【标签选择器】

* 1、写法：HTML标签名{样式属性：样式属性值；...}
* 2、作用：选中页面中所有对应标签

li{
            color:red;
        }

【类选择器】

* 1、写法：.选择其名称{}
* 调用：在需要改变样式的标签上，使用class="选择器名称"调用对应选择器
* 2、作用：修改所有调用选择器的标签
* 3、优先级高于标签选择器

.li{
            color: blue;
        }

【ID选择器】

* 1、写法：#选择器名称
* 调用：在需要改变样式的标签上，使用id="选择器名称" 调用对应选择器
* 2、注意：ID是唯一的，同一页面，只能打开一个ID。
* 3、优先级：ID大于class选择器

#li{
             color: yellow;
         }

【后代选择器】

* 1、写法：选择器1 选择器2 选择器3......{}
* 例如：div .li{}需满足，div里面的class="li"的元素，class="li"元素可以是div的
* 子代和后代

div .ul{
             color: green;
         }

【子代选择器】

* 1、写法：选择器1>选择器2>选择器3......{}
* 例如：div>ul{} 则，ul必须是div的直接子代，孙代以后选不中

div>ul{
             color: green;
         }

【交集选择器】

* 1、写法：选择器1选择器2......{}
* 例如：.li#li{} 元素必须同时具备class="li"并且id="li"才能生效

.li#li{
              color: red;
          }

【并集选择器】

* 1、写法：选择器1，选择器2，......{}
* 例如：.li,#li{} 元素只要具备class="li" 或者 id="li"即能生效

.li,#li{
               color: brown;
           }

【伪类选择器】

* 1、写法：选择器名称：伪类状态{}
* 常见的伪类状态：link未访问状态，visited已访问状态
* hover鼠标指上时的状态，active激活选定状态（即鼠标点下去没松开）,focus获得焦点时（input常用）
* 2、超链接多种伪类共存时的顺序：link（visited）-hover-active

a:visited{
             color: green;
         }
         a:link{
             color: black;
         }

         a:hover{
             color: red;
         }

         a:active{
             color: yellow;
         }

        input:focus{
            color: orange;
        }

【选择器的优先级】 （了解）
* 1、近者优先，最内层选择器永远比外层优先，
* 例如div ul li >div #ul,li在ul内层，所以li标签选择器，能覆盖外层id选择器
* 2、当作用在同一层，ID > class > 标签选择器
* 例如：div #li > div .li >div li 只要最后一个选择器，都作用于li上，那么无论之前
* 有多少层选择器嵌套，均没有远近关系。
* 3、当作用于同一层，且最后一层选择器为同等选择器
* 例如：div ul .li >div .li 作用范围选的更精准，则优先级更高
* 4、当优先级完全相同时，写在后面的选择器会覆盖前面的选择器

 二、应用CSS的三种方式

【1、行内样式表】
①将CSS样式与HTML代码完全揉杂在一起，不符合W3C内容与表现分离的规范，不利于后期维护
②优先级最高，但是不推荐使用

【2、内部样式表】
①一定程度的将CSS样式与HTML代码进行了分离，但不够彻底，无法实现样式复用。
②优先级低于行内样式表

<style type="text/css"></style>

【3、外部样式表】

①实现了CSS与HTML代码的彻底分离。方便样式复用与后期维护，符合W3C规范
②优先级低于内部样式表
③后续开发，推荐使用此种方式

<link rel="stylesheet" type="text/css" href="../css/02_CSS.css" /

　　rel：声明被链接文档与当前文档的关系，必选
　　type：被连接文档的类型，可选
　　href：被连接文档的地址，必选

【4、扩展阅读】导入外部样式表的另一种方式

<style> @import url("global.css"); </style>

与link的区别

①link可以连接各种形式的文件，import只能导入CSS
②link标签是标准的HTML标签，而import不是
③link使用的是连接的方式，相当于在HTML与CSS文件中的桥梁，而import使用的是导入的方式
会在文档加载时，将CSS文件的代码导入到HTML文档中
④link在网页边加载的时候边链接CSS文件，而import会在文档完全加载完后，再导入CSS文件
综上，使用link

三、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,"微软雅黑",sans-serif;
font-style:字体样式,normal 正常， italic 斜体
*font-variant：small-caps;将字母转为小型大写字体

（了解）font缩写形式：font-style font-variant font-weight font-size/line-height font-family

>>>使用注意事项:

①顺序必须严格按照上述顺序
②多个样式之间用空格分隔，而且font-size/line-height必须作为一对，用/分隔
③font-size和font-family必须指定，其他若不指定则默认
>>> 例如：font:italic bold 75%/1.8 'Microsoft Yahei', sans-serif;
    　　　　  斜体 加粗 字号/行高        字体族(微软雅黑，非衬线字体族)
2、字体颜色：
color:字体颜色
opacity:透明度，0~1之间的数字。控件及子控件均会透明，而使用rgba调整时，只会使本控件透明，
子空间透明度不会发生变化。
3、行距、对齐等：
line-height：行高 ① 像素单位 48px ② 不带px 正常行高的倍数 ③百分数 同②
>>>典型应用，调整空间中文字垂直居中的方式：控件的height=空间的line-height
text-align：块级元素中文字的水平对齐方式 left center right
letter-spacing：字符间距，字与字之间的间距 像素单位 5px
text-decoration:文本修饰 下划线underline 删除线 line-through 上划线 overline

overflow:控制超出范围文本的显示方式(auto自动 scroll始终显示滚动条 hidden超出范围文本隐藏 overflow-x,overflow-y分别设置水平垂直方向)
text-overflow:设置文字超出范围的显示方式 text-overflow: ellipsis;省略号显示 clip 裁减掉
>>>【重点】让每行多余文字显示省略号，步骤如下：
①white-space: nowrap;如果是中文，需设置行末不断行
②text-overflow: ellipsis;设置多余文本省略号显示
③overflow: hidden;设置控件超出范围隐藏

text-shadow:文本阴影 四个属性值：
①水平阴影距离 必选，数值越大，阴影右移
②垂直阴影距离 必选，数值越大，阴影下移
③阴影模糊距离 可选，数值越大，阴影越模糊，默认为0，不模糊
④阴影颜色 可选，默认为黑色

text-indent：首行缩进，可用像素值调整缩进大小
white-space: nowrap; 中文行末不断行显示
word-break：设置英文行末断行，浏览器默认在空格处断行，当一个单词长度超出范围时，会不断行显示，break-all允许在单词内换行
* text-stroke：-webkit-text-stroke: 0.2px #ffffff;描边的颜色、粗细

三、CSS常用背景属性：

【CSS常用背景属性】
background （缩写形式）
background-color：背景色，
background-image：背景图 ,background-image: url(图片相对地址);背景图会覆盖背景色
background-repeat：背景图重复方式,no-repeat不平铺，repeat平铺，repeat-x水平平铺，repeat-y垂直平铺
background-size:背景图大小。
【指定宽度、高度】
>>>宽高的写法：第一个属性值为宽度，第二个属性值为高度，
可以：①直接写像素 ②写百分比（父容器宽高的百分比）
>>>当只有一个属性值时，默认为宽度，高度等比缩放
当有两个属性值时，会按照指定宽高进行拉伸/压缩显示
【其他属性值】
>>>contain 图片等比缩放，缩放到宽或高的某一边等于父容器的宽高，另一边按照图片大小缩放
（可能空余部分区域）
>>>cover:图片等比缩放，使背景图完全覆盖背景区域（可能导致背景图部分区域无法显示）
background-position:位置坐标、偏移量
>>>指定位置：left/center/right top/center/bottom ,当只写一个时，另一个默认居中
>>>填写坐标：水平位置 垂直位置(像素或百分比)，
① 当只写一个，默认为水平方向，垂直居中
② 当使用像素时：图片的左上角往各个方向移动的距离
水平方向：正数右移负数左移（左负右正）
垂直方向：正数下移，负数上移（上负下正）
③ 当使用百分数时，只能是整数。去掉图片后剩余空白部分为单位1
例如 background-position: 50%;水平方向去掉图片后剩余区域3:7，即左3右7
* background-origin：设置背景图的定位方式。border-box 从边框外缘开始，padding-box 从边框
* 内缘开始，content-box，从内容开始
* background-origin不改变背景图显示区域大小，只决定左上角定位位置
* background-clip：裁切背景图和背景色显示区域。border-box 从边框外缘开始显示，
* padding-box 从边框内缘开始显示，content-box，从文字内容开始显示，不在
* 显示区域内的背景色，会被裁切不显示。
* background-clip不改变定位位置，只是通过裁切显示部分区域。
list-style: none;去掉无序列表中的点

4、CSS盒子模型

【margin缩写形式】

* 1、写一个值：上下左右四个方向均为指定数值

* 2、写两个数值：第一个数代表上下margin，第二个数代表水平margin

* 3、写三个数值：上、右、下，左边默认等于右边
* 4、写四个数值：上、右、下、左 四个方向
* 5、margin：0 auto;块级盒子，在父容器中水平居中（非常常用）
【padding内边框】
* 1、padding为内边距，会使盒子模型的整个可视区域变大，使用时应注意盒子模型
* 实际显示区间的大小
* 2、其他使用同margin

【border边框】

* 1、三个属性值：宽度、样式、颜色，原则上不能少，顺序随意
* 2、可以通过top、right、bottom、left分别修改四个方向

【border-radius 圆角】
* 1、可以接受8个属性值：X轴（左上右上右下左下）/Y轴（左上右上右下左下）
* 例如：border-radius: 50px 50px 50px 50px/50px 50px 50px 50px
* 2、只写X轴时，Y轴默认等于X轴。只写左上角，默认等于右下角。只写右上角，默认等于左下角
* 例如：border-radius: 50px 0px;
* =border-radius: 50px 0px 50px 0px;
* =border-radius: 50px 0px 50px 0px/50px 0px 50px 0px
* 3、只写一个数，默认8个值均相等。

【box-shadow盒子阴影】
* 六个属性值，空格分割：
* X轴阴影距离：（必选）可正可负，正——右移，负——左移
* Y轴阴影距离：（必选）可正可负，正——下移，负——上移
* 阴影模糊半径：（可选）只能为正，默认为0，数值越大越模糊
* 阴影扩展半径：（可选）可正可负，默认为0，数值增大，阴影扩大
* 阴影颜色：（可选）默认为黑色
* 内外阴影：（可选）可选值：inset(内阴影),默认outset（外阴影）
【border-image图片边框】
* 十个属性：
* ①图片路径：url()
* ②图片切片宽度：4个值，分别代表上右下左四条切线，切割后，会把图片分成九宫格，四个角分别
* 对应边框的四角（不会进行任何拉伸），四个边分别对应边框的四边
* 不能带像素单位px
* ③图片边框的宽度：4个值，分别代表上右下左，可省略，默认为切片宽度
* 必须带像素单位
* ④边框背景重复方式：三个属性值stretch（拉伸）、round（铺满）、repeat（平铺）
【铺满和平铺的区别】
*1、 铺满：会对四条边的宽度进行适当拉伸或者压缩，确保可以正好显示完全
*　　平铺：会保持原有四条边的宽度，进行平铺，可能导致角落处无法显示完整一个图标
*2、属性值写法：border-image：① ②/③px ④；
* 第三部分可以省略，默认等于二
* 第二部分可以只写1个、2个、3个，判断方式同margin