# 建立CSS文档

- Link: https://yjyj.net/learn/3829.html
- Published: 2005-12-17T05:32:31+08:00
- Author: 小 虾

⚡ 生猛大蝦编辑部 · 30 秒核心看点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文件，可被多个页面共用，便于统一站点风格和后期维护。样式冲突时浏览器会优先执行哪条规则？当同一个选择器在外部样式表和内嵌样式表中都定义了规则时，通常以内嵌样式表的规则优先。实际使用中要注意样式来源和加载顺序，避免同一元素被多处重复定义。📚 【招数学习】专栏延伸阅读与热门精选（全站文章归档）：CSS的字体样式滚动条样式设置CSS的背景属性CSS单元的位置和层次热门必读跨境电商 AI Prompts热门必读重置 Mac 的 SMC