CSS 之设计代码的结构(1)

原创 陈宝佳  2018-06-07 07:46  阅读 478 次 评论 0 条
行云管家,新手有礼

CSS 之设计代码的结构(1)

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

html有意义的元素

h1h1

uloldl

strongem

blockquotecite

abbracronymcode

fieldsetlegendlabel

captiontheadtbodytfoot

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。

浏览器模式

标准模式和怪异模式。

  • Standards(标准)模式:遵循最新标准。
  • Quirks(怪癖/兼容)模式:帮助处理所有奇怪的渲染和非浏览器兼容及不符合标准的网页。

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

  • 丢失的URL或URI。

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

  • 没有使用或格式错误的DOCTYPE。

浏览器如果不能识别一个错误的DOCTYPE,那么也会强制进入兼容模式,建议直接复制拷贝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。

  • URL

指定所引用对象的位置。

下一篇《CSS 之为样式找到目标(2)》

本文地址:https://www.cloudbility.com/club/7302.html
关注我们:请关注一下我们的微信公众号:扫描二维码,公众号:cloudbility
版权声明:本文为原创文章,版权归 陈宝佳 所有,欢迎分享本文,转载请保留出处!

发表评论


表情