css黑板报

篇一：CSS参考手册

提示和注释：属性：“属性” 列指向语法、实例、浏览器支持等内容。 CSS："CSS" 列指示属性是在哪个 CSS 版本中定义的（CSS1 还是 CSS2）。 提示：W3School 的 CSS 参考手册定期在所有主流浏览器中进行测试。最后测试时间：2009 年 10 月 8 日。 提示：W3School 的 CSS3 参考手册 已经发布。CSS 背景属性（Background）属性 background background-attachment background-color background-image background-position background-repeat描述 在一个声明中设置所有的背景属性。 设置背景图像是否固定或者随着页面的其余部分滚动。 设置元素的背景颜色。 设置元素的背景图像。 设置背景图像的开始位置。 设置是否及如何重复背景图像。CSS 1 1 1 1 1 1CSS 边框属性（Border 和 Outline）属性 border border-bottom border-bottom-color border-bottom-style border-bottom-width border-color border-left border-left-color border-left-style border-left-width border-right border-right-color border-right-style border-right-width border-style border-top border-top-color描述 在一个声明中设置所有的边框属性。 在一个声明中设置所有的下边框属性。 设置下边框的颜色。 设置下边框的样式。 设置下边框的宽度。 设置四条边框的颜色。 在一个声明中设置所有的左边框属性。 设置左边框的颜色。 设置左边框的样式。 设置左边框的宽度。 在一个声明中设置所有的右边框属性。 设置右边框的颜色。 设置右边框的样式。 设置右边框的宽度。 设置四条边框的样式。 在一个声明中设置所有的上边框属性。 设置上边框的颜色。CSS 1 1 2 2 1 1 1 2 2 1 1 2 2 1 1 1 2

border-top-style border-top-width border-width outline outline-color outline-style outline-widthCSS 文本属性（Text）设置上边框的样式。 设置上边框的宽度。 设置四条边框的宽度。 在一个声明中设置所有的轮廓属性。 设置轮廓的颜色。 设置轮廓的样式。 设置轮廓的宽度。2 1 1 2 2 2 2属性 color direction letter-spacing line-height text-align text-decoration text-indent text-shadow text-transform unicode-bidi white-space word-spacingCSS 字体属性（Font）描述 设置文本的颜色。 规定文本的方向 / 书写方向。 设置字符间距。 设置行高。 规定文本的水平对齐方式。 规定添加到文本的装饰效果。 规定文本块首行的缩进。 规定添加到文本的阴影效果。 控制文本的大小写。 设置文本方向。 规定如何处理元素中的空白。 设置单词间距。CSS 1 2 1 1 1 1 1 2 1 2 1 1属性 font font-family font-size font-size-adjust font-stretch font-style font-variant font-weight描述 在一个声明中设置所有字体属性。 规定文本的字体系列。 规定文本的字体尺寸。 为元素规定 aspect 值。 收缩或拉伸当前的字体系列。 规定文本的字体样式。 规定是否以小型大写字母的字体显示文本。 规定字体的粗细。CSS 1 1 1 2 2 1 1 1

CSS 外边距属性（Margin）属性 margin margin-bottom margin-left margin-right margin-topCSS 内边距属性（Padding）描述 在一个声明中设置所有外边距属性。 设置元素的下外边距。 设置元素的左外边距。 设置元素的右外边距。 设置元素的上外边距。CSS 1 1 1 1 1属性 padding padding-bottom padding-left padding-right padding-topCSS 列表属性（List）描述 在一个声明中设置所有内边距属性。 设置元素的下内边距。 设置元素的左内边距。 设置元素的右内边距。 设置元素的上内边距。CSS 1 1 1 1 1属性 list-style list-style-image list-style-position list-style-type marker-offset描述 在一个声明中设(来自:www.Zw2.cn 爱 作文 网)置所有的列表属性。 将图象设置为列表项标记。 设置列表项标记的放置位置。 设置列表项标记的类型。CSS 1 1 1 1 2内容生成（Generated Content）属性 content counter-increment counter-reset quotes描述 与 :before 以及 :after 伪元素配合使用，来插入生成内容。 递增或递减一个或多个计数器。 创建或重置一个或多个计数器。 设置嵌套引用的引号类型。CSS 2 2 2 2CSS 尺寸属性（Dimension）属性 height描述 设置元素高度。CSS 1

max-height max-width min-height min-width widthCSS 定位属性（Positioning）设置元素的最大高度。 设置元素的最大宽度。 设置元素的最小高度。 设置元素的最小宽度。 设置元素的宽度。2 2 2 2 1属性 bottom clear clip cursor display float left overflow position right top vertical-align visibility z-indexCSS 打印属性（Print）描述 设置定位元素下外边距边界与其包含块下边界之间的偏移。 规定元素的哪一侧不允许其他浮动元素。 剪裁绝对定位元素。 规定要显示的光标的类型（形状）。 规定元素应该生成的框的类型。 规定框是否应该浮动。 设置定位元素左外边距边界与其包含块左边界之间的偏移。 规定当内容溢出元素框时发生的事情。 规定元素的定位类型。 设置定位元素右外边距边界与其包含块右边界之间的偏移。 设置定位元素的上外边距边界与其包含块上边界之间的偏移。 设置元素的垂直对齐方式。 规定元素是否可见。 设置元素的堆叠顺序。CSS 2 1 2 2 1 1 2 2 2 2 2 1 2 2属性 orphans page-break-after page-break-before page-break-inside widowsCSS 表格属性（Table）描述 设置当元素内部发生分页时必须在页面底部保留的最少行数。 设置元素后的分页行为。 设置元素前的分页行为。 设置元素内部的分页行为。 设置当元素内部发生分页时必须在页面顶部保留的最少行数。CSS 2 2 2 2 2属性 border-collapse描述 规定是否合并表格边框。CSS 2

