CSS技术使网页设计如鱼得水

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" >

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

  < /p >

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

  < html >

  < head >

  < title > 如何使用CSS < /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:wow20000@hotmail.com?subject=CSS >

  鼠标移至此处, 背景变化

  < /a >

  < p > 未加CSS修饰的段落 < /p >

  < p class=first > 指定CSS修饰的段落 < /p >

  < p class=second > 指定另一种CSS修饰的段落 < /p >

  < /body >

  < /html >

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

时间: 2024-11-05 14:47:29

CSS技术使网页设计如鱼得水的相关文章

CSS技术在网页设计中的运用实例解析

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

CSS技术在网页设计中的运用

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

CSS技巧:网页设计关于cellspacing和cellpadding

css|技巧|设计|网页|网页设计 表格的cellpadding和cellpadding我们经常会用如下的方式来清除默认样式:<table cellspacing="0" cellpadding="0"></table>很多朋友会说表现在结构中,这样不符合标准,那如何将这个表现拿出来,有些朋友或许很迷惑.我们可以用table的border-collapse: collapse;属性 来代替cellspacing="0",用

使用框架和滑动门技术进行网页设计

以前看过一些类似的文章,但这些文章文字在理论上阐述得比较多,没有从技术角度来分析和实现滑动门效果,前段时间心血来潮对此作了一番专门的研究,这里就把我的所得奉献给大家. 一.什么是滑动门技术? 导航按钮 如上图,简单地说,滑动门技术就是:当点击页面上的导航按钮后这个导航按钮的CSS特性发生变化,从而区别于该组的其他导航按钮,提示给操作者,当前浏览的内容就是这个CSS特性发生变化的按钮所指向的内容.这种效果的一大好处在于,在多导航的页面上能够清晰地反映当前浏览内容隶属于哪个栏目或者哪个类,同时给人以

9点会使网页设计效果大打折扣

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 一个好的网页设计,不仅吸引眼球,也能够保持用户的兴趣.字体.色彩.空白与内容间的完美结合可以构成一个很好看的设计,增加用户粘性;而一个坏的网页设计,也会让用户从你的网站里跑掉. 1.没有足够的空白 空白可以说是设计中最重要的一部分.它可以防止用户在浏览网站时变得疲惫,它可以在内容中划出距离.空白不是必须用白色的,它仅仅是为其他设计元素提供间隔

如何用CSS实现大背景网页设计

自从我发布了大背景网页设计合集之后,我收到了很多电子邮件询问如何用css实现大背景的网页设计.因此我决定和大家分享大背景网站的设计技巧.在此教程中,我会用一些实例来说明如何用一张或者两张图片实现大背景网站的设计. 经常会犯的错误:背景被裁减(查看示例) 查看示例文件,在小于1280分辨率时,是没有问题的.但是如果你的显示器的分辨率大于1280像素,你会看到背景图片以外的部分. 实例1:一张图片(查看示例) 简单的解决问题的方法:将图片边缘的颜色设置成和网页背景色相同的颜色.这里我用Web Des

使用html表格和CSS进行混合网页设计

最近一篇关于桢(Frames)的文章让我开始考虑网页设计的当前状态.不久前公布了许多的网页标准.使用CSS以及XHTML开发网页程序的优点正日益得到人们的称颂,但仍有许多 的开发者团体更依赖于使用HTML表格来控制页面的输出.让我们来考虑一下使用HTML表格和使用CSS方法的各自优点. 老方法未必不好 当我刚开始进行网页设计时,我吃惊于HTML表格的强大和弹性.它们可以被无穷嵌套以达到预期的设计效果,而原先空白表格无法在浏览器中正确显示的问题则可以通过空白GIF图 片予以修正.但是HTML和表格

推荐 10 款 CSS 框架,网页设计就是这么简单

程序开发人员和网页设计人员掐架的事情常有听说,程序员们总是为自己设计不出来漂亮的网页而纠结.不再郁闷,因为开源帮了你,下面为你介绍11款相当不错的CSS框架,专心做程序吧,网页设计交给开源帮你. CSS网页布局框架 Elastic Elastic 是一个简单的 CSS 框架用来对网页进行布局.Elastic 可实现各种各样常见的网页布局,如下图所示: (X)HTML/CSS 框架 ThinkCSS TC ("ThinkCSS") 是一个 (X)HTML/CSS 框架 ,它的目的是减少你

CSS网页设计实例:设计制作大背景网页

网页制作Webjx文章简介:如何用CSS实现大背景网页设计. 自从我发布了大背景网页设计合集之后,我收到了很多电子邮件询问如何用css实现大背景的网页设计.因此我决定和大家分享大背景网站的设计技巧.在此教程中,我会用一些实例来说明如何用一张或者两张图片实现大背景网站的设计. 经常会犯的错误:背景被裁减(查看示例) 查看示例文件,在小于1280分辨率时,是没有问题的.但是如果你的显示器的分辨率大于1280像素,你会看到背景图片以外的部分. 实例1:一张图片(查看示例) 简单的解决问题的方法:将图片