级联样式表.doc

1、级联样式表编辑CSS即级联样式表，更多含义，请参阅 CSS（多义词）。 它是一种用来表现 HTML（标准通用标记语言的一个应用）或 XML（标准通用标记语言的一个子集）等文件样式的计算机语言。目录1基本信息2发展历史3使用方法4布局特点5创建编辑6基础语法值的不同写法和单位 值为若干词须写引号 多重声明 空格和大小写 7删除样式1 基本信息CSS目前最新版本为 CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统 HTML的表现而言，CSS 能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设

2、计，是目前基于文本展示最优秀的表现设计语言。CSS 能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。2 发展历史CSS1作为一项 W3C推荐，CSS1 发布于 1996 年 12 月 17 日。1999 年 1 月 11 日，此推荐被重新修订。CSS2作为一项 W3C 推荐，CSS2 发布于 1999 年 1 月 11 日。CSS2 添加了对媒介（打印机和听觉设备）和可下载字体的支持。CSS3CSS3 计划将 CSS 划分为更小的模块。W3C CSS 规范和时间线规范 草案/提议 推荐CSS 1 1996 年 12 月 17 日CSS 1 (Revised) 19

3、99 年 1 月 11 日CSS 2 1998 年 5 月 12 日CSS 2.1 2007 年 7 月 19 日CSS 2 Mobile 2007 年 10 月 19 日CSS 2 TV 2003 年 5 月 14 日CSS 2 Print 2006 年 10 月 13 日CSS 3 2001 年 5 月 23 日CSS 3 Namespace 2006 年 8 月 28 日CSS 3 User Interface 2004 年 5 月 11 日CSS 3 Selectors 2005 年 12 月 15 日CSS 3 Fonts 2002 年 8 月 2 日CSS 3 Web Fonts

4、2002 年 8 月 2 日CSS 3 Colors 2003 年 5 月 14 日CSS 3 TV 2003 年 5 月 14 日CSS 3 Backgrounds and borders2005 年 2 月 16 日CSS 3 Text 2007 年 3 月 6 日CSS 3 Lists 2002 年 11 月 7 日CSS 3 Line 2002 年 5 月 15 日CSS 3 Box model 2007 年 8 月 9 日CSS 3 Multi column 2007 年 6 月 6 日CSS 3 Ruby 2003 年 5 月 14 日CSS 3 Border 2005 年 3 月

5、 16 日CSS 3 Speech 2004 年 12 月 16 日CSS 3 Paged Media (PM) 2006 年 10 月 10 日CSS 3 Generated PM 2007 年 5 月 4 日CSS 3 Print 2006 年 10 月 13 日CSS 3 Values 2006 年 9 月 19 日CSS 3 Cascade 2005 年 12 月 15 日CSS 3 Template Layout 2009 年 4 月 2 日CSS 3 Media Queries 2009 年 9 月 15 日3 使用方法有三种方法可以在站点网页上使用样式表：外部样式：将网页链接到外

6、部样式表。内页样式：在网页上创建嵌入的样式表。行内样式：应用内嵌样式到各个网页元素。每一种方法均有其优缺点：当要在站点上所有或部分网页上一致地应用相同样式时，可使用外部样式表。在一个或多个外部样式表中定义样式，并将它们链接到所有网页，便能确保所有网页外观的一致性。如果人们决定更改样式，只需在外部样式表中修改一次，而该更改会反映到所有与该样式表相链接的网页上。通常外部样式表以 .css 做为文件扩展名，例如 Mystyles.css。然后在需要此样式的页面中将其链接进来，如：?1?1当人们只是要定义当前网页的样式，可使用嵌入的样式表。嵌入的样式表是一种级联样式表，“嵌”在网页的 标记符内。嵌入的

7、样式表中的样式只能在同一网页上使用。 如：?12345678使用内嵌样式以应用级联样式表属性到网页元素上。 如： 层叠样式表文档 如果网页链接到外部样式表，为网页所创建的内嵌的或嵌入式样式将扩充或覆盖外部样式表中的指定属性。要在网页上使用外部样式表的样式，可将该网页链接到样式表，方法是使用位于 “格式” 菜单上的 “样式表连接” 命令。可以链接一个或数个样式表到网页视图模式下的当前网页，或到在文件夹列表中的所选网页，或到站点上的全部网页。该“样式” 框列出标准 HTML 标记符，例如标题1，还有嵌入的样式表或链接到网页的外部样式表中所含的类或 ID 选择器。要应用样式到网页元素，请选定该样式然

