以文本方式查看主题 - 肿瘤咨询在线论坛 (http://www.chinaonco.net/dvbbs/index.asp) -- 『 电脑网络 』 (http://www.chinaonco.net/dvbbs/list.asp?boardid=55) ---- CSS快速入门 (http://www.chinaonco.net/dvbbs/dispbbs.asp?boardid=55&id=5433) |
-- 作者:web -- 发布时间:2005-9-27 12:25:02 -- CSS快速入门 CSS快速入门
CSS是Cascading Style Sheets(层叠样式表单)的简称。更多的人把它称作样式表。顾名思义,它是一种设计网页样式的工具。借助CSS的强大功能,网页将在您丰富的想象力下千变万化。 看到上面的两幅图片,您可能会认为这是用photoshop或者是其他图形处理软件制作的吧。可是上面的例子却完全是用CSS编写的。我们来看一下它的源代码(不要以为讲代码您会搞不懂,很简单的^_^): <html> 上面的代码中以红色显示的是注释部分,用于帮助您更好的理解代码的含义。上面的这一段代码产生的是如图2的效果。而其中字体的模糊效果就是运用了CSS的滤镜功能。滤镜功能是CSS非常有趣也非常吸引人的一个功能,我们将在后面的章节中介绍。 实际上CSS的代码都是由一些最基本的语句构成的。它的基本语句的结构是这样的: 我们结合上面的代码来讲解,比如上面代码的<head>…</head>中,使用<style>来指定样式。 我们看到除了在<HEAD>中有CSS 的定义,在<BODY>中也有一段CSS定义: 通过上面的讲解,我们可以看到用很简单的CSS语句就可以实现许多需要专业软件才可以达到的效果。利用属性可以设置字体、颜色、背景等页面格式;利用定位可以使页面布局更加规范、好看;利用滤镜可以使页面产生多媒体效果。 怎么样,CSS的功能是不是很强大,在下面的教程中我们将对它进行详细的讲解。 |
-- 作者:web -- 发布时间:2005-9-27 12:26:11 -- 怎样编写CSS?
从上面的例子中,我们可以看到CSS的语句是内嵌在HTML文档内的。所以,编写CSS的方法和编写HTML文档的方法是一样的。 本章主要介绍了编写CSS的方法以及如何把作好的CSS文档与HTML结合起来运用。您可以根据自己编写的HTML代码的结构、长度来选择用哪一种方法将CSS与之结合。 |
-- 作者:web -- 发布时间:2005-9-27 12:27:06 -- 三、CSS属性
从CSS的基本语句就可以看出,属性是CSS非常重要的部分。熟练掌握了CSS的各种属性将会是您编辑页面更加得心应手。下面我们就借助一些实例来讲解。 1、 字体属性 这是最基本的属性,您经常都会用到。它主要包括以下这些属性: 光看表格是不是有些难懂,不要紧,我们来看一个用表格中的属性定义的字体样式(如下图):
第一行只是采用了“font-family”属性,代码是这样的: 这段代码定义了“leaf”的字体为GlitzyCurl,并且是斜体、小体大写、粗体、36号字。这段代码等同于: 其实我们习惯上还是不用FONT属性来统一定义,因为分开来定义的代码虽然很长,但是看上去很直观,让人一看就知道定义的内容是什么。 |
-- 作者:web -- 发布时间:2005-9-27 12:27:37 -- 三、CSS属性
2、颜色和背景属性 您总不希望自己的页面处于黑白世界吧。如果给用<font>属性定义的文本添上颜色是不是会更好呢? 下面我们就讲一下CSS的颜色和背景属性。先来看一下CSS下的颜色和背景都有哪些属性吧(如下表): 我们还是举个例子吧。比如上一节讲到的“LEAF”字体,我们在其中加入颜色属性,在<style>再加入以下代码: //*设置前景色的rgb值为(204,82,28),您也可以用颜色的英文名称直接定义; 加入代码后“Leaf”的字体显示效果是这样的(如下图): 怎么样,是不是比光是定义<font>属性显得更加漂亮了。当然您也可以简便的定义background属性(象定义font属性那样),下面我告诉一下您background属性的书写格式: 属性:background 属性值:<background-color>||<background-image>|| <background-repeat>||<background-attacement>||<background-position> 也就是说,使用background属性可以一次定义前面讲到的一切有关背景的属性,包括背景色、背景图案等等。因此,上面定义“leaf”颜色属性中有关背景的代码可以写成这样: “background:url(ss01038.jpg)no-reapeat” 好了,至于颜色和背景属性的功能,您自己也可以去试一试。下一节我们将介绍CSS的文本属性。 |
-- 作者:web -- 发布时间:2005-9-27 12:27:58 -- 三、CSS属性
3、文本属性 ※定义间距 前面说了如何用CSS定义字体、颜色和背景属性,那么定义好的文本我们怎么对它进行排版呢? 下面我们讲述一下CSS的文本属性,还是先来看一下文本属性的详细列表: 我们可以从表中看到在这里可以定义文本的文字间距、字母间距、装饰、对齐方式、缩进方式和行高等属性。 举个例子来看看吧。比如下面这段文字(如左下图):
我们对这段文字加上文本属性重新排版,排版后的效果如右上图所示。 <p style=“letter-spacing:1em;text-align:justify;text-indent: //*letter-spacing设置了字间距为1em,其中1em为一个长度单位;text-align设 从上面的例子,我们可以看出利用CSS的文本属性可以方便的对页面中的文本进行排版。下一节我将向您介绍文本的Text-decoration属性的一个小应用。 |
-- 作者:web -- 发布时间:2005-9-27 12:28:18 -- 三、CSS属性
※装饰超链接 网页默认的链接方式是这样的:未访问过的链接是蓝色文字并带蓝色的下划线,访问过的超级链接是深紫色的文字并带深紫色的下划线。如果您所有的网页都是这种样式,是不是很单调呢? 其实,利用文本属性中的Text-decoration属性就可以实现对超链接的修饰。我们先看下面的这段代码: <html> 您如果想看上述代码的效果,请点击这里。 我们从例子中看到没有访问过的链接以绿色显示,并且去掉了下划线;而访问过的链接以红色且没有下划线显示;另外,当鼠标激活链接时,链接以蓝色显示,并且加上了上划线。这种效果是怎么实现的呢?它除了运用了文本属性中的text-decoration属性,而且采用了伪类元素。 怎么样,是不是很简单的就可以实现动态链接的效果,赶紧自己动手试一试吧!下一节我将向您介绍“容器”属性。 |
-- 作者:web -- 发布时间:2005-9-27 12:28:54 -- 三、CSS属性
4、“容器”属性 ※边距属性 听起来是不是很有趣,什么叫“容器”属性呢?CSS的容器属性包括边距、填充距、边框和宽度、高度、浮动、清除等属性。 和font属性一样,表中的四个属性可以用一个属性一次。边距顺序是上、右、下、左。我们还是用定义边距属性前后的两个例子来看一下吧。请看下面的这幅图: 我们看到上图是没有加上边距属性的效果,而下图则在<head>中加入了如下代码: body{margin:1em 2em 3em 4em} 产生的效果如下图所示: 定义了边距后的页面,无论您怎么改变窗口的大小,它都会按照您定义好的边距样式显示。 如果在margin里有缺失的属性,则按照顺序依次排列。比如: body{margin:1em 3em} 上面这段代码的含义是:body的上、右边距为1、3em。 |
-- 作者:web -- 发布时间:2005-9-27 12:29:19 -- 三、CSS属性
※填充距属性 本节我将向您介绍填充距属性。我们先来看一下填充距的属性列表: 首先我们得先了解什么叫填充距,它与边距有什么差别呢?填充距指的是文本边框与文本之间的距离。 我们看到上图中红框圈住的地方就是填充距起作用的部分。实际上上图的效果只是在上一节例子的<head>中把下面这段代码加入到Body定义的margin后面: padding:1em 2em 3em 4em 从上可以看出,红框标记外的部分属于margin属性在起作用。 |
-- 作者:web -- 发布时间:2005-9-27 12:29:40 -- 三、CSS属性
※边框属性 本节我们来看一下种类繁多的边框属性,先来看一下属性列表: 是不是看上去很多,其实应用起来很方便。 这就是在<head>中定义<p>的属性,代码如下: P{border:5px double purple}//*定义了四条边框为一样的值*// 您还可以找一段文本自己多尝试一下其他的边框属性,看看还有什么效果。下一节将向您介绍一下“容器”属性的其他属性,您将能欣赏到图文混排的效果。 |
-- 作者:web -- 发布时间:2005-9-27 12:29:59 -- 三、CSS属性
※图文混排 我们在来看看“容器”属性还有什么其他的属性,请看属性列表: 上表中的float属性很有意思,我们看看用它作的一个页面效果(如下图): 您是不是以为在图片那里插入了一个表格才实现这种图文混排的效果的呢? <html> 怎么样,不用表格也能实现图文混排的效果,并且减少了大量的代码。您还可以试试float的其他效果。 |