本章介绍
1.文档类型
2.语言编码
3.html标签
4.css样式
5.css优先级
6.css盒模型组成
1）文档类型
当我们新建一下html格式文档时，会发现代码最上部有如下这句话：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
这句话标明本文档是过渡类型，另外还有框架和严格类型，目前一般都采用过渡类型，删除它后可能引起某些样式表失效或其它意想不到的问题，建议保留。
2）语言编码
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
它标示文档的语言编码。 还有一种常用的编码是UTF-8编码，它是国际通用的编码。不管我们采用哪种编码，包含的css样式表和其它文件也必须和本文档的编码一样，要不就会出现乱码。
3）html标签
成对的标签：
<head>{...}</head>
<body>{...}</body>
<div>{...}</div>
<span>{...}</span> //行内元素
<p>{...}</p>
......
单一的标签：
<img src="" />
<br />
.......
4）css样式
加载css样式有以下四种
- 外部样式
- 内部样式
- 行内样式
- 导入样式
<link href="layout.css" rel="stylesheet" type="text/css" />
这种形式是把css单独写到一个css文件内，然后在源代码中以link方式链接。它的好处是不但本页可以调用，其它页面也可以调用，是最常用的一种形式。
<style>
h2 { color:#f00;}
</style>
这种形式是内部样式表，它是以<style>和</style>结尾，写在源代码的head标签内。这样的样式表只能针对本页有效。不能作用于其它页面。
<p style="font-size:18px;">行内样式 </p>
这种在标签内以style标记的为行内样式，行内样式只针对标签内的元素有效，因其没有和内容相分离，所以不建议使用。
@import url("/css/global.css");
链接样式是以@import url标记所链接的外部样式表，它一般常用在另一个样式表内部。如layout.css为主页所用样式，那么我们可以把全局都需要用的公共样式放到一个global.css的文件中，然后在layout.css中以@import url("/css/global.css")的形式链接全局样式，这样就使代码达到很好的重用性。
5）css优先级
- id优先级高于class
- 后面的样式覆盖前面的
- 指定的高于继承
- 行内样式高于内部或外部样式
总结：单一的(id)高于共用的(class)，有指定的用指定的，无指定则继承离它最近的
6）css盒模型组成
那么它为什么叫盒子呢？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。
所以整个盒模型在页面中所占的
宽度 = 由左边界+左边框+左填充+内容+右填充+右边框+右边界
组成，而css样式中weight所定义的宽度仅仅是内容部分的宽度。
这里的边界我们也称之为：外边距、外补丁；填充也叫：内边距、内补丁。
7、ID和CLASS选择器
id只能在页面中对应一个元素；class为类，可以对应多个元素。
id的优先级高于class。
8.二列和三列布局 小结
二列自适应宽度 // 定宽 float margin-left
二列固定宽度
二列固定宽度居中
xhtml的块级元素(div)和内联元素(span)
float属性
三列自适应宽度
三列固定宽度
三列固定宽度居中
IE6的3像素bug
css的display:inline将块级元素改变为内联元素
用display:block将内联元素改变为块元素。
float
在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素；且要指明一个宽度，否则它会尽可能地窄；另外当可供浮动的空间小于浮动元素时，它会跑到下一行，直到拥有足够放下它的空间。
9、三列自适应宽度
三列自适应宽度，一般常用的结构是左列和右列固定。
257
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
