CSS

• 1、Emmet语法

• • • 1.1 生成HTML结构语法
    • 1.2 生成CSS样式语法
    • 1.3 快速格式化代码

• 2、CSS复合式选则器

• • • 2.1 后代选则器
• • • • 2.1.1 子元素选则器（后续选则项）
• • • 2.1.2 并集选则器
• • • 2.1.3 连接伪类选则器
• • • 2.1.4 :焦点伪类选则器
• 3. CSS元素显示模式
  • 3.1 Block elements
  • 3.2 Inline elements
  • 3.3 Inline block elements
  • 3.4 Display mode conversion
  • 3.5 Horizontal text centering in a single line trick

• 4、CSS的基础知识

• • • 4.1 底色设置
• • • 4.2 背景图片设置
• • • 4.3 平铺模式与位置设置
• • • 4.4 背景图像锁定
• • • 4.5 多层叠加效果实现

  • 5、CSS的三大特性

  • • • 5.1 层叠性
      • 5.2 继承性
      • 5.3 优先级

1、Emmet语法

1.1 生成HTML结构语法

通过直接输入标签名并按Tab键生成
可以通过' div_ 数量 '的形式快速生成多个相同类型的 div 标签
可以使用' 根据父容器>子容器1>子容器2 '的方式创建父子级关系
通过' 父容器>子容器1>子容器2 '的方式创建兄弟级关系
可以手动输入具体的类名如 .demo 或者 #demo ，并按 Tab 键
如果希望 div 类名按照顺序排列，则可以使用 ' div 索引号 ' 的形式 如果要在 Tag 中添加文字内容，则可以使用 ' Tag{文字} ' 的形式；如果需要自增编号，则可以用 ' div{} 索引号 ' 的方式

1.2 生成CSS样式语法

CSS基本采取简写形式

例如：

*w200 + tab 设置 width：200px;
*lh26 + tab 设置 line-height: 26px;
*tdn + tab 设置 text-decoration: none;

1.3 快速格式化代码

访问设置页面，并在其中查找emmet.include项；
向用户提示添加到settings.json文件中的两个布尔值：
“editor.formatOnType”: true 和
“editor.formatOnSave”: true

设置完成后写完代码保存页面时具有自动格式化代码的能力

2、CSS的复合选择器

定义：复合选择器是建立在基础选择器之上，对基本选择器进组合形成的

常用的复合选择器：

2.1 后代选择器

任意基础选择器的组合

语法：

    元素1 元素2 {样式声明}

如：

    ul li {样式声明}      /*选择ul里面所有的li标签元素*/

注意：

• 将元素1与元素2以空格分隔
• 其中元素1为父级节点，则子级节点为元素2
• 仅需满足子节点条件即可作为最终结果
• 应逐层遍历查找符合条件的节点
• 当遇到相同标签时，则可以通过定义父类名的方式处理后续引用问题。例如，在HTML中使用<ul class="nav">时，则可以在内部直接引用.nav li a

2.2 子元素选择器（子代选择器）

子元素选择器只能选择作为某元素的最近一级子元素

语法：

    元素1>元素2 {样式声明}

如：

    div>a {样式声明}        /*选择div里面所有最近一级的a标签元素*/

注意：

• 必须将元素1与元素2通过大于号分隔开来
• 必须将上级节点指定为子节点，并且必须选择子级
• 元素2 必须为直接父节点，并且禁止选择其所有子代节点

2.3 并集选择器

并集选择器可选多个标签集合，并为其设置样式；任意一种选择器均可作为并集选择器的一部分。

语法：

    元素1，
    元素2 {样式声明}    /*通常竖着写*/

如：

    p,div {样式声明}    /*选择 p 和 div 标签元素*/

注意：

• 元素1与元素2需以逗号分隔
• 最后一组合并后的列表项无需在末尾添加额外的分隔符
• 任何一种选择器均可成为并集选择器的一部分；例如，在HTML中使用带有<ul class="ing">标签的列表项时，则可编写为‘div,p,.ing li’ {样式说明}

2.4 链接伪类选择器

伪类选择器用于向某些选择器添加特殊的效果

链接伪类选择器：

注意：

• 请按照LVHA顺序进行设置：link - visited - hover - active
  • 在浏览器环境中，默认样式未定义；因此，在实际开发过程中，开发人员需要针对该链接单独设置样式信息。

在实际开发中的写法：

    a {
       color: gray;
    }
    a:hover {
       color: blue;
    }

2.5 :focus伪类选择器

:focus伪类被用来选取拥有焦点状态的表单元素
通常情况下，<input>类表单元素能够拥有焦点状态

例如：

    input:focus {
    background-color:yellow;
    }

3、CSS的元素显示模式

元素显示模式就是元素（标签）以什么方式进行显示

HTML元素一般分为块元素和行内元素

3.1 块元素

常见的块元素：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>是最经典的块元素

块元素的特点：

• 独占一行
  • 高度、宽度以及内外边距都可以灵活设置。
  • 宽度默认设置为容器的100%。
  • 属于一种容器或盒子类元素，在不同情况下能够容纳行内或块级元素。

注意：

• 在文本类型中，禁止包含块状元素。
  • 在

    标签中不允许包含

    等块状结构；同样，在

    至

    标题级别中也不允许嵌入其他类型的块级元素。

3.2 行内元素

常见的行内元素： <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<span>、<s>，<span>最典型

行内元素的特点：

• 相邻行内的元素在同一行中能够同时显示多个
  • 无法通过直接设置指定宽度或高度
  • 默认情况下，默认宽度即为该元素自身的宽度
  • 行内的元素仅能包含文本或其它行内嵌入的内容

注意：

• 在标签内部无法嵌入其他链接
  • 特殊情况下，在<a>标签中插入块级元素是可行的
  • 但需要注意的是，在转换为块级模式之前应谨慎操作

