Htmlt_Div+Css简介

时间：2023-03-09 01:35:20
Htmlt_Div+Css简介

DIV+CSS是网站标准（或称“WEB标准”）中常用术语之一，通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。

CSS是英语Cascading Style Sheets（层叠样式表单）的缩写，它是一种用来表现 HTML 或 XML等文件式样的计算机语言。

DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。

DIV是HTML (超文本语言)中的一个元素,DIV+CSS是一种网页的布局方法,这一种网页布局方法有别于传统的table布局,真正地达到了W3C内容与表现相分离。

W3C是英文 World Wide Web Consortium的缩写，中文意思是W3C理事会或万维网联盟。W3C于1994年10月在麻省理工学院计算机科学实验室成立。创建者是万维网的发明者TimBerners-Lee。

W3C组织是对网络标准制定的一个非赢利组织，像HTML、XHTML、CSS、XML的标准就是由W3C来定制。W3C会员（大约500名会员）包括生产技术产品及服务的厂商、内容供应商、团体用户、研究实验室、标准制定机构和*部门，一起协同工作，致力在万维网发展方向上达成共识。

第二节DIV+CSS布局的优势

2.1符合W3C标准。微软等公司均为W3C支持者。这一点是最重要的，因为这保证您的网站不会因为将来网络应用的升级而被淘汰。

2.2 支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是IE7或者是火狐，您的网站都能很好的兼容。

2.3 搜索引擎更加友好。相对与传统的table, 采用DIV+CSS技术的网页，对于搜索引擎的收录更加友好。

2.4 样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更加方便。

2.5 CSS的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽，而且众所周知，搜索引擎喜欢清洁的代码。

2.6 表现和结构分离，在团队开发中更容易分工合作而减少相互关联性。

第三节 WEB标准的理解

WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3CDOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（EuropeanComputer Manufacturers Association）的ECMAScript标准。

第四节 CSS的基本语法结构

CSS语法有三部分组成：选择符、属性和属性值。

 

选择符分为：

类型选择符

指以网页中已有的标签类型作为名称的选择符如：

body{}  div{}   span{}

群组选择符

除了对单个xhtml 对象进行样式的指定，同样也可以对一组对象进行相同的样式指派。如：

h1,h2,p,span{font-size:12px;} 注：对象之间用逗号隔开。

包含选择符

对一个对象的子对象进行定义样式，如 h1span{}注：对象之间用空格隔开。上面样式的意思是对h1的span进行样式定义。

Id class选择符

id在网页中只能出现一次，适合大的定义，比如可以定义导航，头部，尾部各一个id如：

<divid="content"></div>   #content{}；class 可以用于页面中多个元素，如：

<divclass="p1"></div><h1class="p1"></h1>.p1{}。

标签指定选择符

如果既想使用id或class也同时使用标签选择符，可以使用如下格式:

h1#content{} 表示所以id为content的h1标签。h1.content{}表示所有class为h1的标签。

组合选择符

#content h1{} 表示id 为content的所有h1标签 .contenth1{}表示class为content的所以h1标签。伪类：如 ：

a:hover{} 。

通配选择符

我们可以对对象进行模糊指定的方式进行选择，用*作为关键字，如：

*{color:red;} 页面的所有标签的颜色都为红色。

第五节 CSS优先级和继承

5.1 CSS的优先级

所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。

在选择符一样的情况下，后面的会覆盖前面的属性。比如：

p { color: red; }

p { color: blue;}

p元素的内容将是蓝色，因为遵循后面的规则。

然而，你不可能经常用相同的选择符冲突达到目的，当你使用嵌套选择符，合理的冲突来了。比如：

div p { color: red; }

p { color: blue; }

也许在你看起来p元素的内容在div元素里面的颜色是蓝色，就像后面p元素的规则，但是第一个选择符的特性却是红色。基本上，一个选择符越多特性，样式冲突的时候将显示它的样式。

一组嵌套选择符的实际特性可以计算出来。基本的，使用id选择符的值是100，使用class选择符的值是10，每个html选择符的值是1。它们加起来就可以计算出特性的值。

名称

特性

备注

p

1

一个html选择符

div p

2

两个html选择符

.tree

10

1个class选择符

div p.tree

1+1+10=12

两个html选择符，一个class选择符

#baobab

100

1个ID选择符

body #content .alternative p

112

两个html选择符，一个ID选择符，一个类选择符

按照上面的规则，div p.tree的特性比div p高，body #content .alternativep又比它们两个都高。

CSS优先级的四大原则：

原则一： 继承不如指定

如果某样式是继承来的永远不如具体指定的优先级高。

例子1：

<styletype="text/css">

<!--

*{font-size:20px;}

.class3{ font-size: 12px; }

-->

</style>

<spanclass="class3">我是多大字号？</span>

运行结果：.class3{ font-size: 12px; }

例子2：

<styletype="text/css">

<!--

#id1 #id2{font-size:20px;}

.class3{font-size:12px;}

-->

</style>

<div id="id1"class="class1">

<p id="id2"class="class2">

<span id="id3"class="class3">我是多大字号？</span>

</p>

</div>

运行结果：.class3{font-size:12px;}

注意：后面的几大原则都是建立在“指定”的基础上的。

原则二： #ID >.class>标签选择符

例子：

<styletype="text/css">

<!--

#id3 { font-size: 25px; }

