DIV CSS布局基础与命名规范解析

24 浏览量更新于2024-09-01 收藏 92KB PDF 举报

“DIV CSS网页布局的基础知识整理，包括CSS命名规范和CSS书写规范及方法。” 在网页设计和开发中，DIV CSS布局是一种常见的技术，用于创建响应式和结构化的网页。它通过使用HTML的<div>元素结合CSS（层叠样式表）来控制页面元素的样式、位置和布局。以下是对标题和描述中提到的CSS基础知识的详细解释： ### CSS命名规范命名规范是CSS编码中的一个重要方面，有助于提高代码的可读性和维护性。常见的命名规则包括： 1. **文件命名**： - 全局样式：通常命名为`global.css`，包含网站通用的样式。 - 框架布局：`layout.css`，定义页面的整体结构。 - 字体样式：`font.css`，处理页面中的文字样式。 - 链接样式：`link.css`，定义链接的颜色、状态等。 - 打印样式：`print.css`，专用于打印时的页面样式。 2. **类/ID命名**： - 使用描述性的单词或短语，如`header`表示页眉，`content`表示主要内容，`footer`表示页脚。 - 复合名词时，采用驼峰命名法，如`mainMenu`表示主导航，`subMenu`表示子导航，`searchInput`表示搜索框。 ### CSS书写规范及方法良好的CSS书写习惯可以提高代码质量，减少错误： 1. **DOCTYPE声明**： - XHTML1.0提供三种DOCTYPE声明，分别为过渡的、严格的和框架集的。例如，`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">`表示过渡型DOCTYPE，允许使用HTML4的元素。 2. **CSS选择器的使用**： - 优先使用类选择器和ID选择器，因为它们具有更高的特异性，避免过多使用元素选择器，以减少样式冲突。 - 使用命名空间，例如，`.myClass`或`#myID`，增加代码可读性。 3. **CSS注释**： - 注释要清晰明了，帮助其他开发者理解代码功能和目的。 4. **代码组织**： - 将相关的样式组织在一起，比如将所有头部样式放在一起，所有链接样式放在一起。 - 使用CSS Reset或Normalize.css消除浏览器默认样式差异。 5. **CSS属性顺序**： - 保持属性的逻辑顺序，例如，先设置位置属性（position），再设置尺寸属性（width, height），然后是颜色和文本样式。 6. **CSS预处理器**： - 可以使用Sass、Less等预处理器，提升代码的可维护性和复用性，允许变量、嵌套规则和函数。 7. **响应式设计**： - 使用媒体查询（media queries）实现不同设备和屏幕尺寸下的适配。 8. **性能优化**： - 减少不必要的选择器和属性，合并重复的样式。 - 使用`minify`工具压缩CSS，减少文件大小，提高加载速度。以上是关于DIV CSS网页布局的基础知识，包括命名规范和书写方法。遵循这些规则，可以创建出高效、易于维护的网页布局。同时，不断学习和实践，将有助于提升你的CSS技能。

DIV CSS网页布局的基础知识整理网页布局的基础知识整理

webjx.com的CSS教程栏目中汇集了大量的CSS知识，这些知识已经非常全面了，但很多CSSer新手初来本站，

依然云里雾里，现整理一些DIVCSS网页布局常用的一些基础知识，供大家学习，欢迎补充及提一些建议。CSS

命名规范一．文件命名规范全局样式：global.css；框架布局：la

jb51.net的CSS教程栏目中汇集了大量的CSS知识，这些知识已经非常全面了，但很多CSSer新手初来本站，依然云里雾里，

现整理一些DIVCSS网页布局常用的一些基础知识，供大家学习，欢迎补充及提一些建议。

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”、“搜索按钮”命

名为“searchBtn

CSS书写规范及方法

一.常规书写规范及方法

1.选择DOCTYPE：

XHTML1.0提供了三种DTD声明可供选择：

过渡的(Transitional):要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。完整代码如下：

<!DOCTYPEhtmlPUBLIC“-//W3C//DTDXHTML1.0Transitional//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd“>

严格的(Strict):要求严格的DTD，你不能使用任何表现层的标识和属性，例如<br>。完整代码如下：

<!DOCTYPEhtmlPUBLIC“-//W3C//DTDXHTML1.0Strict//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>

框架的(Frameset):专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD。完整代码如下：

<!DOCTYPEhtmlPUBLIC“-//W3C//DTDXHTML1.0Frameset//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd“>

理想情况当然是严格的DTD，但对于我们大多数刚接触web标准的设计师来说，过渡的DTD(XHTML1.0Transitional)是目前理

想选择(包括本站，使用的也是过渡型DTD)。因为这种DTD还允许我们使用表现层的标识、元素和属性，也比较容易通过W3C

的代码校验。

2.指定语言及字符集：

为文档指定语言：

<htmlxmlns=”http://www.w3.org/1999/xhtml”lang=”en”>

为了被浏览器正确解释和通过W3C代码校验，所有的XHTML文档都必须声明它们所使用的编码语言；如：

常用的语言定义：

<metahttp-equiv=”Content-Type”content=”text/html;charset=utf-8″/>

标准的XML文档语言定义：

<?xmlversion=”1.0″encoding=”utf-8″?>

针对老版本的浏览器的语言定义：

<metahttp-equiv=”Content-Language”content=”utf-8″/>

为提高字符集，建议采用“utf-8”。

3.调用样式表：

外部样式表调用：

页面内嵌法：就是将样式表直接写在页面代码的head区。如：

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38703955

粉丝: 2
资源: 915

DIV CSS布局基础与命名规范解析

DIV+CSS网页布局基础知识整理

DIV+CSS 网页布局常用基础知识

div+css布局大全

DIV+CSS网页布局常用的一些基础知识整理

DivCSS网页布局揭秘

DIV+CSS网页标准布局基础知识详解

DIV+CSS网页布局基础-常用HTML标签介绍

DivCss网页布局和高性能Web站点

使用HTML基础学习DIV CSS网页布局

"DIV CSS布局技巧与基础知识详解

最新资源