CSS语义化标准

合集下载

web前端中级面试题

web前端中级面试题Web前端中级面试题HTML基础•HTML是什么？它是一种什么样的语言？•HTML5相比于HTML4有哪些改进和新增的特性？•什么是语义化标签？为什么要使用语义化标签？•请解释什么是DOCTYPE及其作用。

CSS基础•什么是盒模型？请描述标准盒模型和IE盒模型的区别。

•请解释什么是CSS选择器及其优先级。

•CSS中position属性有哪些取值？请分别描述它们的特点和使用场景。

•请解释CSS的浮动及清除浮动的方法。

JavaScript基础•JavaScript的数据类型有哪些？请描述他们之间的转换规则。

•什么是原型链？请解释JavaScript中的继承原理。

•请描述闭包的概念和优缺点。

•什么是事件冒泡和事件捕获？请描述它们的区别和用法。

前端框架和工具•请列举几个比较流行的JavaScript前端框架，描述它们的特点和适用场景。

•什么是模块化开发？请列举几个常用的JavaScript模块化开发工具。

•请解释什么是异步编程，并举例说明异步编程的用途和常用的处理方式。

•请描述一下的生命周期钩子函数及其执行顺序。

前端性能优化•什么是前端性能优化？请列举一些常见的性能优化方案。

•请解释什么是延迟加载，如何实现延迟加载的效果？•什么是雪碧图？请解释它的原理和优势。

•请列举几个前端性能监控指标，并描述它们的作用。

通信和安全•请解释同源策略及其限制，以及如何实现跨域通信。

•请描述一下HTTP和HTTPS的区别和安全机制。

•什么是XSS攻击？如何防止XSS攻击？•请解释CSRF攻击，以及如何防范CSRF攻击。

代码质量和调试•请解释什么是代码规范，以及为什么要遵守代码规范？•请列举几个常用的前端代码规范工具，并简单描述它们的使用方法。

•请解释什么是调试，以及在开发过程中常用的调试方法。

•请列举个别在开发过程中常见的错误，以及如何进行调试和修复。

面试技巧•在面试过程中，你如何展示你的个人项目和作品集？•你在前端领域中遇到过的最具挑战性的问题是什么？你是如何解决它的？•请解释一下你在团队合作中的角色和贡献。

什么是 CSS

什么是CSS？CSS（Cascading Style Sheets）是一种用于描述网页样式和布局的样式表语言。

它与HTML结合使用，为网页提供外观和样式的控制。

CSS通过选择器和属性来选择和定义网页中的元素，使得开发人员可以轻松地改变网页的外观、布局和交互效果。

以下是CSS的一些关键概念和特点：1. 样式表：CSS是一种样式表语言，用于定义网页元素的外观和布局。

样式表由一系列的规则组成，每个规则由选择器和一组样式属性构成。

2. 选择器：CSS使用选择器来选择网页中的元素，并将样式应用于这些元素。

选择器可以根据元素的标签名、类名、ID、属性等进行匹配。

例如，选择器`p`选择所有的段落元素，选择器`.class`选择所有具有特定类名的元素。

3. 样式属性：CSS使用属性来描述元素的外观和布局。

属性定义了元素的颜色、字体、大小、边框、间距等方面的样式。

例如，属性`color`定义了元素的文本颜色，属性`font-size`定义了元素的字体大小。

4. 层叠和继承：CSS的名称中包含了"层叠"（Cascading）一词，表示样式的层叠和优先级规则。

当多个样式规则应用于同一个元素时，CSS使用层叠规则来确定最终的样式。

此外，CSS 中还存在继承的概念，某些样式属性可以从父元素继承到子元素。

5. 盒模型：CSS中的盒模型用于描述元素的布局。

每个元素都被视为一个矩形盒子，其包括内容区域、内边距、边框和外边距。

开发人员可以通过设置盒模型相关的属性来控制元素的大小和间距。

6. 响应式设计：CSS可以用于实现响应式设计，即根据不同设备和屏幕尺寸自动调整和适应网页的布局和样式。

通过使用CSS媒体查询或CSS框架，可以根据设备的特性和屏幕尺寸应用不同的样式。

