CSS属性
编辑器加载中...
Body
{
padding-top:
padding-bottom:
padding-right:
padding-left:
上端、底端、左右两侧的补白值。
间隔值可以设置为长度值或百分比。其中,百分比不能使用负值。
}
背景属性
background-position:left bottom位置取值
百分比/长度/{1,2}/top/center/bottom/left/center/right
说明:该语法中的取值范围包括两种。
数字描述,即百分比/长度/{1,2}
表示使用确切的数字表示图像位置,使用时应首先指定横向位置,接着是纵向位置。例如20% 65%,指定图像会被放在元素的左起20%、上起65%的那点的所在位置。百分比和长度可以混合使用,设定为负值也是允许的。默认情况下,位置的取值是0% 0%。
关键字描述,即top/center/bottom/left/center/right
是横向的关键字,它们表示在横向上取0%、50%、100%的位置,即采用居左、居中、居右;top、center、bottom是纵向的关键字,它们分别表示在纵向上取0%、50%、100%的位置,即位于顶端、居中和底端。
background-image: url(http://www.htmlhelp.com/bg.png)
用来设定一个元素的背景图像。
background-image: url(图像地址)
background-repeat:no-repeat; 背景重复
背景图像平铺属性,用来设定对象的背景图像是否以及如何铺排。
repeat表示背景图像在纵向和横向上平铺;
no-repeat表示背景图像不平铺;
repeat-x表示背景图像只在水平方向上平铺;
repeat-y则表示背景图像只在垂直方向上平铺。
background-attachment:fixed背景附件
设置背景图像是随对象内容滚动还是固定的。
scroll表示背景图像是随对象内容滚动,是默认选项;
fixed表示背景图像固定在页面上静止不动,只有其他的内容随滚动条滚动。
background-color: transparent/ white透明背景颜色。
img
{
margin-top:
margin-bottom:
margin-left:
margin-right:
设置元素下方的边距值;左侧边距和右侧边距则分别用于设置元素左右两侧的边距制。
长度值 | 百分比 | auto
说明:长度值相当于设置顶端的绝对边距值,包括数字和单位;百分比值则是设置相对于上级元素的宽度的百分比,允许使用负值;auto是自动取边距值,即取元素的默认值。
}
颜色关键字 |
中文含义 |
16进制RGB值 |
aqua |
水绿色 |
#00FFFF |
black |
黑色 |
#000000 |
blue |
蓝色 |
#0000FF |
fuchsia |
紫红色 |
#FF00FF |
gray |
灰色 |
#808080 |
green |
绿色 |
#008000 |
lime |
酸橙色 |
#00FF00 |
maroon |
栗色 |
#800000 |
navy |
海军蓝 |
#000080 |
olive |
橄榄色 |
#808000 |
purple |
紫色 |
#800080 |
red |
红色 |
#FF0000 |
silver |
银色 |
#C |
teal |
水鸭色 |
#008080 |
white |
白色 |
#FFFFFF |
yellow |
黄色 |
#FFFF00 |
在CSS中,RGB颜色代码有多种写法:
#rrggbb: 如#FF0000;
#rgb: 如#F00;
rgb(x,x,x):其中,x是一个介于0到255之间的整数,例如rgb(255,0,0);
rgb(y%,y%,y%):其中,y是一个介于0.0到100.0之间的整数,例如,rgb(100%,0%,0%)。
这些颜色代码都是表示红色,即关键字为red的颜色。
超链接属性
a
{
text-decoration:none;去除下划线
target="_blank" 出现子页面
target="_parent" 关闭当前页面
target="_search"
target="_self"
target="_top"
}
字体属性
font-family: "华文彩云","黑体" 设置文体
如果在font-family属性中定义了不只一个字体,那么浏览器会由前向后选用字体。
当浏览器不支持第一个字体的时候,会采用第二个字体;
如果前两个字体都不支持,则采用第三个字体,以此类推。
如果浏览器不支持定义的所有字体,则会采用系统的默认字体。
同时需要注意的是,必须用双引号引住任何包含空格的字体名。
font-style:italic 文体风格
normal 是以正常的方式显示;
italic 则是以斜体显示文字;
oblique 属于其中间状态,以偏斜体显示。
font-size:
font-size:12px
绝对大小:xx-small | x-small | small | medium | large | x-large | xx-large
相对大小:larger | smaller
长度值或百分比12px、
绝对大小根据对象字体进行调节,包括xx-small | x-small | small | medium | large | x-large | xx-large。
相对大小则是相对于父对像中字体尺寸进行相对调节,它使用成比例的em单位计算,可设置为larger或smaller。
长度则是由浮点数字和单位标识符组成的长度值,使用的单位可以为pt-点(1点=1/72英寸)、px-像素、in-英寸等,其中浮点数字不能为负值。百分比取值是基于父对象中字体 的尺寸。
font-weight:200
font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900加粗
<绝对大小> xx-small | x-small | small | medium | large | x-large | xx-large
<相对大小> larger | smaller
<长度>百分比200%
其中normal表示正常粗细;
bold表示粗体,
bolder则表示特粗体,就是在粗体的基础上再加粗;
lighter表示特细体,就是比正常字体还要细;
number不是真正的取值,它表示font-weight还可以取数值,其范围是100-900,
正常字体相当于取数值400的粗细;粗体则相当于700的粗细。
text-indent:
white-space: nowrap 处理空格
normal 是默认属性,即将连续的多个空格合并;
pre 会导致源中的空格和换行符被保留,
nowrap 则表示强制在同一行内显示所有文本,直到文本结束或者遇到<br>对象。
text-decoration: underline 文本修饰
none 表示不对文本进行修饰,这是默认属性值。
underline 表示对文字添加下划线;
overline 表示对文本添加上划线;
line-through 表示对文本添加删除线;
blink 则表示文字闪烁效果,这一属性值只有在netscape浏览器中才能正常显示。
direction: rtl; 文本反排
ltr 表示从左到右的阅读顺序;
rtl 表示从右到左的阅读顺序;
inherit 则表示文本流的值不可继承。
如果想要再内联文本中应用direction属性,必须设定该属性的值为embed或bidi-override。
unicode-bidi: bidi-override; 文本反排
normal 是系统的默认值,表示对象不打开附加的嵌入层;
bidi-override 表示严格按照direction属性的值重排序,忽略隐式双向运算规则;
embed 表示对象打开附加的嵌入层,将direction属性的值指定给嵌入层,在对象内部进行隐式重排序。
text-indent:50% 文本缩进:一个长度或一个百分比。
文本缩进属性用于定义HTML中的块级元素(如p、h1等)的第一行可以接受的缩进的数量,常用于设置段落的首行缩进。
text-transform: uppercase 文本转换
none 表示使用原始值;
capitalize 使每个字的第一个字母大写;
uppercase 使每个字的所有字母大写;
lowercase 则是使每个字的所有字母小写。
text-align : center;
text-align : right ;
text-align : left;
layout-flow :horizontal;
layout-flow : vertical-ideographic;
vertical-align: super 纵向排列
baseline 是使元素和上级元素的基线对齐;
sub 是作为下标;
super 为上标;
text-top 使元素和上级元素的字体向上对齐;
middle 是纵向对齐元素基线加上上级元素的x高度的一半的中点,其中x高度是字母" x "的高度;text-bottom 使元素和上级元素的字体向下对齐。
影响相对于元素行的位置的关键字有top和bottom。
Top 使元素和行中最高的元素向上对齐;
Bottom 是使元素和行中最低的元素向下对齐。
百分比是一个相对于元素行高属性的百分比,它会在上级基线上增高元素基线的指定数量。
这里允许使用负值,负值表示减少相应的数量。
letter-spacing: normal字符间隔
normal | <长度>字符间隔和单词间隔类似,不同的是字符间隔用于设置字符的间隔数。
word-spacing: normal 单词间隔
normal是指正常的间隔,是默认选项;长度是设定单词间隔的数值及单位,可以使用负值。
检索或设置对象的行高。即字体最底端与字体内部顶端之间的距离。
line-height:normal ; 默认行高
line-height:50px ;
列表ul/ol属性
ol
{
list-style-type: square 列表符号
符号的取值 |
含义 |
none |
不显示任何项目符号或编号 |
disc |
以实心圆形●作为项目符号 |
circle |
以空心圆形〇作为项目符号 |
square |
以实心方块█作为项目符号 |
decimal |
以普通阿拉伯数字1、2、3...作为项目编号 |
lower-roman |
以小写罗马数字ⅰ、ⅱ、ⅲ…作为项目编号 |
upper-roman |
以大写罗马数字Ⅰ、Ⅱ、Ⅲ…作为项目编号 |
lower-alpha |
以小写英文字母a、b、c…作为项目编号 |
upper-alpha |
以大写英文字母A、B、C…作为项目编号 |
list-style-image:url(Pic/ok.gif);图像符号
none 表示不指定图像;
url 则使用绝对或相对地址指定作为符号的图像。
list-style-position: inside列表缩进
outside 表示列表项目标记放置在文本以外,且环绕文本不根据标记对齐,
inside 是列表的默认属性;inside表示列表项目标记放置在文本以内,且环绕文本根据标记对齐。
}
边框属性
/*定义了段落文字的边框宽度*/
border-top-width: 8px;
border-right-width: 1px;
border-bottom-width: 3px;
border-left-width: 4px
medium是默认宽度;
thin表示小于默认宽度,称为细边框;
thick大于默认宽度,称为粗边框;
长度则是由数字和单位组成的长度值,不可为负值。
/*定义段落文字的边框属性*/
border-top:3px dotted #
border-right:5px solid red;
border-bottom:1px ridge #FF00FF;
border-left:4px solid red
border: <边框宽度> || <边框样式> || <颜色>
border-top: <上边框宽度> || <上边框样式> || <颜色>
border-right: <右边框宽度> || <右边框样式> || <颜色>
border-bottom: <下边框宽度> || <下边框样式> || <颜色>
border-left: <左边框宽度> || <左边框样式> || <颜色>
在这些复合属性中,边框属性border只能同时设置4种边框,也只能给出一组边框的宽度和式样。
而其他边框属性(如上边框属性border-top)只能给出某一个边框的属性,包括宽度、样式和颜色。
边框样式
font-size:
text-indent:
border-top-style: dotted;
border-right-style: dashed;
border-bottom-style: double;
border-left-style: solid
边框样式属性用以定义边框的风格呈现式样,这个属性必须用于指定可见的边框。
它可以对元素分别设置。
上边框样式(border-top-style)、
下边框样式(border-top-style)、
左边框样式(border-top-style)、
右边框样式(border-top-style)4个属性,
也可以使用复合属性边框样式(border-style)对边框样式的设置进行略写。
none |
不显示边框,为默认属性值 |
dotted |
点线 |
dashed |
虚线,也称为短线 |
solid |
实线 |
double |
双实线 |
groove |
边框带有立体感的沟槽 |
ridge |
边框成脊形 |
inset |
使整个方框凹陷,即在边框内嵌入一个立体边框 |
outset |
使整个方框凸起,即在边框外嵌入一个立体边框 |
/* 定义了段落文字的边框宽度*/
border-top-color: #D00000;
border-right-color: #
border-bottom-color: #FF00FF;
border-left-color: maroon
边框颜色属性用于定义边框的颜色。
可以对4个边框分别设置颜色,也可以使用复合属性border-color进行统一设置。
对于使用边框颜色border-color属性,
如果指定1种颜色,则表示4个边框是一种颜色,
指定2种颜色,则定义顺序为上下、左右;
指定3种颜色,顺序为上、左右、下;
指定4种颜色,顺序则为上、右、下、左。