CSS

最新推荐文章于 2025-03-18 00:30:00 发布

weixin_30892889

最新推荐文章于 2025-03-18 00:30:00 发布

阅读量42

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/sctnl/p/6018014.html

本文详细介绍了CSS的各种属性，包括文字属性、文本属性、背景属性等，并提供了各种属性的使用示例，如字体设置、文本对齐方式、背景图像的设置等。

引入

属性名称	属性值	说明
font-style	normal italic/obligue	正常显示斜体
font-variant	normal small-caps	正常显示将英文大小写字母写调为同宽
font-weight	normal bold	正常显示粗体
font-size	像素/百分比	字体大小
font-family	字体名称	设置字体名称

font属性简化的使用方法：
font:是否斜体是否同宽是否粗体大小字体名称
例如:font:italic bold 200 隶书

文本属性

属性名称	属性值	说明
color	十六/英文/三原色	颜色
letter-spacing	normal 长度	正常显示文本间隔
word-spacing	normal 数字	正常显示单词间距
white-space	normal pre nowrap	文本自动处理换行换行和空白受保护强制在同一行显示
text-align	left right center justify	文字靠左文字靠右文字靠中两端对齐
text-decoration	none underline overline line-through	正常显示加上下划线加顶线加删除线
text-indent	长度/百分比	首行缩进
line-height	像素/数字/百分比	行高
text-space	pre-wrap	保留空白符、换行符、自动换行
text-transform	pre-line none capitalize uppercase lowercase	保留换行符、自动换行、合并空白符正常显示可以包含大，小字符字符串第一个字符大写设置大写字符设置小写字符
vertical-align	sub super top middle bottom	设置文字为下标设置文字为上标元件往上端靠齐设置文字是在中线位置元件往下端靠齐

单行显示，省略结尾：overflow:hidden;white-space:nowrap;text-overflow:ellipsis;

背景

属性名称	属性值	说明
background-attachment	scroll fixed	设置背景图像会随视窗滚动条的移动而移动设置背景图像不会随视窗滚动条的移动而移动
background-color	十六/英文/三原色 transparent	颜色透明
background-image	URL none	背景图片//background-image:url("bg.jpg") 不设置背景图片
background-position	top left/像素/百分比	设置背景图案出现方位
background-repeat	repeat repeat-x repeat-y no-repeat	将背景图案填满整个背景将背景图案在水平方向添满将背景图案在垂直方向添满图案只出现一次

背景图案简化方案：background:颜色背景图片 repeat attachment position
列表的使用

属性名称	属性值	说明
list-style-type	none disc circle square decimal lower-roman upper-roman lower-alpha upper-alpha	无符号实体的小圆点空心的小圆点实心的小方块 1,2,3... i,ii,iii... I,II,III... a,b,c,d,e... A,B,C,D,E...
list-style-position	inside outside	清单项目较往右移清单项目正常显示
list-style-image	URL none	list-style-image:url(img.gif) 不会显示任何图象

清单的简化设置：list-style:circle inside url

边框

属性名称	属性值	说明
border-color	十六/英文/三原色	颜色//border-color:red green blue(上为红色、左右为绿色、下为蓝色)
border-style	none dotted dashed solid double	不显示边线点线虚线实线双线
border-width	长度	border-width:0.2cm 0.3cm 0.4cm 0.5cm;border-width:1 2 3 4;

简化方案：border:形态长度颜色例如 border:1px solid black;
边界
padding

属性名称	属性值	说明
padding-bottom	长度/百分比	元件下端边线的空隙
padding-left	长度/百分比	元件左端边线的空隙
padding-right	长度/百分比	元件右端边线的空隙
padding-top	长度/百分比	元件上端边线的空隙

margin

属性名称

属性值

说明

margin-bottom

auto

长度/百分比

自动调整空隙

设置下端空隙

margin-left

auto

长度/百分比

自动调整空隙

设置左端空隙

margin-right

auto

长度/百分比

自动调整空隙

设置右端空隙

margin-top

auto

长度/百分比

自动调整空隙

设置上端空隙

区块

属性名称	属性值	说明
width	像素/百分比/auto	区块的宽度
height	像素/百分比/auto	区块的高度
min-height	像素/百分比/auto	区块最小高度
max-height	像素/百分比/auto	区块最大高度
min-width	像素/百分比/auto	区块最小宽度
max-width	像素/百分比/auto	区块最大宽度

浮动

属性名称

属性值

说明

float

none

left

right

正常显示

左浮动

右浮动

clear

none

left

right

both

允许两边浮动

不允许左边浮动

不允许右边浮动

不允许两边浮动

定位

属性名称

属性值

说明

position

relative

absolute

static

设置区块基准点为左上角

设置网页的为基准点左上角

无设置

z-index

auto

数字

自动调整高度

数字越大越往上层

溢出

属性名称

属性值

说明

overflow

visible

auto

hidden

scroll/overflow-x/overflow-y

不剪切内容也不添加滚动条

在必需时对象内容才会被裁切或显示滚动条

不显示超过对象尺寸的内容

总是显示滚动条

滚动条

属性名称	属性值	说明
scrollbar-3dlight-color	颜色/十六进制	滚动条亮边框
scrollbar-highlight-color	颜色/十六进制	滚动条 3D 界面亮边
scrollbar-face-color	颜色/十六进制	滚动条 3D 表面
scrollbar-arrow-color	颜色/十六进制	滚动条方向箭头
scrollbar-shadow-color	颜色/十六进制	滚动条 3D 暗边
scrollbar-darkshadow-color	颜色/十六进制	滚动条暗边框
scrollbar-base-color	颜色/十六进制	滚动条基准颜色
scrollbar-track-color	颜色/十六进制	滚动条的拖动区域