样 式 表 全 接 触(1)

现在,用FRONTPAGE制作网页简单得就象是用画笔在白纸上画图一样。但随着网站内容的不断丰富,网页上的图象、动画、字幕以及其他控件也不断增加,要实现这些元素在网页中的准确定位,就必须对这若干个元素分别调整,这一点恐怕只有那些对网页制作痴迷而执着的人才可能做到,这并不是正确的工具和灵活性就可以实现的。设想一下,打开一个文本文件,编辑几行字,就可以使整个Web站点得到改变。再设想一下,以在线的方式创建带有复杂图形、丰富字体字号等特殊效果的页面,大小只有10k。那么这样的效果如何实现呢?
  1996年底的时候出现了一种叫做样式表(stylesheets)的技术。全称应该是级联样式表即Cascading Style Sheet的缩写,我们又常称这为风格样式单Style Sheet,顾名思义,是用来进行网页风格设计的。比如,我想让我的链接字未点击时是蓝色的,当鼠标移上去后字变成红色的且有下划线,这就是一种风格。通过设立样式表,我们可以统一地控制HMTL中各标志的显示属性。它将对布局、字体、颜色、背景和其它文图效果实现更加精确的控制。只通过修改一个文件我们就可以改变页数不计的网页的外观和格式,保证在所有浏览器和平台之间的兼容性,拥有更少的编码、更少的页数和更快的下载速度。除了能全面支持我们常用的大多数浏览器之外,CSS在实现其它承诺方面作得相当出色。CSS在改变我们制作样式表的方法。它为大部分的网页创新奠定了基石。
一、样式表的作用

 1、可以将格式和结构分离

  HTML从来没打算控制网页的格式或外观。这种语言定义了网页的结构和个要素的功能,而让浏览器自己决定应该让各要素以何种模样显示。但是网页设计者要求的更多。所以当Netscape推出新的可以控制网页外观的HTML标签时,网页设计者无不欢呼雀跃。我们可以用<FONT FACE>、<I>包在<P>外边控制文章主体的外观等等。然后我们将所有东西都放入表格,用隐式GIF空格产生一个20象素的边距。一切都变得乱七八糟。编码变得越来越臃肿不堪,要想将什么内容迅速加到网页中变得越来越难。

  串接样式表通过将定义结构的部分和定义格式的部分分离使我们能够对页面的布局施加更多的控制。HTML仍可以保持简单明了的初衷。CSS代码独立出来从另一角度控制页面外观。

  2、可以以前所未有的能力控制页面的布局

  <FONT SIZE>能使我们调整字号,表格标签帮助我们生成边距,这都没错。但是,我们对HTML总体上的控制却很有限。我们不可能精确地生成80象素的高度,不可能控制行间距或字间距,我们不能在屏幕上精确定位图象的位置。但是现在,样式表使这一切都成为可能。而即将推出的新的CSS功能更令人兴奋。

  3、可以制作出体积更小下载更快的网页

  还有更好的消息:样式表只是简单的文本,就象HTML那样。它不需要图象,不需要执行程序,不需要插件,不需要流式。它就象HTML指令那样快。有了CSS之后,以前必须求助于GIF的事情现在通过CSS就可以实现。还有,正如我先前提到的,使用串接样式表可以减少表格标签及其它加大HTML体积的代码,减少图象用量从而减少文件尺寸。

  4、可以更快更容易地维护及更新大量的网页

  没有样式表时,如果我想更新整个站点中所有主体文本的字体,我必须一页一页地修改每张网页。即便站点用数据库提供服务,我仍然需要更新所有的模板,而且更新每一模板中每一个实例实例的<FONT FACE>。样式表的主旨就是将格式和结构分离。利于样式表,我可以将站点上所有的网页都指向单一的一个CSS文件,我只要修改CSS文件中某一行,那么整个站点都会随之发生变动。

  5、浏览器将成为你更友好的界面

  不象其它的的网络技术,样式表的代码有很好的兼容性,也就是说,如果用户丢失了某个插件时不会发生中断,或者使用老版本的浏览器时代码不会出现杂乱无章的情况。只要是可以识别串接样式表的浏览器就可以应用它。

二、样式表的语法

  一个样式表由样式语法组成, 以告诉浏览器怎样去呈现一个文档. 有很多将样式语法加入到你的HTML文档中的方法, 但最简单的启动方法是使用HTML的STYLE组件.这个元素放置于文档的HEAD部分, 包含网页的样式规则。

  1、选择符

  每个规则的组成包括一个选择符--通常是一个HTML的元素, 例如BODY, P, 或EM和该选择符所接受的样式.有很多的属性可以用于定义一个元素. 每个属性带一个值, 共同地描述选择符应该如何呈现.样式规则组成如下:

  选择符 { 属性: 值 }

  单一选择符的复合样式声明应该用分号隔开:

  选择符 { 属性1: 值1; 属性2: 值2 }

  以下是一段定义了H1和H2元素的颜色和字体大小属性:

  <HEAD>

  <TITLE>CSS例子</TITLE>

  <STYLE TYPE="text/css">

  EM { font-size: 150%; color: blue }

  </STYLE>

  </HEAD>

  上述的样式表告诉浏览器用1.5倍的蓝色字体去显示网页中强调的部分。