7. CSS预处理器：CSS预处理器是一种将类似编程语言的语法引入CSS的工具。

它们增加了变量、嵌套规则、函数、导入等功能，使得CSS的编写更加灵活和可维护。

htmlcssjs考试题及答案

htmlcssjs考试题及答案HTML/CSS/JS考试题及答案一、选择题（每题3分，共30分）1. HTML5中，哪个元素用于定义最重要的标题？A. `<h1>`B. `<h6>`C. `<p>`D. `<div>`答案：A2. CSS中，哪个属性用于设置文本的颜色？A. `color`B. `background-color`C. `font-size`D. `text-align`答案：A3. 在HTML中，`<form>`元素的哪个属性用于指定表单数据提交到服务器的URL？A. `action`B. `method`C. `type`D. `href`答案：A4. JavaScript中，哪个函数用于将字符串转换为小写？A. `toLowerCase()`B. `toUpperCase()`C. `trim()`D. `replace()`答案：A5. CSS中，哪个选择器用于选择类名为“header”的所有元素？A. `.header`B. `#header`C. `header`D. `[name="header"]`答案：A6. 在HTML中，哪个元素用于定义客户端脚本？A. `<script>`B. `<noscript>`C. `<embed>`D. `<object>`答案：A7. JavaScript中，哪个对象用于处理浏览器窗口？A. `window`B. `document`C. `navigator`D. `screen`答案：A8. CSS中，哪个属性用于设置元素的宽度？A. `width`B. `height`C. `max-width`D. `min-width`答案：A9. HTML5中，哪个元素用于定义一个节或文档的一部分？A. `<section>`B. `<article>`C. `<div>`D. `<header>`答案：A10. JavaScript中，哪个方法用于将字符串分割成数组？A. `split()`B. `join()`C. `slice()`D. `substring()`答案：A二、填空题（每题4分，共20分）1. HTML中的`<meta>`标签用于提供______信息。

列举常见的语义化模块并作解释

列举常见的语义化模块并作解释语义化模块是前端开发中非常重要的概念之一，它可以帮助我们更好地理解和使用HTML标记语言。

在本文中，我将列举并解释一些常见的语义化模块，以便读者能够全面了解它们的作用和用法。

1. <header> 标签：这个标签用于表示页面或文章的标题栏，通常包含网站的标识、页面的标题以及导航菜单等重要内容。

通过使用<header>标签，我们可以让浏览器更好地识别和解释这个区域的作用。

2. <nav> 标签：这个标签用于表示页面的导航区域，通常包含网站的主导航菜单。

使用<nav>标签而不是<div>等普通容器可以提供额外的语义化信息，帮助搜索引擎和屏幕阅读器更好地理解网页结构。

3. <article> 标签：这个标签用于表示独立、完整且可独立使用的内容块，比如新闻文章、博客文章等。

通过使用<article>标签，我们可以告诉浏览器这是一个独立的文章，有助于改善搜索引擎的索引和阅读体验。

4. <section> 标签：这个标签用于将页面内容划分为逻辑上相关的部分。

一个<section>可以包含一个或多个语义化标签，比如<article>、<header>、<footer>等。

通过使用<section>标签，我们可以更好地组织页面结构，使其更具语义化，并帮助提高可访问性。

5. <aside> 标签：这个标签用于表示页面的侧边栏或辅助内容。

通常在使用<aside>标签时，被包含的内容应该是与正文内容相关但不是主要的信息，比如广告、相关链接、作者简介等。

6. <footer> 标签：这个标签用于表示页面的底部区域，通常包含版权信息、通信方式等。

使用<footer>标签可以使底部区域更具语义化，并提高可访问性。

lighthouse 评分标准

【lighthouse 评分标准】一、背景介绍1.1 什么是 lighthouse？lighthouse 是一个由 Google 提供的开源的自动化工具，用于改善网页质量。

1.2 lighthouse 的作用是什么？lighthouse 可以对网页进行性能、可访问性、最佳实践、SEO等方面的评估，帮助网页开发者找出改进建议并提高用户体验。

二、评分指标2.1 性能lighthouse 对网页加载速度、性能优化等方面进行评估，包括页面加载时间、资源利用情况等。

