CSS样式表在网页设计中的运用

多层模式表单(Cascading Style Sheet, CSS)是一种为超文本置标语言(HyperText Markup Language, HTML)提供增强补充服务的技术,可对每一个HTML的置标(tag)做精雕细刻的修饰。只用HTML制作的网页,对页面内各部分的修饰能力有限且语句烦锁,CSS正是弥补这一缺陷的有力技术,它语句、文法简单,只要在源码中插入STYLE语句就可轻易实现页面内任意文本颜色、背景、边框、行距、字距的添删和修饰等功能,使网页更加生动活泼,从而获得满意的效果。

---- CSS在HTML中以STYLE标识出现,其格式为:一对代表CSS 技术的STYLE置标,内放被修饰的HTML置标,置标的CSS属性放于紧随其后的一对大括号内,每个属性赋值用":",多个属性之间用";"隔开,例:

< style >
a{text-decoration:none; color:yellow}
a:hover{text-decoration:underline; color:purple}
p{font-size:20; background:red; color:blue}
< /style >


---- 将如上代码插入任一HTML文档后,刷新显示,则所有锚点变为普通字体,颜色为黄,但当鼠标移至其上时,则锚点的提示字符变为带下划线的紫色字体;整个文档中被置标P包围的文字将以红底蓝字、字体大小为20个象素的形式出现。如果其中某段文字需另加修饰,可以单独的的形式出现,例如

< p style="font-size:30; font-weight:bolder; background:white;color:blue" >

................

---- 则此段文字白底蓝字,30个象素大小,且字体加粗。随后是一个带有CSS技术的HTML文档的完整例子:

< html >
< head >
< title > 网页设计中如何使用CSS?webjx.com < /title >
< /head >
< body >
< style >
a{text-decoration:none; background:red; color:yellow}
a:hover{text-decoration:line-through; background:lime}
h1{text-align:center; font-weight:900;
border-style:ridge; border-width:medium; border-color:red}
p.first{font-size:15; font-face:楷体;
color:blue; border-style:dotted;
border-width:thin; border-color:blue}
p.second{font-size:20; word-spacing:10; background:aqua}
< /style >
< h1 > 带连框的题头1 < /h1 >
< a href=mailto:webmaster@webjx.com?subject=CSS >
鼠标移至此处, 背景变化
< /a >
< p > 未加CSS修饰的段落 < /p >
< p class=first > 指定CSS修饰的段落 < /p >
< p class=second > 指定另一种CSS修饰的段落 < /p >
< /body >
< /html >


---- 从上例的显示可以看出,CSS是HTML的一个补充,几乎可以对每一个HTML置标进行扩充,使网页充满活力,显示出更加完美的效果。

时间: 2024-11-02 03:01:13

CSS样式表在网页设计中的运用的相关文章

Dreamweaver使用CSS样式表设置网页文本格式

了解 CSS: 层叠样式表 (CSS) 是一系列格式设置规则,它们控制 Web 页面内容的外观.使用 CSS 设置页面格式时,内容与表现形式是相互分开的.页面内容(HTML 代码)位于自身的 HTML 文件中,而定义代码表现形式的 CSS 规则位于另一个文件(外部样式表)或 HTML 文档的另一部分(通常为 部分)中.使用 CSS 可以非常灵活并更好地控制页面的外观,从精确的布局定位到特定的字体和样式等. CSS 使您可以控制许多仅使用 HTML 无法控制的属性.例如,您可以为所选文本指定不同的

在Dreamweaver中利用CSS样式表设置网页

了解 CSS 层叠样式表 (CSS) 是一系列格式设置规则,它们控制 Web 页面内容的外观.使用 CSS 设置页面格式时,内容与表现形式是相互分开的.页面内容(HTML 代码)位于自身的 HTML 文件中,而定义代码表现形式的 CSS 规则位于另一个文件(外部样式表)或 HTML 文档的另一部分(通常为 部分)中.使用 CSS 可以非常灵活并更好地控制页面的外观,从精确的布局定位到特定的字体和样式等. CSS 使您可以控制许多仅使用 HTML 无法控制的属性.例如,您可以为所选文本指定不同的字

如何解决css样式表在不同浏览器中显示效果不同的问题

