强烈推荐:非常不错的样式表CSS教程(1)

2008-02-23 08:42:48来源:互联网 阅读 ()

新老客户大回馈,云服务器低至5折

本文是一篇关于CSS的应用概述,并提供了一些示例来演示CSS是如何工作的,以便于你更加有效的学习CSS。

本文并不是参考或者兼容性指南一类的文章(尽管其中有一些非常好的参考和兼容性注解的链接)。如果你已经习惯了使用CSS,并想学到更多样式表的知识,我们保证你会在本文中能够找到一些非常有用的信息:)。

层叠样式表通常被理解为实现“内容”和“风格”分开的手段。其实这种说法并不完全正确,因为根据你对“风格”和“内容”的定义不同,层叠样式表的作用也不尽相同。

HTML定义了文档的结构,同时将正文和图像及其他资料通过标记(tags)组织到一起。而CSS并不能影响文档的结构组成。

层叠样式表(CSS)所做的是定义这些元素以什么样的版式、什么样的颜色、间距……显示到页面当中,它还可以影响页面内容的布局,却不可能改变页面的结构。CSS只能在有限的限度内应用于元素(不是万能的),而文档元素的结构还是要通过标记语言HTML来定义。

所有的HTML标记(Tags)都有各自默认的样式(style).也就是说,浏览器会按照一定的基本规则来解释和显示每一个标记中的内容,但是我们通过内联样式(inline style)就可以优先于浏览器的默认样式来控制内容的显示样式。浏览器默认的样式表优先权最低。内联样式示例如下:

<p style="float:right;margin-left:1em;width:50%">Some text.</p>

内联样式影响的仅仅是某些特定的标记,如上面示例当中的<P>...</P>。而层叠样式表却提供了应用于所有给定标记样式或者特定子集合样式的途经。

CSS允许你设置与内容文档分离的“批量”样式表文档,和样式内嵌(inline style)至HTML代码当中的方法不同,这就是样式表使“内容”和“样式”分离说法的由来。同时,层叠样式表文档可以让更多的内容文档共享使用。

每一个样式表都是一系列的样式规则的集合。可以在内容文档的<HEAD>...</HEAD>之间使用STYLE标记来定义,示例如下:

或者象调用JavaScript脚本文件那样通过URL链接到外部样式表文件,外联样式表利用 LINK 标记来设置,位置在内容文件的<HEAD>...</HEAD>内,示例如下:

<link href="url" rel="stylesheet" type="text/css">

注:在WEB站点内共享一个公共样式表是非常有用的,只要修改公共样式表,就能够影响所有调用该样式表的内容文档。

在同一文档内可以设置多个内联样式(inline style)和外联样式(link),但是具体文档显示时浏览器要根据那些样式的顺序来确定使用什么样式。(顺序非常重要)

定义样式规则

CSS规则设置由下面所示的语句组成:

selector { property : value }

selector {
property : value;
property : value;
property : value;
...
}

"Selector"定义了什么元素将要被样式规则所影响。紧接下来是声明区,由大括号"{","}"包围。内部由若干个声明(声明个数大于等于零>=0)组成。每一声明之间由分号“”隔开。

每个声明由“属性(property)”和具体的一个“值(value)”组成,他们之间通过冒号连接。“属性”是一个标识符,例如字体大小“font-size”,背景色“background-color”...等等。"值"的多少要控制在标识符属性值的范围内。

空白处以及分行形式来显示主要是为了阅读方便,空白处可以加入“注解”文字,示例如下:

注解包含在/ *和* /内,同JavaScript、C程序设计语言的注释写法一样。

最简单的形式由标记名称组成,不同的标记样式规则相同时可以通过逗号“

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:技巧:解决密码框和文本框长度不一致的问题

下一篇:强烈推荐:非常不错的样式表CSS教程(4)