亿企邦
  • 首页
    •
  • 解决方案&服务
    •
  • 客户&案例
    •
  • 营销资讯
    •
  • 关于我们
    •
    15158846557 或 在线咨询 在线咨询
    亿企邦
    15158846557 或 在线咨询
    亿企邦

    快捷入口

    所在位置： 首页 > 营销资讯 > 网站运营 > CSS 之设计代码的结构（1）

    CSS 之设计代码的结构（1）

    时间：2023-08-29 23:06:01 | 来源：网站运营

    时间：2023-08-29 23:06:01 来源：网站运营

    CSS 之设计代码的结构（1）：

    CSS 之设计代码的结构（1）

    学习CSS最好的方式就是使用它。

    html有意义的元素

    h1、h1ul、ol、dlstrong、emblockquote、citeabbr、acronym、codefieldset、legend、labelcaption、thead、tbody、tfoot

    ID和类名

    id名标识页面上的单独元素、ID必须是唯一的。

    id可以用来标识持久性的元素、一次性的元素（例如：链接、表单元素）。

    一个id名只能应用于页面上的一个元素，而同一个类名可以应用于页面上任意数量的元素。

    类名非常适合标识内容的类型或相识的条目。

    在写类名和id名时，需注意区分大小写，CSS是不区分大小写的语言。

    建议使用驼峰式大小写，HTML与CSS相同。

    我们常常只在不适合使用id的情况下对元素应用类，而且尽可能少使用类。

    大多数文档只需要添加几个类，如果添加太多，意味着你的HTML文档结构有问题。

    div 和 span

    div元素有助于在文档中添加结构，div（division）代表“部分”，它提供了将文档分割为有意义区域的方法。

    通过将主要的内容区域包围在div中并分配ID mainContent，就可以在文档中添加结构和意义。

    将不必要的标记减到最少，只在没有现有元素能够实现区域分割的情况下使用div元素。

    <div id="mainNav"> <ul> <li>Home</li> <li>About</li> <li>Contact</li> </ul></div>可以完全删除div，直接在列表上应用 id

    <ul id="mainNav"> <li>Home</li> <li>About</li> <li>Contact</li></ul>过度使用div = “多div症”，这是代码结构不合理且过分复杂的一个信号。

    应该使用div 根据条目的意义或功能对相关条目进行分组。

    div可以对块级元素进行分组，而span可用来对行内元素进行分组与比标识。

    <h2>Where's Cloudbility?</h2><p>Published on <span class="date">March 22nd,2018</span>by <span class="author">Andy Budd</span></p>一般无需对行内元素进行分组或标识，所以用sapn比div少。

    在实现图像替换等效果时会看到span，可将它用做额外的钩子，可以应用额外的样式。

    文档类型、DOCTYPE 切换和浏览器模式

    文件类型

    DTD（文档类型定义）是一组机器可读的规则，定义XML、HTML的特定版本中允许有什么，不允许有什么。

    浏览器会通过分析页面的DOCTYPE声明来了解要使用哪个DTD。

    DOCTYPE 通常包含指定DTD文件的URL，浏览器一般不读这些文件，而只是识别常见的DOCTYPE声明。

    有效性检验

    浏览器需要知道DTD才能正确处理页面，所以对页面进行有效检验要求有DOCTYPE声明。

    有效性检验很重要，因为它有助于找到代码中的bug。

    浏览器模式

    标准模式和怪异模式。

    浏览器会根据 DOCTYPE 声明进入正确的呈现模式，但有时候它也并不那么听话，以下情况会触发兼容模式：

    未指定URL或者指定的是一个相对的路径（而不是完全限定的Internet地址），大多数浏览器会进入兼容模式而不管当初声明的是什么模式。

    浏览器如果不能识别一个错误的DOCTYPE，那么也会强制进入兼容模式，建议直接复制拷贝DOCTYPE声明而不是亲自输入。

    不同浏览器在处理过渡型DOCTYPE时是有差异的。有可能进入标准模式，也有可能进入兼容模式。

    DOCTYPE切换

    浏览器根据DOCTYPE是否存在以及使用的DTD来选择要使用的表现方法。

    DOCTYPE切换是浏览器用来区分遗留文档和符合标准的文档手段。

    如编写了有效的CSS，选择了错误的DOCTYPE，那么页面就将以怪异模式表现，其表现就可能会有错误或不可预测。

    一定要在站点的每个页面上包含形式完整的DOCTYPE 声明，并在使用HTML时选择严格的DTD。

    DTD中包含了一系列标记、属性，用于标记Web文档中能出现哪些元素和元素之间的包含关系。

    如果没有指定有效的DOCTYPE声明，浏览器可能会使用内置的默认DTD。我们也可以自定义DTD，但一般不推荐这样。常见的DOCTYPE声明如下：

    HTML 2：<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">HTML 3.2：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">HTML 4.01 Strict：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">HTML 4.01 Transitional：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">HTML 4.01 Frameset：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">XHTML 1.0 Strict：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">XHTML 1.0 Transitional：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">XHTML 1.0 Frameset：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">XHTML 1.1：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">XHTML 1.1 plus MathML plus SVG：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">注意：DOCTYPE声明这一条指令必须在<html>标记之前定义。

    语法：<!DOCTYPE 根元素 可用性 "注册//组织//类型 标签 定义//语言" "URL"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 指定 DTD 中声明的顶级元素类型，这与声明的 SGML 文档类型相对应，默认HTML 。

    指定正式公开标识符(FPI)是可公开访问的对象还是系统资源。 默认 PUBLIC 可公开访问的对象。 SYSTEM 系统资源，如本地文件或 URL。

    指定组织是否由国际标准化组织(ISO)注册。默认 + ，组织名称已注册。 - 组织名称未注册，Internet 工程任务组(IETF)和万维网协会(W3C)并非注册的 ISO 组织。

    指定表明负责由 !DOCTYPE 声明引用的 DTD 的创建和维护的团体或组织的名称，即 OwnderID。 IETF 或 W3C。

    指定公开文本类，即所引用的对象类型。默认 DTD。

    指定公开文本描述，即对所引用的公开文本的唯一描述性名称，后面可附带版本号。默认 HTML 。

    指定文档类型定义。 Frameset 框架集文档。 Strict 排除所有 W3C 专家希望逐步淘汰的代表性属性和元素，因为样式表已经很完善了。Transitional 包含除 frameSet 元素的全部内容。

    指定公开文本语言，即用于创建所引用对象的自然语言编码系统。该语言定义已编写为 ISO 639 语言代码(大写两个字母)。 默认 EN。

    指定所引用对象的位置。

    下一篇《CSS 之为样式找到目标（2）》




    运维之路（Opsroad）—— 年轻人的运维社区

    关键词：结构,设计

    推荐文章

    新闻资讯

    整合营销 网络营销 网络推广 信息时代 建站知识 网站运营 电子商务 营销百科 公司新闻 行业动态 品牌营销

    推荐资讯

    74
    73
    25
    news

    微信公众号

    版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

    为了最佳展示效果，本站不支持IE9及以下版本的浏览器，建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
    关闭