样式表全接触（1）
文章作者：风未起时 发布时间：2005-5-28 9:17:34
--------------------------------------------------------------------------------
现在，用ＦＲＯＮＴＰＡＧＥ制作网页简单得就象是用画笔在白纸上画图一样。但随着网站内容的不断丰富，网页上的图象、动画、字幕以及其他控件也不断增加，要实现这些元素在网页中的准确定位，就必须对这若干个元素分别调整，这一点恐怕只有那些对网页制作痴迷而执着的人才可能做到，这并不是正确的工具和灵活性就可以实现的。设想一下，打开一个文本文件，编辑几行字，就可以使整个Web站点得到改变。再设想一下，以在线的方式创建带有复杂图形、丰富字体字号等特殊效果的页面，大小只有10k。那么这样的效果如何实现呢？
1996年底的时候出现了一种叫做样式表（stylesheets）的技术。全称应该是级联样式表即Cascading Style Sheet的缩写，我们又常称这为风格样式单Style Sheet，顾名思义，是用来进行网页风格设计的。比如，我想让我的链接字未点击时是蓝的，当鼠标移上去后字变成红的且有下划线，这就是一种风格。通过设立样式表，我们可以统一地控制HMTL中各标志的显示属性。它将对布局、字体、颜、背景和其它文图效果实现更加精确的控制。只通过修改一个文件我们就可以改变页数不计的网页的外观和格式，保证在所有浏览器和平台之间的兼容性，拥有更少的编码、更少的页数和更快的下载速度。除了
能全面支持我们常用的大多数浏览器之外，CSS在实现其它承诺方面作得相当出。CSS在改变我们制作样式表的方法。它为大部分的网页创新奠定了基石。
一、样式表的作用
１、可以将格式和结构分离
HTML从来没打算控制网页的格式或外观。这种语言定义了网页的结构和个要素的功能，而让浏览器自己决定应该让各要素以何种模样显示。但是网页设计者要求的更多。所以当Netscape推出新的可以控制网页外观的HTML标签时，网页设计者无不欢呼雀跃。我们可以用<FONT FACE>、<I>包在<P>外边控制文章主体的外观等等。然后我们将所有东西都放入表格，用隐式GIF空格产生一个20象素的边距。一切都变得乱七八糟。编码变得越来越臃肿不堪，要想将什么内容迅速加到网页中变得越来越难。
串接样式表通过将定义结构的部分和定义格式的部分分离使我们能够对页面的布局施加更多的控制。HTML仍可以保持简单明了的初衷。CSS代码独立出来从另一角度控制页面外观。
２、可以以前所未有的能力控制页面的布局
<FONT SIZE>能使我们调整字号，表格标签帮助我们生成边
距，这都没错。但是，我们对HTML总体上的控制却很有限。我们不可能精确地生成80象素的高度，不可能控制行间距或字间距，我们不能在屏幕上精确定位图象的位置。但是现在，样式表使这一切都成为可能。而即将推出的新的CSS功能更令人兴奋。
３、可以制作出体积更小下载更快的网页
还有更好的消息：样式表只是简单的文本，就象HTML那样。它不需要图象，不需要执行程序，不需要插件，不需要流式。它就象HTML指令那样快。有了CSS之后，以前必须求助于GIF的事情现在通过CSS就可以实现。还有，正如我先前提到的，使用串接样式表可以减少表格标签及其它加大HTML体积的代码，减少图象用量从而减少文件尺寸。
４、可以更快更容易地维护及更新大量的网页
没有样式表时，如果我想更新整个站点中所有主体文本的字体，我必须一页一页地修改每张网页。即便站点用数据库提供服务，我仍然需要更新所有的模板，而且更新每一模板中每一个实例实例的<FONT FACE>。样式表的主旨就是将格式和结构分离。利于样式表，我可以将站点上所有的网页都指向单一的一个CSS文件，我只要修改CSS文件中某一行，那么整个站点都会随之发生变动。
５、浏览器将成为你更友好的界面
不象其它的的网络技术，样式表的代码有很好的兼容性，也就是说，如果用户丢失了某个插件时不会发生中断，或者使用老版本的浏览器时代码不会出现杂乱无章的情况。只要是可以识别串接样式表的浏览器就可以应用它。
二、样式表的语法
一个样式表由样式语法组成, 以告诉浏览器怎样去呈现一个文档. 有很多将样式语法加入到你的HTML文档中的方法, 但最简单的启动方法是使用HTML的STYLE组件.这个元素放置于文档的HEAD部分, 包含网页的样式规则。
１、选择符
每个规则的组成包括一个选择符--通常是一个HTML的元素, 例如BODY, P, 或EM和该选择符所接受的样式.有很多的属性可以用于定义一个元素. 每个属性带一个值, 共同地描述选择符应该如何呈现.样式规则组成如下:
选择符 { 属性: 值 }
单一选择符的复合样式声明应该用分号隔开:
选择符 { 属性1: 值1; 属性2: 值2 }
以下是一段定义了H1和H2元素的颜和字体大小属性:
<HEAD>
<TITLE>CSS例子</TITLE>
<STYLE TYPE="text/css">
ＥＭ { font-size: 150%; color: blue }
</STYLE>
</HEAD>
样式表全接触（2）
文章作者：风未起时 发布时间：2005-5-28 9:19:43
--------------------------------------------------------------------------------
２、类选择符
单一个选择符能有不同的CLASS(类)，因而允许同一元素有不同样式。例如，一个网页制作者也许希望视其语言而定，用不同的颜显示代码 :
code.html { color: #191970 }
code.css { color: #4b0082 }
以上的例子建立了两个类，css和html，供网页的CODE元素使用。CLASS属性是用来在网页中以指明元素的类，例如，<P CLASS=css>，每个选择符只允许有一个类。一个良好的习惯是在命名类的时候，根据它们的功能而不是根据它们的外观。上述例子中的css类也可以命名为effect。
３、ID 选择符
ID 选择符个别地定义每个元素的成分。这种选择符应该尽量少用，因为他具有一定的局限。一个ID选择符的指定要有指示符"#"在名字前面。例如，ID选择符可以指定如下:
<style type="text/css">
<!--
#first { color: green }
#second { color:teal }
-->
</style>
４、关联选择符
关联选择符只不过是一个用空格隔开的两个或更多的单一选择符组成的字符串。这些选择符可以指定一般属性，而且因为层叠顺序的规则，它们的优先权比单一的选择符大。例如， 以下的上下文选择符
P EM { background: yellow }，这个值表示段落中的强调文本会是黄背景；而标题的强调文本则不受影响。
５、伪类和伪元素
伪类和伪元素是特殊的类和元素，能自动地被支持CSS的浏览器所识别。伪类区别开不同种类的元素(例如，visited links(已访问的连接)和active links(可激活连接)描述了两个定位锚(anchors)的类型)。伪元素指元素的一部分，例如段落的第一个字母。
伪类或伪元素规则的形式如：选择符：伪类 { 属性: 值 }或选择符：伪元素 { 属性: 值 }
伪类和伪元素不用HTML的CLASS属性来指定。一般的类可以与伪类和伪元素一起使用，如下:
选择符.类: 伪类 { 属性: 值 }
或
选择符.类: 伪元素 { 属性: 值 }
６、定位锚伪类
伪类可以指定A元素以不同的方式显示连接(links)、已访问连接(visited links)和可激 活连接(active links)。定位锚元素可给出伪类link、visited或active。一个已访问连接可以定义为不同颜的显示，甚至不同字体大小和风格。一个有趣的效果是使当前(或"可激活")连接以不同颜、更大的字体显示。然后，当网页的已访问连接被重选时，又以不同颜、更小字体显示。这个样式表的示例如下:
A:link { color: red }
A:active { color: blue; font-size: 125% }
A:visited { color: green; font-size: 85% }
７、首行伪元素
通常在报纸上的文章，例如"据新华社报道"中的，文本的首行都会以粗印体而且全部大写地展示。CSS1包括了这个功能，
将其作为一个伪元素。首行伪元素可以用于任何块级元素(例如P、H1等等)。以下是一个首行伪元素的例子:
P:first-line {
三、样式表的属性
１、背景属性
对于背景颜和背景图片大家都比较熟悉，这里介绍两个比较有趣的背景图案属性background-attachment此属性有两个值：scroll 和 fixed;scroll是初始值，产生的效果是常见的背景图案随页面上的文字一起流动。fixed属性是指背景静止不动，文字在背景上流动的特殊效果，例如：body{background-attachment:fixed} 。background-position
此属性是设置背景图案的起始位置，可分别用百分比和长度值来设定，初始值为0和0，例如：body{background-position:50% 50%}
２、文本属性
这里介绍几个常用的文本属性："text-decoration ""text-aling""line-heigth""text-indent"。
text-decoration相信大家对这个属性都不会陌生，如我们常在网上看到的没有下划线的超链接，就是通过设置这个属性来实现的。其常用的属性值有４个，分别是：
属性值 说明
none 无
underline 下划线
overline 上划线
lineth-rough 删除线
有上面的属性值以后，我们就可以去掉超链接中的下划线了，设置如下：A:link{text-decoration:none}
text-align这个属性定义了文本的对齐方式，其作用与HTML中的"align"相似。其定义的对齐方式有四种，分别是：
left 左对齐
right 右对齐
center 居中
justify 两端对齐
line-height这个属性用来定义文本行高，即相邻的两行文字间的距离，此属性可用数字、长度、百分比来定义。例如：
body{line-heigth:1.5;font-size:10pt}
body{line-heigth:150%;font-size:10pt}
这两个定义产生的行高都是15pt；即行高属性值乘以字体大小。
text-indent此属性定义文本首行的缩进方式，也即是在用WORD软件时所见的首行缩进的效果；此属性值可以为负。例如：
P{text-indent:5em}
p{text-indent:-5em}
将上面任何一句加到HTML中，就可以看到效果了。
３、字体属性
字体属性是使用最多的，CSS的字体的常用属性包括：
font-family 匹配字体 BODY{font-family:Arial,Times,impact}
font-weight 字体精细 p{font-weight:bolder}设置字体为加粗
font-size 字体大小 body{font-size:10pt}
font-family 字形 p{font-family:italic}设置字体为斜体
其中的font-family的含义：首先寻字体的名称（Arial），如果在该计算机中安装了这种字体，就使用它。如果没有安
装，则移向下一种字体（Times），如果这种字体也没有安装，则移向第3种字体.你可以在列表中加入任何种字体名称。当你对一种字体在不同的操作平台上的名称没有把握时，这样做是一种好办法。另
外你也可以一次性的定义所有的属性。例如：
BODY{fotn-family：宋体，Arial;font-weight:bolder;fint-size:10pt;color:blue}
样式表全接触（3）
文章作者：风未起时 发布时间：2005-5-28 9:22:12
--------------------------------------------------------------------------------
四、样式表的定位
CSS定位的"positon"属性能够使用两种方法定位HTML元素：相对定位和绝对定位。所谓相对定位是指允许元素在相对于文档布局的原始位置上进行偏移；而绝对定位允许元素与原始的文档布局分离且任意定位。CSS的定位属性共有9个，分别是：
position、left、top、width、height、overflow、z-index和visibility position
positon的属性值有absolute、relative和static三个。当使用绝对定位元素absolute时，被定位元素是独立的，它与上下级元素都无关，完全独立于其他内容。当使用相对定位relative时，该元素对于上一级元素的位置进行布局定位；通过相对定位，使用脚本语言就能实现动画效果了。
left、top
CSS在格式化文档时，是将对象放置在一个个的容器里，再进行格式化；这个容器的左上角就是定位的参考点。left值就是容器的左上顶点到上级左边界的距离；"top"就是容器左上顶点到上级元素上边界的距离。
width、height
适用于绝对定位的元素，"width"和"height"定义了元素所占空间的大小。可用百分比或数字定义。 css鼠标点击样式
overflow
此属性定义了元素的内容超出容器的宽度和高度后，浏览器怎样处理。其属性值有四个，分别是：
visible：无论定义的width和height是多少，其超出部分都无条件显示。
hidden：超出定义的容器的宽度和高度部分将被剪切。
scroll：浏览器将提供一组滚屏工具。
auto：根据浏览器的不同而不同，通常会提供一组滚屏工具。
五、样式表的引入
了解了CSS的定义方式，下面将具体介绍如何在HTML中引入CSS的各种方法。
1、使用<LINK> 链接外部样式表单；例如：
<HEAD>
<TITLE>My Stylesheet</TITLE>
<LINK REL=stylesheet HREF="mystyles.css" TYPE="text/css">
</HEAD>
应用CSS文件的一个最大好处就是，你可以在每个HTML文件中引用这个文件，从而可使整个站点的HMTL文件在风格上保持一致，避免重复的CSS属性设置；另外，当你遇上改版或作某些重大调整要对风格进行修改时，可直接修改这个CSS文件，当然了，HTML文件一直引用最近更新的样式单，而不必每个每个HTML文件
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论