学步园

——摘自《CSS入门经典（第3版）》 Lan Pouncey、Richard York著

【样式化列表】

·list-style-type属性改变每个列表项之前的项目符号的样式。

属性	值
list-style-type	disc|circle|square|decimal|decimal-leading-zero|lower-roman|upper-roman|lower-greek|lower-latin|upper-latin|armenian|georgian|none 无序列表的初始值：disc 有序列表的初始值：decimal

·样式化无序列表

有4种可能的符号类型：disc、circle、square和none，默认值是disc。

·样式化有序列表

在所有浏览器上都支持的关键字：decimal、lower-roman、upper-roman和none。

·list-style-image属性，接受一副图像的URL

属性	值
List-style-image	<uri> | none 初始值：none

·list-style-position属性

控制列表项符号的位置是出现在列表项元素的内部还是外部。

·list-style简写属性

属性	值
List-style	<list-style-type> | <list-style-position> | <list-style-image>

List-style属性指定1~3个值。

【定位】

·position属性用于为元素指定不同的定位类型。

属性	值
Position	static | relative | absolute | fixed

z-index采用默认值auto的定位元素依次向上堆叠。默认升序。

【样式化表】

·HTML表支持许多可选元素：

<caption>元素用来提供表标题或者表名称。

<colgroup>元素用来闭合表中所有的<col>元素。<colgroup>元素不会显示。

<col>元素用来控制与每个表列有关的属性，例如列宽，<col>元素不会显示，也不包含内容。

<thead>元素闭合与列表头有关的信息。如果打印的表跨越多页，那么<thead>中的信息会在每页的顶部重复出现。

<tbody>元素包含了主要的表数据。

<tfoot>脚注内容

<table>
	<caption>Ingredients</caption>
	<colgroup>
		<col class=”ngredient”>
		<col class=”quantity”>
	</colgroup>
	<thead>
		<tr>
			<th>Ingredient</th>
			<th>Quantity of Ingredent</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<tr><Ingredient/tr>
			<tr>Quantity of Ingredient</tr>
		</tr>
	</tfoot>
	<tbody>
	.......
	</tbody>
</table>

·caption-side属性控制表标题的位置 是出现在表的上方还是下方。

属性	值
caption-side	top|bottom 初始值：top

注：IE6和IE7支持<caption>元素，不支持caption-side属性。

·表列

<colgroup>和<col>元素控制列的宽度、背景颜色或者文本颜色。

·控制表的布局

属性	值
table-layout	auto| fixed 初始值：auto

在默认情况下，表会扩展或收缩以容纳其中包含的数据。

有些时候需要强制表以及单元格具有固定的宽度，如下代码 效果，因为文本内容太宽，表的宽度仍会大于100px：

......
<title></title>
<style type=”text/css”>
table.
.control {
	width:100px;
}
table.
th.
td.
.control {
	width:20px
}
...
</style>

在这种情况下可以使用 table-layout fixed强制使用一个宽度，那么效果文本会超出表格边界，而在IE浏览器中 溢出的文本会被裁剪，不同浏览器显示不一致。

· border-collapse属性控制表单元格的间距

属性	值
border-collapse	collapse| separate 初始值：sepaarate

值设置为collapse删除单元格之间的间距

·border-spacing属性控制边框间距

属性	值
border-spacing	<length><length>? 初始值：0

注：IE6、IE7不支持border-spacing属性，如果必须支持这两个浏览器，常用的一种解决方法是从表格单元格中完全移除边框，然后把每个单元格的内容放到一个<div>元素中，对这些<div>元素应用所需的边框和内边距。

border-spacing属性的语法：

border-spacing:<horizongtal spacing length> <vertical spacing length>

如果提供了可选的第二个值，分别指定垂直水平方向的间距。

【创建完整的布局】

·例子

body {
	font:82%/1.4  Verdana, Arial, Helvetica, sans-serif;
   	%
}
h2.
h3 {
	font-family:Georgia,Times,Times New Romas, serif;
}

//在body元素上设置字体大小为82%，行高为1.4，这使得正文的大小为13px，增加了每一行的间距，以适应多数人的阅读习惯，通过使用百分比指定字体大小不会违反IE中字体大小调整功能。

使用@font-face规则向网站访问者提供他们没有安装的字体。

@font-face {
　　font-family:Raleway;
　　src:url(raleway_thin.eot);
　　src:local(releway_thin),url(raleway_thin.ttf) format(opentype);
}

//这创建了一个可以在CSS中使用的新的font-face引用，这条规则包含两个部分：

font-family属性，提供了一个用于在以后引用字体的标签

src属性，第一条src声明应用于IE，其值就是字体文件的URL；第二条src应用于其他所有浏览器，它们支持Open Type字体格式，这条声明必须放在前一条的后面，以便它能够重写支持浏览器的第一条src声明。第二条src还包含了local，表示应该首先在用户已安装的字体中查找该字体。

注：自定义字体麻烦少用

·例子

......
.navigation a {
display:block;
margin-left:0.5em;
padding:0.5em;
border:1px solid #ccc;
color:#233;
text-decoration:none;
}
.navigation a:focus,
.navigation a:hover {
background:#233;
color:#FFF;
}
......
<ul class=”navigation”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Recipes</a></li>
<li><a href=”#”>Suggestions</a></li>
</ul>

·渐变背景

background-image:-moz-linear-gadient(top,#233,#FFF);
background-image:-webkit-gradient(linear,left top,left bottom,from(#233));
-ms-filter:”progid:DXImageTransform.Microsoft.Gradient(StartColorStr=#223333),EndColorStr=##FFFFFF”;
background-image:linear-gradient(top,#233,#FFF);

//第一条和第二条声明应用于Mozilla Firefox和Webkit浏览器（Apple Safari和Google Chrome）属性值带有-moz-和-webkit-前缀，供应商前缀允许浏览器实现尚未最终完成的CSS3规范。

最后一条声明没有供应商前缀，因为这是当前CSS3建议中推荐的格式。

第三条声明采用了一种不同的格式，可以使用Microsoft提供的筛选器来实现渐变，IE8和IE9都支持这种筛选器。

IE不能正确支持简写十六进制形式。

例子：

html{
height:100%;
background-color;#233;
background-image:-moz-linear-gradient(top,#233,#FFF);
background-image:-webkit-gradient(linear,left top,left bottom,from to(#FFF));
-ms-filter:”progid:DXImageTransform.Microsoft.Gradient(StartColorStr=#223333,EndColorStr=#FFFFFF)”;
background-image:linear-gradient(top,#233,#FFF);
}

//除了应用渐变，还添加了一条height声明，设置的高度使得渐变应用于页面的整个高度，而不是在内容结束的地方停止。

而background-color对于不支持渐变背景的浏览器很重要。