ch经典css入门教程

1、CH经典CSS入门教程本文由armyao贡献 doc文档可能在WAP端浏览体验不佳。建议您优先选择TXT，或下载源文件到本机查看。 CH 经典 CSS 入门教程 级联样式表（Cascading Style Sheets，CSS）是一种为网站添加布局效果的出色工具。它可 以省去你大量时间， 令你可以采用一种全新的方式来设计网站。 CSS 是每个网页设计人员所 必须掌握的。 是什么？ 第 1 课：CSS 是什么？ CSS 是 Cascading Style Sheets（级联样式表）的缩写。 可以用 CSS 做什么？ CSS 是一种样式表语言，用于为 HTML 文档定义布局。例如，CSS 涉及字体、颜色、边距、 高度、宽度、背景图像、高级定位等方面。 HTML 可以用于为网站添加布局效果，但有可能被误用。而 CSS 则提供了更多选择，而且 更为精确、完善。现在所有浏览器都支持 CSS。 CSS 跟 HTML 的区别在哪里？ HTML 用于结构化内容；CSS 用于格式化结构化的内容。 采用 CSS 有哪些好处？ CSS 是 Web 设计界的一次革命。CSS 的具体优点包括： 通过单个样式表控

2、制多个文档的布局； 更精确的布局控制； 为不同的媒体类型（屏幕、打印等）采取不同的布局； 无数高级、先进的技巧。 第 2 课：CSS 的工作原理 用 CSS 的话，我们可以这样获得同样的效果： body background-color: #FF0000; 为 HTML 文档应用 CSS，有三种方法可供选择。下面对这三种方法进行了概括。我们建议 你对第三种方法（即外部样式表）予以关注。 属性） 方法 1：行内样式表（style 属性） ：行内样式表（ 为 HTML 应用 CSS 的一种方法是使用 HTML 属性 style。我们在上例的基础之上，通过行内样式表将页面背景设为红色： 这个页面是红色的 元素） 方法 2：内部样式表（style 元素） ：内部样式表（ 为 HTML 应用 CSS 的另一种方法是采用 HTML 元素 style 。比如像这样： 这个页面是红色的 方法 3：外部样式表（引用一个样式表文件） ：外部样式表（引用一个样式表文件） 我们推荐采用这种引用外部样式表的方法。 在本教程之后的例子中， 我们将全部采用该方法。 外部样式表就是一个扩展名为 css 的文本文件。跟

3、其他文件一样，你可以把样式表文件放在 Web 服务器上或者本地硬盘上。 例如，比方说你的样式表文件名为 style.css，它通常被存放于名为 style 的目录中。就像下面 这样： 现在的问题是： 如何在一个 HTML 文档里引用一个外部样式表文件 （style.css） 呢？答案是： 在 HTML 文档里创建一个指向外部样式表文件的链接（link）即可，就像下面这样： 注意要在 href 属性里给出样式表文件的地址。 这行代码必须被插入 HTML 代码的头部（header） ，即放在标签 之间。就像这样： . 这个链接告诉浏览器：在显示该 HTML 文件时，应使用给出的 CSS 文件进行布局。 这种方法的优越之处在于：多个 HTML 文档可以同时引用一个样式表。换句话说，可以用 一个 CSS 文件来控制多个 HTML 文档的布局。 这一方法可以令你省去许多工作。例如，假设你要修改某网站的所有网页（比方说有 100 个网页）的背景颜色，采用外部样式表可以避免你手工一一修改这 100 个 HTML 文档的工 作。 采用外部样式表， 这样的修改只需几秒钟即可搞定-修改外部样式表文件里的代

