---
title: "建立CSS文档"
url: "https://yjyj.net/learn/3829.html"
author: "小 虾 (生猛大蝦编辑部)"
published_at: "2005-12-17T05:32:31+08:00"
updated_at: "2005-12-17T05:32:31+08:00"
categories: "招数学习"
tags: "CSS布局技巧, JavaScript交互, 前端开发实战, 网页视觉设计"
summary: "本文系统讲清CSS文档怎么写、怎么放、怎么用：从选择器语法、属性命名规则，到内嵌、外链、@import与行内样式的区别，再到样式冲突时的优先级。适合想快速掌握网页样式表建立与维护方法的人。"
source: "生猛大蝦 (https://yjyj.net)"
---

# 建立CSS文档

> 来源：[生猛大蝦 (yjyj.net)](https://yjyj.net/learn/3829.html) · 作者：小 虾 · 发布时间：2005-12-17

## 30 秒核心看点 (TL;DR)

- CSS规则核心是“选择器{属性:值;}”，属性名多单词时用连字符。
- 样式表可内嵌、外链、@import或行内写入，适用范围和维护成本不同。
- 外部样式表最利于统一站点风格；冲突时，后加载的规则不一定赢，内嵌规则通常优先。

样式表的建立要符合CSS规则，它们一般被定义成以下形式的句法：
　　HTML标志{标志属性:属性值; 标志属性:属性值; 标志属性:属性值; 标志属性:属性值; ...}
　　下面我们分别讲述：
　　．HTML标志：在上一节我们已简要地介绍了一下， 有点需要注意的是，这些标志不带尖括号，如P,Div、Table等而不是、以及。
　　．标志属性:属性值，这是一一对应的，每个属性与属性值对之间用分号隔开。有一点要说明的是，在CSS的属性设置与脚本语言中对属性设置有一点不同，即属性名称的写法，在CSS中，凡属性名为两个或两个以上的单词构成时，单词之间以"-"隔开，比如，背景颜色属性background-color, 而在脚本中，对象属性则连写成backgroundColor，第二个单词首字母大写，如有三个单词则第三个单词首字母也要大写，注意，在Javascript中，是严格区分大小写的。
　　有一点值得注意的是，有些属性可以表示多个属性的值，如字体设置，有字体字样：font-family、字体大小：font-size、字体风格:font-style，这些可用一个font属性来表示,
　　如:H2{font-size:15pt;
　　　 　 font-family:'宋体';
　　　　　font-style:italic }
可直接用 H2{font:15pt 宋体 italic}来表示，类似的情况还有关于背景方面的设置。
　　层叠样式单写好后，放在什么地方呢？实际上你可以使用4种方法，而且每种方法都有其不同的优点：
　　　　● 将样式表植入HTML文件中。
　　　　● 将一个外部样式表链接到HTML文件上。
　　　　● 将一个外部样式表输入到HTML文件中。
　　　　● 将样式表加入到HTML文件行中。
　　四种方式各有妙用，主要的差别在于它们规定的风格使用的范围不同。我们分别讲述：
1．植入样式表
　 这就是我们在刚才范例中用的方法，所有的样式表信息都列于HTML文件的顶部，CSS的代码直接定义在文档头之间。这种风格定义产生作用的范围也只局限于本文件。

这是CSS的测试页面

## CSS扩展了HTML的功能，是网页设计者的救星

Stylesheets:The Tool of the Web Design Gods

　　植入样式表规则后，浏览器在整个HTML页面中都执行该规则。如果你只是想对网页进行一次性加入样式表的话，就可采用该方法。如果在DreamWeaver中用Styles来书写，以上一些代码会自动生成的。这种方式的主要用处是，在一些方面统一风格的前提下，可针对具体页面进行具体调整。
　　你可能一直都注意到代码中有两处很奇怪：TYPE="text/css"属性和注释标签。
　　TYPE="text/css" 设定采用MIME类型，这样一来，不支持CSS的浏览器可以忽略样式表。
　　注释标签更为重要。有些老的浏览器（如MAC机用的IE 2.0）即使在设定了TYPE="text/css" 属性时也不能忽略样式表继续执行下面的命令，而且还会显示样式表的代码。而使用注释标签则可以避免发生这种情况。
2．链接到样式表上
　　这是CSS样式表最值得令人振奋的一项功能。你可以将多个HTML文件都链接到一个中心样式表文件。而这个外部的样式表文件将设定你所有网页的规则。如果你改变样式表文件中的某一个细节，某一个语句定义，那么所有页面都会随之改变。维护大型站点的Webmaster们知道这功能后，一定会惊喜若狂。CSS文件可在DreamWeaver的Window菜单下的styles选项或在FrontPage Editor98中Format菜单下StyleSheet菜单项来创建，相对说来，在DreamWeaver下创建比较简单；当然了，如果你熟悉CSS属性，可直接在记事本里写，最后的文件扩展名为.css。
　　使用方法很简单，首先建立一个单独的文本文件，起名mystyles.css (或者任何你喜欢的名字)。文件内容如下：
H1{ color:red;font-size:12pt;font-family:宋体 }
P{color:white;background:black;font-family:courier}
　　把文件存在你的主页目录下，之后，你只需要在你站点网页内的内使用标签，把mystyles.css的存放路径填写上去（在HREF属性中你可以选择使用绝对或相对URL），就能实现你定义的CSS样式表，而你无须再加入

My First Stylesheet

## Stylesheet:The Tool of the Web Design Gods

 Amaze your friends! Squash your enemies!

　　而其中输入的 company.css文件内容如下：
H1{color:green;font-family:times}
P{background:yellow;font-family:courier}
　　在本例中，浏览器首先输入 company.css的规则 ( @import 必须打头), 然后加入移植的规则从而为这个网页产生规则集合。请注意，对于H1在外部样式表文件和植入的样式表中都设定了规则。在两者冲突的情况下，浏览器应执行哪一项规则呢？植入的规则此时将占上风。所以文字显示效果如下：
输入样式表的灵活性可以使你输入无数多个样式表，并可以按照自己的喜好用植入的样式表凌驾于输入的样式表之上。 （但是目前只有IE 4.0支持输入法。 ）
4．在行内加入样式
　　最后，你还可以在HTML行中加入样式规则，这种方式主要用于对具体的标志做具体的调整,其作用的范围只限于本标志。如下：

My First Stylesheet

## CSS扩展了HTML的功能，是网页设计者的救星

Stylesheets: The Tool of the Web Design Gods

　　在这个例子中，你无须在HTML顶部加入样式表代码。加入行内的样式表属性将使浏览器同样执行样式表规则。该方法不方便之处在于：你必须在每行指令中都中加入样式规则，否则下一行时浏览器将转回到文件的缺省设置。加入行内的样式表相比不如植入、链接及输入的样式表那样功能强大，但有时候你会发现它也很有用。
　　其实，你可以同时使用几种方法，而样式表的能力就在于综合你加入网页的各种样式。有些朋友可能会问，如果我同时使用几种插入样式表的方法，那么浏览器会确认谁先执行呢？下面为CSS样式表的串接顺序，浏览器将按照此顺序执行样式表的指令。
Inline styles （行内样式）
Embedded styles （植入样式）
Linked styles （链接样式）
Imported styles （输入样式）
Default browser styles（缺省浏览器样式）

## 延伸问答与排错指南 (FAQ)

### CSS文档应该写成什么基本格式？
基本格式是“HTML标志{标志属性:属性值; ...}”。选择器写标签名即可，不要带尖括号；属性与值一一对应，多个属性之间用分号分隔。属性名若由多个单词组成，单词之间用连字符连接。

### 内嵌样式表和外部样式表有什么区别？
内嵌样式表直接写在HTML文件头部，只对当前页面生效，适合一次性调整；外部样式表单独保存为.css文件，可被多个页面共用，便于统一站点风格和后期维护。

### 样式冲突时浏览器会优先执行哪条规则？
当同一个选择器在外部样式表和内嵌样式表中都定义了规则时，通常以内嵌样式表的规则优先。实际使用中要注意样式来源和加载顺序，避免同一元素被多处重复定义。

---
更多 Linux 运维、WordPress 性能优化、前端工程化、Shopify 独立站与极客折腾指南：[生猛大蝦全站文章归档 (https://yjyj.net/archive)](https://yjyj.net/archive)