DIV-CSS学习札记

2012-10-24

DIV-CSS学习笔记1. 声明文档类型：XHTML 1.0 提供了三种DTD声明可供选择：a.?? 过渡的(Transitional):要求非

DIV-CSS学习笔记

1. 声明文档类型：

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

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

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

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

?2. 指定命名空间

?3. 定义语言编码

?4. 调用样式表文件

?5. 其它head区设置

收藏夹小图标
　　如果你将本站加入收藏夹，可以看到在收藏夹网址之前的IE图标变成了本站特别的图标。要实现这样效果很简单，首先制作一个16x16的icon图标，命名为favicon.ico，放在根目录下。然后将下面的代码嵌入head区：
　　<link rel="icon" href="/favicon.ico" type="image/x-icon" />
　　<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
　　为搜索引擎准备的内容
　　代码如下，替换成你自己站点的内容就可以：
　　允许搜索机器人搜索站内所有链接。如果你想某些页面不被搜索，推荐采用robots.txt方法
　　<meta content="all" name="robots" />
　　设置站点作者信息
　
　　<meta name="author" content="ajie@netease.com,阿捷" />
　　设置站点版权信息
　　<meta name="Copyright" content="www.w3cn.org,自由版权,任意转载" />
　　站点的简要介绍(推荐)
　　<meta name="description" content="新网页设计师。web标准的教程站点，推动web标准在中国的应用" />
　　站点的关键词(推荐)
　
　　<meta content="designing, with, web, standards, xhtml, css, graphic, design, layout, usability, ccessibility, w3c, w3, w3cn, ajie" name="keywords" />?

6. XHTML代码规范

1.所有的标记都必须要有一个相应的结束标记
　　以前在HTML中，你可以打开许多标签，例如和<li>而不一定写对应的和</li>来关闭它们。但在XHTML中这是不合法的。XHTML要求有严谨的结构，所有标签必须关闭。如果是单独不成对的标签，在标签最后加一个"/"来关闭它。例如:
　　 <img height="80" alt="DIV-CSS学习札记" src="../images/logo_w3cn_200x80.gif" width="200" />
　　2.所有标签的元素和属性的名字都必须使用小写
　　
　　与HTML不一样，XHTML对大小写是敏感的，<title>和<TITLE>是不同的标签。XHTML要求所有的标签和属性的名字都必须使用小写。例如：<BODY>必须写成<body> 。大小写夹杂也是不被认可的，通常dreamweaver自动生成的属性名字"onMouseOver"也必须修改成"onmouseover"。
　　3.所有的XML标记都必须合理嵌套
　　同样因为XHTML要求有严谨的结构，因此所有的嵌套都必须按顺序，以前我们这样写的代码：
　　
　　必须修改为：
　　
　　就是说，一层一层的嵌套必须是严格对称。
　　4.所有的属性必须用引号""括起来
　　在HTML中，你可以不需要给属性值加引号，但是在XHTML中，它们必须被加引号。例如:
　　<height=80>
　　
　　必须修改为：
　　<height="80">
　　特殊情况，你需要在属性值里使用双引号，你可以用"，单引号可以使用'，例如：
　　<alt="DIV-CSS学习札记">
　　5.把所有<和&特殊符号用编码表示
　　
　　任何小于号（<），不是标签的一部分，都必须被编码为& l t ;
　　任何大于号（>），不是标签的一部分，都必须被编码为& g t ;
　　任何与号（&），不是实体的一部分的，都必须被编码为& a m p;
　　注：以上字符之间无空格。
　　6.给所有属性赋一个值
　　XHTML规定所有属性都必须有一个值，没有值的就重复本身。例如：
　　<td nowrap> <input type="checkbox" name="shirt" value="medium" checked>
必须修改为：
　　<td nowrap="nowrap"> <input type="checkbox" name="shirt" value="medium" checked="checked">
　　7.不要在注释内容中使“--”
　　“--”只能发生在XHTML注释的开头和结束，也就是说，在内容中它们不再有效。例如下面的代码是无效的:
　　
　　
　　用等号或者空格替换内部的虚线。
　　
　　以上这些规范有的看上去比较奇怪，但这一切都是为了使我们的代码有一个统一、唯一的标准，便于以后的数据再利用。

7. CSS入门

1.基本语法规范
　　分析一个典型CSS的语句：
　　p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
　　其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式；
　　样式声明写在一对大括号"{}"中；
　　COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔；
　　"#FF0000"和"#FFFFFF"是属性的值(value)。
2.颜色值
　　颜色值可以用RGB值写，例如：color : rgb(255,0,0)，也可以用十六进制写，就象上面例子color:#FF0000。　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例　　如#FC1A1B必须写满六位。
3.定义字体
　　web标准推荐如下字体定义方法：
　　字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，；
　　　　Lucida Grande字体适合Mac OS X；
　　Verdana字体适合所有的Windows系统；
　　Lucida适合UNIX用户
　　"宋体"适合中文简体用户;
　　如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;
4.群选择器
　　当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，： p, td, li { font-size : 12px ; }

2.辅助图片一律用背景处理?

热点排行