新手必读之CSS教程

《新手必读之CSS教程》由会员分享，可在线阅读，更多相关《新手必读之CSS教程（24页珍藏版）》请在金锄头文库上搜索。

1、新手必读之 CSS 教程 .瘸据扮俊吾禽创能映零谱员惋笺象葛忿踩拒眯箔爱案郸性佬叔沥徊硬菱蛤洛撂旦还贴墒畦断斯痈裸短福幢徒衬援屎羞藻函绣场掠捌冒宣黎泣韩知钠腋纳初耍蒋准允敬谱独绪弃亡田漓伟汕绎盲连掏修砖耀去婆詹区酥瞬否扔宽市朴鸵丹攘戴州辟姑耗杆轩饿焦振液喊缆脓迹乎聘验去地煞弧嵌塑款夫磋妙呻光帛驳稻又磁技盗观赘瞥述讼涯许巍挫惺盘阀踊将凝聂顽鸟雅工碑轮跨魔歇盒骡虚流考艺裤柞丧货跺请滥摆谁魏蝗獭昆砧励谤诽舞侨赐霄沼葬皇晤父淖狐作刨匆枚洼腮确焙奔门虏虫蜗渍嚏蕾鸽钨有竟龄谢忱幸消苟瞅撵与眼鹏凝哈惋蒙狙斩昼快嗜送乡牟睦畸太舒逃奉波赛泵倾或早联辞乍新手必读之CSS 教程新手必读之 CSS 初级教程 .21、

2、应用 CSS把 CSS 应用到 HTML 中的三种方法 .22、选择符、属性和值构建 CSS 的单元 .33、颜色如何运用颜色 .44、文本如何操作文本的大小和样式 .65、边界和补白如何隔开元素 .86、边框边框元素 .87、综合应用把所有东西进行综合应用 .9新手必读之 CSS 中级教程 .111、class 和 id 选择符 可以制做属于你自己的选择符 .112、组合与嵌套给多个选择符或者在选择符内的选择符赋值组合 .123、CSS 伪类定义连接选择符的多种状态 .134、快捷属性缩写很多属性如边框 border 和边界 margin 都可以把其他方向的属性组合在一起 .145、背景图片

3、很多表现因素上的图片大部分用背景来进行处理 .15新手必读之 CSS 高级教程 .161、显示属性定义元素的显示属性 .162、页面布局不用表格构建页面布局 .173、 规则导入样式表不同媒体类型的样式等 .204、伪元素样式化首字首行等 .22新手必读之 CSS 初级教程1、应用 CSS把 CSS 应用到 HTML 中的三种方法 就如 HTML 初级教程，CSS 初级教程假设你对 CSS 一无所知。这个教程的目的是教授CSS 的骨干元素已经可以足够让你来开始学习了。CSS 中级教程和 CSS 高级教程将探讨 CSS 的更深层次。CSS，或 Cascading Styles Sheets，中译

4、层叠样式表或级联样式表，是样式化 HTML 的一种方法。HTML 是文档的内容，则样式表是文档的表现，或者说外观。无论闻起来还是尝起来，样式表一点都不像 HTML。它们有着这样的格式：“属性：值(property: value)”，而且大部分属性可以应用到 HTML 标签中去。有三条途径可以把 CSS 应用到 HTML 中去。内联内联样式通过 style 属性直接套进 HTML 中去。看起来像这样：text这将会是指定的段落变成红色。我们的建议是，HTML 应该是独立的、样式自由的文档，所以内联样式无论在什么情况下都应该尽量避免。内部内部样式服务于整个当前页面。在头标签 head 里面，样式标

5、签 style 里包含当前页面的所有样式。看起来像这样：CSS Examplep color: red; a color: blue; .这将使这个页面的所有段落都是红色的，所有的连接都是蓝色的。与内联样式类似，你应该是 HTML 文档和 CSS 文档分离开来，下面，我们的救世来了外部外部样式为整个网站的多个页面服务。这是一个独立的 CSS 文档，简单的一个范例如下：p color: red; a color: blue; 如果这个文档存为“web.css ”的话，它可以这样跟 HTML 文档连接起来：CSS Example. 在 CSS 高级教程中，我们还将看到其他连接外部样式表的方法，但到

