新手必读之CSS教程.docVIP

新手必读之CSS教程 新手必读之CSS初级教程 2 1、应用CSS──把CSS 应用到HTML中的三种方法 2 2、选择符、属性和值──构建CSS的单元 3 3、颜色──如何运用颜色 4 4、文本──如何操作文本的大小和样式 6 5、边界和补白──如何隔开元素 8 6、边框──边框元素 8 7、综合应用──把所有东西进行综合应用 9 新手必读之CSS中级教程 11 1、class和id选择符──可以制做属于你自己的选择符 11 2、组合与嵌套──给多个选择符或者在选择符内的选择符赋值组合 12 3、CSS伪类──定义连接选择符的多种状态 13 4、快捷属性缩写──很多属性如边框border和边界margin都可以把其他方向的属性组合在一起 14 5、背景图片──很多表现因素上的图片大部分用背景来进行处理 15 新手必读之CSS高级教程 16 1、显示属性──定义元素的显示属性 16 2、页面布局──不用表格构建页面布局 17 3、@规则──导入样式表不同媒体类型的样式等 20 4、伪元素──样式化首字首行等 22 新手必读之CSS初级教程 1、应用CSS──把CSS 应用到HTML中的三种方法 就如 HTML初级教程，CSS初级教程假设你对CSS一无所知。这个教程的目的是教授CSS的骨干元素──已经可以足够让你来开始学习了。CSS中级教程和CSS高级教程将探讨CSS的更深层次。 CSS，或Cascading Styles Sheets，中译层叠样式表或级联样式表，是样式化HTML的一种方法。HTML是文档的内容，则样式表是文档的表现，或者说外观。 无论闻起来还是尝起来，样式表一点都不像HTML。它们有着这样的格式：“属性：值(property: value)”，而且大部分属性可以应用到HTML标签中去。 有三条途径可以把CSS应用到HTML中去。 内联 内联样式通过style属性直接套进HTML中去。 看起来像这样： p style=color: redtext/p 这将会是指定的段落变成红色。 我们的建议是，HTML应该是独立的、样式自由的文档，所以内联样式无论在什么情况下都应该尽量避免。 内部 内部样式服务于整个当前页面。在头标签head里面，样式标签style里包含当前页面的所有样式。 看起来像这样： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN /TR/xhtml1/DTD/xhtml1-strict.dtd html head titleCSS Example/title style type=text/css p { color: red; } a { color: blue; } /style ... 这将使这个页面的所有段落都是红色的，所有的连接都是蓝色的。 与内联样式类似，你应该是HTML文档和CSS文档分离开来，下面，我们的救世来了…… 外部 外部样式为整个网站的多个页面服务。这是一个独立的CSS文档，简单的一个范例如下： p { color: red; } a { color: blue; } 如果这个文档存为“web.css”的话，它可以这样跟HTML文档连接起来： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN /TR/xhtml1/DTD/xhtml1-strict.dtd html head titleCSS Example/title link rel=stylesheet type=text/css href=web.css / ... 在CSS高级教程中，我们还将看到其他连接外部样式表的方法，但到目前，这已经足够了。 想从本指南中收获更多，尝试着在你的文本编辑器中新建一个文档，在HTML文档相同的目录中，把这些代码保存为“web.css”。 现在像下面一样改进你的HTML文档： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN /TR/xhtml1/DTD/xhtml1-strict.dtd html head titleMy first web page/title link rel=stylesheet type=text/css href=web.css / /head ... 保存HTML文档。现在已经把HTML和CSS连接起来了，但还是空白一片，没有改变什么东西。随着进一步学习CSS初级教程，你可以增添或者改变CSS文档，通过刷新浏览器里的HTML文档，方便地看到效果，像我们以前做的一样。 　　 2、选择符、属性和值──构建CSS的单元 HTML有标签（tag），CSS就有选