首页 > > 网页制作 > css >

web标准建站:CSS入门教程

2008-02-23 08:28:27来源：互联网阅读 ()

　　原创教程，转载请注明出处：网页教学网

　　CSS是“Cascading Style Sheets”的简称，中文翻译为“串接样式表”，也有人翻译为“样式表”。CSS用以作为网页的排版和风格设计，在web标准建站中，对CSS的熟悉和使用是相当重要的一个内容。CSS的作用是弥补HTML的不足，让网页的设计更为灵活。

　　这个文章只是为您介绍CSS的基础应用，指引您的一个入门的基础教程，主要目的是为推进web标准贡献自己的微薄之力。

　　说点我自己的体会，现在有好多人都在推广WEB标准，其实对初学者来说，不需要刚学的时候就学标准，学点简单的还是容易入门的，因为现在HTML还在照样用啊，所以我希望初学者学习时不要非遵循标准，当你入门之后，你做网页的时候，发现使用表格特麻烦的时候你就该去寻求简单方法了，到时再学也不晚啊，如果你喜欢新技术那么你初学时就学标准吧，按个人的实际来行动吧。下面开始学习了

　　一、如何在HTML中应用CSS。

　　您可以利用下列 3 种方式将 CSS 指定的格式加入到HTML中：

　　1. 在 HTML 文件里加一个超级连结，连接到外部的 CSS 文档。(外部连结 CSS)

　　这个方法最方便管理整个网站的网页风格，它让网页的文字内容与版面设计分开。您只要在一个 CSS 文档内（扩展名为 .CSS）定义好网页的风格，然后在网页中加一个超级连接连接到该文档，那么你的网页会按在CSS文档内定义好的风格显示出来了。

　　具体的使用防范是：

　　<HTML>

　　<HEAD>

　　<TITLE>网页文件的标题</TITLE>

　　</HEAD>

　　注意：style.css文件的位置。

　　2. 在 HTML 文件内的 <HEAD>.......</HEAD> 标签之间，加一段 CSS 的描述内容。(内定义CSS)

　　这个方法适用于指定某个网页，除了表现外部的 CSS 文档定义好的网页风格外，同时还要表现本身 HTML 文档内指定的 CSS 。

　　如果内在添加的 CSS 描述与外部连接的 CSS 描述相冲突的话，网页的表现将以内在添加的 CSS 描述为主，也就是外部的描述就不再起作用了。

　　具体使用方法是：

　　<HTML>

　　<HEAD>

<!--

　　BODY {font: 12pt}

　　H1 {font: 16pt}

　　P {font-weight: bold;

　　color: green}

　　-->

　　</STYLE>

　　</HEAD>

　　<BODY>

　　网页内容…

　　</BODY>

　　</HTML>

值得注意的是，为了防止不支持 CSS 的浏览器误将标签间的 CSS 风格描述当成普通字串，而表现于网页上，您最好将 CSS 的叙述文字插入在之间。

　　3. 在 HTML 文件的文本内容中，随时有需要，随时加一小段 CSS 的描述指定风格。( 文本间CSS)

　　这个方法适用于指定网页内的某一小段文字的呈现风格。

　　外部CSS与内定义CSS如果和此定义有相同的项，那么以此定义的 CSS 风格表现，外部 CSS文档与内定义CSS和此定义的没相同的项时那么还会正常显示，同时还会显示文本内容间的 CSS 风格。

　　具体使用方法是：

　　<HTML>

　　<HEAD>

　　</HEAD>

　　<BODY>

　　本页内容…

　　</P>

　　</BODY>

　　</HTML>

　　上述的 3 种 CSS，可以同时并用，也可以择您所好，单一或成双地使用。如果各 CSS 间的叙述相冲突，则内在定义的 CSS 会覆盖外部连结的 CSS ，文本间的 CSS 会覆盖内在定义的 CSS 。

　　二、挑选者、属性和值。

　　先举个例子：H3{ COLOR : BLUE }表示在文本中只要使用H3标签的文字的颜色都是绿色。其中H3为挑选者，COLOR为属性，BLUE为COLOR属性的值。挑选者是套用样式的元件，通常为外部CSS或内定义CSS定义的风格的一个名字，在这个初级教程里理解为一个标签的名字也可以。属性是用语描述挑选者的特性，相当于HTML语法中的标签的属性。值就是属性的具体内容。

　　在CSS中当我们使用到属性值的时候，通常值是有一个度量依据的，也就是说值是有单位的。比如我们通常说你从家到学校走1，1什么呢？米，公里，还是走1小时。通常在CSS中的单位有：相对单位与绝对单位两种单位具体如下：

　　“em” (比如 font-size: 2em) ：相对于字母高度的比例因子。

　　“%” (比如 font-size: 80%)：相对于长度单位（通常是目前字型的大小）的百分比例。

　　'px' (比如 font-size: 12px) ：像素（系统预设单位）。

　　'pt' (比如 font-size: 12pt)：像点。

　　此外还有 'pc' (印刷活字单位), 'cm' (公分), 'mm' (公厘) 和 'in' (英寸)等单位。

　　当值为0时，我们就不需要设置单位了，比如你不想要边框那么我们直接设置border=0 。

　　在这我多说一句，就是强调单位的使用时，当我自己制作的网页想在分辨率改变时，字体大小也随着改变那么我们就使用单位%和em，如果你想时你的网页不管怎么调分辨率都是固定大小的那么我们使用px、pt等元素了。呵呵！

　　三、颜色的设置和使用。

　　CSS提供了16,777,216种颜色可以供我们来使用，通常表现颜色的方式有三种：颜色名字、RGB(red/green/blue) 数值和十六进制数形式，具体表现如下：

　　红色可以表示为：red、RGB(255,0,0)、rgb(100%,0%,0%)、#ff0000 和 #f00　五种方式。

　　#RRGGBB：以三个00到FF的十六进位值分别表示0到255十进位值的红、绿、蓝三原色数值。