一、CSS 概述


CSS概述


  - CSS作用

wKiom1bvmryBEoSoAAC-lkRG4Lg151.png

wKiom1bvmtrzZAgBAAGA3AFpBBA674.png

wKiom1bvmv-wwz4BAADtsI6BAzY932.png


CSS概念

  - CSS (Cascading Style Sheets): 层叠样式表，又叫级联样式表，简称样式表

  - 用于 HTML 文档中元素的样式定义

      - 实现了将内容与表现分离

      - 提高代码的可重用性和可维护性


CSS与HTML之间的关系

  - HTML 用于构建网页的结构

  - CSS 用于构建 HTML 元素的样式

  - HTML 是页面的内容组成，CSS是页面的表现

wKiom1bvmx3RO_AaAADdoQULyd4563.png


HTML 属性与CSS样式的使用原则

  - W3C 建议尽量使用CSS样式取代HTML属性

  - 如果为 HTML 所特有的属性，则使用 HTML 属性

wKiom1bvmzaDC50yAADqa1KbXl0456.png


二、CSS 样式表的使用


使用 CSS 样式表的方式

  - 内联方式

      - 样式定义在单个的 HTML 元素中

  - 内部样式表

      - 样式定义在 HTML 页的头元素中

  - 外部样式表

      - 将样式定义在一个外部的 CSS 文件中(.css文件)

      - 由 HTML 页面的引用样式表文件


内联方式使用 CSS 

  - 样式定义在 HTML 元素的标准属性 style 里

  - CSS 语法

      - 只需要将分号隔开的一个或者多个属性/值对作为元素的style属性的值

      - 属性和属性的值之间用:连接

      - 多对属性之间用;隔开

wKioL1bvm-bhk-8GAACEPTlQ0qY241.png


内部样式表

  - 样式表规则位于文档头元素中的<style> 元素内

      - 在文档<head>的元素内添加<style>元素

      - 在<style>元素中添加样式规则

wKiom1bvm8Sx4DCoAACysU78H_g242.png


  - 在<style>元素中添加样式规则

      - 可以定义多个样式规则

      - 每个样式规则有两个部分:选择器和样式声明

  - 选择器:决定哪些元素使用这些规则

  - 样式声明:一对大括号，包含一个或者多个属性/值对

wKioL1bvnIbzcMOBAAC29MuVoD0443.png


外部样式表

  - 第一步:创建一个单独的样式表文件用来保存样式规则

      - 一个纯文本文件，文件后缀为.css

      - 该文件中只能包含样式规则

      - 样式规则由选择器和样式声明组成

wKioL1bvnJ-ShgHyAAB1TTJcYsA508.png

  - 第二步:在需要使用该样式表文件的页面上，使用<link>元素链接需要的外部样式表文件

      - 在文档的<head>元素内添加<link>元素

wKioL1bvnN2TN05wAAC4q7EtAO8463.png



三、CSS 语法规范


CSS 语法规范的总结

  - 内联样式:由样式声明组成

wKiom1bvnISgX55nAABaWv0RJ_c845.png

  - 样式表(内部样式表或者外部样式表)

      - 由多个样式规则组成

      - 每个样式规则有两个部分:选择器和样式声明

wKioL1bvnP-hwQ55AADKdYK5L0Q097.png


CSS 样式表特征

  - 继承性

      - 大多数 CSS 的样式规则可以被继承

  - 层叠性

      - 可以定义多个样式

      - 不冲突时，多个样式表中的样式可层叠为一个

  - 优先级

      - 样式定义冲突时，按照不同样式规则的优先级来应用样式


CSS 样式的优先级

wKioL1bvnTvwP42hAADl17PlFmU650.png


!important规则

  - !important 可以调整样式规则的优先级

  - 将 !important 添加在样式规则之后，中间用空格隔开

      - 选择器{属性:属性值 !important;}

  - 谨慎使用

wKioL1bvnVTTibZfAACjqYQ2gLI240.png


总结：本章内容主要介绍了 Css 概述、样式表使用方式、语法规范。