CH经典CSS入门教程Word格式.docx

1、无数高级、先进的技巧。第2课：CSS的工作原理用CSS的话，我们可以这样获得同样的效果：body background-color: #FF0000;为HTML文档应用CSS，有三种方法可供选择。下面对这三种方法进行了概括。我们建议你对第三种方法（即外部样式表）予以关注。方法1：行内样式表（style属性）为HTML应用CSS的一种方法是使用HTML属性style。我们在上例的基础之上，通过行内样式表将页面背景设为红色：html title例子/headbody style=background-color:p这个页面是红色的/body/html方法2：内部样式表（style元素）为HTML应

2、用CSS的另一种方法是采用HTML元素style。比如像这样： body方法3：外部样式表（引用一个样式表文件）我们推荐采用这种引用外部样式表的方法。在本教程之后的例子中，我们将全部采用该方法。外部样式表就是一个扩展名为css的文本文件。跟其他文件一样，你可以把样式表文件放在Web服务器上或者本地硬盘上。例如，比方说你的样式表文件名为style.css，它通常被存放于名为style的目录中。就像下面这样：现在的问题是：如何在一个HTML文档里引用一个外部样式表文件（style.css）呢？答案是：在HTML文档里创建一个指向外部样式表文件的链接（link）即可，就像下面这样：link rel=

3、stylesheet type= href=style/style.css /注意要在href属性里给出样式表文件的地址。这行代码必须被插入HTML代码的头部（header），即放在标签和标签之间。就像这样：我的文档我的第一个样式表style.cssbody background-color:然后，把这两个文件放在同一目录下。记得在保存文件时使用正确的扩展名（分别为“htm”和“css”）。用浏览器打开default.htm，你所看到的页面应该具有红色背景。恭喜！你已经完成了自己的第一个样式表！第3课：颜色与背景 Color: 用于指定元素的前景色。 background-color : 用于

4、指定元素的背景色。 background-image : 用于设置背景图像. background-repeat : 就是用于控制平铺的. background-attachment用于指定背景图像是固定在屏幕上的、还是随着它所在的元素而滚动的。 background-position放置背景图像. background可以减少属性的数目，因此令样式表更简短易读。下表概括了background-repeat的四种不同取值。值 描述 示例 background-repeat:repeat-x 图像横向平铺 repeat-y 图像纵向平铺 repeat 图像横向和纵向都平铺 no-repeat 图

5、像不平铺 background-attachment用于指定背景图像是固定在屏幕上的、还是随着它所在的元素而滚动的。一个固定的背景图像不会随着用户滚动页面而发生滚动（它是固定在屏幕上的），而一个非固定的背景图像会随着页面的滚动而滚动。下表概括了background-attachment的两种不同取值。值 描述 background-attachment:scroll 图像会跟随页面滚动fixed 图像是固定在屏幕上的 background-position属性的值有多种方式。不过，它们都是坐标的格式。举例来说，值“100px 200px”表示背景图像将被放置在位于距浏览器窗口左边100像素、顶

6、部200像素处。坐标可以是以百分比或固定单位（比如像素、厘米等）作为单位的值，也可以是“top”、“bottom”、“center”、“left”和“right”这些值。background属性可以减少属性的数目，因此令样式表更简短易读。比如说下面五行代码： #FFCC66;background-image: url（butterfly.gif）; no-repeat; fixed;background-position: right bottom;属性的话，实现同样的效果只需一行代码即可搞定：background: #FFCC66 url（） no-repeat fixed right bo

7、ttom;各个值应按下列次序来写： background-color | background-imagebackground-repeatbackground-attachmentbackground-position如果省略某个属性不写出来，那么将自动为它取缺省值。第4课：字体 font-family font-style font-variant font-weight font-size font font-family 你在给出字体列表时，自然应把首选字体放在前面、把候选字体放在后面。建议你在列表的最后给出一个族类（generic family），这样，当没有一个指定字体可用时，页面

8、至少可以采用一个相同族类的字体来显示。下面是一个按优先级排列的字体列表的例子：h1 font-family: arial, verdana, sans-serif;h2 font-family: Times New Roman, serif;标题将采用Arial字体显示。如果访问者的计算机未安装Arial，那么就使用Verdana字体。假如Verdana字体也没安装的话，那么将采用一个属于sans-serif族类的字体来显示这个h1标题。注意我们为“Times New Roman”采用的写法：因为其中包含空格，所以我们用引号将它括起来。字体样式font-style定义所选字体的显示样式：nor

9、mal（正常）、italic（斜体）或oblique（倾斜）。 font-style: italic;字体变化font-variantnormal（正常）或small-caps（小体大写字母）。small-caps字体是一种以小尺寸显示的大写字母来代替小写字母的字体。h1 font-variant: small-caps;h2 font-variant: normal;字体浓淡font-weight定字体显示的浓淡程度。其值可以是normal（正常）或bold（加粗）。有些浏览器甚至支持采用100到900之间的数字（以百为单位）来衡量字体的浓淡。td font-family: font-wei

10、ght: bold;字体大小font-size字体大小可通过多种不同单位（比如像素或百分比等）来设置。h1 font-size: 30px;h2 font-size: 12pt;h3 font-size: 120%;p font-size: 1em;上面四种单位有着本质的区别。px和pt将字体设置为固定大小，而%和em允许页面浏览者自行调整字体的显示尺寸。有些页面浏览者可能是残疾者、年长者、视力不佳者，或者他所使用的电脑显示屏显示质量差。为了令你的网站对所有人都具有良好的可用性（accessibility），你应采用像%或em这种允许用户调节字体显示大小的单位.p font-size: font-family: arial, sans-serif;如果用font属性的话，上述四行代码可简化为： font: italic bold 30px arial, sans-serif;属性的值应按以下次序书写：font-sty