8、后单击 “样式” 框中的样式或选择器。在 Microsoft FrontPage 2000 中，某些格式设置特性会作为内嵌样式自动应用。例如如果使用 “边框与阴影” 命令（在 “格式” 菜单上）在普通段落周围应用框，FrontPage 会写下格式设置信息，作为段落标记符的内嵌样式属性（例如 ）。然而某些属性的应用需要使用 CSS，其他则需要使用 HTML 。如果人们只想使用 CSS 应用内嵌样式，可使用 “样式” 按钮（位于网页元素的 “属性” 对话框里）应用类或 ID 选择器或嵌入式样式。4 布局特点对于蜘蛛在爬行一个网站的页面时，若是有太多的垃圾代码，会使搜索蜘蛛对其产生不友好、不信任感，

9、同时蜘蛛的爬行速度也会因此而减缓，对于网站SEO而言，可谓一大忌。就如传统的用 table页面，对此我们就需要对网站进行代码优化，而这便需要动用 CSS+div了，下面便来谈谈使用 CSS+div进行代码优化的一些益处。一.精简代码，降低重构难度。网站使用 DIV+CSS布局使代码很是精简，相信大多朋友也都略有所闻，css 文件可以在网站的任意一个页面进行调用，而若是使用 table表格修改部分页面却是显得很麻烦。要是一个门户网站的话，需手动改很多页面，而且看着那些表格也会感觉很乱也很浪费时间，但是使用 css+div布局只需修改 css文件中的一个代码即可。二.网页访问速度使用了 DIV+C

10、SS布局的网页与 Table布局比较，精简了许多页面代码，那么其浏览访问速度自然得以提升，也从而提升了网站的用户体验度。三.SEO 优化采用 div-css布局的网站对于搜索引擎很是友好，因此其避免了 Table嵌套层次过多而无法被搜索引擎抓取的问题，而且简洁、结构化的代码更加有利于突出重点和适合搜索引擎抓取。四.浏览器兼容性DIV+CSS相比 TABLE布局，更容易出现多种浏览器不兼容的问题，主要原因是不同的浏览器对 web标准默认值不同。国内主流是 ie，firefox 及 chrome用的较少，在兼容性测试方面，首先需要保证在 ie多版本不出现问题，这里涉及到一些方法和技巧，可以针对具体

11、问题在网站查找解决办法。五.CSS+DIV 网页布局的时候常犯的小错误1. 检查 HTML元素是否有拼写错误、是否忘记结束标记即使是老手也经常会弄错 div的嵌套关系。可以用 dreamweaver的验证功能检查一下有无错误。2. 检查 CSS是否书写正确检查一下有无拼写错误、是否忘记结尾的 等。可以利用 CleanCSS来检查 CSS的拼写错误。CleanCSS 本是为 CSS减肥的工具，但也能检查出拼写错误。3. 用删除法确定错误发生的位置如果错误影响了整体布局，则可以逐个删除 div块，直到删除某个 div块后显示恢复正常，即可确定错误发生的位置。4. 利用 border属性确定出错元素

12、的布局特性使用 float属性布局一不小心就会出错。这时为元素添加 border属性确定元素边界，错误原因即水落石出。5. float元素的父元素不能指定 clear属性MacIE下如果对 float的元素的父元素使用 clear属性，周围的 float元素布局就会混乱。这是 MacIE的著名的 bug，倘若不知道就会走弯路。6. float元素务必指定 width属性很多浏览器在显示未指定 width的 float元素时会有 bug。所以不管 float元素的内容如何，一定要为其指定 width属性。另外指定元素时尽量使用 em而不是 px做单位。7. float元素不能指定 margin和

13、 padding等属性IE在显示指定了 margin和 padding的 float元素时有 bug。因此不要对 float元素指定 margin和 padding属性(可以在 float元素内部嵌套一个 div来设置margin和 padding)。也可以使用 hack方法为 IE指定特别的值。8. float元素的宽度之和要小于 100%如果 float元素的宽度之和正好是 100%，某些古老的浏览器将不能正常显示。因此请保证宽度之和小于 99%。9. 是否重设了默认的样式?某些属性如 margin、padding 等，不同浏览器会有不同的解释。因此最好在开发前首先将全体的 margin、

14、padding 设置为 0、列表样式设置为 none等。10. 是否忘记了写 DTD?如果无论怎样调整不同浏览器显示结果还是不一样，那么可以检查一下页面开头是不是忘了写下 DTD声明。最后，需要注意的是，蜘蛛不喜欢一个页面有太多的 css代码，否则同样会影响蜘蛛的爬行，影响搜索引擎的收录，所以采用外部调用的方式调用 CSS是非常不错的方法。而同时，若非必须太多花哨的网站，采用 CSS布局，同样可以到达所想要的效果。如网站导航中的文字颜色变化、下拉菜单等。5 创建编辑创建和编辑 css更加常用的是 AdobeDreamweaver系列软件，可视化编辑更利于web工程师快速的创建和编辑 css，新

