阅读量:0
在CSS设计网页时，常用规范包括使用一致的命名规则、遵循盒模型、保持代码简洁和可维护性、使用注释以及遵循响应式设计原则。
在CSS设计网页时，遵循一些常用的规范可以大大提高代码的可读性、维护性和兼容性，以下是一些关键的CSS设计规范：
CSS命名规范
1、文件命名规范
全局样式：global.css
框架布局：layout.css
字体样式：font.css
链接样式：link.css
打印样式：print.css
2、常用类/ID命名规范
页眉：header
容器：container
页脚：footer
主导航：mainMenu
子导航：subMenu
标志：logo
标语：banner
图标：Icon
3、注释规范
在复杂的选择器和属性后添加注释，说明其用途，如：
```css
.search {
border: 1px solid #fff; /* 定义搜索输入框边框 */
background: url(../images/icon.gif) norepeat #333; /* 定义搜索框的背景 */
}
```
CSS书写规范及方法
1、选择DOCTYPE
XHTML 1.0提供了三种DTD声明：过渡型（Transitional）、严格型（Strict）和框架型（Frameset），对于大多数项目，推荐使用过渡型DTD，因为它允许继续使用HTML4.01的标识。
2、指定语言及字符集
为文档指定语言和字符集，确保浏览器正确解释和通过W3C代码校验，推荐使用UTF8字符集。
3、调用样式表
推荐使用外部调用法，将样式表写在一个独立的.css文件中，然后在页面head区用类似以下代码调用：
```html
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
```
这样可以不修改页面只修改.css文件而改变页面的样式。
4、选用恰当的元素
根据文档的结构来选择HTML元素，而不是根据HTML元素的样式来选择，使用<p>元素来包含文字段落，而不是为了换行。
5、派生选择器
可以使用派生选择器给一个元素里的子元素定义样式，在简化命名的同时也使结构更加清晰化，如：
```css
.mainMenu ul li { background: url(images/bg.gif); }
```
6、辅助图片用背影图处理
对于不是作为页面要表达的内容的一部分，而仅仅用于修饰、间隔、提醒的图片，将其做背影图处理，可以在不改动页面的情况下通过CSS样式来进行改动。
7、结构与样式分离
在页面里只写入文档的结构，而将样式写于CSS文件中，通过外部调用CSS样式表来实现结构与样式的分离。
常见问题解答（FAQs）
1、为什么推荐使用外部调用样式表？
使用外部调用样式表可以不修改HTML页面只修改CSS文件而改变页面的样式，如果所有页面都调用同一个样式表文件，那么改一个样式表文件，可以改变所有文件的样式，提高了代码的复用性和可维护性。
2、为什么建议采用“utf8”字符集？
UTF8是一种针对Unicode的可变长度字符编码，它可以使用1到4个字节表示一个符号，根据不同的符号长度不同，UTF8用1到3个字节可编码所有Unicode的字符，而UTF16使用了2到4个字节，对于只需要基本多语言支持的系统来说，UTF8更为节省空间。
CSS设计网页时的常用规范
1. 命名规范
简洁性：使用有意义的单词组合，避免缩写和特殊字符。
一致性：保持类名、ID命名的一致性，便于团队协作和维护。
语义化：使用描述性的名称，反映元素的用途或结构。
2. 代码结构
缩进与空格：使用一致的缩进（如2个空格）和空格，提高代码可读性。
注释：添加必要的注释，解释代码的目的和功能。
顺序：按照功能或类型对CSS属性进行排序，如：布局、颜色、字体、其他。
3. 属性选择
使用标准属性：优先使用W3C推荐的标准属性。
避免过时属性：尽量避免使用已弃用或即将弃用的CSS属性。
优化选择器：使用高效的选择器，减少DOM查询次数。
4. 颜色使用
使用颜色代码：使用十六进制、RGB、RGBA等颜色代码，确保颜色一致性。
避免纯色：使用渐变、纹理等效果增加视觉效果。
遵循色彩理论：考虑色彩搭配，避免色彩过于刺眼或冲突。
5. 字体与排版
使用Web安全字体：优先选择Web安全字体，如Arial、Times New Roman等。
字体大小与行高：确保字体大小适中，行高适宜，提高阅读体验。
文本对齐：保持文本对齐的一致性，如左对齐、居中对齐等。
6. 布局与定位
响应式设计：使用媒体查询和百分比单位，实现不同设备上的适应性。
浮动与定位：合理使用浮动和定位，避免布局错乱。
盒模型：理解并正确使用盒模型，包括margin、padding、border和content。
7. 媒体查询
针对性：根据不同设备的特点编写媒体查询，优化用户体验。
避免过度使用：合理使用媒体查询，避免代码冗余。
使用简洁的选择器：使用简洁的选择器，减少查询时间。
8. 性能优化
压缩CSS文件：使用工具压缩CSS文件，减少文件大小。
合并重复代码：合并重复的CSS规则，减少文件大小。
避免重排与重绘：优化代码，减少不必要的重排和重绘。
9. 安全与兼容性
避免跨浏览器问题：测试在不同浏览器上的兼容性，确保代码在不同浏览器中表现一致。
遵循W3C标准：遵循W3C的CSS规范，确保代码的正确性和稳定性。
避免使用已知漏洞：避免使用已知漏洞的CSS属性，如expression等。
排版示例
/* 命名规范 */ a.navlink { color: #333; textdecoration: none; } /* 代码结构 */ /* 布局 */ .container { width: 80%; margin: 0 auto; } /* 字体与排版 */ h1 { fontsize: 24px; lineheight: 1.5; color: #444; } /* 响应式设计 */ @media (maxwidth: 768px) { .container { width: 95%; } }为CSS设计网页时的一些常用规范，遵循这些规范可以提高代码质量，提升用户体验。
