CSS用样式表美化你的网页

2016-02-19 17:45 6 1 收藏

给自己一点时间接受自己,爱自己,趁着下午茶的时间来学习图老师推荐的CSS用样式表美化你的网页,过去的都会过去,迎接崭新的开始,释放更美好的自己。

【 tulaoshi.com - Web开发 】

CSS用样式表美化你的网页

第1天:选择什么样的DOCTYPE

前言

大家好!这个系列文章是按阿捷自己制作这个站点的过程编写的。之前阿捷也一直没有制作过一个真正符合web标准的网站。现在边参考国外资料边制作,同时把过程中的心得和经验记录下来,希望对大家有点帮助。好了,让我们开始吧

第一天

开始制作符合标准的站点,第一件事情就是声明符合自己需要的DOCTYPE。

查看本站首页原代码,可以看到第一行就是:

打开一些符合标准的站点,例如著名web设计软件开发商Macromedia,设计大师Zeldman的个人网站,会发现同样的代码。而另一些符合标准的站点(例如k10k.net)的代码则如下:

那么这些代码有什么含义?一定要放置吗?

什么是DOCTYPE

上面这些代码我们称做DOCTYPE声明。DOCTYPE是document type(文档类型)的简写,用来说明你用的XHTML或者HTML是什么版本。
其中的DTD(例如上例中的xhtml1-transitional.dtd)叫文档类型定义,里面包含了文档的规则,浏览器就根据你定义的DTD来解释你页面的标识,并展现出来。

要建立符合标准的网页,DOCTYPE声明是必不可少的关键组成部分;除非你的XHTML确定了一个正确的DOCTYPE,否则你的标识和CSS都不会生效。

XHTML 1.0 提供了三种DTD声明可供选择:

过渡的(Transitional):要求非常宽松的DTD,它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。完整代码如下:
严格的(Strict):要求严格的DTD,你不能使用任何表现层的标识和属性,例如

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

完整代码如下:

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

我们选择什么样的DOCTYPE

理想情况当然是严格的DTD,但对于我们大多数刚接触web标准的设计师来说,过渡的DTD(XHTML 1.0 Transitional)是目前理想选择(包括本站,使用的也是过渡型DTD)。因为这种DTD还允许我们使用表现层的标识、元素和属性,也比较容易通过W3C的代码校验。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

注:上面说的"表现层的标识、属性"是指那些纯粹用来控制表现的tag,例如用于排版的表格、背景颜色标识等。在XHTML中标识是用来表示结构的,而不是用来实现表现形式,我们过渡的目的是最终实现数据和表现相分离。

打个比方:人体模特换衣服。模特就好比数据,衣服则是表现形式,模特和衣服是分离的,这样你就可以随意换衣服。而原来HTML4中,数据和表现是混杂在一起的,要一次性换个表现形式非常困难。呵呵,有点抽象了,这个概念需要我们在应用过程中逐步领会。

补充

DOCTYPE声明必须放在每一个XHTML文档最顶部,在所有代码和标识之上。

更多细节可以访问W3C的网站。

来源:http://www.tulaoshi.com/n/20160219/1615983.html

延伸阅读
标签: Web开发
CSS样式表常用小技巧 · ul 标签在 Mozilla 中默认是有 padding 值的,而在 IE 中只有 margin 有值。 · 同一个的 class 选择符可以在一个文档中重复出现,而 id 选择符却只能出现一次;对一个标签同时使用 class和 id 进行 CSS 定义,如果定义有重复,id 选择符做的定义有效。 · 初学可能会碰到这样一个情况,同样一个标签的属性在 IE ...
标签: Web开发
整理了一下自己写CSS时的顺序,跟大家分享下。 下表顺序为从上到下,从左到右: ======================== display || visibility list-style : list-style-type || list-style-position || list-style-image position top || right || bottom || left z-index clear float width max-width || min-width height max-height || min-height...
标签: Web开发
  1、在一个网页中同时调用CSS的多种引入方式     在HTML中引入CSS的方式很多,例如直接插入式,使用 链接外部样式表,使用CSS"@import"导入样式表以及在内部元素中使用"STYLE"标记来定义样式表等。有网友询问,这些引入方式能不能同时在一个网页中被调用,它们之间会不会产生混乱?其实,我们大可不必这么担心,这就...
标签: Web开发
本文介绍如何在Dreamweaver 中使用层叠样式表 (CSS) 设置页面中的文本格式。您可以使用 CSS 以 HTML 无法提供的方式来设置文本格式和定位文本,从而能更加灵活自如地控制页面的外观。  了解 CSS  层叠样式表 (CSS) 是一系列格式设置规则,它们控制 Web 页面内容的外观。使用 CSS 设置页面格式时,内容与表现形式是相...
标签: Web开发
类 为了对网页格式的定义更为精确,有必要让相同的选择符也能分类,并能按照不同的类别来进行不同的样式设计。基本格式如下: 选择符.类别名 {属性:值} 类别名将可以在HTML的标识符里引用: 标识符 class=类别名网页内容 实例: <html> <head> <title>CSS例子</title> <style type="t...

经验教程

438

收藏

66
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部