2.2 可访问性lighthouse 对网页的可访问性进行评估，包括字体、颜色对比度、键盘操作等。

2.3 最佳实践lighthouse 对网页代码的结构、优化等方面进行评估，包括代码规范、响应式设计等。

2.4 SEOlighthouse 对网页的搜索引擎优化情况进行评估，包括页面标题、meta 标签、网页结构等。

三、评分标准3.1 性能评分标准- 首次内容绘制（FCP）：大约在 0.4 秒内为优秀，0.4 - 0.6 秒为一般，超过 0.6 秒为较慢。

- 页面加载时间（LCP）：大约在 2.5 秒内为优秀，2.5 - 4 秒为一般，超过 4 秒为较慢。

- 性能最佳实践：评分指标为 100 为优秀，0 为最差。

3.2 可访问性评分标准- 页面结构语义化：评分指标为 100 为优秀，0 为最差。

- 键盘操作友好性：评分指标为 100 为优秀，0 为最差。

3.3 最佳实践评分标准- HTML、CSS 规范性：评分指标为 100 为优秀，0 为最差。

- 响应式设计优化：评分指标为 100 为优秀，0 为最差。

3.4 SEO 评分标准- 页面标题和 meta 描述：评分指标为 100 为优秀，0 为最差。

- 内部信息结构优化：评分指标为 100 为优秀，0 为最差。

四、参考建议4.1 性能方面的参考建议- 使用适合当前网络情况的图片格式，并进行适当的压缩。

CSS中如何实现元素的命名规范

CSS中如何实现元素的命名规范在网页设计和开发中，CSS（层叠样式表）是用于控制网页样式的重要工具。

而良好的元素命名规范对于提高代码的可读性、可维护性以及团队协作的效率都起着至关重要的作用。

接下来，让我们深入探讨在 CSS 中如何实现元素的命名规范。

首先，我们需要明确为什么要有命名规范。

想象一下，你打开一个包含大量 CSS 代码的文件，如果元素的命名毫无规律，就像是进入了一个混乱的迷宫，会让人感到困惑和迷茫。

相反，有了清晰、一致的命名规范，就能迅速找到需要修改或调整样式的元素，大大提高工作效率。

那么，什么样的命名才算规范呢？其一，命名应该具有描述性。

这意味着名称要能够清晰地传达元素的用途或功能。

比如，如果是一个导航栏的元素，我们可以命名为“navbar”；如果是一个登录按钮，就可以命名为“loginbtn”。

通过这样直观的命名，其他人在阅读代码时能够一目了然地知道元素的作用。

其二，要保持命名的一致性。

这包括使用相同的命名风格和规则。

比如，是使用连字符“”还是下划线“＿”来分隔单词，一旦确定，就要在整个项目中保持一致。

同时，对于相似功能的元素，也要采用相似的命名模式，例如“headerlogo”和“footerlogo”。

接下来，谈谈命名的长度问题。

一般来说，命名不应该过于冗长，否则会显得繁琐。

但也不能太短，以至于无法准确表达元素的含义。

找到一个恰当的平衡是关键。

再来说说命名的格式。

常见的有 BEM（块（Block）、元素（Element）、修饰符（Modifier））命名法。

在 BEM 中，一个元素的名称由块名、元素名和可选的修饰符组成。

例如，“header”是块名，“header__title”是元素名，“header__titleactive”是带有修饰符的名称。

这种命名方式能够清晰地划分出不同的部分，使得样式的作用范围更加明确。

在实际应用中，还需要注意避免使用过于通用的名称，比如“box”“container”等。

w3c的web标准

w3c的web标准W3C的Web标准。

W3C（World Wide Web Consortium）是一个国际性的标准制定机构，致力于制定和推广Web技术标准，以促进Web的健康发展。

W3C的Web标准是指由W3C制定的一系列规范和建议，旨在确保Web内容的可访问性、互操作性和可持续性。

这些标准涵盖了Web的各个方面，包括HTML、CSS、JavaScript等技术，对于Web开发者和网站设计者来说，了解和遵循这些标准至关重要。

首先，W3C的Web标准对于Web内容的可访问性至关重要。

