学习网址:http://www.w3school.com.cn/css/css_syntax.asp
CSS Cascading Style Sheets(层叠样式表单),HTML的辅助设计规范,用来弥补HTML在排版上的所受的限制导致的不足。
CSS对WEB程序员不太重要,它应该是网页设计员应掌握的技能。CSS同样可使网页达到好的动态效果,下面简要介绍一下:
CSS是Cascading StyleSheets(层叠样式表单)的简称。更多的人把它称作样式表。顾名思义,它是一种设计网页样式的工具。
图2
看到上面的图片,可能会认为这是用photoshop或者是其他图形处理软件制作的。可是上面的例子却完全是用CSS编写的。我们来看一下它的源代码:
<html>
<head>
<title>css word</title>
<style>//*CSS样式定义开始*//
<!--
div {width:200; filter:blur(add=true,direction=135,strengh=20);}
//*定义DIV范围内的样式,包括宽度(width)、模糊滤镜属性(blur)*//
-->
</style>//*样式定义结束*//
</head>
<body>
<div>//*以下的区域内采用<head>中<style>里面定义的格式*//
<p style="font-size:48;font-style:bold; color:red;">hongen</p>
//*定义字体样式(font-style),包括字体大小(size)、粗细(bold)、颜色(color)*//
</div>
</body>
</html>
上面的这一段代码产生的是如图2的效果。而其中字体的模糊效果就是运用了CSS的滤镜功能。
CSS的代码都是由一些最基本的语句构成的。它的基本语句的结构是这样的:
选择符{属性:属性值} 三部分。
我们结合上面的代码来讲解,比如上面代码的<head>…</head>中,使用<style>来指定样式。
一般说来,<style>下面的CSS语句是以注释语句的形式书写的(以免某些浏览器不识别),也就是上面代码中的<!-- … -->符号包含的部分。所以,上面的例子中定义页面样式的语句是:
div{width:200; filter:blur(add=true,direction=35,strengh=20);}
在上面的语句中,div是选择符,选择符可以是HTML中任何的标识符,比如P、div、img都可以作为选择符。
这里用div做选择符,就是说在HTML中,编辑在<div>中的页面格式将以上面语句中大括号内定义的格式显示。
括号内的width和filter就是属性。
WIDTH定义了div区域内的页面的宽度,200是属性值。
FILTER定义了滤镜属性,blue是它的属性值,该属性值产生的是一种模糊效果,其小括号内定义的是blue属性值的一些参数。
从上面的例子中,我们可以看到CSS的语句是内嵌在HTML文档内的。所以,编写CSS的方法和编写HTML文档的方法是一样的,可以用任何一种文本编辑工具来编写,常用的CSS在网页制作工具中可以设置出来。
独立编辑好的CSS文档怎样加入到HTML文档中呢?有以下方法。
一种是把CSS文档放到<head>。。。。。</head>中:
<style type=“text/css”> ……</style>
其中<style>中的“type=‘text/css’”的意思是<style>中的代码是定义样式表单的。
另一种方法是把CSS样式表写在HTML的行内,比如下面的代码:
<p style=“font-size:14pt;color:blue”>蓝色14号文字</p>
这是采用<Style=“ ”>的格式把样式写在html中的任意行内,这样比较方便灵活。
上面两种方法叫内部CSS。
还有一种方法是外部CSS:把编辑好的CSS文档保存成“.CSS”文件,然后在<head>中定义。定义的格式是这样的:
<head> <link rel=stylesheethref=“style.css”> …… </head>
我们看到这里应用了一个<Link>,“rel=stylesheet”指连接的元素是一个样式表(stylesheet)文档。一般这里是不需要改动的。
而后面的“href=‘style.css’”指的是需要连接的文件地址。只需把编辑好的“.CSS”文件的详细路径名写进去就可以了。这种方法非常适宜同时定义多个文档。它能使多个文档同时使用相同的样式,从而减少了大量的冗余代码。
样式层次表可以格式化整篇HTML文档,当一个网站有大量HTML文档,需要统一格式化时,用CSS特别方便。