时间: 2024-10-16 05:06:42

样 式 表 全 接 触(1)的相关文章

样 式 表 全 接 触(6)

六.样式表滤镜的构成 滤镜作为样式表大家庭中的一员,它跟其他样式表元素的定义和应用方式当然是一样的,能够直接定义在HTML标识的<head>和</head>只间.样式表滤镜的基本语法为: 标记{FILTER:滤镜名(属性名1=属性值1,属性名2=属性值2,....):} 它所表达的意思是:在该标记范围内的内容,样式表滤镜将按照小括号内的属性名所限定的对象,按属性值所设定的数值进行特效处理.其中标记为HTML语法中的任意标记,如SPAN,P,BR等等:滤镜名就是我们下面所涉及到的14

样 式 表 全 接 触(5)

五.样式表的引入 了解了CSS的定义方式,下面将具体介绍如何在HTML中引入CSS的各种方法. 1.使用<LINK> 链接外部样式表单:例如: <HEAD> <TITLE>My Stylesheet</TITLE> <LINK REL=stylesheet HREF="mystyles.css" TYPE="text/css"> </HEAD> 应用CSS文件的一个最大好处就是,你可以在每个HT

样 式 表 全 接 触(4)

四.样式表的定位 CSS定位的"positon"属性能够使用两种方法定位HTML元素:相对定位和绝对定位.所谓相对定位是指允许元素在相对于文档布局的原始位置上进行偏移:而绝对定位允许元素与原始的文档布局分离且任意定位.CSS的定位属性共有9个,分别是: position.left.top.width.height.overflow.z-index和visibility position positon的属性值有absolute.relative和static三个.当使用绝对定位元素ab

样 式 表 全 接 触(8)

9.Shadow 滤镜 语法:{filter:shadow(color=属性值1,direction=属性值2):} 作用:该滤镜能够使对象产生一种阴影效果,其具体效果是由小括号中的各属性名及其对应的属性值来产生的. 参数:color属性是用来设置阴影的颜色. direction属性是用来设置投影的方向,取值范围为0度到360度,其中0度代表垂直向上,然后每45度为一个单位,该属性的默认值是向左的270度. 实例: <html> <head> <meta http-equiv

样 式 表 全 接 触(7)

八.滤镜的参数及其作用 1.Alpha 滤镜 语法:{FILTER:ALPHA(opacity=属性值1,finishopacity=属性值2,style=属性值3,startx=属性值4,starty=属性值5,finishx=属性值6,finishy=属性值7)} 作用:该滤镜能够使对象呈现渐变半透明效果,其效果是由小括号中的各属性名及其对应的属性值决定. 参数:Opacity 属性是设置不透明的程度,用百分比表示其属性值,大小是从0到100,0表是完全透明,100表示完全不透明. Fini

样 式 表 全 接 触(3)

 三.样式表的属性 1.背景属性 对于背景颜色和背景图片大家都比较熟悉,这里介绍两个比较有趣的背景图案属性background-attachment此属性有两个值:scroll 和 fixed;scroll是初始值,产生的效果是常见的背景图案随页面上的文字一起流动.fixed属性是指背景静止不动,文字在背景上流动的特殊效果,例如:body{background-attachment:fixed} .background-position 此属性是设置背景图案的起始位置,可分别用百分比和长度值来设

样 式 表 全 接 触(2)

2.类选择符 单一个选择符能有不同的CLASS(类),因而允许同一元素有不同样式.例如,一个网页制作者也许希望视其语言而定,用不同的颜色显示代码 : code.html { color: #191970 } code.css { color: #4b0082 } 以上的例子建立了两个类,css和html,供网页的CODE元素使用.CLASS属性是用来在网页中以指明元素的类,例如,<P CLASS=css>,每个选择符只允许有一个类.一个良好的习惯是在命名类的时候,根据它们的功能而不是根据它们的

java-数据结构的问题,反转链式表

问题描述 数据结构的问题,反转链式表 如下 class Node{ int value; Node next; } Node change(Node head){ } 需要让change()函数实现链式表的反转,head为第一个Node,后面可能有多个Node, 比如A->B->C变成C->B->A,结果返回C,要求使用java代码写出来,能够正常运行 解决方案 //翻转链表的测试类,功能我就不说了,很明显的... public class myTest { public stat

关于javascript正则式表单验证,求大神

问题描述 关于javascript正则式表单验证,求大神 下面的函数组完全不起任何作用啊,随意输入都能跳转2.html,求大神们帮看看问题出在哪里. 解决方案 问题出在: <input type="submit" value="注册">,这种写法不管onsubmit函数返true/false,都会提交表单. 推荐解决方案: <input type="button" value="注册" onclick=&qu