可访问性是指Web内容对于残障人士和老年人群体的易用性和可理解性。

根据W3C的标准，网站应该提供清晰的页面结构、语义化的HTML标记、可访问的多媒体内容等，以确保残障人士也能够方便地获取信息和使用Web服务。

遵循可访问性标准不仅是一种道德责任，也是对于更广泛用户群体的尊重和包容。

其次，W3C的Web标准对于Web内容的互操作性至关重要。

互操作性是指不同平台、不同设备、不同浏览器之间能够无缝地交互和展示Web内容。

W3C的标准要求开发者使用标准化的HTML、CSS和JavaScript语法，避免使用浏览器特有的技术和私有标签，以确保Web内容在不同环境下都能够正确地呈现和交互。

这种互操作性不仅有利于用户体验，也有利于降低开发和维护成本，提高Web应用的可扩展性和可维护性。

最后，W3C的Web标准对于Web内容的可持续性至关重要。

可持续性是指Web内容能够在长期内稳定地存在和使用，不会因为技术的迅速更新而失效。

W3C的标准鼓励开发者使用语义化的HTML标记、分离式的CSS样式表、模块化的JavaScript代码等技术，以确保Web内容的结构清晰、样式可定制、交互可扩展。

这种可持续性不仅有利于内容的长期维护和更新，也有利于提高内容的可维护性和可扩展性。

总之，W3C的Web标准是Web开发者和网站设计者必须要遵循的一系列规范和建议，它们涵盖了Web内容的可访问性、互操作性和可持续性，对于Web的健康发展起着至关重要的作用。

web前端规范

web前端规范Web前端规范是指在开发网页前端时要遵循的一系列约定和规范。

遵循规范可以提高代码的可读性、可维护性和可重用性，加快开发进度，减少错误发生的可能，提高团队合作效率。

以下是一些常见的Web前端规范：1. HTML规范：- 使用语义化标签，如header、footer、nav等- 避免使用inline样式，使用外部CSS文件- 避免使用行内事件的方式绑定事件，推荐使用addEventlListener2. CSS规范：- 使用唯一的class命名规范，如BEM（Block Element Modifier）- 使用层叠样式表（CSS）命名空间，避免全局样式的影响- 避免使用!important，除非必要情况下- 注释清晰明了，标明样式的用途和作用范围3. JavaScript规范：- 使用驼峰命名法来命名变量、函数和对象- 使用严格模式"use strict"- 避免使用全局变量- 注释清晰明了，标明函数的参数和返回值4. 文件和目录规范：- 使用有意义的文件名，避免使用中文和特殊字符- 使用文件和目录的层级结构进行组织- 分离HTML、CSS和JavaScript代码，避免混写5. 性能优化规范：- 减少HTTP请求的次数，合并和压缩文件- 使用CSS Sprite来减少图片的请求- 尽量避免在DOM加载完成之后再加载JavaScript文件6. 兼容性规范：- 使用现代浏览器支持的HTML5和CSS3特性- 使用兼容性的JavaScript写法，避免使用不支持的语法和API7. 版本控制规范：- 使用版本控制系统（如Git）管理代码- 使用合适的分支管理策略- 提交规范的commit注释除了以上提到的规范外，还有很多其他的规范，如代码缩进、代码注释、错误处理等。

具体的规范可以根据项目和团队的需求进行调整和补充。

总结起来，Web前端规范是一系列的约定和规范，帮助开发团队更好地组织和管理代码，提高代码质量和团队合作效率。

css语言

CSS语言课堂讲解贾达伟QQ：76311030 1 什么是CSS•CSS是Cascading Style Sheets(层叠样式表)的简称.•CSS语言是一种标记语言,它不需要编译,可以直接由浏览器执行(属于浏览器解释型语言).•在标准网页设计中CSS负责网页内容的表现.•CSS文件也可以说是一个文本文件,它包含了一些CSS标记,CSS 文件必须使用css为文件名后缀.•可以通过简单的更改CSS文件,改变网页的整体表现形式,可以减少我们的工作量,所以她是每一个网页设计人员的必修课.2 使用CSS的优势•内容与表现分离,有了CSS,网页的内容(XHMTL)与表现就可以分开了.•使用CSS可以减少网页的代码量,增加网页的浏览速度3 CSS插入到html语言中的三种方式3.1 直接插入式：直接插入式很简单，只是在每个HTML标志后书写CSS属性就可以了。

