CSS入门二.docx

《CSS入门二.docx》由会员分享，可在线阅读，更多相关《CSS入门二.docx（11页珍藏版）》请在冰豆网上搜索。

CSS入门二

CSS样式手册

（二）

CSS样式手册

（二）1

CSS初级入门：

样式的单独调用2

为什么要单独调用呢？

2

关于Style属性2

什么标签都可以加入STYLE属性吗？

3

CSS初级入门：

样式表的外部调用3

外部引用的优点3

开始动手做CSS文件3

在网页中调用CSS文件4

CSS初级入门：

文字的属性4

文字属性4

CSS初级入门：

自定义类别8

自定义类别8

使用CSS实现重点突出8

自定义类别的用法9

CSS初级入门：

连接属性9

连接属性9

属性分类10

整体声明的方法

1.基本上，整体声明有两种方法，第一种就是针对一个标签，然后一次设定好几个样式。

第二种就是同时对好几个标签设定相同的样式。

下面这个例子就是：

“针对一个标签，然后一次设定好几个样式”：

body{font-size:

9pt;

font-color:

red;

background:

white}

　　2.你会发现，我们同时声明了：

字形大小为9pt、字形颜色为红色、背景为白色，这3个样式，为了将这三个样式分隔开，我们利用分号“；”来将之隔开，这样才能正常起作用！

当然，若是你觉得这样一列一列的写出来很浪费空间，那么你也可以写成一行的形式，如下：

body{font-size:

9pt;font-color:

red;background:

white}

　　几个标签设定相同的样式

　　1.刚刚我们看过一个标签，同时设置几个样式的，实际上，我们也可以把好几个标签同时一起来设定，例如：

h1,h2,td{font-size:

12pt;font-color:

red;font-family:

宋体}

　　以此例而言，我们同时设定了三组标签

、

、，换言之，凡是被这三个标签包起来的，其文字大小都会变成12pt、红色字、并且以宋体显示！

CSS初级入门：

样式的单独调用

为什么要单独调用呢？

　　“单独调用”就是加入STYLE属性。

就是将CSS声明套用在单独的一个网页元素上（任一个文字、图片、表格...等，都是网页元素），此时，CSS将不再以一个样式表来显示结果了，而是利用STYLE属性加到标签中。

为什么要“单独调用”CSS？

原因是：

比较灵活...举个简单的例子，我们希望让输入的表单的底色不使用白色了？

　　关于Style属性

　　其实，几乎每个HTML标签都有其各自的属性，例如其中的align是标签

的align对齐属性」，加上align属性后，你就可以设定段落要要居左、居中或居右。

相同的，STYLE也可以当作是一个属性，一样加在标签之中，就我们上面的问题而言，其原先的语法应该是是这样的：

语法：

">结果：

　　现在，我们替这个输入表单加入STYLE属性，也就是在标签中加入STYLE属性：

语法：

#ccffcc">

结果：

　　“STYLE="*****"”就是把STYLE当作属性的用法，其后一样将CSS声明放在""里面，至于里面的background-color:

#ccffcc意思就是“背景颜色：

#ccffcc”的意思，现在不熟悉没关系，以后会继续讲解的。

　　什么标签都可以加入STYLE属性吗？

　　基本上，任何标签都可以加上STYLE属性。

所以，你不用担心会有标签不接受。

不过，单独调用针对网页元素加入STYLE属性虽然非常灵活，但是，却失去了CSS的一个优点，那就是统一性。

所以说，你在使用时，除非只有部份网页元素需要单独使用CSS格式，否则，尽量在使用之前介绍的调用方法，如此，日后在维护上会比较简单。

CSS初级入门：

样式表的外部调用

外部引用的优点

为什么要把CSS声明做成一个CSS文件呢？

这样做的好处有三个。

第一个好处，网页处理速度会更快一些，尤其在有很多网页共用一份CSS样式表时更为好用！

因为你不用为每一页都写同样的CSS代码，网页自然就会更瘦一些轻快一些。

第二个好处是，可以防止一些电脑程度较低的使用者直接看到CSS语法（就是有人不喜欢被看见语法），当然指的是无法直接看到，而非无法看到，稍微有点能力的，要查看CSS文件的内容简直是易如反掌。

第三个好处当然就是维护方便了！

你只要修改一个CSS文件，不管你有几千个网页文件，都会以你最新修改的版本为准了！

开始动手做CSS文件

首先，我们将把原来声明中的去掉（CSS文件里不需要这两个标签，因为，浏览器看到扩展名为css就知道这是CSS文件了），然后利用记事本程序把下面代码粘贴过去。

body{font-size:

9pt}

然后将它保存，文件名的扩展名为.css，在这里可以保存为style.css，并和网页放在同一目录下。

在网页中调用CSS文件

做好CSS文件后，下面我们就该在网页中调用了，调用的方法如下所示：

CSS初级入门：

文字的属性

文字属性

　　文字属性是可以设置文字的颜色、大小、字型、粗细等等。

原始代码

A

B

C

D

显示结果

A

B

C

D

　　文字颜色{COLOR}

　　语法：

{COLOR:

（color）}

原始代码

ABCD

显示结果

ABCD

　　文字类别{FONT}