border-spacing caption-side empty-cells table-layoutCSS 伪类（Pseudo-classes）规定相邻单元格边框之间的距离。 规定表格标题的位置。 规定是否显示表格中的空单元格上的边框和背景。 设置用于表格的布局算法。2 2 2 2属性 :active :focus :hover :link :visited :first-child :lang描述 向被激活的元素添加样式。 向拥有键盘输入焦点的元素添加样式。 当鼠标悬浮在元素上方时，向元素添加样式。 向未被访问的链接添加样式。 向已被访问的链接添加样式。 向元素的第一个子元素添加样式。 向带有指定 lang 属性的元素添加样式。CSS 1 2 1 1 1 2 2CSS 伪元素（Pseudo elements）属性 :first-letter :first-line :before :after描述 向文本的第一个字母添加特殊样式。 向文本的首行添加特殊样式。 在元素之前添加内容。 在元素之后添加内容。CSS 1 1 2 2听觉样式表听觉样式表可把语音合成与音响效果相组合，使用户可以听到信息，而无需进行阅读。 听觉呈现可用于：? ? ? ? ?视觉能力低弱的人士 帮助用户学习阅读 帮助有阅读障碍的用户 家庭娱乐 在汽车中使用听觉呈现通常会把文档转化为纯文本，然后传给屏幕阅读器（可读出屏幕上所有字符的一种程序）。 听觉样式表的一个例子：h1, h2, h3, h4 {

篇二：黑板报文档 1

篇三：CSS样式表-手实用手册与讲解

伺服網路科技股份有限公司 (02)2711-7555

建立日期：2006/10 修改日期：2006/10 版 本：1.0

自定义页面样式 1 使用说明： 1 页面结构 头部说明 主体定制

2 4 8

主体背景（跨三栏）设置 8

左边栏背景设置 8 中间栏背景设置 8 右边栏背景设置 9 底部定制 10 底部背景修改 底部文字修改 模块定制 模块标题修改 模块边框修改 模块背景修改 普通文字修改 链接文字修改 学校名称修改

10 10 11 11 12 12 12 13 13

模块标题文字修改 13 明细页标题文字修改 14 信息陈列标题文字修改 简单说明文字修改 分类列表文字修改 页首连接文字修改

小技巧 17 样式结构图 21

Pictures图文件范例说明

小图示 24 论坛图档

25 14 14 15 16

CSS标签定义对照表 18

24

自定义页面样式

使用说明：

本软件的页面样式设计采用了大量的ＣＳＳ定义，因此，本手册仅限于熟悉ＣＳＳ编写规则的专业网页设计制作人员使用。

当从往站后台下载自定义页面样式文件后，解压缩您可以看到如下所示一些档案：

?

如图所示，在Example目录下，有两个文件夹（catalog、style）和一个档案（index.html）。 catalog文件夹内存放网页范例内容，供您预览使用，请不要随意更改；

style文件夹包含两个档案（style.css、font.css）以及两个文件夹（images、pictures），更改这些档案将从新设定当前页面样式的显示效果：

o o o

style.css 主样式表单，包含绝大部分的样式定义； font.css 字型样式表单，简要定义了一些字型与字号大小；

images 存放样式表单中引用到的图档的文件夹，在样式表单里引用到的所有背景图都存放在此；

o

?

pictures 是存放样式表单中没有引用、但在页面中引用的图档。

双击"index.html"，开启网页制作范本页面、预览当前所有页面的显示效果； 同样，您对css样式的?a href="http://www.zw2.cn/zhuanti/guanyuwozuowen/" target="_blank" class="keylink">我庑薷亩伎梢酝ü⑿赂梅独趁胬丛だ馈?/p>

页面结构

页面的结构如下图：

背景修改

请通过修改样式表单来设定页面整体背景的背景色或者背景图。

?

修改背景色

o

用任意文本编辑器打开style.css，找到下面这段样式：

body {

...

background: #8DCF2F url("images/bg.gif"); ... }

o

其中 background: #8DCF2F url("images/bg.gif") 便是设置页面的背景，将以上css代码改动如下，页面的背景色就变成了black（黑色）：

body {

...

background: black; ... }

?

修改背景图

o o

同上，找到"body"所在的那段代码片段。

将以上CSS代码改动如下，页面的背景图就变成了mybg.gif：

body {

...

background: url("images/mybg.gif"); ... }

间距修改

请按照下列方法，设定网页与浏览器的间距。

?

用任意文本编辑器打开style.css，找到下面这段样式：

body { margin: 10px; ... ... }

?

将上面这段css代码改动如下，网页与浏览器的间距（上下左右都有间距）就变成了25像素：

body {

margin: 25px; ... }

?

头部说明

头部的结构如下图：

学校名称文字修改

用任意文本编辑器打开font.css

，找到下面这段样式，修改"｛｝"内的样式代码。

div.company {

font-family: Arial, Tahoma, "MS Sans Serif", Geneva, sans-serif; font-size: 14px; font-weight: bold;

}

提示："font-family"设定字型，"font-size"设定字号，"font-weight"设定文字的粗细。关于文字样式的设定，请参考「文字修改」中的「普通文字样式修改方法」 。

页首连结定制

请通过修改样式表单来修改文字前的小图、链接文字的颜色，调整整个页首链接导航条的位置等。