三、列表、CSS、选择器

1.列表

列表（list）
列表主要用来表示多个并列关系的内容

•     有序列表
        - 使用 ol 标签来创建一个有序列表
        - 使用 li 标签来表示列表中的一个项
  

•     无序列表
        - 使用 ul 标签来创建一个无序列表
        - 使用 li 标签来表示列表中的一个项
    列表之间可以互相嵌套，可以在一个有序列表中放一个无序列表，也可以在无序列表中放有序列表
  

•     定义列表
    	- 使用dl来创建定义列表
    	- 使用dt，来表示定义项
    	- 使用dd，来描述定义项
  

2.CSS

• CSS特点

  • 继承
    • 就像后代会继承祖先的财产一样，后代元素一定会继承到祖先元素的样式
    • 继承的存在大大的简化了我们的开发，利用可以再一个祖先元素上设置的一些公共样式，这样其所有的后代元素都会同时具有该样式。
    • 但是并不是所有的样式都会被继承，像背景、border、width、height…

• 层叠样式表

• CSS用于设置页面中元素的样式，属于结构表现行为中的表现。

• 编写的位置：

  • 第一种，内联样式

    • 可将CSS代码编写到标签的style属性中
    • <p style="color:skyblue;font-size: 60px;">今天天气真不错</p>

  • 第二种，内部样式表

    • 可以将CSS代码编写到一个style标签中
    • ``

    • 第三种，外部样式表

      • 可以将CSS代码编写到一个外部文件中，然后通过link标签引入
      • <link rel="stylesheet" href="style.css">

  • CSS基本语法：

    • 选择器 声明块

    • 选择器

      • 通过选择器可以选中页面中的指定元素

      • 元素选择器

        • 语法：标签名（p{} div{} span{}）

      • id选择器

        • 语法：#id（#p1{} #box{}）

      • 类选择器

        • 语法：.class（.p1{} .box{}）

      • 选择器分组(并集选择器)：

        • 语法：选择器1, 选择器,…选择器N（#p2, div, span {}）

      • 通配选择器

        • 语法：*

      • 交集选择器

        • 语法：选择器1选择器2…选择器N（div.box{}）

      • 后代元素选择器

        • 语法：祖先 后代{}（div span{}）

      • 子元素选择器

        • 语法：父元素 > 子元素

      • 兄弟元素选择器

        • 语法：兄 + 弟 {}（选择紧随其后的一个兄弟元素）
        • 语法：兄 ~ 弟 {}（选择其后边所有兄弟元素）

      • 伪类选择器

        • 伪类都是以：开头的
        • 伪类表示元素一些特殊状态或位置
          • :first-child 表示第一个子元素（在所有的子元素中查找）
          • :first-of-type 同类型中的第一个子元素
          • :last-child 最后一个子元素
          • :last-of-type 同类型的最后一个子元素
          • :nth-child(n) 第n个子元素 odd表示单数 even表示双数
          • :nth-of-type() 同类型的第n个子元素
          • :only-child 唯一的一个子元素
          • :only-of-type 同类型中唯一的一个子元素
          • :empty 匹配空元素
          • :not() 否定伪类，表示除了
          • :link 正常的链接（没访问过的链接）
          • :visited 访问过的链接
          • :hover 鼠标移入的状态
          • :active 鼠标点击的状态

      • 属性选择器

        • 根据元素的属性来获取元素
        • 语法：
          • [属性名]
          • [属性名=属性值]
          • [属性名^=属性值]
          • [属性名$=属性值]
          • [属性名*=属性值]

      • 伪元素

        • 伪元素用来表示一些特殊位置的元素
        • 伪元素使用::开头
          • ::before 元素内部的开始位置
          • ::after 元素内部的结束位置
          • ::selection 选中的内容
          • ::first-letter 第一个字母（汉字）
          • ::first-line 第一行

    • 选择器的权重

      • 当使用不同的选择器选中同一个元素，并且为它的同一个样式设置不同的值，这时就发生了样式冲突。
      • 发生样式冲突时，哪个样式会生效由选择器的优先级决定：
        • 内联样式（1，0，0，0）
        • id选择器（0，1，0，0）
        • 类和伪类（0，0，1，0）
        • 元素选择器（0，0，0，1）
        • 通配选择器（0，0，0，0）
        • 继承的样式，没有优先级
      • 优先级在计算时，需要将所有用到的选择器进行相加，然后再比较，优先级高的优先使用，如果优先级一样则使用靠后的样式。
      • !important 可以在一个样式的最后添加它，这样该样式将会获得最高的优先级，有线索有样式显示，慎用

    • 单位

      • 长度单位
        • 像素（px）
          • 像素就是屏幕上一个一个的小点
          • 像素分成两种：CSS像素和物理像素
          • 我们在编写网页时使用的是CSS像素，在PC端默认情况下（没有缩放），1css像素 = 1物理像素
          • 如果对pc端进行放大，或者在移动端开发，则1个css像素会对应多个物理像素
        • 百分比（%）
          • 百分比会根据父元素指定的值来计算当前段素的值
          • 一般我们在一些响应式的开发中会使用到百分比
        • 包含块
          • 默认情况下包含块就是离当前元素最近的块级祖先元素
      • 颜色单位
        • 颜色名
          • red orange yellow blue green black…
        • RGB值
          • 使用红绿蓝三种颜色的光的浓度来调配出不同的颜色
          • rgb(红色,绿色,蓝色)
            • 取值范围0-255/0%-100%
          • rgba()
            • a（alpha）表示不透明度，范围是0-1
        • 十六进制rgb值
          • 语法：#红色绿色蓝色
          • 范围 00-ff
          • 例子：#ff0000 -->#f00
        • HSL值
          • 工业中设置颜色的方式
          • 他通过三个值来设置颜色
            • H 色相（0 - 360）
            • S 饱和度（0% - 100%）
            • L 亮度（0% - 100%）

    • 声明块

      • 声明块整体是由一个大括号包裹，里边由一个一个的声明组成
        • 声明是一个一个名值对结构，属性名和属性值使用:连接，使用;结尾
        • 声明用来为选择器所对应的的元素来设置样式
      • 常用的样式：
        • color 字体颜色
        • background-size 字体的大小
        • font-size 字体的大小
        • width 元素的宽度
        • height 元素的高度