搜索
1CSS教程网页制作系列制作郑伟2一本优秀的杂志不仅仅是具备一套完整的结构内容、巧妙出奇的页面布局，还需要一个统一的风格，好的风格代表了一种高级的品味。优秀的网页制作也不再是漂亮的图形、优美的布局和完整的结构就能满足了，使网站整体保持一致的风格，例如字体字形的显示，页面边距等等，也是使网站作品有美感有品味的关键一步。层叠样式表为你完成这一任务。3通过大量的HTML语言实现，即每次遇上标题，用HTML标签进行设置：h1fontface=宋体color=blue这里是标题/font/h1显然你很容易就会为之头大如斗的，即使你有很好的耐心却难保挂一漏万，设置一多就会有所疏忽。――最后，对于公司建设的大型站点来说，往往分成几个组各自开发，这时候就更需要一个统一的样式表来规划网站的整体面貌，各个组都在遵循这统一的样式表的基础上进行各自的开发建设。4HTML语言由标志和属性构成，CSS也是如此。样式表基本语法：HTML标志{标志属性：属性值；标志属性：属性值；标志属性：属性值；……}样式表放在不同的地方，产生作用的范围也不同。大致来说，样式表分为内联样式表和外联样式表，即有页面内放置、外部引用、外部导入三种方式。51、内联样式表例如我们要设置一HTML页面中所有H1标题字显示为蓝色，其代码如下：HTMLHEADTITLEThisisaCSSsamples/TITLESTYLETYPE=text/css!--H1{color:blue}--/STYLE/HEADBODY...页面内容…/BODY/HTML1.样式表信息包括在style和/style标记中。2.放到HEAD和/HEAD中去。3.整个页面中产生作用，6注意，1.STYLE标记中包括了TYPE＝“text/css”，这是让浏览器知道你是使用CSS1样式规则。2.加入!--和--这一对注释标记是防止有些老式的浏览器不认识样式表规则，可以把该段代码忽略不计。7在使用样式表时，经常会有多标志用同一个属性比如：B{color:red}I{color:red}H1{color:red}用逗号分隔各个HTML标志，把三行代码合并成一行，我们可以写成：B,I,H1{color:red}同一个HTML标志，可能定义到多种属性，例如，我们规定把从H1到H6各级标题定义为红色黑体字，带下划线，则应写为：H1,H2,H3,H4,H5,H6{color:red;text-decoration:underline;font-family:黑体}注意各个标志属性之间用分号隔开。8内联样式表还包括一种直接插入方式，即单独指定HMTL页面中某一个标志，规定其风格样式，可以写为：Tablestyle=font-size:10pt;color:blue定义该表格内的字符大小为10pt，颜色为蓝色。92、外部样式表建立一个完全独立的文本文件，其扩展名为.css，文件内容则输入样式表信息，除去任何相关的HTML语言。例如在外部样式表中输入：body{line-height:130pt}H1,H2,H3,H4,H5,H6{color:red;text-decoration:underline;font-family:黑体}b{font-style:italic;color:#FF3333;text-decoration:underline}少了STYLE和注释标记。保存为example.css。10有两种办法可以实现引用外部样式表。（一）使用LINK标记链接外部样式表LINKREL=STYLESHEETHREF=example.cssHREF中应包含路径信息。一个HTML文档可引用多个外部样式表，例如：LINKREL=STYLESHEETHREF=example.cssLINKREL=STYLESHEETHREF=style/other.css首先链接的example.css作为该文档缺省样式表，当样式定义产生冲突时首先满足前者。11（二）使用@IMPORT导入样式表信息存在于在STYLE和/STYLE标记中例如：STYLETYPE=“text/css”@import“example.css”;@import“style/other.css”;/STYLE样式表产生作用的优先级按照导入的先后顺序来设定。样式表信息规则一多，就比较容易产生冲突。这时就看哪一个样式表被引用在前，它就是具有第一优先权的。12四、创建CLASS同一个HTML标志有多种风格时。应该创建类（CLASS），也可直接插入方式可以一一的对之进行定义，但繁琐。定义语法为：标志.类名{标志属性：属性值；标志属性：属性值；……标志属性：属性值}引用方法是：标志CLASS=类名13例如，我们打算让某一些段落缩进0.5in，另一些段落缩进1.0in，我们知道段落采用P这个标记。代码如下：htmlheadtitleThisisasample/titlestyletype=text/css!–p.first{text-indent:0.5in}p.second{text-indent:1.0in}--/style/headbodybgcolor=#FFFFFF……pclass=“first”这个段落将缩进0.5in/ppclass=“second这个段落将比上面缩进一倍距离/p……/body/html14可以直接定义CLASS，应用于HTML页面中的各个标记。其语法只是比上面的少了一个标志：.类名{标志属性：属性值；标志属性：属性值；……标志属性：属性值}例如：styletype=text/css!–.main01{font-size:10pt;color:blue}--/style引用的方法：HTML标志CLASS=类名例如设置某单元格中的字符大小：tdclass=main01设置某一段落字符：pclass=main0115用ID建立多种风格，实现同一规则被应用到页面中不同的地方。语法是：#id名{标志属性：属性值；标志属性：属性值；……标志属性：属性值}如上面的例子，可以改写为：styletype=text/css!--#001{font-size:10pt;color:red}#002{font-size:12pt;color:blue}--/style引用的方法也相同：标志ID＝ID名。16伪类和伪元素伪类和伪元素是特殊的类和元素，能自动地被支持CSS的浏览器所识别。伪类区别开不同种类的元素(例如，visitedlinks(已访问的连接)和activelinks(可激活连接)描述了两个定位锚(anchors)的类型)。伪元素指元素的一部分，例如段落的第一个字母。伪类或伪元素规则的形式如选择符:伪类{属性:值}或选择符:伪元素{属性:值}伪类和伪元素不应用HTML的CLASS属性来指定。一般的类可以与伪类和伪元素一起使用，如下:选择符.类:伪类{属性:值}或选择符.类:伪元素{属性:值}17定位锚伪类伪类可以指定A元素以不同的方式显示连接(links)、已访问连接(visitedlinks)和可激活连接(activelinks)。定位锚元素可给出伪类link、visited或active。A:link{color:red}A:active{color:blue;font-size:125%}A:visited{color:green;font-size:85%}首个字母伪元素首个字母伪元素用于加大(dropcaps)和其他效果P:first-letter{font-size:300%;float:left}18五、边框属性每一个网页都可以理解成是被一个方框框起来的，而页面中不同的部分又可以分为一个个小的方框。因此定义方框的边距、边界、颜色等的边框属性应用而生。1、边距属性：·左边距（margin-left）·右边距（margin-right）·上边距（margin-top）·下边距（margin-bottom）·边距（margin）边距属性定义HTML页面中方框四边和其他元素之间的空白距离，每一个margin-side属性只影响到一条边，而margin则提供了一个同时设置四个边距的机会。192、填充属性：·左填充（padding-left）·右填充（padding-right）·上填充（padding-top）·下填充（padding-bottom）·填充（padding）填充属性设置边框和内部元素的距离。它和边距属性十分相似，每个padding-side定义一个边框距离，padding则同时定义四个距离。203、边界属性（3.1边界宽度）·上边界宽（border-top-width）·右边界宽（border-right-width）·下边界宽（border-bottom-width）·左边界宽（border-left-width）·边界宽（border-width这几个属性定义边界宽度，用thin、medium和thick分别表示细、中等和粗，或者指定具体的数值来定义边界的宽度。213.2边界样式（border-style）该属性用以定义边框的风格呈现式样。共有九种。none－不显示边框，为缺省值dotted－点线dashed—虚线solid－实线double－双线groove－凹线ridge－凸线inset－使整个方框凸起outset－使整个方框凹陷·上边界（border-top）·右边界（border-right）·下边界（border-bottom）·左边界（border-left）·边界（border）这几个是简写属性，它集合了上面几种属性的特点，可使用其给边框一次性定义宽度、式样和颜色。各属性值之间用空格隔开。223.3边界颜色（border-color）这个属性定义边界的颜色，可以用16种颜色名或RGB值来设置。16种颜色名分别为：aqua,black,blue,fuchsia,gray,green,lime,maroon,navy,olive,purple,red,silver,teal,white,yellow。RGB值则应表示为#RRGGBB或r%,g%,b%。#rrggbb(如，#00cc00)rgb(x,x,x)x是一个介乎0到255之间的整数(如，rgb(0,204,0))rgb(y%,y%,y%)y是一个介乎0.0到100.0之间的整数(如，rgb(0%,80%,0%))233.4、尺寸属性定义方框的宽度width和高度height。例：DIV.sample{width:300px;height:200px}3.5、浮动和清除属性浮动属性是指某一对象在母体元素内的浮动位置，清除属性和浮动属性一起使用，则表示同一母体内的其他对象可以流到浮动对象的旁边。例：.float1{float:left;clear:right}假如这个样式定义在表格单元中的某个对象，则该对象将浮动在单元中的左边，而同一单元格中的其他对象在它右边的周围部分。imgid=“logo”src=“logo.gif”align=“right”-----#logo{float:right}24这里是一个比较完整的例子，把这个例子按样输入，建立一个HTML文件，看看它的显示样式：htmlheadtitleasample/titlestyle!--DIV.example{margin-left:20px;padding-top:50px;border:10pxredoutset;float:rightclear:none}/style/headbodydivclass=examplep这是一个关于边框属性的完整实例/pp看看它的显示风格/p/div/body/html