这种方式很直接，如我们想规定一个Table标志中的字为红色，字体大小为10pt，则可书写如下：<table style="color:red；font-size:10pt">这种方式主要用于对具体的标志做具体的调整,其作用的范围只限于本标志。

这种方式是将风格直接定义在文档头<Head></Head>之间。

这种风格定义产生作用的范围也只局限于本文件，其格式如示例。

外部文件方式即将CSS写成一个文件的方式，在HTML文档头通过文件引用来进行风格控制。

CSS文件的引用是在HTML的<head></head>标志之间写下列语句：<link rel="stylesheet" href="文件名.CSS" type="text/css">如当前文件目录下有一个CSS 文件名为myStyle.css，其内容如下用下列语句：<link rel="stylesheet" href="myStyle.css" type="text/css">应用CSS文件的一个最大好处就是，你可以在每个HTML文件中引用这个文件，从而可使整个站点的HMTL文件在风格上保持一致，避免重复的CSS属性设置；4 常用的一些CSS属性4.1 超链接颜色的设置a:link { text-decoration:none； color:blue } //未链接前的颜色a:visited { text-decoration:none；color:red } //链接过后的颜色a:active { text-decoration:none；color:green} //链接活动时的颜色a:hover { text-decoration:underline；color:yellow} //链接盘旋状态时的颜色4.2 如何实现背景图片平铺样式background-repeat：repeat: 平铺整个页面,左右与上下repeat-x: 在x轴上平铺,左右repeat-y: 在y轴上平铺,上下no-repeat: 图片不重复background-repeat：repeat-x4.3 CSS设置滚动条样式body{scrollbar-face-color：blue；//设置滚动条页面颜色scrollbar-track-color：yellow；//设置滚动条底面颜色scrollbar-arrow-color：red；//设置滚动条两端箭头颜色scrollbar-highlight-color：black；//设置滚动条斜面和左面颜色scrollbar-shadow-color：#FF3399；//设置滚动条下斜面和右面颜色}4.4 CSS设置鼠标样式cursor：hand/wait/help/move/crosshair。

css命名规范

css命名规范CSS（CascadingStyleSheets）命名规范是前端开发工程师在编写CSS代码时应遵循的规则和原则，规范的CSS代码可以提高CSS维护的效率和可维护性，而且在大型项目中，一致的CSS命名规范可以帮助开发工程师顺利协作，降低沟通成本。

CSS命名规范是以CSS的语义化作为起点，通过统一的命名方式来增强CSS的语义，使所有的命名保持一致。

语义化命名规范可以更好地提供给未来的维护者，提高代码的可读性和可维护性，从而缩短开发的时间。

具体的CSS命名规范包括：一、class和id的命名1. class和id的准则*一使用小写字母命名*名使用有意义的单词，多个单词之间用_和-连接，不要使用中文或拼音*分大小写* 不要以数字开头2. Class的命名*于class命名应尽可能以根据特定的含义进行命名，保证通用性，如：box、content、title、header、main等*于class的命名也可以根据特定的功能进行命名，如：btn、active、rotate等*于特定的class也可以进行简写，如：nav、hdr、ftr等3. id的命名* id的命名可以尽可能地体现特定的含义，如：logo、header-nav 等；*于特定的模块可以使用特定的命名，如：page-content、page-title等二、变量的命名1.量命名规则*量名使用驼峰式命名，即每个单词以大写字母开头* 不要使用中文或拼音*量名最好有意义* 不要用缩写2.量的命名*于基本的变量名可以尽可能使用根据特定含义进行命名，如：userName、dbName等;*于特定的变量可以根据功能进行命名，如：url、maxWidth等; *于特定的变量可以使用缩写，如：bNum、uLevel等。

三、属性的命名1.性命名规则*性使用小写字母命名*性的命名最好有意义*量使用有意义的属性名，不使用缩写2.性的命名*于基本属性名，尽可能使用有意义的名字，如：font-size、color 等；*特定的属性可以使用缩写，如：bg、bd等。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

