DIV+CSS基础知识 -

zhangw2004

浏览: 15717 次
性别:
来自: 北京

最近访客更多访客>>

wallimn

su1216

JerryWang_SAP

mc90716

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

DIV+CSS基础知识

博客分类：

DIV+CSS

DIV+CSS

1. 文档类型

这句话标明本文档是过渡类型，另外还有框架和严格类型，目前一般都采用过渡类型，因为浏览器对XHTML的解析比较宽松，允许使用HTML4.01中的标签，但必须符合XHTML的语法。许多朋友在制作页面时，往往喜欢把这句删除掉，在这里建议大家一定要保留这句话，删除它后可能引起某些样式表失效或其它意想不到的问题。

Copy(<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">)

2. Css样式

CSS样式分为：外部样式、内部样式、行内样式、导入样式。以下分别说明：

外部样式：css单独写到一个css文件内，然后在源代码中以link方式链接。

内部样式：，它是以<style>和</style>结尾，写在源代码的head标签内。这样的样式表只能针对本页有效。

行内样式：写在标签内以sytle标记。

导入样式：链接样式是以@import url标记所链接的外部样式表，它一般常用在另一个样式表内部引入另一个样式。

3. CSS选择器

参考：http://www.w3school.com.cn/cssref/css_selectors.asp

关于CSS选择器的优先级有如下规则

id优先级高于class；

后面的样式覆盖前面的；

指定的高于继承；

行内样式高于内部或外部样式；

总结：单一的(id)高于共用的(class)，有指定的用指定的，无指定则继承离它最近的。

4. CSS盒子模型组成

一个容器DIV的内容(content)、填充(padding)、边框(border)、边界(margin)属性分别对应下图：

整个盒模型在页面中所占的宽度是由左边界+左边框+左填充+内容+右填充+右边框+右边界组成，而css样式中width所定义的宽度仅仅是内容部分的宽度，这是许多朋友容易搞混的地方。

5. CSS布局

一列布局

代码参照附件“课程练习代码\llayout\0.html”

一列多行布局

代码参照附件“课程练习代码\llayout\1.html”

小知识点

u 设置DIV居中使用属性margin:0,auto;

u 去除默认边距body，h1－h6，ul等元素默认有外边距或其它样式的。这里我们在css样式中增加一项：body {margin:0;}，就可以把body默认的外边距去掉。

u 块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。

多列布局

两列布局

代码参照附件“课程练习代码\llayout\2.html”

小知识点

u 块元素和内联元素：

块级元素：就是一个方块，像段落一样，默认占据一行出现；

内联元素：又叫行内元素，顾名思义，只能放在行内，就像一个单词，不会造成前后换行，起辅助作用。

一般的块级元素诸如段落<p>、标题<h1><h2>...、列表,<ul><ol><li> 、表格<table>、表单<form>、DIV<div>和BODY<body>等元素。而内联元素则如: 表单元素<input>、超级链接<a>、图像<img>、<span> ........ 块级无素的显著特点是：每个块级元素都是从一个新行开始显示，而且其后的无素也需另起一行进行显示。

效果图如下：

u 浮动float

任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素；且要指明一个宽度，否则它会尽可能地窄；另外当可供浮动的空间小于浮动元素时，它会跑到下一行，直到拥有足够放下它的空间。

代码参照附件“课程练习代码\llayout\3.html”。

6、CSS制作导航栏

u 纵向导航栏

代码参照附件“课程练习代码\menu\0.html”

小知识点

相对定位和绝对定位

定位标签：position 包含属性：relative（相对） absolute（绝对）

1.position:relative; 如果对一个元素进行相对定位，首先它将出现在它所在的位置上。然后通过设置垂直或水平位置，让这个元素"相对于"它的原始起点进行移动。（再一点，相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他框）

2.position:absolute; 表示绝对定位，位置将依据浏览器左上角开始计算。绝对定位使元素脱离文档流，因此不占据空间。普通文档流中元素的布局就像绝对定位的元素不存在时一样。（因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素并可以通过z-index来控制它层级次序。z-index的值越高，它显示的越在上层。）

3.父容器使用相对定位，子元素使用绝对定位后，这样子元素的位置不再相对于浏览器左上角，而是相对于父窗口左上角

4.相对定位和绝对定位需要配合top、right、bottom、left使用来定位具体位置，这四个属性只有在该元素使用定位后才生效，其它情况下无效。另外这四个属性同时只能使用相邻的两个。

超链接伪类

伪类定义：a开始后边跟个冒号，再跟个状态限定字符；

a:link {color: #FF0000} /* 未访问的链接 */

a:visited {color: #00FF00} /* 已访问的链接 */

a:hover {color: #FF00FF} /* 鼠标移动到链接上 */

a:active {color: #0000FF} /* 点击链接时，显示的状态 */

:first-letter作用与网页首字母的伪类。

使用CSS制作按钮

代码参照附件“课程练习代码\button\0.html”

首字下沉

代码参照附件“课程练习代码\button\1.html”

横向图文列表

代码参照附件“课程练习代码\layout\4.html”

横向导航栏

代码参照附件“课程练习代码\layout\5.html”

使用图片美化导航栏

代码参照附件“课程练习代码\layout\6.html”

v CSS Sprites技术

CSS Sprites在国内很多人叫css精灵或css雪碧。它是把网页中一些背景图片整合到一张图片文件中，再利用CSS的背景图片定位到要显示的位置。这样做可以减少文件体积，减少对服务器的请求次数，提高效率。

例：

#menu ul li a { background:#ccc url(images/nav_bg2.gif) 0 -28px no-repeat; }

css背景属性缩写后如上所示，#ccc表示背景色；url（）里是背景图片路径；接下来的两个数值参数分别是左右和上下，第一个参数表示距左多少px，第二个参数表示距上多少；no-repeat表示背景图片向哪个方向重复，此时为不重复。强调一点css中值为0可以不带单位，其它数值都必须带单位（line-height值为多少倍时，zoom，z-index除外）,定位图片位置的参数是以图片的左上角为原点的。

下拉及多级弹出菜单

代码参照附件“课程练习代码\layout\7.html”

小知识点

v 绝对定位与浮动的区别

当一个元素使用绝对定位后，它的位置将依据浏览器左上角开始计算或相对于父容器（在父容器使用相对定位时）。绝对定位使元素脱离文档流，因此不占据空间。普通文档流中元素的布局就当绝对定位的元素不存在时一样。因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素。

浮动元素的定位还是基于正常的文档流，然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后，仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。它只是改变了文档流的显示，而没有脱离文档流，理解了这一点，就很容易弄明白什么时候用定位，什么时候用浮动了。

CSS设计自适应宽度菜单