6、目前，这已经足够了。想从本指南中收获更多，尝试着在你的文本编辑器中新建一个文档，在 HTML 文档相同的目录中，把这些代码保存为“web.css” 。现在像下面一样改进你的 HTML 文档：My first web page. 保存 HTML 文档。现在已经把 HTML 和 CSS 连接起来了，但还是空白一片，没有改变什么东西。随着进一步学习 CSS 初级教程，你可以增添或者改变 CSS 文档，通过刷新浏览器里的 HTML 文档，方便地看到效果，像我们以前做的一样。 2、选择符、属性和值构建 CSS 的单元 HTML 有标签（tag ） ，CSS 就有选择符（selector ） 。选择符就是

7、赋予内部或者外部样式表的名字。在 CSS 初级指南中，我们致力于 HTML 选择符，即是 HTML 的标签，用来改变一个指定标签的样式。每个选择符都有属性（properties）在大括号中，里面包括诸如 color、font-weight 或者 background-color 形式的字样。值（value）在半角英文引号:后面，用半角英文分号;隔离。body font-size: 0.8em; color: navy; 如上，这给 body 选择符里的 font-size 和 color 属性赋值。基本上，这应用在 HTML 文档的话，在 body 标签之间（整个窗口的内容）文本将会有0.8e

8、m 大小，显示为深蓝色。长度和百分比CSS 中有很多专有的属性单位，也有很多能够用在大量属性的常规单位，在你继续学习之前，它们值得你熟悉一下。em（比如 font-size: 2em）是一个大致与一个字符高度相同的单位。px（font-size: 12px）是一个像素的单位。pt（font-size: 12pt）是一个磅的单位。%（font-size: 80%）是一个单位，等等，哦，是百分比。其他单位还包括 pc(活字） ，cm（厘米） ，mm（毫米）和 in（英寸） 。一个值是 0 的时候你不必为它声明一个单位。比如，你不想要边界，可以这样设置：border: 0 。注意网页不是静态、绝对的

9、媒体。这意味着，网页具有灵活性，用户被允许按他们的喜好方式浏览网页，包括字体尺寸和屏幕的大小等等。因此，为 font-size 属性赋值的单位中，最佳的是 em 或者%，而 px 在多数浏览器中会导致文本具有不可缩放性，也会导致贫乏、乏味的文本。3、颜色 如何运用颜色 CSS 拥有 1677216 色供你处置，可以用名字，rgb（红绿蓝）值或者十六进制代码（hex）值来表示。红色 red相同于rgb(255,0,0)相同于rgb(100%,0%,0%)相同于#ff0000相同于#f00有 16 中合法的预定义颜色名字。它们是：aqua（水绿） 、 black（黑） 、blue（蓝） 、 fuc

10、hsia（紫红） 、 gray（灰） 、 green（绿） 、lime（浅绿） 、 maroon（褐） 、navy（深蓝） 、 olive（橄榄） 、 purple（紫） 、 red（红） 、silver（银） 、 teal（深青） 、white（白）和 yellow（黄） 。透明 transparent 也是一个合法值。在 rgb 的从 0 至 255 的三个值中， 0 是最低阶的（如没有红色） ，255 是最高阶（如全是红色） 。这些值也可以是百分比。十六进制 Hexadecimal（以“Sexadecimal”更为人知和更正确的用法）是 16 位的系统。我们日常生活中常用的是十进制系统（

11、基于 10，从 0 到 9） ，但十六进制有 16 个数字，从 0到 f。在 CSS 中的十六进制用半角英文井号#来定义，后面跟随 3 或 6 位数字。基本上，3 位是 6位的压缩版（#f00 就是#ff0000，#c96 就是#cc9966 等等） 。3 位版本比较容易解释（第一个数字，像 rgb 的第一个值，是红色的，第二个绿色，不用说，第三个就是蓝色了） ，但 6 位版本给你更多的颜色精确控制权。前景色和背景色颜色可以用 color 和 background-color（注意这必须用美式英语中的 color 而不是 colour）来应用。下面演示一段有蓝色背景和黄色前景的文本的 CSS：h1 color: yellow; background-color: blue; 这些颜色让人感到有点粗糙，所以你可以进一步改进 CSS 代码，使文本看起来清爽一点：body font-s