3.3行内块元素

行内块元素：<img />、<input>、<td>

行内块元素的特点：

• 相邻的行内块在同一行排列, 但它们之间可能存在空隙, 一行最多可容纳多个元素
  • 默认设置下, 元素的宽度等于其内容长度
  • 高度. 行高. 外边距和内边距均支持大小调节

3.4 元素显示模式的转换

元素显示模式的转换：一种模式的元素需要另外一种模式的特性

1. 将其标记归类为块级样式； display:block;
2. 将其标记指定为行内块样式； display:inline-block;
3. 将其标记配置为行内样式； display:inline;

例如，增加链接 <a>的触发范围：

    a {
       width: 300px;
       height: 150px;
       display:block;
    }

3.5 单行文字垂直居中的小技巧

将文字的高度设定为与盒子高度相当，则可以让文字在当前盒子内垂直居中

4、CSS的背景

通过CSS背景属性，可以给页面元素添加背景样式

4.1 背景颜色

属性 background-color定义了元素的背景颜色

语法：

    background-color:颜色值;

注意：

• 一般情况下元素背景颜色默认值是transparent（透明）

背景颜色半透明：

    background: rgba(0,0,0,0.3);

注意：

• 最后一位参数是alpha通道，在取值上介于[ \text{O} , \text{O} ]之间。
• 通常会省略数值为零的参数，在表示颜色时写作\text{background}:\text{rgba}( \text{O}, \text{O}, \text{O}, .\text{3})。
• 具有半透明效果的背景（即\text{background}）下内容不会受影响。

4.2 背景图片

background-image属性描述了元素的背景图像功能，在实际开发中常见于用于展示品牌标志或其他装饰性小尺寸图片以及处理超大尺寸的背景图。该属性也具有较高的灵活性（放置在特定位置时可能会覆盖底色）。

语法：

    background-image:none | url(url)    /*none——无背景图，url——使用绝对或相对地址指定背景图像*/

4.3 背景平铺和背景位置

1、背景平铺

属性：background-repeat

语法：

    background-repeat:repeat | no-repeat | repeat-x | repeat-y

2、背景位置

属性background-position用于调整背景图片在背景区域中的布局设置

语法：

    background-position:x y;  /* x坐标和 y坐标,可以使用方位名词或精确单位*/

参数是方位名词：

• 如果在设置中同时指定的两个方向都是方位名词，则这两个方向的相对位置互换不会影响最终效果（例如将center top与top center的位置调换不会改变结果）
• 如果仅设置了单一的一个方位名词而未指定另一个方向，则系统默认将未指定的方向设置为居中对齐状态

参数是精确单位：

• 如果参数值为精确坐标，则前一个是x坐标而后一个是y坐标
  • 如果仅设置了一个数值，则该数值为x坐标，默认情况下另一参数垂直居中

参数是混合单位：

当两个参数分别为准确单位与方向名词结合时，则第一个数值表示x坐标数值第二个数值表示y坐标数值

4.4 背景图像固定

确定背景图像的固定性是否受页面其余部分滚动的影响：background-attachment

background-attachment 可以制作视差滚动的效果

语法：

    background-attachment:scroll | fixed

4.5背景复合写法

为节约代码，可以将这些属性合并简写在一个属性background 中

简写属性时没有特定的书写顺序，一般约定为：

    background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;

例如：

    background:black url() no-repeat fixed center top;

5、CSS的三大特性

CSS 三大特性：层叠性、继承性、优先级

5.1 层叠性

当相同的选择器被指定为相同的样式时，在这种情况下一个样式会被另一个冲突的样式所遮盖（掩盖），这正是层叠性的主要用途。

层叠性原则：

• 样式间的冲突问题会遵循就近原则，在这种情况下优先采取离结构较近的样式进行处理 * 样式间无冲突情况不会产生层叠现象

5.2 继承性

CSS 中的继承：子标签会继承父标签的某些样式，如文本颜色和字号

• 适当应用能简化代码
• 子标签能够继承父标签样式（那些以text-、font-、line-开头的元素都能继承样式）

特别情况：行高的继承

    body {
      /*子元素继承父元素的行高1.5，这个1.5就是当前元素文字大小的1.5倍*/
     font:16px/1.5 Microsoft yahei;    /*1.5也可以直接设置行高，如24px*/
    }

注意：

• 行高既可以搭配单位使用,也可以省略不使用
  • 如果未设置子元素的行高,则会继承父元素的行高;此时该子元素的行高为:当前字级大小乘以1.5
  • 采用body段落格式下设置为1.5倍线距的方式的好处是:允许文本段落中的各个段落根据自身文字长度自动调整适当的间距

5.3 优先级

当同一个元素指定多个选择器，就会有优先级的产生

原则：

• 选择器相同，则执行层叠性
• 选择器不同，则根据选择器权重执行

选择器权重：

注意：

• 权重由四组数字构成，并不会存在进位的情况
• 可以视为类选择器在任何情况下都具有更高的优先级于元素选择器等
• 在进行等级判断时，默认从左至右依次比较数值；当遇到相同值时，则继续比较下一位置上的数值。
• 子元素继承其父元素的权重仅当其父元素被直接选中时才会有所提升；若未被直接选中，则无论父层赋予了多高的 inherited weight, 子层都无法获得任何 weight.

权重叠加：

如果是复合选择器，则会有权重叠加（不会进位），需要计算权重

例如：

因为
ul li 的权重是：0,0,0,1 + 0,0,0,1 = 0,0,0,2
li 的权重是：0,0,0,1
所以 ul li 的权重大于 li 的权重

.nav li 的权重是: 0,0,1,0 + 0,0,0,1 = 0,0,1,1