.class3{ font-size: 18px; }

span{font-size:12px;}

-->

</style>

<span id="id3"class="class3">我是多大字号？</span>

运行结果：#id3 { font-size: 25px; }

原则三：越具体越强大。

解释：当对某个元素的CSS选择符样式定义的越具体，层级越明确，该定义的优先级就越高。

<styletype="text/css">

<!--

.class1 .class2 .class3{font-size: 25px;}

.class2 .class3{font-size: 18px;}

.class3 { font-size: 12px; }

-->

</style>

<divclass="class1">

<pclass="class2">

<spanclass="class3">我是多大字号？</span>

</p>

</div>

运行结果：.class1 .class2 .class3{font-size: 25px;}

原则四：标签#id >#id ; 标签.class>.class

上面这条原则大家应该也都知道，看例子

<styletype="text/css">

<!--

span#id3{font-size: 18px;}

#id3{font-size: 12px;}

span.class3{font-size: 18px;}

.class3{font-size: 12px;}

-->

</style>

<spanid="id3">我是多大字号？</span>

<spanclass="class3">我是多大字号？</span>

运行结果：span#id3{font-size: 18px}| span.class3{font-size: 18px}

5.2 CSS的继承

5.2.1 继承的表现

继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个body定义了的颜色值也会应用到段落的文本中。

<styletype="text/css">

<!--

