CSS概述

• CSS概述
  • 简介
    • CSS(Cascading Style Sheets) CSS样式表或层叠样式表
      • 是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS 不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
        • CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
        • CSS 定义如何显示 HTML 元素，就像 HTML 中的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中，我们只需要编辑一个简单的 CSS 文档然后引用该文档就可以改变所有页面的布局和外观。
  • 语法
    • CSS 规则由两个主要的部分构成：选择器以及一条或多条声明

      • 

         
        • p标签内的文本都是红色，字体居中

          

  • 注释
    • CSS注释以 /* 开始, 以 */ 结束
  • 如何创建并引用
    • 外部样式表（外联式）
      • main.html

        

        • main.css

          

    • 内部样式表（内联式）

      • 

    • 内联样式（行内式）

      • 

  • 三种引入优先级
    • 三种引入方式内容属性不冲突：三种方式会同时起作用。
    • 三种引入方式内容属性会冲突：
      • 内联式和外联式冲突，内联式位于外联式上方。— 由外联式决定
      • 内联式和外联式冲突，外联式位于内联式上方。— 由内联式决定
      • 三种方式并存且冲突。 — 由行内式决定
        • 内部冲突 就近原则
    • 注意：当属性值内存在**“!important ”**关键字的时候，优先使用该类方式导入属性值。

      • 

  • CSS 三大特性
    • 层叠 继承 优先级 是我们学习CSS 必须掌握的三个特性。
      • CSS层叠性
        • 所谓层叠性是指多种CSS样式的叠加。
        • 是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉
        • 一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。
          • 样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。
          • 样式不冲突，不会层叠
      • CSS继承性
        • 所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。
        • 恰当地使用继承可以简化代码，降低CSS样式的复杂性。子元素可以继承父元素的样式（text-，font-，line-这些元素开头的都可以继承，以及color属性）
      • CSS优先级
        • 继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。
        • 行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。
        • 权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。
        • CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。
        • 总结优先级：
          • 使用了 !important声明的规则。
          • 内嵌在 HTML 元素的 style属性里面的声明。
          • 使用了 ID 选择器的规则。
          • 使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
          • 使用了元素选择器的规则。
          • 只包含一个通用选择器的规则。
          • 同一类选择器则遵循就近原则。
          • 总结：权重是优先级的算法，层叠是优先级的表现
  • CSS样式规则

    • 

       
      • 在上面的样式规则中:
      • 1.选择器用于指定CSS样式作用的HTML对象，
        • 花括号内是对该对象设置的具体样式。
      • 2.属性和属性值以“键值对”的形式出现。
      • 3.属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
      • 4.属性和属性值之间用英文“:”连接。
      • 5.多个“键值对”之间用英文“;”进行区分。
        • 可以用段落 和 表格的对齐的演示。

• CSS样式与选择器
  • CSS选择器
    重点
    • 概述：选中特定元素，指定特定样式
    • id选择器
      • id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式，一般来说，一个页面中标签的id的名称，必须唯一且不能重复。
        • 需求描述 ：为id为part1的段落添加红色字体样式

          • 

          • 

    • class选择器
      • class 选择器可以为标有特定 class 的 HTML 元素指定特定的样式，一般来说，一个页面中标签的class的名称，可以不唯一且可以重复。
        • 需求描述 ：为class为green的段落添加绿色字体样式，为class为bold的段落添加加粗字体样式

          • 

          • 

      • 类名不以数字开头
    • 标签选择器
      • 除了使用id选择器和class选择器，我们也可以直接使用标签选择器。
        • 需求描述 ：为所有段落标签添加黄色字体样式，为所有超链接标签添加红色字体样式

          • 

          • 

    • 子代选择器
    • 后代选择器
    • 相邻兄弟选择器
    • 后续兄弟选择器
    • 交集选择器
    • 并集选择器
    • 通配符选择器
      • 通配符选择器可以匹配任何标签，我们常用于统一页面样式。
        • 需求描述 ：将页面所有元素的字体设置为红色文本样式

          • 

             

            • 

    • 伪类选择器
    • 属性选择器
      • 属性选择器可以根据元素的属性及属性值来选择元素。
        • 需求描述 ：为类型为text和button的input标签设置一下样式

          • 

             

            • 

    • 子串匹配属性选择器
    • 分组选择器
      • /* 分组选择器:可以使用多种选择器选中多个元素,多种选择器用逗号隔开 */
        • #a,.b,input{ font-size: 10px; }
  • CSS常见样式
    • 背景样式

      • 

    • 文本样式

      • 

    • 字体样式

      • 

    • 链接样式

      • 

         
        • 注意：推荐使用顺序为link、visited、hover、active

• 盒子模型Box Model
  • 简述
    • 所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。

      • 

      • 不同部分的说明：
        • Margin(外边距) - 清除边框外的区域，外边距是透明的。
        • Border(边框) - 围绕在内边距和内容外的边框。
        • Padding(内边距) - 清除内容周围的区域，内边距是透明的。
        • Content(内容) - 盒子的内容，显示文本和图像。

    • 

       
      • 最终元素的总宽度计算公式是这样的：总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
      • 最终元素的总高度计算公式是这样的：总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
  • 内边距
    • 当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。
    • 单独使用 padding 属性可以改变上下左右的填充。

      • 

    • 常用的属性：

      • 

  • 边框
    • 元素的边框 (border) 是围绕元素内容和内边距的一条或多条线，CSS边框属性允许你指定一个元素边框的样式和颜色。
      • 常用的属性：

        • 

  • 外边距
    • margin 清除周围的（外边距）元素区域，margin 没有背景颜色，是完全透明的。margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。

      • 

      • 常用的属性：

        • 

  • 外边距合并
    • 外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。外边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。
      • 当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。

        • 

      • 当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。请看下图：

        • 

      • 尽管看上去有些奇怪，但是外边距甚至可以与自身发生合并。假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：

        • 

      • 如果这个外边距遇到另一个元素的外边距，它还会发生合并：

        • 

           
          • 这就是一系列的段落元素占用空间非常小的原因，因为它们的所有外边距都合并到一起，形成了一个小的外边距。
      • 外边距合并初看上去可能有点奇怪，但是实际上，它是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。

        • 

           
          • 注意：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。