CSS属性参考手册.docx
- 文档编号:7670774
- 上传时间:2023-01-25
- 格式:DOCX
- 页数:82
- 大小:47.60KB
CSS属性参考手册.docx
《CSS属性参考手册.docx》由会员分享,可在线阅读,更多相关《CSS属性参考手册.docx(82页珍藏版)》请在冰豆网上搜索。
CSS属性参考手册
CSS参考手册
1.CSS背景属性(Background)
属性
描述
CSS
background
在一个声明中设置所有的背景属性。
1
background-attachment
设置背景图像是否固定或者随着页面的其余部分滚动。
1
background-color
设置元素的背景颜色。
1
background-image
设置元素的背景图像。
1
background-position
设置背景图像的开始位置。
1
background-repeat
设置是否及如何重复背景图像。
1
2.CSS文本属性(Text)
属性
描述
CSS
color
设置文本的颜色。
1
direction
规定文本的方向/书写方向。
2
letter-spacing
设置字符间距。
1
line-height
设置行高。
1
text-align
规定文本的水平对齐方式。
1
text-decoration
规定添加到文本的装饰效果。
1
text-indent
规定文本块首行的缩进。
1
text-shadow
规定添加到文本的阴影效果。
2
text-transform
控制文本的大小写。
1
unicode-bidi
设置文本方向。
2
white-space
规定如何处理元素中的空白。
1
world-spacing
设置单词间距。
1
3.CSS字体属性(Font)
属性
描述
CSS
font
在一个声明中设置所有字体属性。
1
font-family
规定文本的字体系列。
1
font-size
规定文本的字体尺寸。
1
font-size-adjust
为元素规定aspect值。
(CSS2.1已删除该属性)
2
font-stretch
收缩或拉伸当前的字体系列。
(CSS2.1已删除该属性)
2
font-style
规定文本的字体样式。
1
font-variant
规定文本的字体样式。
1
font-weight
规定字体的粗细。
1
4.CSS边框和轮廓属性(Border和Outline)
属性
描述
CSS
border
在一个声明中设置所有的边框属性。
1
border-style
设置四条边框的样式。
1
border-width
设置四条边框的宽度。
1
border-color
设置四条边框的颜色。
1
border-bottom
在一个声明中设置所有的下边框属性。
1
border-bottom-color
设置元素的下边框的颜色。
2
border-bottom-style
设置元素的下边框的样式。
2
border-bottom-width
设置元素的下边框的宽度。
1
border-left
在一个声明中设置所有的左边框属性。
1
border-left-color
设置元素的左边框的颜色。
2
border-left-style
设置元素的左边框的样式。
2
border-left-width
设置元素的左边框的宽度。
1
border-right
在一个声明中设置所有的右边框属性。
1
border-right-color
设置元素的右边框的颜色。
2
border-right-style
设置元素的右边框的样式。
2
border-right-width
设置元素的右边框的宽度。
1
border-top
在一个声明中设置所有的上边框属性。
1
border-top-color
设置元素的上边框的颜色。
2
border-top-style
设置元素的上边框的样式。
2
border-top-width
设置元素的上边框的宽度。
1
outline
在一个声明中设置所有的轮廓属性。
2
outline-color
设置轮廓的颜色。
2
outline-style
设置轮廓的样式。
2
outline-width
设置轮廓的宽度。
2
5.CSS外边距属性(Margin)
属性
描述
CSS
margin
简写属性。
在一个声明中设置所有外边距属性。
1
margin-bottom
设置元素的下外边距。
1
margin-left
设置元素的左外边距。
1
margin-right
设置元素的右外边距。
1
margin-top
设置元素的上外边距。
1
6.CSS内边距属性(Padding)
属性
描述
CSS
padding
简写属性。
作用是在一个声明中设置元素的所内边距属性。
1
padding-bottom
设置元素的下内边距
1
padding-left
设置元素的左内边距
1
padding-right
设置元素的右内边距
1
padding-top
设置元素的上内边距
1
7.CSS列表属性(List)
属性
描述
CSS
list-style
简写属性。
在一个声明中设置所有的列表属性。
1
list-style-image
将图象设置为列表项标记。
1
list-style-position
设置列表项标记的放置位置。
1
list-style-type
设置列表项标记的类型。
1
marker-offset
2
8.内容生成(GeneratedContent)
属性
描述
CSS
content
与:
before以及:
after伪元素配合使用,来插入生成内容。
2
counter-increment
递增或递减一个或多个计数器。
2
counter-reset
创建或重置一个或多个计数器。
2
quotes
设置嵌套引用的引号类型。
2
9.CSS尺寸属性(Dimension)
属性
描述
CSS
height
设置元素的高度。
1
line-height
设置行高。
1
max-height
设置元素的最大高度。
2
max-width
设置元素的最大宽度。
2
min-height
设置元素的最小高度。
2
min-width
设置元素的最小宽度。
2
width
设置元素的宽度。
1
10.CSS定位属性(Positioning)
属性
描述
CSS
bottom
设置定位元素下外边距边界与其包含块下边界之间的偏移。
2
clear
规定元素的哪一侧不允许其他浮动元素。
1
clip
剪裁绝对定位元素。
2
cursor
规定要显示的光标的类型(形状)。
2
display
规定元素应该生成的框的类型。
1
float
规定框是否应该浮动。
1
left
设置定位元素左外边距边界与其包含块左边界之间的偏移。
2
overflow
规定当内容溢出元素框时发生的事情。
2
position
规定元素的定位类型。
2
right
设置定位元素右外边距边界与其包含块右边界之间的偏移。
2
top
设置定位元素的上外边距边界与其包含块上边界之间的偏移。
2
vertical-align
设置元素的垂直对齐方式。
1
visibility
规定元素是否可见。
2
z-index
设置元素的堆叠顺序。
2
11.CSS打印属性(Print)
属性
描述
CSS
orphans
设置当元素内部发生分页时必须在页面底部保留的最少行数。
2
page-break-after
设置元素后的分页行为。
2
page-break-before
设置元素前的分页行为。
2
page-break-inside
设置元素内部的分页行为。
2
widows
设置当元素内部发生分页时必须在页面顶部保留的最少行数。
2
12.CSS表格属性(Table)
属性
描述
CSS
border-collapse
规定是否合并表格边框。
2
border-spacing
规定相邻单元格边框之间的距离。
2
caption-side
规定表格标题的位置。
2
empty-cells
规定是否显示表格中的空单元格上的边框和背景。
2
table-layout
设置用于表格的布局算法。
2
13.CSS伪类(Pseudo-classes)
属性
描述
CSS
:
active
向被激活的元素添加样式。
1
:
focus
向拥有键盘输入焦点的元素添加样式。
2
:
hover
当鼠标悬浮在元素上方时,向元素添加样式。
1
:
link
向未被访问的链接添加样式。
1
:
visited
向已被访问的链接添加样式。
1
:
first-child
向元素的第一个子元素添加样式。
2
:
lang
向带有指定lang属性的元素添加样式。
2
14.伪元素
属性
描述
CSS
:
first-letter
向文本的第一个字母添加特殊样式。
1
:
first-line
向文本的首行添加特殊样式。
1
:
before
在元素之前添加内容。
2
:
after
在元素之后添加内容。
2
1.CSS背景属性
(1)background属性
background简写属性在一个声明中设置所有的背景属性。
可以按顺序设置如下属性:
background-color,background-image,background-repeat,background-attachment,background-position。
如果不设置其中的某个值,也不会出问题。
通常建议使用这个属性,而不是分别使用单个属性,因为这个属性在较老的浏览器中能够得到更好的支持,而且需要键入的字母也更少。
默认值:
notspecified
继承性:
no
版本:
CSS1
JavaScript语法:
object.style.background="whiteurl(paper.gif)repeat-y"
可能的值:
值
描述
background-color
规定要使用的背景颜色。
参阅:
background-color中可能的值。
background-image
规定要使用的背景图像。
参阅:
background-image 中可能的值。
background-repeat
规定如何重复背景图像。
参阅:
background-repeat中可能的值。
background-attachment
规定背景图像是否固定或者随着页面的其余部分滚动。
参阅:
background-attachment中可能的值。
background-position
规定背景图像的位置。
参阅:
background-position 中可能的值。
inherit
规定应该从父元素继承background属性的设置。
所有浏览器都支持background属性。
任何的版本的IE(包括IE8)都不支持属性值"inherit"。
(2)background-attachment属性
background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动。
默认值:
scroll
继承性:
no
版本:
CSS1
JavaScript语法:
object.style.backgroundAttachment="fixed"
可能的值:
值
描述
scroll
默认值。
背景图像会随着页面其余部分的滚动而移动。
fixed
当页面的其余部分滚动时,背景图像不会移动。
inherit
规定应该从父元素继承background-attachment属性的设置。
所有浏览器都支持background-attachment属性。
任何版本的InternetExplorer(包括IE8)都不支持属性值"inherit"。
(3)background-color属性
background-color属性设置元素的背景颜色。
background-color属性为元素设置一种纯色。
这种颜色会填充元素的内容、内边距和边框区域,扩展到元素边框的外边界(但不包括外边距)。
如果边框有透明部分(如虚线边框),会透过这些透明部分显示出背景色。
默认值:
transparent
继承性:
no
版本:
CSS1
JavaScript语法:
object.style.backgroundColor="#00FF00"
可能的值:
值
描述
color_name
规定颜色值为颜色名称的背景颜色(比如red)。
hex_number
规定颜色值为十六进制值的背景颜色(比如#ff0000)。
rgb_number
规定颜色值为rgb代码的背景颜色(比如rgb(255,0,0))。
transparent
默认。
背景颜色为透明。
inherit
规定应该从父元素继承background-color属性的设置。
所有浏览器都支持background-color属性。
任何版本的InternetExplorer(包括IE8)都不支持属性值"inherit"。
(4)background-image属性
background-image属性为元素设置背景图像。
元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距。
默认地,背景图像位于元素的左上角,并在水平和垂直方向上重复。
background-image属性会在元素的背景中设置一个图像。
根据 background-repeat 属性的值,图像可以无限平铺、沿着某个轴(x轴或y轴)平铺,或者根本不平铺。
初始背景图像(原图像)根据 background-position属性的值放置。
默认值:
none
继承性:
no
版本:
CSS1
JavaScript语法:
object.style.backgroundImage="url(stars.gif)"
可能的值:
值
描述
url('URL')
指向图像的路径。
none
默认值。
不显示背景图像。
inherit
规定应该从父元素继承background-image属性的设置。
所有浏览器都支持background-image属性。
任何版本的InternetExplorer(包括IE8)都不支持属性值"inherit"。
(5)background-position属性
background-position属性设置背景图像的起始位置。
这个属性设置背景原图像( background-image定义)的位置,背景图像如果要重复,从这一点开始。
默认值:
0%0%
继承性:
no
版本:
CSS1
JavaScript语法:
object.style.backgroundPosition="center"
需要把background-attachment属性设置为"fixed",才能保证该属性在Firefox和Opera中正常工作。
可能的值:
值
描述
toplefttopcentertopright
centerleftcentercentercenterright
bottomleftbottomcenterbottomright
如果您仅规定了一个关键词,那么第二个值将是"center"。
默认值:
0%0%。
x%y%
第一个值是水平位置,第二个值是垂直位置。
左上角是0%0%。
右下角是100%100%。
如果仅规定了一个值,另一个值将是50%。
xposypos
第一个值是水平位置,第二个值是垂直位置。
左上角是00。
单位是像素(0px0px)或任何其他的CSS单位。
如果仅规定了一个值,另一个值将是50%。
您可以混合使用%和position值。
所有浏览器都支持background-position属性。
任何版本的InternetExplorer(包括IE8)都不支持属性值"inherit"。
(6)background-repeat属性
background-repeat属性设置是否及如何重复背景图像。
默认地,背景图像在水平和垂直方向上重复。
background-repeat属性定义了图像的平铺模式。
从原图像开始重复,原图像由 background-image定义,根据 background-position 放置。
默认值:
repeat
继承性:
no
版本:
CSS1
JavaScript语法:
object.style.backgroundPosition="center"
可能的值:
值
描述
repeat
默认。
背景图像将在垂直方向和水平方向重复。
repeat-x
背景图像将在水平方向重复。
repeat-y
背景图像将在垂直方向重复。
no-repeat
背景图像将仅显示一次。
inherit
规定应该从父元素继承background-repeat属性的设置。
所有浏览器都支持background-repeat属性。
任何版本的InternetExplorer(包括IE8)都不支持属性值"inherit"。
2.CSS文本属性
(1)color属性
color属性规定文本的颜色。
这个属性设置了一个元素的前景色(在HTML表现中,就是元素文本的颜色);光栅图像不受color影响。
这个颜色还会应用到元素的所有边框,除非被border-color或另外某个边框颜色属性覆盖。
默认值:
notspecified
继承性:
yes
版本:
CSS1
JavaScript语法:
object.style.color="#FF0000"
可能的值:
值
描述
color_name
规定颜色值为颜色名称的颜色(比如red)。
hex_number
规定颜色值为十六进制值的颜色(比如#ff0000)。
rgb_number
规定颜色值为rgb代码的颜色(比如rgb(255,0,0))。
inherit
规定应该从父元素继承颜色。
所有浏览器都支持color属性。
任何的版本的InternetExplorer(包括IE8)都不支持属性值"inherit"。
(2)direction属性
direction属性规定文本的方向/书写方向。
该属性指定了块的基本书写方向,以及针对Unicode双向算法的嵌入和覆盖方向。
不支持双向文本的用户代理可以忽略这个属性。
默认值:
ltr
继承性:
yes
版本:
CSS2
JavaScript语法:
object.style.direction="rtl"
可能的值:
值
描述
ltr
默认。
文本方向从左到右。
rtl
文本方向从右到左。
inherit
规定应该从父元素继承direction属性的值。
所有浏览器都支持direction属性。
任何的版本的InternetExplorer(包括IE8)都不支持属性值"inherit"。
(3)letter-spacing属性
letter-spacing属性增加或减少字符间的空白(字符间距)。
该属性定义了在文本字符框之间插入多少空间。
由于字符字形通常比其字符框要窄,指定长度值时,会调整字母之间通常的间隔。
因此,normal就相当于值为0。
允许使用负值,这会让字母之间挤得更紧。
默认值:
normal
继承性:
yes
版本:
CSS1
JavaScript语法:
object.style.letterSpacing="3px"
可能的值:
值
描述
normal
默认。
规定字符间没有额外的空间。
length
定义字符间的固定空间(允许使用负值)。
inherit
规定应该从父元素继承letter-spacing属性的值。
所有浏览器都支持letter-spacing属性。
任何的版本的InternetExplorer(包括IE8)都不支持属性值"inherit"。
(4)line-height属性
line-height属性设置行间的距离(行高)。
不允许使用负值。
该属性会影响行框的布局。
在应用到一个块级元素时,它定义了该元素中基线之间的最小距离而不是最大距离。
line-height与font-size的计算值之差(在CSS中成为“行间距”)分为两半,分别加到一个文本行内容的顶部和底部。
可以包含这些内容的最小框就是行框。
原始数字值指定了一个缩放因子,后代元素会继承这个缩放因子而不是计算值。
默认值:
normal
继承性:
yes
版本:
CSS1
JavaScript语法:
object.style.lineHeight="2"
可能的值:
值
描述
normal
默认。
设置合理的行间距。
number
设置数字,此数字会与当前的字体尺寸相乘来设置行间距。
length
设置固定的行间距。
%
基于当前字体尺寸的百分比行间距。
inherit
规定应该从父元素继承line-height属性的值。
所有浏览器都支持line-height属性。
任何的版本的InternetExplorer(包括IE8)都不支持属性值"inherit"。
(5)text-align属性
text-align属性规定元素中的文本的水平对齐方式。
该属性通过指定行框与哪个点对齐,从而设置块级元素内文本的水平对齐方式。
通过允许用户代理调整行内容中字母和字之间的间隔,可以支持值justify;不同用户代理可能会得到不同的结果。
默认值:
如果direction属性是ltr,则默认值是left;如果direction是rtl,则为right。
继承性:
yes
版本:
CSS1
JavaScript语法:
object.style.textAlign="right"
可能的值:
值
描述
left
把文本排列到左边。
默认值:
由浏览器决定。
right
把文本排列到右边。
center
把文本排列到中间。
justify
实现两端对齐文本效果。
inherit
规定应该从父元素继承text-align属性的值。
所有浏览器都支持text-align属性。
任何的版本的Internet
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- CSS 属性 参考手册