CSS标准化命名规则一、文件命名规范基本样式：base.css全局样式：global.css框架布局：layout.css字体样式：font.css链接样式：link.css打印样式：print.css二、常用类/ID命名规范页眉：header内容：content容器：container页脚：footer版权：copyright导航：menu主导航：mainMenu子导航：subMenu标志：logo标语：banner标题：title侧边栏：sidebar图标：icon注释：note搜索：search按钮：btn登录：login链接：link信息框：manage……常用类的命名应尽量以常见英文单词为准，做到通俗易懂，并在适当的地方加以注释。

对于二级类/ID命名，则采用组合书写的模式，后一个单词的首字母应大写：诸如“搜索框”则应命名为“searchInput”、“搜索图标”命名这“searchIcon”、“搜索按钮”命名为“searchBtnXHTML-CSS写作建议1、所有的xhtml代码小写；2、属性的值一定要用双引号("")括起来，且一定要有值；3、每个标签都要有开始和结束，且要有正确的层次；4、空元素要有结束的tag或于开始的tag后加上"/"；5、表现与结构完全分离，代码中不涉及任何的表现元素，如style、font、bgColor、border等；6、<h1>到<h5>的定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引擎的查询；7、给每一个表格和表单加上一个唯一的、结构标记id；8、给重要的区块加上注释；9、给图片加上alt属性；10、所有的标签必须进行合理的嵌套；11、根元素前必须有元素，宣告使用那一种DTD；12、根元素必须有xmlns属性来指定使用/1999/xhtml的namespace。

三、常规书写规范及方法1、选择DOCTYPEXHTML 1.0 提供了三种DTD声明可供选择：过渡的(Transitional)：要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。

完整代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 严格的(Strict)：要求严格的DTD，你不能使用任何表现层的标识和属性，例如<br>。

完整代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""/TR/xhtml1/DTD/xhtml1-strict.dtd">框架的(Frameset)：专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD。

完整代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN""/TR/xhtml1/DTD/xhtml1-frameset.dtd">理想情况当然是严格的DTD，但对于我们大多数刚接触web 标准的设计师来说，过渡的DTD(XHTML 1.0 Transitional)是目前理想选择(包括本站，使用的也是过渡型DTD)。

因为这种DTD还允许我们使用表现层的标识、元素和属性，也比较容易通过W3C的代码校验。

2、指定语言及字符集为文档指定语言：<html xmlns="/1999/xhtml" lang="en">为了被浏览器正确解释和通过W3C代码校验，所有的XHTML文档都必须声明它们所使用的编码语言，如：常用的语言定义：<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />标准的XML文档语言定义：<?xml version="1.0" encoding="utf-8"?>针对老版本的浏览器的语言定义：<meta http-equiv="Content-Language" content="utf-8" />为提高字符集，建议采用“utf-8”。

3、样式表调用1、页面内嵌法：就是将样式表直接写在页面代码的head区。

如：<style type="text/css"><!–body{background : white; color : black;} –></style>2、外部调用法：将样式表写在一个独立的.css文件中，然后在页面head区用类似以下代码调用。

如果所有页面都调用同一个样式表文件，那么改一个样式表文件，可以改变所有文件的样式。

4、选用恰当的元素根据文档的结构来选择HTML元素，而不是根据HTML元素的样式来选择。

例如，使用P元素来包含文字段落，而不是为了换行。

如果在创建文档时找不到适当的元素，则可以考虑使用通用的div 或者是span；避免过渡使用div和span。

少量、适当的使用div和span元素可以使文档的结构更加清晰合理并且易于使用样式；尽可能少地使用标签和结构嵌套，这样不但可以使文档结构清晰，同时也可以保持文件的小巧，在提高用户下载速度的同时，也易于浏览器对文档的解释及呈视。

5、派生选择器可以使用派生选择器给一个元素里的子元素定义样式，在简化命名的同时也使结构更加的清晰化，如：.mainMenu ul li {background:url(images/bg.gif;)}6、辅助图片用背影图处理这里的”辅助图片”是指那些不是作为页面要表达的内容的一部分，而仅仅用于修饰、间隔、提醒的图片。

