教学案例-动态网站建设-CSS常用属性 (1)讲解.pptx

项目案例-动态网站建设-CSS常用属性

1

2

1.CSS背景（background）

该属性定义元素的背景效果。元素的背景区包括前景之下直到边框边界的所有空间。因此，内容框与内边距都是元素背景的一部分，且边框画在背景上。

CSS允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。

3

1.CSS背景（background）

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

background-color：设置元素的背景颜色。

background-image：把图像设置为背景。

background-position：设置背景图像的起始位置。

background-repeat：设置背景图像是否及如何重复。

4

2.CSS文本

使用文本属性，可以改变文本的颜色，增加或减少文本中的字符间距，对齐文本，装饰文本，对文本中的首行进行缩进等。

Color设置文本颜色

Direction设置文本方向。

line-height设置行高。

letter-spacing设置字符间距。

5

text-align对齐元素中的文本。

text-decoration向文本添加修饰。

text-indent缩进元素中文本的首行。

text-transform控制元素中的字母。

word-spacing设置字间距。

3.CSS字体（font）

CSS字体属性允许您设置字体系列(font-family)和字体加粗(font-weight)，还可以设置字体的大小、字体风格（如斜体）和字体变形（如小型大写字母）。

Font简写属性

font-family设置字体系列。

font-size设置字体的尺寸。

font-style设置字体风格。

font-variant以小型小写字体或者正常字体显示文本。font-weight设置字体的粗细。

6

4.CSS边框(border)

CSS边框属性可以规定元素边框的粗细、样式和颜色。

border：简写属性

border-style：用于设置元素所有边框的样式，或者单独地为各边设置边框样式。

border-width：用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。

border-color：设置元素的所有边框中可见部分的颜色，或为4个边分别设置颜色。

7

5.CSS外边距(margin)

CSS外边距属性定义元素周围的空间。设置外边距会在元素外创建额外的“空白”。

“空白”通常指不能放其它元素的区域，而且在这个区域中可以看到父元素的背景。

h1{margin:10px0px15px5px;}

这些值的顺序是从上外边距(top)开始围着元素顺时针旋转的：margin:toprightbottomleft

8

5.CSS外边距(margin)

margin简写属性

margin-bottom设置元素的下外边距。

margin-left设置元素的左外边距。

margin-right设置元素的右外边距。

margin-top设置元素的上外边距。

9

6.CSS内边距(padding)

CSS内边距属性定义元素边框与元素内容之间的空白。

td{padding:2px2px2px2px;}

Padding：简写属性。

padding-bottom：设置元素的下内边距。

padding-left：设置元素的左内边距。

padding-right：设置元素的右内边距。

padding-top：设置元素的上内边距。

10

7.CSS列表

CSS列表属性可以放置、改变列表项标志，或者将图像作为列表项标志。

list-style：简写属性。

list-style-image：将图象设置为列表项标志。

list-style-position：设置列表中列表项标志的位置。

list-style-type：设置列表项标志的类型。

11

8.CSS表格

CSS表格属性允许你设置表格的布局。

border-collapse：设置是否把表格边框合并为单一的边框。

border-spacing：设置分隔单元格边框的距离。（仅用于“separatedborders”模型）

empty-cells：设置是否显示表格中的空单元格。（仅用于“separatedborders”模型）

caption-side：设置表格标题