基础CSS教程：网页设计入门资源-CSDN下载

需积分: 9 28 浏览量 2009-11-24 15:03:51 上传评论收藏 354KB DOC 举报

【CSS教程】 CSS，全称Cascading Style Sheets，是一种样式表语言，用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档的呈现。CSS控制网页的布局和外观，允许开发者将设计与内容分离，使网页设计更加灵活、可维护。 1、字体属性在CSS中，我们可以设定字体的大小、类型、风格和行高。例如，`font-family`用于设置字体系列，`font-size`用于设置字体大小，`font-weight`用于设置字体的粗细，`font-style`用于设置斜体，`line-height`则用于调整行间距。通过这些属性，可以创建出各种独特的文字效果。 2、颜色和背景属性颜色属性如`color`用于设置文本颜色，`background-color`用于设置元素的背景色。同时，还可以使用`background-image`添加背景图片，`background-repeat`控制图片的重复方式，`background-position`调整图片的位置，以及`background-attachment`决定背景图片是否随滚动条移动。 3、文本属性文本属性包括`text-align`用于设置文本的对齐方式，`text-decoration`用于添加下划线、上划线等装饰，`text-transform`可以控制文本的大小写形式。此外，`white-space`用于处理空白字符的显示，`word-spacing`和`letter-spacing`分别调整单词和字母间的间距。 4、“容器”属性容器属性涉及到元素的边距、填充和边框。`margin`用于设置元素四周的空白区域，`padding`设置元素内容与边框之间的距离，`border`则定义边框的样式、宽度和颜色。为了实现图文混排，可以利用`float`和`clear`属性控制元素的浮动和清除。 5、分级属性分级属性主要涉及元素的层次关系，如`z-index`控制元素的堆叠顺序，`position`（static、relative、absolute、fixed）定义元素的位置类型，`display`（block、inline、none等）用于切换元素的显示方式。 6、鼠标属性鼠标属性如`cursor`可以改变鼠标光标在元素上的形状，为用户提供视觉反馈。当用户悬停在元素上时，可以使用`:hover`伪类来更改样式。 7、动态转换和空间定位 CSS3引入了动态转换（Transform）和空间定位（Positioning）。动态转换允许元素进行旋转、缩放、平移和倾斜等操作，而空间定位如`translate()`, `rotate()`等方法则提供了更精确的元素定位控制。 CSS是一门强大的样式语言，它使得网页设计者能够创造出丰富多彩的视觉效果，提高用户体验。通过深入学习和实践，你可以掌握这些基础知识，打造出专业且美观的网页设计。

资源推荐

资源详情

资源评论

CSS 教程

Lw_zhao

2009-3-25

　　1、 字体属性......................................................................................................................6
　2、颜色和背景属性...............................................................................................................7
3、文本属性...............................................................................................................................9
　　※定义间距.................................................................................................................9
※装饰超链接...................................................................................................................10
4、“容器”属性 ........................................................................................................................11
　　※边距属性...............................................................................................................11
※填充距属性...................................................................................................................13
　※边框属性...................................................................................................................14
※图文混排.......................................................................................................................16
5、分级属性.............................................................................................................................17
　　6、鼠标属性.....................................................................................................................19
　　1.动态转换........................................................................................................................21
　2.空间定位............................................................................................................................22
　　1、概述.............................................................................................................................23
2、alpha 属性...........................................................................................................................24
　3、blur 属性..........................................................................................................................26
4、Chroma 属性.......................................................................................................................28
5、DropShadow 属性...............................................................................................................30
6、FlipH、FlipV 属性.............................................................................................................31
8、Glow 属性...........................................................................................................................32
7、Gray 属性............................................................................................................................34
9、Invert 属性...........................................................................................................................34
10、Mask 属性.........................................................................................................................35
11、Shadow 属性.....................................................................................................................36
12、Wave 属性.........................................................................................................................38
13、Xray 属性..........................................................................................................................40

　　 </div>

　　 </body>

　 </html>

　　上面的代码中以红色显示的是注释部分，用于帮助您更好的理解代码的含义。上

面的这一段代码产生的是如图 2 的效果。而其中字体的模糊效果就是运用了 CSS 的滤

镜功能。滤镜功能是 CSS 非常有趣也非常吸引人的一个功能，我们将在后面的章节中

介绍。

　　实际上 CSS 的代码都是由一些最基本的语句构成的。它的基本语句的结构是这样

的：

　　选择符{属性：属性值}

　　看，是不是很简单，只有三部分。

　　我们结合上面的代码来讲解，比如上面代码的<head>…</head>中，使用

　　一般说来，<style>下面的 CSS 语句是以注释语句的形式书写的，也就是上面代

码中的符号包含的部分。所以，上面的例子中定义页面样式的语句是：

　　div{width：200;$lter：blur(add=true,direction=35,strengh=20);}

　　在上面的语句中，DIV 是选择符，选择符可以是 HTML 中任何的标识符，比如

P、DIV、IMG 甚至 BODY 都可以作为选择符。

　　这里用 DIV 做选择符，就是说在 HTML 中，编辑在<DIV>中的页面格式将以上面

语句中大括号内定义的格式显示。

