| 首页 | 视觉资讯 | 平面视觉 | 环艺设计 | CG视觉 | 设计教程 | 人物 |
视觉资讯
设计资讯 网络媒体 设计征集 书刊
平面视觉
画册 包装 VI 招贴 标志 创意 文案 理论
环艺设计
建筑设计 室内设计 景观设计 家装设计
CG视觉
插画 3D视觉 动漫
设计教程
平面教程 网页教程 多媒体教程
人物
设计师 设计公司 人物访谈
您现在的位置: 第一视觉 >> 设计教程 >> 网页教程 >> CSS教程 >> 正文
实用的样式表CSS教程
作者:佚名 | 文章来源:网页教学网 | 时间:2007-6-11 【字体:

本文是一篇关于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程序设计语言的注释写法一样。

最简单的形式由标记名称组成,不同的标记样式规则相同时可以通过逗号“”连接合并到一起说明,示例:

上面的样式说明合并到一起,写法如下:

这种定义称为“群组”定义。注意同一标记可以再次设置,次数不限,例:

HTML标识名是不区分大小写的,所以“H1”等价于“h1”,但是语法更加严格的XHTML中,标识名必须小写,所以最好有一个良好的书写习惯,建议在书写你的样式表时使用小写字母。

Selectors并不仅仅局限于标识名,事实上,有多种匹配模式可以定义元素的样式,甚至利用元素的属性来定义。

Internet Explorer现在还不能支持所有的selector的匹配模式。建议使用Netscape或者Opera来测试下面的演示。

列表中例举了Selectors不同的匹配模式和解释以及在线演示的示例链接。

模式 说明 演示
E 标准的selector、标识名E相配元素E
E F Descendant selector, 如果E标记包含F时,匹配F
E>F Child selector 、如果F是E的子标记,则匹配F
E+F Adjacent selector、如果E和F有相同的parent父标识同时F紧临着E,则匹配F

注意:其中" parent "、" child "、" descendant "、" adjacent "这些名词涉及到文档内部的标记分级关系结构。举例来说明:

 

  • H3标记和P标记是DIV标记的children子标记。
  • H3、PI标记都是DIV标记的descendants后代
  • H3P 标记的父标记是DIV
  • I标记是Pchildren子标记,它的parent标记是P
  • I标记不是DIV标记的children子标记,它是DIV标记的grandchild标记或descendants标记
  • DIV标记是H3PIancestor源标记
  • H3P标记是adjacent相邻关系

Selector中还可以使用通用匹配符“*”:

将任何紧接着H2的任何元素显示为红色

[1] [2] [3] [4] 下一页

  • 上一篇文章:

  • 下一篇文章:
  • 相关文章
    网页CSS实用教程
    版权申明:
       转载请不要修改任何文字图片链接信息。如需使用本站作品,请与原作者联系,版权归原作者所有。
       第一视觉(www.vision1.cn)依法保护知识产权,如果我们的文章有涉及或侵犯您的有关权益,请联系我站编辑人员,注明网址及文章,我们会即时处理或删除!
    最新热门文章
    普通文章实用的样式表CSS教程
    普通文章如何去掉超链接的下划线
    关于我们 | 联系我们 | 版权声明 | 免责声明 | 网站地图
    版权所有 © 2006-2007 第一视觉(Vision1.cn)
    Copyright © 2006-2007 Vision1.cn All rights reserved