一、使用样式表

在HTML中可以通过以下三种方式使用样式表：

  • 通过<link>元素或CSS的@import语句
<link rel="stylesheet" href="site.css" media="all" type="text/css" />

@import url(page.css);
@import url("page.css");
@import "page.css";

  • 在<style>元素中定义

  • 在HTML元素的style属性中定义

二、CSS语法

1、基本语法

CSS样式由选择符和规则组成，规则由属性和值组成。

//样式
SELECTORS{
	RULES
}
//规则
PROPERTY: VALUE;
  • CSS代码建议全部小写

CSS中选择符区分大小，属性和值不区分大小写，为了保持简洁和一致性，所有的CSS代码建议使用小写字符

  • 元素名、类、ID的命名

元素名、类和ID的命名只能由字母、数字、下划线(_)、连字符(-)和其他Unicode字符组成，但不能含有除_、-外的其他标点符号，且不能以数字或连字符开头。

类和ID的命名应该充满语义，例如：warning(警告)、back-to-top(返回到顶部)、note(注释)、site-map(站点地图)、about-us(关于我们)。

  • 常量值不用引号

例如：color: lightpink 不能写成color: "lightpink"

  • CSS注释以/*开始以*/结束，且不能嵌套

2、属性值

属性值主要有以下几种类型：

  • 常量文本

backgraound-color: white;

  • 常量数字

font-weight: 600;

  • 长度/大小
font-size: 14px;
//设置padding的值为字体的大小（即1倍的font-size）
padding: 1em;
//0是唯一一个不需要指定单位的长度值。line-height是一个例外，允许非零值后没有单位。
margin:0;
  • 百分比

line-height: 150%

  • 函数

background-color: rgb(100%, 100%, 100%)

  • 逗号分隔的一组值

font-family: "Century Gothic", verdana, arial, sans-serif;：如果浏览器找不到第一种字体，会按顺序找后面的字体。最后的字体应该是一种普通字体（每个浏览器中都能找到）：serif、sans-serif或monospace。如果字体名称中有空格，应当给字体添加双引号。

三、层叠优先级

  • 样式规则应用优先级(从低到高)

    • 使用通配选择符的规则(*{...})
    • 使用元素选择符的规则(例：p{...})
    • 使用类、属性或伪类选择符的规则(例：.myclass{...})
    • 使用ID选择符的规则(例：#mydiv{...})
    • 定义在元素style属性中的规则
    • 使用!import的规则(例：#mydiv{color: black!important;})

  • 相同等级的规则，样式应用取决于样式引入的方式，优先级(从高到低)如下：

    • 定义在HTML<style>中
    • 通过嵌套在<style>里的@import引入
    • 通过<link>标签引入
    • 通过<link>标签引入的样式文件的@import引入
    • 终端用户的样式表(除!important外)
    • 浏览器提供的默认样式

  • 最佳实践

    在样式表中把规则按层叠顺序由低到高排列：

    • 通配选择符
    • 元素选择符
    • 类、属性、伪类选择符
    • ID选择符
    • 添加!important的选择符(也按由低到高的顺序排列)

四、注意事项

  • 简写属性

简写属性会把值一起赋给所有属性，即使是只设置了一个值。例如：background:blue;在把background-color设为blue的同时，也将background-image设为none，把background-position设为0% 0%。如果background:blue;的优先级高，那么它会覆盖background-image: url("image.jpg")的规则。

简写属性包括margin、padding、border、background、font、list-style，其中简写font是最容易出问题的，因为它把太多属性组合成了一个，而且这些值都被继承。

  • 避免使用@import语句

如果使用了@import，需要检查它们是否位于样式表中的第一项，以确保它们拥有比样式表中规则更低的优先级。

  • 使样式表规范化

由于每个浏览器都有一些默认样式，可以给所有元素创建一组基准规则，然后在HTML的第一个样式表中引入这些样式来实现元素在不同浏览器中有相同的显示效果。(重组CSS规则：reset)

参考资料
  • 精通CSS与HTML设计模式