这是我参与「第四届青训营」笔记创作活动的第二天

———理解CSS

一、CSS是什么？

英文名：Cascading Style Sheets
作用：用来定义页面样式
    例：设置字体和颜色、设置位置和大小、添加动画效果
    h1{
        color:white;
        font-size:14px;
       }
    其中h1为一级标题,color与font-size为属性，white与14px为属性值（属性值不唯一）。

二、CSS如何工作？

graph TD
加载HTML --> 解析HTML--> 创建DOM树-->展示页面

其中在解析HTML会发生以下操作：

graph TD
解析HTML--> 加载CSS-->解析CSS--> 创建DOM树

三、如何在页面中使用CSS？

1.外链形式引用： <link rel="stylesheet" href="此处填写css路径">

2.嵌入形式：<style>...</style>

3.内联形式：eg:<p style="margin:lem 0">Example Content</p>

四、CSS中选择器Selector介绍

1. 通配选择器：*{}
2. id选择器：#自己定义的id的名字 
    eg:#one{}
    注意：页面中id是唯一的
3. 类选择器：.自己定义的class名字
    eg:.two{}
4. 属性选择器：[属性]{}
    eg1:
        <input value="" disabled />
        <style>
            [disabled]{}
        </style>
    eg2:
        <a href="#top"></a>
        <a href="a.jpg"></a>
        <style>
            a[href^="#"]{}
            a[href$="a.jpg"]{}
        </style>
    其中第一个a[href^="#"]中"^"表示选择以“#”号开头，第二个a[href$=".jpg"]中"$"表示选择以“.jpg”结尾
 5. 伪类选择器：不基于标签和属性定位元素
     eg1:
         <a href=""></a>
         <label>用户名：<input type="text"></label>
         <style>
             a:link{}  # 默认状态下所处样式
             a:visited{}  # 访问过链接之后
             a:hover{}  # 鼠标移到链接上
             a:active{}  # 鼠标按下
             :focus{}  # input的聚焦状态
     eg2:
         li:first-child{}  # 第一个li
         li:last-child{}  # 最后一个li
 6. 组合的方式：
     eg:
         <input class="error" value="">
         <style>
             .error{}
             input.error{}
         </style>
      这种方式和权重有关，如果有相同的样式以权重大的为主。其中如果加了"!import"，无人能敌。
    1)直接组合：AB     input:focus
    2)后代组合：A B    nav a
    3)亲子组合：A>B    section>p
    4)兄弟选择器：A~B  h2~p
    5)相邻选择器：A+B  h2+p
 选择器组：eg1->body,h1,h2,h3,ul,ol,li{}
     eg2->[type="checkbox"],[type="radio"]{}

五、其他介绍

1. 颜色RGB：rgb(a,b,c)
    每一个颜色都有对应的“#数字与英文”组合
2. 颜色HSL：hsl(a,b%,c%)
    H->Hue色相，取值范围为0~360。
    S->Saturation饱和度，取值范围0~100%。
    L->Lightness亮度，取值范围0~100%。
3. alpha透明度：rgba(1,b,c,d) | hsla(a,b%,c%,d) （d的取值为0~1）
    eg:#ff0000ff=rgba(255,0,0,1)=hsla(0,100%,50%,1)
4. 字体：
    font-family | webFont
        后者必须先定义字体，然后就可在CSS中使用font-family:'fzztjw';。
    font-size: 
        关键字：small/medium/large
        长度：px/em
            eg：父元素为20px,子元素为2em,其子元素大小为40px。
        百分数：相对于父元素字体大小
    font-weight:字重  eg:font-weight:100;
5. line-height:行高
6. white-space:
    nowrap不换行与normal同。
    pre保留空格不换行，换行只识源码中的换行（回车符）和<br/>标签。
    pre-wrap保留空格换行，除了碰到源码中的换行和<br/>会换行外，还会自适应容器的边界进行换行。
    pre-line合并空格换行，与上同。
7. 调试CSS：
    右击页面，选择【检查】
    使用快捷键:Ctrl+shift+I(window)/Ctrl+Opt+I(Mac)
8. 继承：某些属性会自动继承其父元素的计算值，除非显式指定一个值
    所有元素可继承：visibility、cursor。
    内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
    终端块状元素可继承：text-indent和text-align。
    列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
    不可继承的：display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。
9. 初始值：
    CSS中，每个属性都有一个初始值。
        eg:background-color为transparent
           margin-left为0
    可以使用initial关键字显式重置为初始值
        eg:background-color:initial
10. padding/margin/border
        四个值：上 右 下 左
        三个值：上 左右 下
        两个值：上下 左右
        一个值：上下左右
   其中可以使用margin:auto水平居中
11. box-sizing:border-box;可以将border的宽度和高度计算在width和height中

下表为权重解析

选择器	权重值
!import	infinity(无穷大)
行间样式（元素标签中使用style设置的样式）	1000
id	100
class/属性选择器/伪类选择器	10
伪元素选择器/标签选择器	1
通配符选择器	0