简介

苓渊大约 2 分钟

相关信息

CSS（Cascading style sheets）层叠样式表。给 HTML 标签设置样式。

导入方式

CSS 导入 HTML 的三种方式：

内嵌式：在 head 标签中添加 style 双标签，在标签内部编写 CSS 样式，作用于当前页面。
外联式：写在单独的 .css 文件中，通过 link 标签引入 HTML 网页，可以作用于多个页面。
行内式：写在标签 style 属性中，作用于单个标签。

引入方式离标签越近，优先级越高（行内样式 > 内部样式 > 外部样式）

<html>
  <head>
    <!--内部样式-->
    <style>
      h1{color: brown;}
    </style>

    <!--外部样式-->
    <link rel="stylesheet" href="./index.css">

    <!--导入式 css2.1-->
    <style>
      @import url(./index.css);
    </style>
  </head>

  <body>
    <!--行内样式，在标签元素中，编写一个style属性，添加样式-->
    <h1 style="color:aqua">标题</h1>
  </body>
</html>

注释

/* 这是多行注释 */

重要特性

样式层叠问题

CSS 样式可以层层叠加，其渲染规则遵循：

就近原则：引入方式离标签越近，优先级越高（行内样式 > 内部样式 > 外部样式）
顺序覆盖：因为代码顺序执行，代码中更靠后的样式覆盖前面的样式。

颜色取值

对于如 color 之类的关于颜色的属性，其使用以下方式取值：

预定义的颜色名：red、green、blue 等。
rgb(0,0,0)：红绿蓝三原色，每项取值 0 ~ 255.
rgba(255,255,255,0)：红绿蓝三原色 + 透明度，透明度范围 0 ~ 1.
#ff0000：十六进制表示法，以 # 开头，将数字转换为十六进制表示，可简写为 #f00.

继承性

子元素默认继承父元素样式，利用此特性统一设置样式。文字控制属性都可以继承，非文字控制属性都不能继承。

可以继承的常见属性：

color
font-style、font-weight、font-size、font-family
text-indent、text-align
line-height

继承失效问题

继承失效可能是由于标签本身带有的自身私有属性覆盖了继承而来的属性导致继承属性不生效。

如：

a 标签的 color 会继承失效。
h 标签的 font-size 会继承失效。

书写顺序

规范的书写顺序可以提供代码可读性，还可以使浏览器执行效率更高。

浮动 / display
盒子模型（margin、border、padding）
高度、宽度、背景色
文本样式