一种简单的办法就是采用:使用IE专用的条件注释 <!--其他浏览器 --> <link rel="stylesheet" type="text/css" href="css.css" /> <!--[if IE 7]> <!-- 适合于IE7 --> <link rel="stylesheet" type="text/css" href="ie

为什么CSS样式表在IIS中会失效?

最近发现我的css样式表在.net2.0中测试时发挥正常,但发布到IIS上后打开就会有问题,第一次打开页面后,样式表没有起作用,如果点页面中的链接返回到本页时就正常了.不知道为什么, google了下下,找到了若干原因,经过测试,原来是编码有问题,我直接拷贝过来的css与js文件,存储格式是ansi的,重新保存了一下后再次发布,成功了,哈哈...好久了噢,终于解决啦! 现附原文于下: 经常有人遇到ASP.NET 2.0(ASP.NET 1.x中可能是有效的)中CSS失效的问题,现将主要原因和解决

DreamWeaver设计网页之应用CSS样式表技巧两则

css|dreamweaver|技巧|设计|网页|样式表 一. 去除超级链接的下划线以及在超级链接上实现鼠标悬停变色: 在默认情况下,用DreamWeaver设计的网页中的超级链接都有下划线,看上去不大美观.要去除这些讨厌的下划线,很多报刊介绍的方法都是在HTML源代码中手工加入一段代码,其实在DreamWeave中很容易去除链接的下划线.首先在DreamWeaver的Document Windows中随便建立一个链接,你可以看到这个链接会有下划线.怎样去除这条下划线呢? 1.在点击菜单栏上的"

入门:在网页中使用CSS样式表的四种方法

css|网页|样式表 如何在网页中插入CSS 前面我们了解了CSS的语法,但要想在浏览器中显示出效果,就要让浏览器识别并调用.当浏览器读取样式表时,要依照文本格式来读,这里介绍四种在页面中插入样式表的方法:链入外部样式表.内部样式表.导入外表样式表和内嵌样式. 1. 链入外部样式表 链入外部样式表是把样式表保存为一个样式表文件,然后在页面中用< link >标记链接到这个样式表文件,这个标记必须放到页面的< head >区内,如下: <head> -- <link

网页新手:网页制作中如何管理CSS样式表

css|网页|样式表 学习WEB标准的朋友一般都是从学习CSS开始,为什么呢?因为CSS是一种很有意思的语言,它能让我们的网页千变万化.也许我们一开始的接触只是因为链接的样式修改,然后慢慢发现CSS的强大而又简单,于是我们用它来控制整个网页的布局.排版.色彩.图片等等工作.学习了CSS之后我们又会发现XHTML的结构更为重要,一个好的XHTML结构可以让CSS少费很多事.同时也会避免网页在不同浏览器之间的差异.于是又开始学习XHTML代码,并且不断的去摸索着XHTML的结构的特点.会写CSS了,

如何在网页中插入CSS样式表

  本例为CSS入门系列教程,在这一课中我们将学习如何在网页中插入CSS样式表,主要学习在页面中插入链入外部样式表.内部样式表.导入外表样式表和内嵌样式的四种方法,另外作者还讲解了多重样式表的叠加的运用以及如何在xml中插入CSS,希望能给对网页制作感兴趣的朋友带来帮助~~ CSS入门教程之如何在网页中插入CSS样式表 前面我们了解了CSS的语法,但要想在浏览器中显示出效果,就要让浏览器识别并调用.当浏览器读取样式表时,要依照文本格式来读,这里介绍四种在页面中插入样式表的方法:链入外部样式表.内

网页编辑中CSS样式表技巧总结_经验交流

一.关于注释 在创建xhtml+CSS网站时,CSS中的注释非常重要.在创建CSS样式时,应当保持随手注释的习惯.一般的,我习惯于使用"/* 注释内容 */"的格式来写注释,因为在EditPlus等具有高亮功能的编辑器里,使用C语言中常用的"/***************/"之类的注释是无意义的,没有必要填充大量无意义内容作为分隔.带有注释的文档作为网站的原始CSS文档,在发布网站的时候,可以使用CSS压缩工具压缩CSS,在输出的CSS中去掉注释以提高文件传输效率