Cssweb站点设计手册.docx

如果将

#container{background:

#FCA;}

#content,#sidebar{float:

none;margin:

0;}

改为

#container{background:

#FCA;}

/*

#content,#sidebar{float:

none;margin:

0;}

*/

此时容器会失去效果。

当容器div中不含常规流时，它就会把自己折叠起来，并且没有高度。

CSS中的注释为/*……*/。

解决办法：

使用浮动容器，因为浮动的元素会增大自己的尺寸以容纳其他浮动的元素。

#container{background:

#FCA;float:

left;}，但这种方法有一个潜在的问题——浮动的容器元素的尺寸不受内容区域宽度的约束。

如下面这条#container{background:

#FCA;float:

left;border:

1pxsolidred;width:

100%;}会使内容超过浏览器的窗口。

将容器元素改为常规流。

修改为：

#container{background:

#FCA;border:

1pxsolidred;overflow:

auto;}加了overflow声明（用来控制当一个元素比实际的父元素宽时如何绘制该元素。

）使其能够包含浮动元素，去掉了float和width。

overflow:

auto含义是常规流元素通过增大尺寸来包含浮动元素。

显示元素

实验：

ex0407.html。

默认情况下，列表项目生成的布局盒子被称为块级盒子。

这种盒子与div、p等元素生成的盒子相同。

块级盒子会横跨整个页面，有上往下依次排列，他们不允许其他元素与他们并肩。

但是超链接a和span元素生成的盒子被称为行内盒子，在一行文本中，可以包含很多行内盒子，而且，在必要时，行内盒子可以折行（即跨行显示）。

#navlinksli{display:

inline;}

加上这样一条语句就可以了。

但有些浏览器仍会显示项目符号，我们需要把它去掉：

#navlinksli{display:

inline;list-style:

none;}

第五章设置前景和背景属性

添加前景与背景颜色

查看firefox浏览器的样式的方法：

工具—选项—内容—字体&颜色，单击颜色以查看浏览器的设置。

前景字体色修改：

p{color:

teal;}

h2{color:

orange;}

CSS中颜色定义：

关键字：

maroon、red、yellow、orange、olive、purple、blue、navy、green、lime、white、fuchsia、aqua、teal、black、silver、gray。

十六进制值：

#RRGGBB。

DecimalRGB到percentRGB之间的转换：

RGB（A,B,C）->RGB（A/255，B/255，C/255）。

如：

p{color:

teal;}

h2{color:

orange;border-bottom:

1pxsolid;border-top-width:

3px;}

body{background-color:

#e3edc2;}

#navlinks{background:

yellow;}

#masthead{background-color:

green;}

#sidebar{background-color:

rgb（23%,24%,18%）;}

#sidebarh3{background:

rgb（155,150,202）;}

添加背景图像

初始状态：

#content{

background-color:

rgb（85%,85%,85%）;

}

添加背景图像：

background-image:

url（images/curl-gray.gif）;这是一个相对url，指向网站中的资源，而绝对url指向外部资源。

重复背景图像

使用background-repeat属性。

在CSS中，可以让图像水平（也称X轴）重复和垂直（Y轴）重复，或者不重复（no-repeat）。

如：

#content{

/*background-color:

rgb（85%,85%,85%）;*/

background-image:

url（images/curl-gray.gif）;

background-repeat:

repeat-x;

}

定位背景图像

使用属性background-position，其值有top、bottom、left、right和center（用于指定水平和垂直位置）。

如果background-position属性中只指定一个关键字值，浏览器会认为没有提供那个关键字值是center。

此声明中的关键字次序并不重要，如background-position:

rightbottom;和background-position:

bottomright;效果一样。

还可以使用百分比，如：

background-position:

50%0;但此时顺序是很重要的，必须首先指定水平位置，然后是垂直位置。

此外，如果我们只提供一个百分比值，那浏览器会假设第二个值，也就是垂直位置上的值，是50%。

最后，如果想把图像绝对定位在页面上，不论浏览器窗口尺寸多大都不移动的情形，可以使用像素定位。

如：

background-position:

500px50px;

在定位背景是时如果有需要，还可以组合不同类型的定位。

如：

background-position:

75%50px;

简写背景声明

如：

background:

rgb（85%,85%,85%）url（images/curl-gray.gif）no-repeat75%50px;但要注意不能将定位（75%50px）两个值拆开。

第六章排版属性

术语：

行间距（leading）、缩排（kerning）、衬线（serif）、花体（swash）、cursive（草体）。

修改行高

line-height属性。

文本行之间的垂直距离。

例：

p{line-height:

3;}这个3不带任何单位，我们称为倍数值。

此计算方法为：

行高等于元素的字体大小乘以3。

不推荐使用长度单位，当用户扩大字体时，如果是固定行高容易出现文字重叠的现象。

比较使用这两者的区别：

body{line-height:

1.5;}此情况下，body元素的后代会按照自己的字体大小来计算具体的行高。

body{line-height:

1.5em;}此情况下，body元素的后代都会统一继承它所产生的行高，而不是根据自己字体大小计算。

此类也会产生字体拥挤情况（类似于使用像素值）。

所以，推荐使用倍数值。

使用字体系列

为了使网页字体显示效果较好，我们应该为浏览器提供一个以逗号分隔的字体列表。

浏览器会逐个查找每种字体，直至发现他能够显示的字体系列为止。

通过这种方式，我们可以选择一些外形类似的字体，以保证页面在不同的浏览器之间效果趋于一致。

如：

h1,h2,h3,h4{font-family:

Verdana,Geneva,sans-serif;}

#sidebar{font-family:

"CourierNew",Courier,monospace;}

注意第二行的CourierNew加了引号，因为当一个字体的名称有两个单词时，要用单或双引号引起来，以便浏览器将其看成一个值。

此外，有必要为我们的浏览器指定一种通用字体系列，作为在用户计算机中不包含我们指定的任何一种字体的情况的保障。

通用字体系列

Sans-serif

Arial,verdana,Tahoma

Serif

Timesnewroman,Garamond,georgia

Fantasy

Critter,cottonwood

Cursive

Adobepoetica,zapf-chancery

Monospace

Couriernew,courier,prestige

修改字形和粗细

掌握三个属性：

font-style,font-weight,font-variant。

如：

h1,h2,h3,h4{font-variant:

small-caps;}

p{

font-style:

italic;

font-weight:

bolder;

font-family:

Arial,Helvetica,sans-serif;

font-variant:

small-caps;

}

改变字体大小

三种方法：

如

#contenth2{font-size:

150%;}百分比

#contenth1{font-size:

2em;}相对单位em

p{font-size:

small;}关键字值

具体属性值参考附录A：

CSS2属性。

如何解决嵌套列表字体大小变化：

首先，设置ul{font-size:

smaller;}为防止其后代更小，可以编写：

ulul{font-size:

1em;}，这样其后代就会与父元素大