body {color: #f00;}

-->

</style>

<body>

<p>CSS<strong>继承性</strong>的测试</p>

</body>

则显示效果：

CSS继承性的测试

这段代码的应用结果是：“CSS继承性的测试”这段话是红颜色的，“继承性”几个字由于应用了<strong>标签，所以是粗体。很显然，这段文字都继承了由body{color:#f00;}样式定义的颜色。这也就是为什么说继承性是CSS的一部分。

然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0。

我们仍以上面的举例代码为例：在样式定义中添加一条：strong {color:#000;}

发现只需要给<strong>加个颜色值就能覆盖掉它继承自<body>的样式颜色。由此可见：任何显示申明的规则都可以覆盖其继承样式。

5.2.2 继承的局限性

继承是CSS重要的一部分，我们甚至不用去考虑它为什么能够这样，但CSS继承也是有限制的。

有一些属性不能被继承，如：border, margin, padding, background等。

<styletype="text/css">

<!--

div {border: 1px solid #000;}

-->

</style>

<div>我是<em>border</em>我是不能被继承滴</div>

则显示效果：

我是border我不能被继承

 

第二章DIV+CSS技术的常用知识

第一节 盒模型相关知识

1.1 盒模型的基本概念

如果想熟练掌握DIV和CSS的布局方法，首先要对盒模型有足够的了解。每个HTML元素都可以看作一个装了东西的盒子，盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin），如图：

填充、边框和边界都分为“上右下左”四个方向，既可以分别定义，也可以统一定义。

CSS内定义的宽和高，指的是填充以内的内容范围，因此一个元素：

实际宽度 = 左边界 + 左边框 + 左填充 + 内容宽度 + 右填充 + 右边框 + 右边界

实际高度 = 上边界 + 上边框 + 上填充 + 内容高度 + 下填充 + 下边框 + 下边界

关于盒模型，还有以下几点需要注意：

注意1：块级元素（display: block）

每个块级元素都从一个新行开始，而且其后的元素也需另起一行开始，标题、段落、表格、层、body等都是块级元素。块级元素只能作为其他块级元素的子元素，而且需要一定的条件。

内联元素，例如<a>、<span>等，定义上下边界不会影响到行高（line-height），内联元素距离上一行元素的距离由行高决定，而不是填充或边界。

注意2：内联元素（display: inline）

内联元素不需要在新行内显示，而且也不强迫其后的元素换行，如a、em、span等都为内联元素。内联元素可以为任何其他元素的子元素。

浮动元素（无论左或者右浮动）边界不压缩，且若浮动元素不声明宽度，则其宽度趋向于0，即压缩到其内容能承受的最小宽度。

如果盒中没有内容，则即使定义了宽度和高度都为100%，实际上只占0%，因此不会被显示，此点在采取层布局的时候需特别注意。

边界值可为负，其显示效果各浏览器可能不相同。

边框默认的样式（border-style）为不显示（none）。

1.2 IE和FF对盒模型的解释区别

IE和FF对盒模型的解释也不一样，代码说明：

#test {

width: 650px !important;

width: 648px;

padding-left: 2px;

background: #fff; }

IE Box的总宽度是： width+padding+border+margin

FF Box的总宽度就是 width的宽度，padding+border+margin的宽度，含在width内。

如果有

box{

width: 300px;

padding: 5px;}

则box在IE的宽度应该为:310

而在FF的宽度则是300

所以在box有填充的情况下应该这样使用

box{

width: 290px !important;

width: 300px;}

这样子才能确保box的宽度始终在300px,而不会出现被撑开的现象

而在FF里面则不会造成浮动层填不满的情况

注意：ul 标签在 Mozilla 中有 padding 值,而在 IE 中只有 margin 有值。

所以在使用ul时最好将ul初始化:ul{margin:0;padding:0}

第二节 常用元素的用法和比较

2.1 DIV与SPAN的区别

div 和 span元素最大的特点是默认都没有对元素内的对象进行任何格式化渲染。主要用于应用样式表。两者最明显的区别在于div是块元素，而span是行内元素(也译作内嵌元素)。所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。

测试<span>紧跟前面的"测试"显示</span>

<div>这里会另起一行显示</div>

则显示效果如下

测试紧跟前面的"测试"显示

这里会另起一行显示

块元素和行内元素也不是一成不变的，通过定义CSS的display属性值可以互相转化，如：

测试<divstyle="display:inline">紧跟前面的"测试"显示</div>

<spanstyle="display:block">这里会另起一行显示</span>

因为div与span元素的特殊性，所以一般用于应用样式表，比如说用CSS定义为层，而需要分清的是块元素和行内元素的区别，还有两者间的相互转化。

div指定渲染 html 的容器。

span指定内嵌文本容器。

2.2 ID与CLASS的区别

在用CSS来控制网页布局时我们可能都会遇到一个问题：当定义一个属性时，是使用id，还是使用class？下面具体分析：

ID的使用原则

id具有唯一性，其使用原则也是依据这一特性建立的。id是不能重复的，所以在xhtml的结构中，大结构一定是用id。比如标志、导航、主体内容、版权。这些根据制定的规范命名为#logo, #nav , #content , #copyright 等等，因为唯一性的原则园子建议定义id尽量在外围使用。

CLASS的使用原则

class在CSS的定义中具有普遍性。class具有可重复无限制的使用多次，尽量在结构内部使用。这样做的好处是有利于网站代码的后期维护与修改，这样的做法就会让所有的class都成为id的子级或是孙级。在我们写CSS的时候可以写成这样#father .child {…}，另外需要注意的是尽量不要让class包含id，比如.father #child {…}如果写成这样很显然就非常不可取。

综上所述，归总起来一句话：id是唯一的并且是父级的，class是可以重复的并且是子级的。

2.3CSS中PX、PT、EM的区别

在网页设计、样式代码编程过程中经常用到的设置字体大小的有px、pt、em等。

基本概念:

px就是表示pixel，像素，是屏幕上显示数据的最基本的点，最小单位；

pt就是point，是印刷行业常用单位，等于1/72英寸。

em，其实就是％，从这个概念上看，em才是真正的“相对单位”。

px是一个点，它不是自然界的长度单位，谁能说出一个“点”有多长多大么？可以画的很小，也可以很大。如果点很小，那画面就清晰，我们称它为“分辨率高”，反之，就是“分辨率低”。所以，“点”的大小是会“变”的，也称为“相对长度”。

pt全称为point，但中文不叫“点”，确切的说法是一个专用的印刷单位“磅”，大小为1/72英寸。所以它是一个自然界标准的长度单位，也称为“绝对长度”。

px会随显示器的分辨率而改变，pt会随Windows系统字体大小设置而改变。

设置Windows系统字体大小：桌面上右键 > 属性 > 设置> 高级 > 常规 > DPI设置，默认的是“正常尺寸96DPI”，你可以自定义修改。

px和pt的使用区别，只有当用户改变默认的96DPI下才会产生：使用px定义文字，无论用户怎么设置，都不会改变大小；使用pt定义文字，当用户设置超过96DPI的值，数值越大，字体就越大。

转换计算公式：px = pt * DPI / 72

在网页设计中，面向用户的屏幕的基本单位是px，因此使用px作为单位是最简单也最容易理解的，而pt也不过是通过了Windows的设置乘上了一个比率转变成px再显示，算是绕了个圈子。参考大部分大型网站，包括Adobe和Microsoft，都是使用px作为单位，而且在HTML中，默认的单位就是px。

2.4 CSS中PADDING 与MARGIN的区别

margin和padding用来隔开元素，margin是隔开元素与外边，padding是隔开元素里边

padding 上、右、下、左; {从上按顺时针转的}

 

具体效果如下：

 
 
 
 
 

2.5 CSS中DISPLAY的用法

语法：

none

此元素不会被显示。

block

此元素将显示为块级元素，此元素前后会带有换行符。

inline

默认。此元素会被显示为内联元素，元素前后没有换行符。

inline-block

行内块元素。（CSS2.1 新增的值）

list-item

此元素会作为列表显示。

run-in

此元素会根据上下文作为块级元素或内联元素显示。

compact

CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。

marker

CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。

table

此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。

inline-table

此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。

table-row-group

此元素会作为一个或多个行的分组来显示（类似 <tbody>）。

table-header-group

此元素会作为一个或多个行的分组来显示（类似 <thead>）。

table-footer-group

此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。

table-row

此元素会作为一个表格行显示（类似 <tr>）。

table-column-group

此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。

table-column

此元素会作为一个单元格列显示（类似 <col>）

table-cell

此元素会作为一个表格单元格显示（类似 <td> 和 <th>）

table-caption

此元素会作为一个表格标题显示（类似 <caption>）

使用CSS display属性，可以重写标签的默认显示，根据非列表元素创建列表或者将列表更改为非列表。

<ul>

<li>Raspberry</li>

<li>Blackberry</li>

<li>Boysenberry</li>

</ul>

显示效果截图如下：

Raspberry

Blackberry

Boysenberry

该代码是呈列表状显示出来。通过ul li {display：inline；}便把列表状的显示变成显示成在同一行上;又如：

<div id="nav">

<ahref="/">Home</a>

<ahref="info">Info</a>

<ahref="shop">Shop</a>

<ahref="map">Map</a>

</div>

是显示在同一行，但通过div#nav a {display: list-item;}可更改成列表状显示;效果如下：

Home

Info

Shop

Map

2.6 CSS中BACKGROUND的用法

background-color

规定要使用的背景颜色。

background-image

规定要使用的背景图像。

background-repeat

规定如何重复背景图像。

background-attachment

规定背景图像是否固定或者随着页面的其余部分滚动。

background-position

规定背景图像的位置。

background-repeat 改变背景图片的重复并排的设定

repeat  背景图片并排

repeat-x  背景图片以X方向 并排

repeat-y  背景图片以Y方向 并排

no-repeat  背景图片不以并排的方式处理

比如:

background-image:url("http://www.52css.com/xx.gif");

background-repeat:no-repeat;

 

background-attachment对背景滚动的设定

scroll 拉动卷轴时，背景图片会跟着移动（缺省值）

fixed  拉动卷轴时，背景图片不会跟着移动

比如:

background-image:url("http://www.52css.com/xx.gif");

background-repeat:no-repeat;

background-attachment:fixed;

background-position对背景位置的定位

以长度定位background-position: x y

使用百分比定位 background-position: x% y% （x%  往右移 y%  往下移）

比如:

backgroud-position: 0% 0%;

左边上方

backgroud-position: 0% 50%;

左边中间

backgroud-position: 50% 0%;

中间上方

backgroud-position: 50% 50%;

正中间

backgroud-position:100% 0%;

右边上方

backgroud-position: 0% 100%;

左边下方

backgroud-position: 100% 50%;

右边中间

backgroud-position: 50% 100%;

中间下方

backgroud-position: 100% 100%;

右边下方

2.7CSS引用方式IMPORT与LINK的具体区别

我们知道在网页中引用外部CSS有两种方式，即:@import与link,我们也经常听到有人说要使用link来引入CSS更好,下面来具体介绍两种的区别。

Link

link就是把外部CSS与网页连接起来,具体形式

<link href="http://www.52css.com/styles.css" type="text/css" />

@import

import文字上与link的区别就是它可以把在一个CSS文件中引入其它几个CSS文件,具体形式

<style type="text/css">@import url("http://www.52css.com/styles.css");</style>

 

为什么使用@import

大部分使用@import方式的人是因为旧的浏览器是不支持@import方式的,这意味着我们可以使用@import来引入只让现代浏览器解析的CSS样式.使用以下代码可以使IE6及以下的浏览器无法解析该CSS(IE6以下的属于年久失修在这里略去方法)

@import url(../style.css) screen;

另一个主要的原因就是当你的网页需要引入几个外部CSS文件时.你需要使用link引入一个CSS,然后在这个CSS文件中用@import方式引入其它几个CSS文件.

为什么使用link

使用link方式一个最主要的原因就是你可以让用户切换CSS样式.现代浏览器如Firefox,Opera,Safari都支持rel=”alternate stylesheet”属性(即可在浏览器上选择不同的风格),当然你还可以使用Javascript使得IE也支持用户更换样式.

@import的小毛病

如果你网页head标签里面十分简单,只有@import属性的话,当用户浏览的网速较慢时,他会看到一个没有风格样式的页面,然后随着CSS文件被下载完成才可以看到应有的风格.要避免这样的问题,你需要确保head里至少有一个script或是link标签

到底要用那种方式

就目前看来小型的网站还是使用link比较合适(或者说比较流行),当然如果将来我们需要把CSS进行模块化管理也肯定要用到@import.

2.8 H1~ H6标签的正确的使用

在我的日常开发中，我最常用到的H1~H4。建议大家把H1~H6都用到。

HTML标签有专门的标签处理页面上的标题。它们是h1，h2，h3，h4，h5和h6，象封建社会一样，h1就是万能的君主而h6就是最底层的百姓。

<h1>主标题，写在这里</h1>

<h6>次标题，写在这里</h6>

注意：h1标签在一个页面只能使用一次——假定它是这个页面的主标题，是不应该使用多次的（相当于一篇文章的题目，你可以有一个副题目，但你不会使用两个并列的题目吧？

但是，h2到h6可以如你所需任意使用多次，但它们应依设计意图，该按顺序使用。比如，h4应该是h3的子标题，h3应该是h2的子标题，以此类推。

第三节DIV+CSS网页布局

通过前面知识点的研究和介绍。对DIV和CSS已经有大概的了解；下面让我们通过下面的例子来讲解DIV+CSS的布局。

第一步：根据用户需求构思系统或软件界面，并用绘图软件把页面绘制出来图片文件如：

 

第二步：我们需要根据构思图来规划一下页面的布局，仔细分析一下该图，我们不难发现，图片大致分为以下几个部分：

1、顶部，其中又包括了logo、menu和一幅banner图片；
2、内容部分又可分为侧边栏、主体内容；
3、底部，包括一些版权信息。

根据上图，画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。

 

DIV结构如下：

│body {}　
└#florida_ framework{ }　
　　├#header {}　
　　│　├#logo {}　
　　│　├#header_back_banner{}　
　　│　└#nav{}　
　　├#main{}　
　　│　├#sidebar {}　
　　│　└#content {}　
　　└#footer {}　

最后根据上面的布局用DIV+CSS把该页面做成HTML

第三章 CSS编写和命名规范

在任何一个项目或者系统开发之前都需要定制一个开发约定和规则，这样有利于项目的整体风格统一、代码维护和扩展。由于Web项目开发的分散性、独立性、整合的交互性等，所以定制一套完整的约定和规则显得尤为重要。特制定以下CSS编写和命名规范文档作为本公司以后CSS编写和命名规范。

第一节 CSS样式文件的命名

建立样式表文件时，分类编写样式到下列样式表文件中，并统一放在【CSS】文件夹里：

主要

main.css

文字样式

font.css

表格

table.css

主题

themes.css

打印

print.css

补丁

mend.css

第二节CSS选择符的命名

所有选择符必须有小写英文字母或“_”下划线组成；样式名必须是表示该样式的大概含义；参考后面的“样式命名参考”。

当定义的样式名比较复杂时用下划线把层次分开；

比如：dcrm_logo{ …}  dcrm_logo_ico{…}

第三节 图片的命名与书写

图片的命名原则小写英文字母名称放在头尾两部分，用“_”下划线隔开，头部表示此图片的大类性质例如广告、标志、菜单、按钮等等；尾部表示图片的概念。

广告

banner

标志

logo

链接的小图片

button

装饰图

pic

标题的图片

title

banner_sohu.gif 、banner_sina.gif、 menu_about_us.gif、menu_job.gif、 title_news.gif、 logo_police.gif、 logo_national.gif、pic_people.jpg

第四节CSS注释书写规范

4.1 提示和标签信息注释

这是注释最常用的途径，可以为自己或其他开发人员留下提示信息可以避免后期引起的不必要的困惑和麻烦。这种应用简洁性最为重要。

.search{

border:1px solid#fff;   }

注意：注释内容和前面样式语句间有3个空格，后面1个空格

4.2 修改样式注释（时间和相关人员）

4.3 文档结构

.search{

border:1px solid #fff;    }

.menul_ul{

border:1px solid #fff;   }

注意：相对独立的2段内容之间空1行

第五节CSS布局编码标准和建议

5.1 建立样式表索引

样式表头部索引定义可以帮助你和其它人弄清楚该样式表文件的相关信息，它一般是一段格式化的CSS注释文本写在 main.css中。给出该CSS文件作者的相关信息；定义站点的布局，记录文件版本号（利于多作者协作及将来更新）

5.2 命名锚点 的使用

命名锚点是用来规划整个CSS文件结构的（就好像书签一样），从而使整个CSS文件获得良好的组织。命名锚点一般也是书写在样式表头部的索引注释中。CSS本身没有内部的锚点系统，所以我一般采用下面的小技巧来完成。在头部索引拷贝你想找到的锚点，并在整个文档中查找，从而获取该CSS节。

*==STRUCTURE:===============================================

$__header             HeaderDefinitions

$__menu               Global Site

$__content            Everything within the content

-----------------------------------------------------------------------------------------------*/

{...Header CSS Definitions...}

{...Header CSS Definitions...}

5.3 建立良好的CSS编码顺序

最后定义的 CSS 样式将会覆盖在其之前定义的所有已经存在、或与之冲突的样式，比如下面这个例子：

p { color: red; background: yellow;}

p { color: green;}

以上的段落最终将呈现绿色的字体，并带有黄色的背景，这是因为最后定义的 color:green 将之前定义的 red 覆盖掉了，至于黄色背景为何没有消失，那是因为第二个 p 的定义中并没有与之冲突的定义，因此它还是有效的。

5.4 合适的缩写

在CSS中经常会利用缩写把多个相同类型的属性定义指定为一个。CSS缩写会使CSS文档更加干净、简洁；缩写语法参考相关章节。

5.5CSS图像拼合(即CSS Sprites技术)

CSS Sprites技术：将用到的所有背景图片合并为一张图片，使用css背景属性，来控制图片的显示位置和方式。CSS Sprites技术的应用可以大大减少HTTP请求的次数，减轻服务器压力，同时缩短了悬停加载图片所需要的时间延迟，使效果更流畅，不会停顿。

苹果官方网站的菜单设计是CSS Sprites技术应用非常好的案例：

5.6 CSS组合和嵌套

CSS组合

你不必重复有相同属性的多个选择符，你只要用英文逗号（,）隔开选择符就可以了。

h2 { color: red;}

.w3cbbs { color: red;}

.w3cbbs_52css { color: red; }

则你可以这样写h2,.w3cbbs,.w3cbbs_52css { color: red; }

CSS嵌套

CSS结构好的话，没有必要使用过多的类或者标识选择符。这是因为你可以指定在选择符内的选择符。

#top { padding: 1em;}

#top h1 { color: #ff0; }

#top p { color: red; font-weight: bold; }

第六节常用CSS选择符命名参考

导航

nav

页头

header

主导航

mainnav

页面主体

main

顶导航

topnav

内容

content

子导航

subnav

页脚

footer

菜单

menu

版权

copyright

子菜单

submenu

登陆

login

标志

logo

侧栏

sidebar

广告

banner

搜索

search

滚动

scroll

标签页

tab

小技巧

tips

合作伙伴

partner

加入

joinus

标题

title

注册

regsiter

指南

guild

新闻

news

下载

download

按钮

button

状态

status

服务

service

投票

vote

注释

note

友情链接

friendlink

提示信息

msg

注意：命名方式使用“类别_功能”的方式（.bar_news{}  .bar_product{}）。

第四章 CSS高级应用与技巧

第一节 CSS缩写语法

1.1 颜色

16进制的色彩值，如果每两位的值相同，可以缩写一半，例如

#000000

#000

#336699

#369

1.2 盒尺寸

通常有下面四种书写方法:

property:value1

表示所有边都是一个值value1

property:value1 value2

表示top和bottom的值是value1,right和left的值是value2

property:value1 value2 value3

表示top的值是value1，right和left的值是value2，bottom的值是value3

property:value1 value2 value3 value4

四个值依次表示top,right,bottom,left

1.3 边框(border)

边框的属性如下：

border-width:1px； border-style:solid；border-color:#000；

可以缩写为一句：border:1px solid #000；语法是border:width style color；

1.4 背景(Backgrounds)

背景的属性如下：

background-color

#f00

background-image

url(background.gif)

background-repeat

no-repeat

background-attachment

fixed

background-position

0 0

以缩写为一句：

background:#f00 url(background.gif) no-repeat fixed 0 0;

语法编写规则

background:color image repeat attachment position;

你可以省略其中一个或多个属性值，如果省略，该属性值将用浏览器默认值，默认值为：

color: transparent；image: none；repeat: repeat；attachment: scrollposition: 0% 0%

1.5 字体(fonts)

字体的属性如下：

font-style:italic

设置字体风格。

font-variant:small-caps

以小型大写字体或者正常字体显示文本。

font-weight:bold

设置字体的粗细。

font-size:1em

设置字体的尺寸。

line-height:140%

设置行间距

font-family:"Lucida Grande",sans-serif

设置字体系列。

可以缩写为一句：

font:italic small-caps bold 1em/140% "LucidaGrande",sans-serif;

注意：如果你缩写字体定义，至少要定义font-size和font-family两个值。

1.6 列表(lists)

取消默认的圆点和序号可以这样写list-style:none；list的属性如下:

list-style-type:square

设置列表项标志的类型。

list-style-position:inside

设置列表中列表项标志的位置。

list-style-image:url(image.gif)

将图象设置为列表项标志。

可以缩写为一句：

list-style:square inside url(image.gif);

第二节 CSS代码优化

2.1 高效CSS属性的简写

缩写能够缩短你的工作时间，减小你的文件体积。

2.2 避免使用Hack

Hack是一个糟糕的东西，它会为不同浏览器定义一样的代码，使得CSS繁冗。

2.3 使用留白

无论是为了自己阅读还是二次开发，都要让CSS保持良好的可读性，留白就充当了关键的角色。不鼓励为了得到一个更小的CSS文件，就去掉所有的空白格式，如tab，换行，空格等。这里推荐嵌套的代码使用一个tab缩进，所有属性独立一行。

 
 

对比上图中的两种CSS书写格式，哪一种格式能让你更加节约阅读和修改的时间呢？留白的效果显而易见，它会让你更容易管理代码。

2.4 移除多余的结构(frameworks)和重设(resets)

2.5 让CSS能保证日后的维护

另一种优化CSS代码的方法是按照你的习惯将CSS生命分成清晰的结构块。将CSS文件的声明用注释分隔开并进行排版，可以更方便自己在很长时间以后重新审理这个CSS文件，到那时你的效率会高出许多。

2.6 记录你的工作

让你的代码保持规则的一致性并能与其他成语建立良好的沟通是相当重要的，而且还要建立一种网站的标准。例如，团队中的某个成员想出了一个比较不错的网站标签切换界面，记录下来这些想法和注解会帮助团队的其他成员再次使用这种效果，这样能够避免HTML或CSS代码的臃肿。

2.7 压缩使用

为了使得浏览器节省更多下载和载入时间，压缩是一个不错的解决方案，许多流行的编辑器，比如BBEdit, TextMate, 和TopStyle都能够帮助你格式化你的CSS代码成你想要的样子。你还能通过服务器压缩技术使用PHP处理你的CSS。你可以找到更多的CSS优化和压缩的CSS工具。

常用的在线压缩工具：http://www.csstip.cn/

2.8 增加代码的重用率

代码重用是CSS的优势之一，把相同的属性写到公有样式里；不必每条样式表都写同样的内容。

2.9 明确定义单位，除非为0

忘记定义尺寸的单位普遍的错误。在HTML中你可以只写width=100，但是在CSS中，你必须给一个准确的单位，比如:width:100px width:100em。只有两个例外情况可以不定义单位:行高和0值。除此以外，其他值都必须紧跟单位。

注意：不要在数值和单位之间加空格。

2.10 区分大小写

当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，规定所有的定义名称都采用小写。

class和id的值在HTML和XHTML中也是区分大小写的，如果你一定要大小写混合写，请仔细确认你在CSS的定义和XHTML里的标签是一致的。

第三节 CSS圆角样式的应用

3.1 固定宽度的圆角框

最容易创建的是固定宽度的圆角框。它们只需要两个图像：一个图像用于框的顶部，另一个用于底部。例如，假设希望创建下图这样的框样式。

 

这个框的标记如下：

<div class=”box”>

<h2>Headeline</h2>

<p>Content</p>

</div>

需要用图形软件创建两个这样的图像：一个图像用于框的顶部，另一个用于底部。

然后，将顶部图像应用于标题元素，将底部图像应用于div框的底部。因为这个框样式是单色的，所以可以在div框上添加背景颜色，从而形成框的主体。

.box{

Width:418px;

Background:#effce7url(images/bootome.gif) no-repeat left bottom;}

.box h2{

Background:url(images/top.gif) no-repeat left top;}

我们不希望内容碰到框的边界，所以还需要在div中的元素上添加一些填充：

.box h2{

Padding:10px 20px 020px;}

.box p{

Padding:0 20px 10px20px;}

3.2 内容自动延的圆角

处理此类圆角是由内置的绝对定位的四个div组成，每个div都有唯一的圆角图片作CSS Sprite操作。我们将会这样做：

 
第一步：创建我们的 Sprite

1）为矩形圆角图片处理选择一款编辑器 (在这个案例中选择的是Firework).

 

切割并且导出圆角到本地临时位置 (我们将会在之后用到)。

 

2）新创建一个文件，将圆角导入到这个新文件中，复製三次，然后旋转这三个新切片得到另外的三个圆角。

 

3）合成四个圆角为一张图片，并用 1px 的红线 来区分它们。

 

4）导出合成图片，sprite 也就大功告成了。

第二步：HTML 原始码

首先，我们会给容器 div 一个 .roundedbox

<divclass="roundedbox"></div>

现在，我们必须再增加四个 div ，这会在将来创建圆角的时候用到。之后必须给每个加载一个类.corner，同时也标识一个类来指定它们格子的位置。

<div class="roundedbox">

<strong>My content in roundedBoxType 1</strong>

<div class="cornertopLeft"></div>

<div class="cornertopRight"></div>

<div class="cornerbottomLeft"></div>

<div class="cornerbottomRight"></div>

</div>
第三步：CSS 原始码

让我们先来定义下所有的圆角：所有的圆角都必须定义绝对定位，并且注明高度跟宽度。圆角定义的宽度跟高度都是 17px。

.corner {

position:absolute;

width:17px;

height:17px; }

现在开始定义 div 容器样式：

.roundedbox {position:relative;}

任何定义有类 .roundedbox 的元素内，绝对定位元素都会相对於这个元素进行定位，而不是标籤 body。我们也必须设置一些padding值，如果没有设置，圆角将会覆盖我们的文本，这肯定不是我们想要的效果。 重要提示：top 和bottom padding 值必须等价于圆角的 height。left 和 right padding 值必须等价于圆角的宽度。正如您已经知道的，我的圆角宽度跟高度是相等的，因此，四个边角的padding 值也是相等的：

.roundedBox {

position:relative;

padding:17px;

margin:10px 0;}

也通过 margin 给我们的 div 流出了一定的空隙

最后，让我们对没有圆角作单独定义

我们会对每个圆角作绝对定位设置，并且定位背景图的位置 (根据我们的 sprite)：

.roundedbox {

position:relative;

padding:17px;

margin:10px 0;}

.corner {

position:absolute;

width:17px;

height:17px;}

.topLeft {

top:0;

left:0;

background-position:-1px -1px;}

.topRight {

top:0;

right:0;

background-position:-19px -1px;}

.bottomLeft {

bottom:0;

left:0;

background-position:-1px -19px;}

.bottomRight {

bottom:0;

right:0;

background-position:-19px -19px;}

这样就可以实现圆角内容自动的问题了。

第四节CSS滑动门技术的应用

其实CSS滑动门这个概念早在几年前就已经出现了，只是近来年被提得比较多而已。但是常常有人把它跟选项卡效果混淆在一起。

说起来滑动门也不是什么高深的技术，也只是CSS的一种手法罢了。它是利用背景图像的交迭以及相互滑动来实现一些效果。最常见的就是圆角的导航了，我们可以把一左一右两个圆角背景想像成两扇可以滑动的门，他们可以滑到一起并交迭以显示较少的内容，也可以相互滑开以显示较多的内容如：

 

如果加大字号，前面的示例都会垂直扩展。但是，它们不会水平扩展，因为框的宽度必须与顶部和底部图像的宽度一致。如果希望创建灵活的框，那么需要采用略有不同的方法。不用单一图像组成顶部和底部曲线，而是用两个相互重叠的图像如图：

 

随着框尺寸的增加，大图像有更多的部分显露出来，这样就实现了框扩展的效果。这个方法有时候被称为滑动门技术（slidingdoorstechnique），因为一个图像在另一个图像上滑动，将它的一部分隐藏起来。这个方法需要更多的图像，所以必须在标记中添加两个额外的无语义元素。

<div class =”box”>

<div class=” box-outer”>

<div class =” box-inner”>

<h2>Headline</h2>

<p>Content</p>

</div>

</dic>

</div>

这个方法需要四个图像：两个顶部图像组成顶部曲线，两个底部图像组成底部曲线和框的主体。因此，底部图像的高度必须与框的最大高度相同。分别将这些图像命名为top-left.gif、top-right.gif、bottom-left.gif和bottom-right.gif。

 

首先，将bottom-left.gif应用于主框div，将bottom-right.gif应用于外边的div。接下来，将top-left.gif应用于内部的div，将top-right.gif应用于标题。最后，添加一些填充以便在内容周围形成一点儿空白。

.box{

width:20em;

background:#effce7url(images/bottom-left.gif) no-repeat left bottom;}

.box-outer{

background:url(images/bottom-right.gif) no-repeat right bottom;

padding-bottom:5%;}

.box-inner{

background:url(images/top-left.gif) no-repeat left top ;}

.box h2{

background:url(images/top-right.gif) no-repeat right top;

padding-top:5%;}

box h2,.box p{

padding-left:5%;

padding-right:5%;}

在这个示例中，我以em为单位设置框的宽度，所以在浏览器中增加文本尺寸时框会伸展如下图。当然，可以用百分数设置宽度，这使框根据浏览器窗口的尺寸进行扩展或收缩。这是弹性和灵活布局背后的主要原则之一。

第五节小提示窗口的应用

第六节折叠标签的研究的应用

先写结构：

<ul id="menu">
<li class="end"><ahref="#"><h1>菜单1内容</h1><span>菜单1内容</span></a></li>
<li><ahref="#"><h1>菜单2内容</h1><span>菜单1内容</span></a></li>
<li><ahref="#"><h1>菜单3内容</h1><span>菜单1内容</span></a></li>
<li><ahref="#"><h1>菜单4内容</h1><span>菜单1内容</span></a></li>
<li><ahref="#"><h1>菜单5内容</h1><span>菜单1内容</span></a></li>
<li><ahref="#"><h1>菜单1内容</h1><span>菜单1内容</span></a></li>
</ul>

CSS代码：

*{ margin:0px; padding:0px;}

#menu {

overflow:hidden;

margin:10px;

width:200px;

background:#000000;}

#menu h1 {

font:normal 14px/14px "黑体";

color:#FFFFFF;}

#menu li {

display:block;

padding:10px;

width:178px;

border:1px solid #FFCC00;

border-top-width:0px;

list-style:none;}

#menu li.end {border-top-width:1px;}

#menu li a {

display:block;

width:100%;

text-decoration:none;}

#menu li a span {

display:none;

padding:10px 0 0 0;

font:normal 12px/12px "宋体";

color:#666666;}

#menu li a:hover { background:#000000;}

#menu li a:hover span { display:block;cursor:hand;}

分析CSS重点2句：

#menu li a span {

display:none;

padding:10px 0 0 0;

font:normal 12px/12px "宋体";

color:#666666;}

#menu li a:hover span {

display:block;

cursor:hand;}

#menu li a span 这个样式中的display:none;设置隐藏，因为原始状态span是在a标签下，只让a链接下的其他元素显示，span 下的内容全部隐藏。

#menu li a:hover span 这个样式display:block;设置块状也就是显示的意思，当鼠标滑过a链接span显示块状，然后就可以把里面的内容显示出来。

 

第五章 DIV+CSS浏览器兼容研究

由于浏览器之间存在兼容性问题，在制作网页的时候，为了使页面能在不同浏览器中显示相对一致；所以总结了几个浏览器之间的Hack和在浏览器兼容问题上的一些相关注意事项。现在浏览器基本需要兼容IE6；IE7；IE8；FF。

第一节CSS HACK 汇总速查一览

浏览器

Hack(不支持的为红色)

IE6

“*”   “_”   “\9”   “!important”

IE7

“*“   “_”   “\9”   “!important”

IE8

“*“   “_”   “\9”   “!important”

FF

“*”   “_”   “\9”   “!important”

比如:

.main{

---------ALL

------------IE8

*             -------------------IE7

_           --------------------------IE6

}---------------------------FF

第二节 常见兼容问题整理

2.1 DOCTYPE 影响 CSS 处理

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

<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Frameset.dtd">

Transitional类型：是指一种过渡类型，使用这种类型浏览器对XHTML的解析比较宽松，允许使用HTML4.01中的标签，但必须符合XHTML的语法。这种是现在通用的方法，用Dreamweaver创建网页时默认就是这种类型。

Strict类型：严格类型，使用时浏览器将相对严格，不允许使用任何表现形式的标识和属性，如在元素中直接使用bgcolor背景色属性等。

Frameset类型：框架页类型，如果网页使用了框架结构，就有必要使用这样的文档声明。

2.2 编码差异导致IE6不能正常解析CSS文件

网页采用了 UTF-8 编码格式，这本来没有问题，问题是外部 CSS 文件默认是 ANSI 编码，并没有保存为 UTF-8 格式。可能你会发现在一般情况下这样也是没有问题的，然而当 CSS 文件中包含有中文注释时就可能不尽如人意了！估计是 IE6 版本以下的浏览器在解析这个 CSS 文件时因为编码问题而无法正确解析，所以才会发生 CSS 在 IE6 下不起作用的情况。IE6 的人还是不少。因此这个问题需要解决：

方法一：把 CSS、JS 和网页文件都统一保存为 UTF-8 格式。

方法二：去掉 CSS、JS 中的中文注释，或者改为英文。

上文为IE6因为编码问题无法正确解析CSS文件

2.3 FORM标签在IE自动增加MARGIN边距

这个标签在IE中,将会自动margin一些边距,而在FF中margin则是0,因此,如果想显示一致,所以最好在CSS中指定margin和padding,针对上面两个问题,CSS中一般首先都使用这样的样式form{margin:0;padding:0;}

2.4 UL标签

UL标签在Mozilla中默认是有padding值的,而在IE中只有margin有值；

所以先定义 ul{margin:0;padding:0;}

2.4 MARGIN加倍的问题

置为float的div在IE下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline；例如：

<divid="imfloat"></div>相应的CSS为

#imfloat{

float:left;

margin:5px;

display:inline;   }

相关文章