CSS-各种美化网页的属性

1、使用字体、文本、背景属性美化网页

(1) 字体属性(font)

序号  属性名称  功能描述

1  font:font-family | font-size | font-style | font-weight | font-variant  在一个声明中设置所有字符属性

2  font-family :字体1,字体2,字体3,……;  规定文字的字体系列

3  font-size:绝对尺寸 | 关键字 | 相对尺寸 | 百分比  规定字体尺寸

4  font-size-adjust 为元素规定aspect值

5  font-stretch 收缩或拉伸当前的字体系列

6  font-style:normal | italic | obligue  规定文本的字体样式

7  font-variant:normal | small-caps  规定文本的字体变体

8  font-weight:normal | bold | bolder | lighter | number  规定字体的粗细

(2)文本属性(text)

序号 属性名称 功能描述

1  color: <color> | inherit  设置文本颜色

2  direction 规定文本方向/书写方向

3  letter-spacing:normal | 长度 | inherit  设置字符间距

4  line-height 设置行高

5  text-align 规定文本的水平对齐方式

6  text-decoration 规定添加到文本的装饰效果

7  text-indent:长度 | 百分比 | inherit  规定文本块行首的缩进

8  text-shadow 规定添加到文本的阴影效果

9  text-transform :uppercase | lowercase | capitalize 
| none | inherit  控制文本的大小写

10   unicode-bidi 设置文本方向

11  white-space 规定如何处理元素中的空白

12  word-spacing 设置单元间距

(3)背景属性(background)

序号 属性名称 功能描述

1  background 在一个声明中设置所有背景属性

2  background-attachment :scroll | fixed  设置背景图像是否固定或者随着页面的其余部分滚动

3  background-color : <color> | transparent  设置元素的背景颜色

4  background-image 设置元素的背景图像

5  background-position:百分比 | 长度 | 关键字  设置背景图像的开始位置

6  background-repeat:repeat | repeat-x | repeat-y | no-repeat  设置是否及如何重复背景图像

2、使用边框、边距属性美化网页

  • 盒子模型

       IE盒子模型(height和width指的是盒子的高和宽)

标准W3C盒子模型(height和width指的是content的高和宽)

(1)边框属性(border)

边框属性 边框样式 边框宽度 边框颜色

border: 边框宽度 | 样式 | 颜色              border-style:样式                border-width:关键字|长度                  border-color

border-left: 边框宽度 | 样式 | 颜色        border-left-style:样式          border-left-width:关键字|长度            borde-left-color

border-top: 边框宽度 | 样式 | 颜色        border-top-style:样式          border-top-width:关键字|长度            border-top-color

border-right: 边框宽度 | 样式 | 颜色      border-right-style:样式         border-right-width:关键字|长度          border-right-color

border-bottom: 边框宽度 | 样式 | 颜色  border-bottom-style:样式     border-bottom-width:关键字|长度      border-bottom-color

边框属性:

 样式取值:

宽度取值:

 

颜色取值: 

(2)内边距属性(padding) | 外边距属性(margin)

padding: 长度|百分比               margin:长度 | 百分比 | auto

padding-left:长度|百分比          margin-left:长度 | 百分比 | auto

padding-top:长度|百分比       margin-top:长度 | 百分比 | auto

padding-right:长度|百分比     margin-right:长度 | 百分比 | auto

padding-bottom:长度|百分比 margin-bottom:长度 | 百分比 | auto

3、表格、列表、定位属性美化网页 

(1)表格属性

序号  属性名称  功能描述 

1 border-collapse:collapse | separate | inherit  规定是否合并表格边框 

2 border-spacing:长度 | inherit  规定相邻单元格边框之间的距离 

3 caption-side:top | bottom | inherit  规定表格标题的位置 

4  empty-cells:hide | show | inherit  规定是否显示表格中的空单元格上的边框和背景 

5  table-layout:automatic | fixed | inherit  设置用于表格的布局算法 

(2)列表属性

序号   属性名称  功能描述 

1  list-style 在一个声明中设置所有的列表属性

2  list-style-image :URL | none | inherit  将图象设置为列表项标记 

3  list-style-position :inside | outside | inherit   设置列表项标记的放置位置 

4  list-style-type  设置列表项标记的类型 

5  marker-offset   设置或检索标记容器和主容器之间水平补白 

  • list-style-type属性值:

(3)定位属性

序号  属性名称    功能描述 

1 bottom:auto | 长度值 | 百分比  设置定位元素下外边距边界与其包含
块下边界之间的偏移 

2 top:auto | 长度值 | 百分比  设置定位元素的上外边距边界与其包
含块上边界之间的偏移 

3 right:auto | 长度值 | 百分比  设置定位元素右外边距边界与其包含
块右边界之间的偏移 

4  position :absolute | fixed | relative | static | inherit  规定元素的定位类型 

5  left :auto | 长度值 | 百分比  设置定位元素左外边距边界与其包含
块左边界之间的偏移 

6  overflow:auto | hidden | scroll | visible | inherit  规定当内容溢出元素框时发生的事情 

7  clip 剪裁绝对定位元素 

8  vertical-align 设置元素的垂直对齐方式

9  z-index :auto | 数字 设置元素的堆叠顺序 

(4)分类属性

序号   属性名称  功能描述 

1  clear r:left | right | both | none  规定元素的哪一侧不允许其他浮动元素 

2  cursor 规定要显示的光标的类型(形状)

3 display 规定元素应该生成的框的类型 

4 float :left | right | none  规定框是否应该浮动

5  visibility :visible | hidden | collapse | inherit   规定元素是否可见 

  • display取值:

  •  cursor取值:

 

猜你喜欢

转载自blog.csdn.net/qq_37503890/article/details/88198158
今日推荐