经典css教程（适合初学者）资源-CSDN文库

5星 · 超过95%的资源需积分: 9 65 浏览量 2013-09-05 11:20:18 上传评论收藏 548KB PDF 举报

资源推荐

资源详情

资源评论

CSS 快速入门

CSS 是 Cascading Style Sheets （层叠样式表单）的简称。更多的人把它称作样式

表。顾名思义，它是一种设计网页样式的工具。借助 CSS 的强大功能，网页将在您丰富

的想象力下千变万化。

图 1 图 2

看到上面的两幅图片，您可能会认为这是用 photoshop 或者是其他图形处理软件制

作的吧。可是上面的例子却完全是用 CSS 编写的。我们来看一下它的源代码（不要以为

讲代码您会搞不懂，很简单的 ^_^

）：

<html>

<head>

<!--

div

{width ： 200; filter

blur(add=true,direction=135,strengh=20);

} //* 定义 DIV 范围内的样式，包括宽度 (width)

、模糊滤镜属性

(blur) *//

-->

</style> //* 样式定义结束 *//

</head>

<body>

<div> //* 以下的区域内采用 <head> 中 <style> 里面定义的格式 *//

<p style="font-size ： 48;font-style ： bold;

color:red;">hongen </p>

//* 定义字体样式 (font-style) ，包括字体大小 (size) 、粗细 (bold) 、颜色

(color)*//

</div>

</body>

</html>

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

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

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

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

的：

选择符 { 属性：属性值 }

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

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

指定样式。

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

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

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

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

、

D IV

、

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 ” 文件的详细路径名写进去就可以了。这种方法非常适宜同时定义多个文档。它

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

<p style= “ font-family ： lucida console ” >hongen</p>

这行代码定义了 “ hongen ” 将以 “ lucida console ” 的字体显示；

第二行 font-family 为默认值，而是定义了 “ font-style ” 属性为 “ italic ” 斜

体，

代码如下：

<p style= “ font-style ： italic ” >hongen</p>

第三行 font-family 为默认值， font-style 为 “ oblique ” ，另外还定义了 “ font -

weight ” 属性为 “ bold ” ， “ font-size ” 属性为 24pt （缺省情况下为 absolute size

绝对大小）代码如下：

<p style= “ font-style ： oblique ； font-weight ： bold ； font-size ：

24pt ” >hongen</p>

最后一行只是在第三行定义的基础上又增添了 “ font-variant ” 属性为 “ small-

caps ” （小体大写），代码如下：

<p style= “ font-style ： oblique ； font-weight ： bold ； font-size ： 24pt ；

font-variant ： small-caps ” >hongen</p>

值得注意的是： “ font-variant ” 属性值 “ small-caps ” 在指定的小体大写字体不

存在的时候， CSS 将用大写字母代替所有的小写字母。

可能您会问：定义一个字体怎么有那么长的代码呢？其实字体属性中还一个

“ font ” 属性，可以实现简便定义。我们来看下面这段代码：

<p style= “ font ： italic small-caps bold 36pt,GlitzyCurl ” >Leaf</p> 此代

码产生的效果是这样的（如下图）：

这段代码定义了 “ leaf ” 的字体为 GlitzyCurl ，并且是斜体、小体大写、粗体、 3 6

号字。这段代码等同于：

<p style= “ font-style ： italic ； font-variant ： small-caps ； font-weight ：

bold ； font-size ： 36pt ； font-family ： GiltzyCurl ” >Leaf</p>

怎么样，是不是精简了许多。

但需要注意的是：如果您用 <font> 属性直接定义，一定要注意属性值的排放顺序。

它的排放规则是按照 “ font-style ” 、 “ font-variant ” 、 “ font-weight ” 、 “ font -

size ” 、 “ font-family ” 的顺序，其中没有定义的以默认值显示。

其实我们习惯上还是不用 FONT 属性来统一定义，因为分开来定义的代码虽然很长

，

但是看上去很直观，让人一看就知道定义的内容是什么。

说一点遗憾之处吧，就是 CSS 对中文字体的支持可能不是很好。

2 、颜色和背景属性

您总不希望自己的页面处于黑白世界吧。如果给用 <font> 属性定义的文本添上颜色

是不是会更好呢？

剩余41页未读，继续阅读

评论收藏

内容反馈

ftd5621

2014-03-04

教程挺不错的适合深入学习

a1191442791

粉丝: 13
资源: 13

经典css教程（适合初学者）

html+css+js新手练习项目

2017新人练手专用高仿知乎博客带css,images，js,html源码

css基础教程-适合初学者

CSS初级教程适合初学者

初学者适合使用的全面的HTML与CSS教程

CSS教程,适合初学者

经典css教程

css教程案例，供初学者学习

DIV+CSS初学者布局教程

CSS初学者教程（全套）

免费的CSS初级教程下载

DIV+CSS入门教程

CSS零基础入门视频课程（最适合初学者的教程）.zip

适合初学者的CSS速成手册

CSS权威指南(经典教程).chm

css教程word版

css教程–十步学会用css建站

CSS语言基础教程

CSS简明教程

css基础教程

99套数据可视化大屏（含源码

HTML+CSS+JS网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划与设计.zip

mrcrowl.easy-less-1.7.3

旅游网站前端页面（css，html）

用vue写的可视化大屏

html css网页制作成品

html+css圣诞树html网页代码

520程序员前端表白代码，使用 HTML、CSS 和 JavaScript 编写一段浪漫的代码，用于表达爱意

javascript网页设计期末作业 购物网站

最新资源

HTML+CSS+JS网页设计期末课程大作业 web前端开发技术 web课程设计网页规划与设计.zip

javascript网页设计期末作业购物网站