4、码即 可。 它们的内容如下： default.htm 我的第一个样式表 style.css body background-color: #FF0000; 然后，把这两个文件放在同一目录下。记得在保存文件时使用正确的扩展名（分别为htm 和css。 ） 用浏览器打开 default.htm，你所看到的页面应该具有红色背景。恭喜！你已经完成了自己的 第一个样式表！ 第 3 课：颜色与背景 Color: 用于指定元素的前景色。 background-color : 用于指定元素的背景色。 background-image : 用于设置背景图像. background-repeat : 就是用于控制平铺的. background-attachment 用于指定背景图像是固定在屏幕上的、还是随着它所在的元素而 滚动的。 background-position 放置背景图像. background 可以减少属性的数目，因此令样式表更简短易读。 的四种不同取值。 下表概括了 background-repeat 的四种不同取值。 值 描述 示例 background-repeat:repeat-x

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

6、像素、厘米等）作为单位的值，也可以是top 、 bottomcenterleft和right这些值。 、 、 background 属性可以减少属性的数目，因此令样式表更简短易读。 比如说下面五行代码： background-color: #FFCC66; background-image: url(butterfly.gif); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom; background 属性的话，实现同样的效果只需一行代码即可搞定： background: #FFCC66 url(butterfly.gif) no-repeat fixed right bottom; 各个值应按下列次序来写： background-color | background-image | background-repeat | background-attachment | background-position 如果省略某个属性不写出来，那么将自动为

7、它取缺省值。 第 4 课：字体 font-family font-style font-variant font-weight font-size font font-family 你在给出字体列表时，自然应把首选字体放在前面、把候选字体放在后面。建议你在列表的 最后给出一个族类（generic family） ，这样，当没有一个指定字体可用时，页面至少可以采 用一个相同族类的字体来显示。 下面是一个按优先级排列的字体列表的例子： 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 字体样式 定义所选字体的显示样式：norm

8、al（正常） 、italic（斜体）或 oblique（倾斜） 。 h2 font-family: Times New Roman, serif; font-style: italic; 字体变化font-variant 字体变化 normal（正常）或 small-caps（小体大写字母） 。small-caps 字体是一种以小尺寸显示的大写 字母来代替小写字母的字体。 h1 font-variant: small-caps; h2 font-variant: normal; 字体浓淡font-weight 字体浓淡 定字体显示的浓淡程度。其值可以是 normal（正常）或 bold（加粗） 。有些浏览器甚至支持 采用 100 到 900 之间的数字（以百为单位）来衡量字体的浓淡。 td font-family: arial, verdana, sans-serif; font-weight: bold; 字体大小font-size 字体大小 字体大小可通过多种不同单位（比如像素或百分比等）来设置。 h1 font-size: 30px; h2 font-size: 12pt; h3

9、 font-size: 120%; p font-size: 1em; 上面四种单位有着本质的区别。 px和pt将字体设置为固定大小，而%和em 允许页面浏览者自行调整字体的显示尺寸。有些页面浏览者可能是残疾者、年长者、视力不 佳者， 或者他所使用的电脑显示屏显示质量差。 为了令你的网站对所有人都具有良好的可用 性（accessibility） ，你应采用像%或em这种允许用户调节字体显示大小的单位. p font-style: italic; font-weight: bold; font-size: 30px; font-family: arial, sans-serif; 如果用 font 属性的话，上述四行代码可简化为： p font: italic bold 30px arial, sans-serif; 属性的值应按以下次序书写： font-style | font-variant | font-weight | font-size | font-family 第 5 课：文本 text-indent text-align text-decoration letter-spacing text-transform text-indent 用于为段落设置首行缩进，以令其具有美观的格式。 text-indent:20px; text-align 与 HTML 属性 align 的功能相同。该属性的值可以是：left（左对齐） 、right（右对齐）或者 center（居中） 。除了上面三种选择以外，你还可以将该属性的值设为 justify（两端对齐） ， 即伸缩行中的文字以左右靠齐。报刊杂志经常采用这种布局。 text-align:center; text-align:left; text-align:right; text-align:jus

《ch经典css入门教程》由会员小**分享，可在线阅读，更多相关《ch经典css入门教程》请在金锄头文库上搜索。