　　括号内的 WIDTH 和 FILTER 就是属性。

　　WIDTH 定义了 DIV 区域内的页面的宽度，200 是属性值。

　　FILTER 定义了滤镜属性，BLUR 是它的属性值，该属性值产生的是一种模糊效果，

其小括号内定义的是 BLUR 属性值的一些参数。

　　ADD 参数有两个值：True 和 False。分别指定图片是否被设置成模糊效果。

　　Direction 参数是用来设置模糊的方向。0 度代表垂直向上，然后每 45 度一个单

位，例子中的 135 代表底部向右 135 度，每一个度数单位都代表一个模糊方向，如果

您感兴趣的话，可以参照后面的讲解中详细的参数设定。

　　Strengh 代表有多少像素的宽度将受到模糊影响，参数值是用整数来设置的。

　　我们看到除了在<HEAD>中有 CSS 的定义，在<BODY>中也有一段 CSS 定义：

　　<p style=“font-size：48;font-style：bold;color：red;”>hongen</p>

　　这里 Style 是内嵌到<P>中来定义该段落内的格式的。我们发现在<BODY>中的

CSS 语句与定义在<HEAD>中还有些不同，它是用< STYLE = >直接定义的。这种

定义方法非常适用于编写的代码比较多的情况。

　　而上面的代码的 CSS 定义格式则非常适用于代码较少、结构较简单的情况。

　　按照 CSS 语句的基本格式，我们可以看出上面定义 P 段落内的 CSS 代码中 font-

size、font-style 和 color 是属性，分别定义<P>中“hongen”字体的大小(size)、样

式(style)和颜色(color)；

　　而 48、bold、red 是属性值。意思是“hongen”将以 48pt、粗体、红色的样式显

示。由于整个段落是定义在<DIV>中的，所以 hongen 又将显示出<head>中定义

的滤镜属性来。最终的结果就如同图 2 一样。

　　图 1 中的效果也是用很简单的 CSS 语句实现的，只是运用了 CSS 中的滤镜属性

而已。

　　通过上面的讲解，我们可以看到用很简单的 CSS 语句就可以实现许多需要专业软

件才可以达到的效果。利用属性可以设置字体、颜色、背景等页面格式；利用定位可

以使页面布局更加规范、好看；利用滤镜可以使页面产生多媒体效果。怎么样，CSS

的功能是不是很强大，在下面的教程中我们将对它进行详细的讲解。

二、怎样编写 CSS？



　　从上面的例子中，我们可以看到 CSS 的语句是内嵌在 HTML 文档内的。所以，编

写 CSS 的方法和编写 HTML 文档的方法是一样的。

　　您可以用任何一种文本编辑工具来编写。比如 Windows 下的记事本和写字板、

专门的 HTML 文本编辑工具（Frontpage、Ultraedit 等），都可以用来编辑 CSS 文

档。

　　那么您可能会问，独立编辑好的 CSS 文档怎样加入到 HTML 文档中呢？其实在第

一章中的例子里已经介绍了两种方法。

　　一种是把 CSS 文档放到<head>文档中：

　　其中<style>中的“type=‘text/css’”的意思是<style>中的代码是定义样式表单

的。

　　另一种方法是把 CSS 样式表写在 HTML 的行内，比如下面的代码：

　　这是采用<Style=“ ”>的格式把样式写在 html 中的任意行内，这样比较方便灵

活。　　还有一种方法是：把您编辑好的 CSS 文档保存成“.CSS”文件，然后在

<head>中定义。定义的格式是这样的：

　　我们看到这里应用了一个<Link>，“rel=stylesheet”指连接的元素是一个样式

表（stylesheet）文档。一般这里是不需要您改动的。

　　而后面的“href=‘style.css’”指的是需要连接的文件地址。您只需把编辑好的

“.CSS”文件的详细路径名写进去就可以了。这种方法非常适宜同时定义多个文档。它

能使多个文档同时使用相同的样式，从而减少了大量的冗余代码。

　　本章主要介绍了编写 CSS 的方法以及如何把作好的 CSS 文档与 HTML 结合起来

运用。您可以根据自己编写的 HTML 代码的结构、长度来选择用哪一种方法将 CSS 与

之结合。

　　下一章我们将进入 CSS 的具体知识的学习，我们将先从最基本的属性开始讲起。

剩余40页未读，继续阅读

评论收藏

内容反馈

lw_zhao

粉丝: 0

基础CSS教程：网页设计入门

css教程

css经典教程 css电子书

CSS教程(免费版).pdf

超详细CSS教程

css+div布局和css教程和css的api

非常经典的CSS教程

CSS 教程CSS 教程

CSS教程

html+css教程.rar

最经典的css 教程

CSS经典教程.pdf

洪恩css教程

CSS教程 CHM版

极速中文CSS教程（基础部分预览）.pdf

css教程，CSS编写

十天学会DIV CSS教程完整版完美整理 完整代码.pdf

DIV+CSS教程

无涯教程(LearnFk)-CSS教程离线版.pdf

docker笔记

幼儿园家长会PPT模板

最新资源

十天学会DIV CSS教程完整版完美整理完整代码.pdf