模块5 网站主题
5.1 教学目标
1．掌握网站主题的制作方法；
2．掌握CSS 样式的设计方法。
3 掌握JavaScript 脚本的使用方法
5.2 工作任务
1 建立网站分类文件
2 使用CSS+DIV设计母版页的布局
3 设计网站主题与外观
5.3 操作步骤
1 添加主题文件夹
（1）右键网站根文件夹，在弹出的快捷菜单中选择“添加ASP.NET 文件夹”|“主题”, 在网站中产生文件夹App_Themes。并在其内默认生成主题子文件夹“主题1”，将其重命名为“BlueTheme ”。
（2）右击文件夹BlueTheme ，依次选择“添加新项”|“外观文件”，输入文件名default.skin ，单击“添加”按钮，如图13-1所示。
（3）右击文件夹BlueTheme ，依次选择“添加新项”|“样式表”，输入文件名default.css ，单击“添加”按钮，如图13-2所示。
2 设置母版页的布局方式
Header 层
Middle 层
Left 层Main 层
PageBody 层
2 设置CSS 样式表文件default.css
（1）使用对HTML 元素定义的方式设置HTML 标签
（2）使用类名定义的方式设置HTML 标签
（3）使用元素ID 的定义方式设置HTML 标签
3 设置皮肤文件default.skin
4 应用主题
（1）对单个页面应用主题(一个页面只能应用一个主题)
将@page指令的Theme 或StyleSheetTheme 属性值设置为要使用主题的名称，如：
(2)对整个网站应用主题
在网站的web.config 文件中，将元素设置为页面主题或全局主题的主题名称，如：
5.4 参考代码
1 设置母版页布局
Inherits ="MasterPage2" %>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 设置CSS 样式表文件default.css
/*页面基本信息*/
body
{
font-family : 宋体 Arial ;
font-size : 12px ;
margin-top : 0px ;
margin : 0;
padding : 0;
text-align : left ;
background-color : #EEFFFF;
cursor : auto ;
}
/*页面层容器*/
#container
{
width :100%;
}
#Header
{
margin-top :0px ;
margin-left :0px ;
margin-right :0px ;
width :100%;
height :100px ;
}
#Header
{
margin-top :100px ;
margin-left :0px ;
margin-right :0px ;
width :100%;
height :50px ;
}
#pagebody
{
width :1280px ;
}
#left
{
float :left ;
width : 200px ;
clear :left ;
overflow :hidden ;
}
#main
{
width : 1080px ;
text-align :left ;
vertical-align :top ;
float :right ;
clear :right ;
overflow :hidden ;
}
.ptitle
{
line-height :30px ;
font-size :x-large ;
font-weight :bold ;
color :Window
}
hr
{
border :0;
border-top :2px solid #41519A;
height :2px ;
}
#red
{
line-height :30px ;
font-size :x-large ;
font-weight :bold ;
color :Window
}
3 设置皮肤文件default.skin
13.5 相关理论知识
1 主题：主题是定义网站中页面和控件的外观的属性的集合，通过应用主题，可以为网站中的页面提供一致的外观。主题是一个目录，ASP.NET 对应的目录名称为APP_Themes，这个目录只允许存放三种类型的文件：皮肤文件（扩展名为.skin 的文件，用于定义ASP.NET web 服务器控件的属性设置），样式文件（扩展名为.css 的文件）和一些图像文件。
（1）外观文件：包含各类控件的属性设置。
2 CSS（Cascading Style Sheet）常称为级联样式表，用来定义HTML 的标签，控制网页元素的外观属性。CSS 定义有三种类型，分别是：对“元素”定义，对“类名”定义以及对“元素ID ”定义。
（1）对HTML “元素”进行定义，格式如下：
HTML 元素名{/*显示风格的描述语句*/
属性名：值；
属性名：值；
}
（2）对“类名”定义，格式如下：
. 类名{/*显示风格的描述语句*/
属性名：值；
属性名：值；
}
“类名”定义可以应用于任意HTML 标签中，只要在该标签的属性中注明类名（class ）即可，例如：
(3)对“元素ID ”定义，格式如下：
#ID名{/*显示风格的描述语句*/
属性名：值；
属性名：值；
}
“元素ID ”定义可以应用于任意HTML 标签中，只要在该标签的属性中注明id 取值，例如：
三种CSS 的类型的优先级别顺序依次为：元素名、元素ID 、类名。
3. CSS 加入HTML 的方式
● 行内直接加入样式
可以直接在HTML 代码行中加入样式规则，这种方法适合于指定网页内的某
一小段文字的显示风格。基本格式为：
例如：
CSS实例
。表示用蓝色显示
字体大小为10pt 的“CSS实例”。尽管使用简单、显示直观，但是这种方法不怎么常用，因为这样添加无法完全发挥样式表的优势“内容结构和格式控制分别保存”。 ● 嵌入一个样式表
可以在HTML 的标记中使用STYLE 嵌入一个样式表。基本格式为：
其中，type=”text/css”表示样式表采用MIME 类型，帮助不支持CSS 的浏览
器过滤掉CSS 代码，避免在浏览器上直接以源代码的方式显示设置的样式表。但为了保证上述情况一定不要发生，还是在样式表里加上注释标识符“”。
● 链接样式表
可以将多个HTML 文件都连接到一个样式表文件上，该文件设定所有网页的
规则。若改变样式表中的某个细节，所有页面也都随之改变。一个外部的样式表可以通过HTML 的标识的link 元素链接到HTML 文档中。基本格式为：
其中，*.css是单独保存的样式表文件，文件中不能包含标识符，并
且只能以css 为后缀。
● 输入一个样式表
可以使用CSS 的@import声明一个样式表。这个声明用于一个CSS 文件或内
部的STYLE 标记。基本格式为：
4 皮肤文件
皮肤文件又称外观文件 ，用来定义一批服务器控件的外观，扩展名为.skin 。皮肤中包含的属性是那些想要被设定值的外观属性，皮肤中不能包含ID 属性，必须包括runat=”server ”属性，皮肤中只能设置外观属性。
（1）默认皮肤：未设置SkinID 属性的是默认皮肤，默认皮肤只能有一个。
（2）命名皮肤：命名皮肤必须设置SkinID 属性，不能包含同名的命名皮肤。
4 全局主题：服务器上任何网站以及任何网站中的任何页面都可以引用的主题称为全局主题。全局主题必须保存在服务器默认网站中。例如，默认网站根文件夹是C:\Inetpub\wwwroot，
想要创建名为BlueTheme 的全局主题，则执行如下两步：
（1）创建文件夹：C:\Inetpub\wwwroot\aspnet_client\system_web\version\Themes\BlueTheme.
(2)将皮肤文件、CSS 文件、图片文件等主题资源保存在文件夹BlueTheme 中，全局主题创建完毕。
5 应用主题：
（1）对单个页面应用主题(一个页面只能应用一个主题)
将@page指令的Theme 或StyleSheetTheme 属性值设置为要使用主题的名称，如：
主题中定义的默认皮肤等样式就应用到网页各类控件的所有实例中，如果希望对单个控件应用一组特定属性，可以引用命名皮肤，及该控件的起始标记中添加SkinID 属性。
(2)对整个网站应用主题
在网站的web.config 文件中，将元素设置为页面主题或全局主题的主题名称，如：
主题中定义的默认皮肤等样式就应用到网站所有网页各类控件的所有实例中，如果希望对单个控件应用一组特定属性，可以引用命名皮肤，及该控件的起始标记中添加SkinID 属性。
（3）主题应用的优先级别
@Page指令中Theme 属性的优先级别最高。
然后是web.config 中的Pages.theme 属性；
@Page指令中的StyleSheetTheme 属性的优先级别最低。
@Page指令中的StyleSheetTheme 属性的优先级别低于网页控件自身标记中直接设置的
属性，其他主题高于网页空间自身标记中直接设置的属性。
（4）以编程方式应用主题。
在程序中应用主题Theme ，要在Page_PreInit事件过程中设置，代码如下：
protected void Page_PreInit(object sender, EventArgs e)
{
Page.Theme = "BlueTheme" ;
}
在程序中设置空间SkinID ，要在Page_PreInit事件过程中设置，代码如下： protected void Page_PreInit(object sender, EventArgs e) {
Button3.SkinID = "pinkbutton" ;
}
（5）禁止应用主题
将@Page指令的EnableTheming 参数的值指定为false 。为控件禁止应用主题，设置控件EnableTheming 属性值为false 。 6 控件最终外观
各项加载的顺序为：CSS 文件、StyleSheetTheme 、控件标记内嵌样式、web.config 的Pages.theme 、theme, 若控件的某些属性在以上多项中都有设置，则后面加载的覆盖前面加载的。应用StyleSheetTheme 属性在设计阶段就可以看到样式，应用Theme 属性只能在运行阶段看到结果。
1.6 拓展知识
1 CSS的属性含义 （1）字体
●
text-decoration 属性规定添加到文本的修饰。
（2）块
● line-height 属性设置行间的距离（行高）。 注释：不允许使用负值。
●
vertical-align 属性设置元素的垂直对齐方式。
说明：该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的
单元格内容的对齐方式。
● text-align 属性设置水平对齐方式
● text-indent 属性规定文本块中首行文本的缩进。
注释：允许使用负值。如果使用负值，那么首行会被缩进到左边。
●
white-space 属性设置如何处理元素内的空白
● word-spacing 属性增加或减少单词间的空白（即字间隔）。
● letter-spacing 属性增加或减少字符间的空白（字符间距）。
（3）背景
●
background-color 属性设置元素的背景颜色。
● background-image 属性为元素设置背景图像。
元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。 默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。
提示：请设置一种可用的背景颜色，这样的话，假如背景图像不可用，页面也可获得良好的视觉效果。
● background-repeat 属性设置是否及如何重复背景图像。 默认地，背景图像在水平和垂直方向上重复。
●
background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。
●
background-position 属性设置背景图像的起始位置
（4）边框
● border-style 属性用于设置元素所有边框的样式，或者单独地为各边设置边框样式。 只有当这个值不是 none 时边框才可能出现。
●
border-width 简写属性为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
只有当边框样式不是 none 时才起作用。如果边框样式是 none ，边框宽度实际上会重置为
0。不允许指定负长度值。
●
border-color 属性设置四条边框的颜色。此属性可设置 1 到 4 种颜色。
（5）方框
●
padding 简写属性在一个声明中设置所有内边距属性。
● margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。 说明：这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。 块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。
注释：允许使用负值。
（6）定位和布局
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序
较低的元素的前面。
注释：元素可拥有负的 z-index 属性值。
注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！
●
position 属性规定元素的定位类型。
● visibility 属性规定元素是否可见。
提示：即使不可见的元素也会占据页面上的空间。请使用 "display" 属性来创建不占据页面空间的不可见元素。
●
display 属性规定元素应该生成的框的类型
● float 属性定义元素在哪个方向浮动。
以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
● clear 属性规定元素的哪一侧不允许其他浮动元素。
● cursor 属性规定要显示的光标的类型（形状）。
● overflow 属性规定当内容溢出元素框时发生的事情。
● clip 属性剪裁绝对定位元素。
（7）列表
●
list-style-type 属性设置列表项标记的类型。
● list-style-image 属性使用图像来替换列表项的标记。 说明：这个属性指定作为一个有序或无序列表项标志的图像。图像相对于列表项内容的放置位置通常使用 list-style-position 属性控制。
● list-style-position 属性设置在何处放置列表项标记。
说明：该属性用于声明列表标志相对于列表项内容的位置。外部 (outside) 标志会放在离列表项边框边界一定距离处，不过这距离在 CSS 中未定义。内部 (inside) 标志处理为好像它们是插入在列表项内容最前面的行内元素一样。
（8）表格
● tableLayout 属性用来显示表格单元格、行、列的算法规则。
固定表格布局：固定表格布局与自动表格布局相比，允许浏览器更快地对表格进行布局。 在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。通过使用固定表格布局，用户代理在接收到第一行后就可以显示表格。
自动表格布局：在自动表格布局中，列的宽度是由列单元格中没有折行的最宽的内容设定的。
此算法有时会较慢，这是由于它需要在确定最终的布局之前访问表格中所有的内容。 说明：该属性指定了完成表布局时所用的布局算法。固定布局算法比较快，但是不太灵活，而自动算法比较慢，不过更能反映传统的 HTML 表。
● border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是象在标准
的 HTML 中那样分开显示。
● border-spacing 属性设置相邻单元格的边框间的距离（仅用于“边框分离”模式）。 注释：某些版本的IE 浏览器不支持此属性。
说明：该属性指定分隔边框模型中单元格边界之间的距离。在指定的两个长度值中，第一个是水平间隔，第二个是垂直间隔。除非 border-collapse 被设置为 separate ，否则将忽略这个属性。尽管这个属性只应用于表，不过它可以由表中的所有元素继承。
● empty-cells 属性设置是否显示表格中的空单元格（仅用于“分离边框”模式）。 注释：某些版本的 IE 浏览器不支持此属性。
说明：该属性定义了不包含任何内容的表单元格如何表示。如果显示，就会绘制出单元格的边框和背景。除非 border-collapse 设置为 separate ，否则将忽略这个属性。
caption-side 属性设置表格标题的位置。
说明：该属性指定了表标题相对于表框的放置位置。表标题显示为好像它是表之前（或之后）的一个块级元素。
| „ | „ |
模块5 网站主题
5.1 教学目标
1．掌握网站主题的制作方法；
2．掌握CSS 样式的设计方法。
3 掌握JavaScript 脚本的使用方法
5.2 工作任务
1 建立网站分类文件
2 使用CSS+DIV设计母版页的布局
3 设计网站主题与外观
5.3 操作步骤
1 添加主题文件夹
（1）右键网站根文件夹，在弹出的快捷菜单中选择“添加ASP.NET 文件夹”|“主题”, 在网站中产生文件夹App_Themes。并在其内默认生成主题子文件夹“主题1”，将其重命名为“BlueTheme ”。
（2）右击文件夹BlueTheme ，依次选择“添加新项”|“外观文件”，输入文件名default.skin ，单击“添加”按钮，如图13-1所示。
（3）右击文件夹BlueTheme ，依次选择“添加新项”|“样式表”，输入文件名default.css ，单击“添加”按钮，如图13-2所示。
2 设置母版页的布局方式
Header 层
Middle 层
Left 层Main 层
PageBody 层
2 设置CSS 样式表文件default.css
（1）使用对HTML 元素定义的方式设置HTML 标签
（2）使用类名定义的方式设置HTML 标签
（3）使用元素ID 的定义方式设置HTML 标签
3 设置皮肤文件default.skin
4 应用主题
（1）对单个页面应用主题(一个页面只能应用一个主题)
将@page指令的Theme 或StyleSheetTheme 属性值设置为要使用主题的名称，如：
(2)对整个网站应用主题
在网站的web.config 文件中，将元素设置为页面主题或全局主题的主题名称，如：
5.4 参考代码
1 设置母版页布局
Inherits ="MasterPage2" %>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 设置CSS 样式表文件default.css
/*页面基本信息*/
body
{
font-family : 宋体 Arial ;
font-size : 12px ;
margin-top : 0px ;
margin : 0;
padding : 0;
text-align : left ;
background-color : #EEFFFF;
cursor : auto ;
}
/*页面层容器*/
#container
{
width :100%;
}
#Header
{
margin-top :0px ;
margin-left :0px ;
margin-right :0px ;
width :100%;
height :100px ;
}
#Header
{
margin-top :100px ;
margin-left :0px ;
margin-right :0px ;
width :100%;
height :50px ;
}
#pagebody
{
width :1280px ;
}
#left
{
float :left ;
width : 200px ;
clear :left ;
overflow :hidden ;
}
#main
{
width : 1080px ;
text-align :left ;
vertical-align :top ;
float :right ;
clear :right ;
overflow :hidden ;
}
.ptitle
{
line-height :30px ;
font-size :x-large ;
font-weight :bold ;
color :Window
}
hr
{
border :0;
border-top :2px solid #41519A;
height :2px ;
}
#red
{
line-height :30px ;
font-size :x-large ;
font-weight :bold ;
color :Window
}
3 设置皮肤文件default.skin
13.5 相关理论知识
1 主题：主题是定义网站中页面和控件的外观的属性的集合，通过应用主题，可以为网站中的页面提供一致的外观。主题是一个目录，ASP.NET 对应的目录名称为APP_Themes，这个目录只允许存放三种类型的文件：皮肤文件（扩展名为.skin 的文件，用于定义ASP.NET web 服务器控件的属性设置），样式文件（扩展名为.css 的文件）和一些图像文件。
（1）外观文件：包含各类控件的属性设置。
2 CSS（Cascading Style Sheet）常称为级联样式表，用来定义HTML 的标签，控制网页元素的外观属性。CSS 定义有三种类型，分别是：对“元素”定义，对“类名”定义以及对“元素ID ”定义。
（1）对HTML “元素”进行定义，格式如下：
HTML 元素名{/*显示风格的描述语句*/
属性名：值；
属性名：值；
}
（2）对“类名”定义，格式如下：
. 类名{/*显示风格的描述语句*/
属性名：值；
属性名：值；
}
“类名”定义可以应用于任意HTML 标签中，只要在该标签的属性中注明类名（class ）即可，例如：
(3)对“元素ID ”定义，格式如下：
#ID名{/*显示风格的描述语句*/
属性名：值；
属性名：值；
}
“元素ID ”定义可以应用于任意HTML 标签中，只要在该标签的属性中注明id 取值，例如：
三种CSS 的类型的优先级别顺序依次为：元素名、元素ID 、类名。
3. CSS 加入HTML 的方式
● 行内直接加入样式
可以直接在HTML 代码行中加入样式规则，这种方法适合于指定网页内的某
一小段文字的显示风格。基本格式为：
例如：
CSS实例
。表示用蓝色显示
字体大小为10pt 的“CSS实例”。尽管使用简单、显示直观，但是这种方法不怎么常用，因为这样添加无法完全发挥样式表的优势“内容结构和格式控制分别保存”。 ● 嵌入一个样式表
可以在HTML 的标记中使用STYLE 嵌入一个样式表。基本格式为：
其中，type=”text/css”表示样式表采用MIME 类型，帮助不支持CSS 的浏览
器过滤掉CSS 代码，避免在浏览器上直接以源代码的方式显示设置的样式表。但为了保证上述情况一定不要发生，还是在样式表里加上注释标识符“”。
● 链接样式表
可以将多个HTML 文件都连接到一个样式表文件上，该文件设定所有网页的
规则。若改变样式表中的某个细节，所有页面也都随之改变。一个外部的样式表可以通过HTML 的标识的link 元素链接到HTML 文档中。基本格式为：
其中，*.css是单独保存的样式表文件，文件中不能包含标识符，并
且只能以css 为后缀。
● 输入一个样式表
可以使用CSS 的@import声明一个样式表。这个声明用于一个CSS 文件或内
部的STYLE 标记。基本格式为：
4 皮肤文件
皮肤文件又称外观文件 ，用来定义一批服务器控件的外观，扩展名为.skin 。皮肤中包含的属性是那些想要被设定值的外观属性，皮肤中不能包含ID 属性，必须包括runat=”server ”属性，皮肤中只能设置外观属性。
（1）默认皮肤：未设置SkinID 属性的是默认皮肤，默认皮肤只能有一个。
（2）命名皮肤：命名皮肤必须设置SkinID 属性，不能包含同名的命名皮肤。
4 全局主题：服务器上任何网站以及任何网站中的任何页面都可以引用的主题称为全局主题。全局主题必须保存在服务器默认网站中。例如，默认网站根文件夹是C:\Inetpub\wwwroot，
想要创建名为BlueTheme 的全局主题，则执行如下两步：
（1）创建文件夹：C:\Inetpub\wwwroot\aspnet_client\system_web\version\Themes\BlueTheme.
(2)将皮肤文件、CSS 文件、图片文件等主题资源保存在文件夹BlueTheme 中，全局主题创建完毕。
5 应用主题：
（1）对单个页面应用主题(一个页面只能应用一个主题)
将@page指令的Theme 或StyleSheetTheme 属性值设置为要使用主题的名称，如：
主题中定义的默认皮肤等样式就应用到网页各类控件的所有实例中，如果希望对单个控件应用一组特定属性，可以引用命名皮肤，及该控件的起始标记中添加SkinID 属性。
(2)对整个网站应用主题
在网站的web.config 文件中，将元素设置为页面主题或全局主题的主题名称，如：
主题中定义的默认皮肤等样式就应用到网站所有网页各类控件的所有实例中，如果希望对单个控件应用一组特定属性，可以引用命名皮肤，及该控件的起始标记中添加SkinID 属性。
（3）主题应用的优先级别
@Page指令中Theme 属性的优先级别最高。
然后是web.config 中的Pages.theme 属性；
@Page指令中的StyleSheetTheme 属性的优先级别最低。
@Page指令中的StyleSheetTheme 属性的优先级别低于网页控件自身标记中直接设置的
属性，其他主题高于网页空间自身标记中直接设置的属性。
（4）以编程方式应用主题。
在程序中应用主题Theme ，要在Page_PreInit事件过程中设置，代码如下：
protected void Page_PreInit(object sender, EventArgs e)
{
Page.Theme = "BlueTheme" ;
}
在程序中设置空间SkinID ，要在Page_PreInit事件过程中设置，代码如下： protected void Page_PreInit(object sender, EventArgs e) {
Button3.SkinID = "pinkbutton" ;
}
（5）禁止应用主题
将@Page指令的EnableTheming 参数的值指定为false 。为控件禁止应用主题，设置控件EnableTheming 属性值为false 。 6 控件最终外观
各项加载的顺序为：CSS 文件、StyleSheetTheme 、控件标记内嵌样式、web.config 的Pages.theme 、theme, 若控件的某些属性在以上多项中都有设置，则后面加载的覆盖前面加载的。应用StyleSheetTheme 属性在设计阶段就可以看到样式，应用Theme 属性只能在运行阶段看到结果。
1.6 拓展知识
1 CSS的属性含义 （1）字体
●
text-decoration 属性规定添加到文本的修饰。
（2）块
● line-height 属性设置行间的距离（行高）。 注释：不允许使用负值。
●
vertical-align 属性设置元素的垂直对齐方式。
说明：该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的
单元格内容的对齐方式。
● text-align 属性设置水平对齐方式
● text-indent 属性规定文本块中首行文本的缩进。
注释：允许使用负值。如果使用负值，那么首行会被缩进到左边。
●
white-space 属性设置如何处理元素内的空白
● word-spacing 属性增加或减少单词间的空白（即字间隔）。
● letter-spacing 属性增加或减少字符间的空白（字符间距）。
（3）背景
●
background-color 属性设置元素的背景颜色。
● background-image 属性为元素设置背景图像。
元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。 默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。
提示：请设置一种可用的背景颜色，这样的话，假如背景图像不可用，页面也可获得良好的视觉效果。
● background-repeat 属性设置是否及如何重复背景图像。 默认地，背景图像在水平和垂直方向上重复。
●
background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。
●
background-position 属性设置背景图像的起始位置
（4）边框
● border-style 属性用于设置元素所有边框的样式，或者单独地为各边设置边框样式。 只有当这个值不是 none 时边框才可能出现。
●
border-width 简写属性为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
只有当边框样式不是 none 时才起作用。如果边框样式是 none ，边框宽度实际上会重置为
0。不允许指定负长度值。
●
border-color 属性设置四条边框的颜色。此属性可设置 1 到 4 种颜色。
（5）方框
●
padding 简写属性在一个声明中设置所有内边距属性。
● margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。 说明：这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。 块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。
注释：允许使用负值。
（6）定位和布局
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序
较低的元素的前面。
注释：元素可拥有负的 z-index 属性值。
注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！
●
position 属性规定元素的定位类型。
● visibility 属性规定元素是否可见。
提示：即使不可见的元素也会占据页面上的空间。请使用 "display" 属性来创建不占据页面空间的不可见元素。
●
display 属性规定元素应该生成的框的类型
● float 属性定义元素在哪个方向浮动。
以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
● clear 属性规定元素的哪一侧不允许其他浮动元素。
● cursor 属性规定要显示的光标的类型（形状）。
● overflow 属性规定当内容溢出元素框时发生的事情。
● clip 属性剪裁绝对定位元素。
（7）列表
●
list-style-type 属性设置列表项标记的类型。
● list-style-image 属性使用图像来替换列表项的标记。 说明：这个属性指定作为一个有序或无序列表项标志的图像。图像相对于列表项内容的放置位置通常使用 list-style-position 属性控制。
● list-style-position 属性设置在何处放置列表项标记。
说明：该属性用于声明列表标志相对于列表项内容的位置。外部 (outside) 标志会放在离列表项边框边界一定距离处，不过这距离在 CSS 中未定义。内部 (inside) 标志处理为好像它们是插入在列表项内容最前面的行内元素一样。
（8）表格
● tableLayout 属性用来显示表格单元格、行、列的算法规则。
固定表格布局：固定表格布局与自动表格布局相比，允许浏览器更快地对表格进行布局。 在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。通过使用固定表格布局，用户代理在接收到第一行后就可以显示表格。
自动表格布局：在自动表格布局中，列的宽度是由列单元格中没有折行的最宽的内容设定的。
此算法有时会较慢，这是由于它需要在确定最终的布局之前访问表格中所有的内容。 说明：该属性指定了完成表布局时所用的布局算法。固定布局算法比较快，但是不太灵活，而自动算法比较慢，不过更能反映传统的 HTML 表。
● border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是象在标准
的 HTML 中那样分开显示。
● border-spacing 属性设置相邻单元格的边框间的距离（仅用于“边框分离”模式）。 注释：某些版本的IE 浏览器不支持此属性。
说明：该属性指定分隔边框模型中单元格边界之间的距离。在指定的两个长度值中，第一个是水平间隔，第二个是垂直间隔。除非 border-collapse 被设置为 separate ，否则将忽略这个属性。尽管这个属性只应用于表，不过它可以由表中的所有元素继承。
● empty-cells 属性设置是否显示表格中的空单元格（仅用于“分离边框”模式）。 注释：某些版本的 IE 浏览器不支持此属性。
说明：该属性定义了不包含任何内容的表单元格如何表示。如果显示，就会绘制出单元格的边框和背景。除非 border-collapse 设置为 separate ，否则将忽略这个属性。
caption-side 属性设置表格标题的位置。
说明：该属性指定了表标题相对于表框的放置位置。表标题显示为好像它是表之前（或之后）的一个块级元素。
| „ | „ |