[读书笔记：CSS实战手册]2、创建样式和样式表

最新推荐文章于 2024-10-02 05:39:15 发布

weixin_30256901

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量73

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xchsp/archive/2013/03/18/2966150.html

版权

1、样式剖析
一个样式由两部分组成，网页元素（Selector 选择器）和格式化指令（Declaration Block 声明块）。选择器可能是大标题、一段文本、一张照片等。声明块可以使文本变蓝、给段落加边框等。如：

Selector（选择器）：要进行样式设置的一个或多个元素
Declaration Block（声明块）：包含选择器要应用的格式化选项。以左括弧（{）开始，右括弧（}）结束，中间包含声明
Declaration（声明）：声明块中包含的格式化指令，由一个属性和一个值组成，并以分号结束
Property（属性）：即格式化选项，一种属性由一个单词或用连字符连接的多个单词，表示一种特定的样式，如font-size、color
Value（值）：属性的具体值，有颜色、长度、URL、关键字几类值类型。值中间有空格的话需要用引号引起来
CSS书写格式：建议按照上面的例子进行书写，这样便于阅读和修改。声明块中的声明建议按照Mozilla推荐的顺序书写

2、理解样式表
可以把样式放到网页文件的内部或外部，或者混合使用。
外部样式表的好处：独立文件可被浏览器缓存，使网页打开更快；样式集中更便于修改；更改一处，其他使用此样式的网页也同步修改了。

3、内部样式表
放在HTML的<style>标签中，<style>标签一般放在<head>标签中。
也可以使用HTML的style属性在标签内直接定义样式，这种样式称为行内样式。

4、外部样式表
文件一般使用.css作为扩展名。一个网页的样式表可以根据用途分为多个文件，如公共样式表global.css，表单样式表form.css等。
外部样式表只包含CSS声明（属性、值），不包含<style>，因为<style>是HTML标签。
在HTML中引入外部样式表可以使用<link>标签或<style>标签。<link>标签的格式如下：

1	`<` `link` `rel` `=` `"stylesheet"` `type` `=` `"text/css"` `href` `=` `"css/global.css"` `/>`

其中：rel为链接类型，type为数据类型（文本文件，包含CSS），href为CSS文件的位置，即URL。
使用<style>标签，在内部使用CSS的import指令，格式如下：

 
         < 
         style 
         type 
         = 
         "text/css" 
         > 
        
 
         @import url(css/global.css); 
        
 
         </ 
         style 
         > 
        

在外部样式表中也可以使用import指令引入其他外部样式表文件。
内部样式表的样式一般放到引用外部样式表的后面。

5、检验CSS
W3C推出了在线检测检验的工具:http://jigsaw.w3.org/cssvalidaor/，Firefox的JavaScript控制台也有相应的提示，Html Validator插件也可用于检测。

6、清除高速缓存
浏览器会缓存网页图片、外部样式表文件等，如果编写外部样式表时样式不起作用，可能是浏览器缓存了相应的文件，清除方法如下：
在浏览器的设置中去掉缓存，或者在刷新时按Ctrl+鼠标点击刷新（Reload)按钮或使用快捷键（IE下为Ctrl+F5，Firefox为Ctrl+Shift+R）。

转载于:https://www.cnblogs.com/xchsp/archive/2013/03/18/2966150.html