　　设置字体样式、大小写变化、粗细、大小、文字行列高度、字型

　　语法：

{FONT:

（font-style）︱（font-variant）︱（font-weight）︱（font-size）︱（font-family）︱/（line-height）}

原始代码

ABCD

显示结果

ABCD

　　下载字型{@FONT-FACE}

　　语法：

@FONT-FACE{FONT-FAMILY:

（font-family）;SRC:

URL（url）}

原始代码

显示结果

没有结果

　　文字字型{FONT-FAMILY}

　　语法：

{FONT-FAMILY:

（font-name）︱（generic-family）}

原始代码

ABCD

显示结果

ABCD

　　文字大小{FONT-SIZE}

　　设定字体大小（可设单位属性:

 点pt、英寸in、公分cm、像素px、百分比%）

　　语法：

{FONT-SIZE:

LARGE︱MEDIUM︱SMALLER︱（length）︱（percentage）}

原始代码

ABCD

EFGH

IJKL

显示结果

ABCD

EFGH

IJKL

　　文字样式{FONT-STYLE}

　　设定字体样式（ 分为:

正常、斜体）

　　语法：

{FONT-STYLE:

NORMAL︱ITALIC}

原始代码

ABCD

显示结果

ABCD

　　文字变化{FONT-VARIANT}

　　设定字体变化（分为:

正常、小字体）

　　语法：

{FONT-VARIANT:

NORMAL︱SMALL-CAPS}

原始代码

ABCD

显示结果

ABCD

　　文字粗细{FONT-WEIGHT}

　　设定字体粗细（分为:

正常、粗字体）

　　语法：

{FONT-WEIGHT:

NORMAL︱BOLD}

原始代码

ABCD

显示结果

ABCD

CSS初级入门：

自定义类别

自定义类别

　　今天讲的有一个新知识“类别”。

其实，这知识并不陌生！

回想一下，在HTML标签中，有个属性叫class，当时没有解释这个属性是干什么用的。

其实，不是不解释，而是解释了也不会用，所以就暂时没有说，等到了今天。

这个class属性，所以将之解释为“类别”属性，它有什么作用呢？

它能够让我们在不同的标签中使用相同的CSS设定，举个例子如下：

我们在读书的时候，常常看到课本上有重点的地方，用红色或其它颜色标明。

如果，今天我们的网页上，也想将一些比较重要的地方用“红色、粗体字”来显示，你会怎么做呢？

：

原始代码

“网页陶吧”

显示结果

“网页陶吧”

　　使用CSS实现重点突出

　　用上面的那种方法是相当不错的！

简单用易懂！

不过，试想一种情形...若是在我们的网页中有1000多个所谓的“重点”，今天你突然想把重点通通换成“红色、粗体字”，那你该怎么办呢？

这时，我们就讲用CSS来帮我们解决难题吧！

而且，我们的“自定义类别”也就用上了！

样式语法

.important{color:

red;font-weight:

bold}

应用方式

“网页教学网”

　　首先，我们在在CSS表中自己做一个叫做important的类别，然后利用class属性，套用在网页中，不难吧！

以后若是要将“红色”改成“蓝色”，那么只要改类别里的设置就行了！

不管网页中有几万个“重点”，都不用怕了！

　　自定义类别的用法

　　看过了自定义类别的大概用法后，再来做详细的解说，如何自定义类别？

自定义类别方法很简单，方法和一般的CSS声明没什么区别！

唯一的不同是，CSS声明是针对某个标签的；而自定义类别则是不针对某个标签，而是要自己命名！

样式语法

.important{color:

red;font-weight:

bold}

　　以上为例，.important{color:

red;font-weight:

bold}就是我们自定义的类别，其中的{}部份和一般的CSS声明方法一模一样！

差别就在前面的.important，没错！

important就是我们自定的名称，有了名称，才能调用。

注意！

前面记得在自定义名称前加一个小点“.”，这样就完成了自定义的一个类别！

这个类别可以利用class来调用！

套用到任何标签中！

CSS初级入门：

连接属性

连接属性

　　在HTML文件里的超连接文字经过浏览器的解释后都会以加下划线的方式来显示，并没有动态的效果，通过CSS之AnchorPseudoClasses，大家可以将超连接文字的显示方式做到几种不同的变化。

　　例如：

　　以上的超级连接经过在浏览器页面上是以加下划线的方式显示。

但如果利用CSS之AnchorPseudoClasses则可以做出动态的效果，其标签如下：

记得两个属性见";"隔开，详细属性值设定请参阅CSS 常用属性（Properties）与设定值一览表。

原始代码

A:

link{color:

blue;font-size:

14pt;text-decoration:

underline}

A:

visited{color:

blue;font-size:

14pt;text-decoration:

underline}

A:

hover{color:

red;font-size:

14pt;text-decoration:

none}

A:

active{color:

red;font-size:

9pt;text-decoration:

none}

显示结果

ClickHere!

　　属性分类

　　A:

link是代表普通状态的连接

　　A:

visited是代表访问过的连接

　　A:

hover是代表鼠标移到连接

　　A:

active是代表按下去连接

　　color是代表连接颜色

　　font-size是代表连接文字大小，适用point（pt）或是pixels（px）

　　text-decoration是代表文字样式，none代表没有下划线