15、版本 CS5.0、CS5.5、CS6.0、CC，包含Adobe BrowserLab，用于针对多种浏览器测试 css的兼容性。Adobe Dreamweaver是一个 css创建和编辑必不可少的利器！FrontPage2000 包含有能用来为站点创建外部样式表的模板。可以用空白模板或已包含样式的模板来创建（例如 Arcs）。当保存样式表时， FrontPage 会以 . css 作为文件扩展名。要编辑样式表，请双击文件夹列表中的样式表。当创建或修改网页样式时，可使用位于 “格式” 菜单的 “样式” 命令，FrontPage 会自动创建嵌入的样式表（如果原先不存在），并在嵌入的样式表内将此样式保

16、存为类选择器。可以使用 “样式” 对话框来创建新类选择器，修改或删除现有类选择器，或将 CSS 格式设置属性应用到标准 HTML标记符上例如 。当单击 “确定” 关闭对话框时，FrontPage 会将格式设置特征写回到使用正确语法的外部或嵌入的样式表中。或者，可以用正确 CSS 语法键入样式信息。要键入嵌入的样式表的样式信息，请单击网页视图模式下的 “HTML” 选项卡。如果对应用到站点的主题选择 “应用 CSS ” 复选框，FrontPage 将在站点的根目录下创建名为 Theme 1 .css 的文件，其中 Theme 是主题的名称。如果修改主题，FrontPage 自动将更改写回主题 C

17、SS 里。也可以通过直接编辑主题 CSS 来修改主题。6 基础语法CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。选择器 宣言 1; 宣言 2; . 宣言 N 选择器通常是您需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。选择器 property: value下面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。在这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是

18、值。h1 color:red; font-size:14px;下面的示意图为您展示了上面这段代码的结构：值的不同写法和单位除了英文单词 red，我们还可以使用十六进制的颜色值 #ff0000：p color: #ff0000; 为了节约字节，我们可以使用 CSS 的缩写形式：p color: #f00; 我们还可以通过两种方法使用 “红绿蓝”RGB 值：p color: rgb(255,0,0); p color: rgb(100%,0%,0%); 请注意，当使用 RGB 百分比时，即使当值为 0 时也要写百分比符号。但是在其他的情况下就不需要这么做了。比如说，当尺寸为 0 像素时，0 之后不

19、需要使用 px 单位，因为 0 就是 0，无论单位是什么。值为若干词须写引号提示：如果值为若干词，则要给值加引号：p font-family: “sans serif“;多重声明如果要定义不止一个声明，则需要用分号将每个声明分开。下面的例子展示出如何定义一个红色文字的居中段落。最后一条规则是不需要加分号的，因为分号在英语中是一个分隔符号，不是结束符号。然而，大多数有经验的设计师会在每条声明的末尾都加上分号，这么做的好处是，当你从现有的规则中增减声明时，会尽可能地减少出错的可能性。就像这样：p text-align:center; color:red;你应该在每行只描述一个属性，这样可以增强样式

20、定义的可读性，就像这样：p text-align: center; color: black; font-family: arial;空格和大小写大多数样式表包含不止一条规则，而大多数规则包含不止一个声明。多重声明和空格的使用使得样式表更容易被编辑：body color: #000; background: #fff; margin: 0; padding: 0; font-family: Georgia, Palatino, serif; 是否包含空格不会影响 CSS 在浏览器的工作效果，同样，与 XHTML 不同，CSS 对大小写不敏感。不过存在一个例外：如果涉及到与 HTML 文档一起工

21、作的话，class 和 id 名称对大小写是敏感的。 17 删除样式使用 Frontpage编辑时，在页面视图下打开样式文件。格式/样式命令，从打开的“样式”对话框中选择要删除的样式，单击“删除”。专业人士可能会用代码写 CSS样式，例如给一个 div块内的内容连接样式可以使用下面的语句：，而当你要删除样式时，把尖括号里面的“class=classname “语句去掉即可。WEB技术 HTML XHTML HTML 5 CSS TCP/IP XMLXML XSL XSLT XSL-FO XPath XPointer XLink DTD XML Schema DOM XForms SOAP WSDL RDF RSS WAP Web Services Web脚本 JavaScript HTML DOM DHTML VBScript AJAX jQuery JSON E4X WMLScript Serv脚本 SQL ASP ADO PHP .NET Microsoft.NET .NET Mobile 多媒体 SMIL SVG 参考资料 1 CSS 基础语法 w3school 引用日期 2013-11-7 词条标签：计算机软件 web技术