将其做背影图处理，可以在不改动页面的情况下通过CSS样式来进行改动，如：#logo {background:url(images/logo.jpg) #FEFEFE no-repeat right bottom;}7、结构与样式分离在页面里只写入文档的结构，而将样式写于css文件中，通过外部调用CSS样式表来实现结构与样式的分离。

8、文档的结构化书写页面CSS文档都应采用结构化的书写方式，逻辑清晰易于阅读。

如：<div id=”mainMenu”><ul><li><a href=”#” >首页</a></li><li><a href=”#” >介绍</a></li><li><a href=”#” >服务</a></li></ul></div>/*=====主导航=====*/#mainMenu {width:100%;height:30px;background:url(images/mainMenu_bg.jpg) repeat-x;}#mainMenu ul li {float:left;line-height:30px;margin-right:1px;cursor:pointer;}/*=====主导航结束=====*/9、鼠标手势在XHTML标准中，hand只被IE识别，当需要将鼠标手势转换为“手形”时，则将“hand”换为“pointer”，即“cursor:pointer;”。

10、注释书写规范1、行间注释直接写于属性值后面，如：.search{border:1px solid #fff;/*定义搜索输入框边框*/background:url(../images/icon.gif) no-report #333;/*定义搜索框的背景*/}2、整段注释分别在开始及结束地方加入注释，如：/*=====搜索条=====*/.search {border:1px solid #fff;background:url(../images/icon.gif) no-repeat #333;}/*=====搜索条结束=====*/3．协助注释非作者维护时所加入的表示修改时间、修改人等标识信息。

在区域注释或单行注释的基础上加上修改人和修改时间等信息。

例(区域注释)：<div>...</div>/*=S 注释内容[修改人和修改时间]*/.class{...}.class{...}/*=E 注释内容[修改人和修改时间]*/例(单行注释)：<div>...</div>.class{/*注释内容[修改人和修改时间]*/...}11、样式属性代码缩写1、不同类有相同属性及属性值的缩写：对于两个不同的类，但是其中有部分相同甚至是全部相同的属性及属性值时，应对其加以合并缩写，特别是当有多个不同的类而有相同的属性及属性值时，合并缩写可以减少代码量并易于控制。

如：#mainMenu {background:url(../images/bg.gif);border:1px solid #333;width:100%;height:30px;overflow:hidden;}#subMenu {background:url(../images/bg.gif);border:1px solid #333;width:100%;height:20px;overflow:hidden;}两个不同类的属性值有重复之处，刚可以缩写为：#mainMenu,#subMenu {background:url(../images/bg.gif);border:1px solid #333;width:100%;overflow:hidden;}#mainMenu {height:30px;}#subMenu {height:20px;}2、同一属性的缩写：同一属性根据它的属性值也可以进行简写，如：.search {background-color:#333;background-image:url(../images/icon.gif);background-repeat: no-repeat;background-position:50% 50%;}.search {background:#333 url(../images/icon.gif) no-repeat 50% 50%; }3、内外侧边框的缩写：在CSS中关于内外侧边框的距离是按照上、右、下、左的顺序来排列的，当这四个属性值不同时也可直接缩写，如：.btn {margin-top:10px;margin-right:8px;margin-bottom:12px;margin-left:5px;padding-top:10px;padding-right:8px;padding-bottom:12px;padding-left:8px;}则可缩写为：.btn {Margin:10px 8px 12px 5px;Padding:10px 8px 12px 5px;}而如果当上边与下边、左边与右边的边框属性值相同时，则属性值可以直接缩写为两个，如：.btn {margin-top:10px;margin-right:5px;margin-bottom:10px;margin-left:5px;}缩写为：.btn {margin:10px 5px;}而当上下左右四个边框的属性值都相同时，则可以直接缩写成一个，如：.btn {margin-top:10px;margin-right:10px;margin-bottom:10px;margin-left:10px;}缩写为：.btn{margin:10px;}4、颜色值的缩写：当RGB三个颜色值数值相同时，可缩写颜色值代码。