CSS属性值.docx

CSS属性值.docx

《CSS属性值.docx》由会员分享，可在线阅读，更多相关《CSS属性值.docx（16页珍藏版）》请在冰点文库上搜索。

CSS属性值

背景色:

background-color属性

background-color不能继承，其默认值是transparent。

transparent有“透明”之意。

也就是说，如果一个元素没有指定背景色，那么背景就是透明的，这样其祖先元素的背景才能可见。

p{background-color:

gray;}

背景图像：

background-image属性

background-image也不能继承。

事实上，所有背景属性都不能继承，background-image属性的默认值是none，表示背景上没有放置任何图像。

需要设置一个背景图像，必须为这个属性设置一个URL值

p.flower{background-image:

url（/i/eg_bg_03.gif）;}

背景重复：

 background-repeat属性

属性值repeat导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。

repeat-x和repeat-y分别导致图像只在水平或垂直方向上重复，no-repeat则不允许图像在任何方向上平铺。

body{background-image:

url（/i/eg_bg_03.gif）;

background-repeat:

repeat-y;}

背景定位：

background-position属性

background-position属性值可以使用一些关键字：

top、bottom、left、right和center。

还可以使用长度值，如100px或5cm，最后也可以使用百分数值。

不同类型的值对于背景图像的放置稍有差异。

位置关键字可以按任何顺序出现，只要保证不超过两个关键字-一个对应水平方向，另一个对应垂直方向。

body{background-image:

url（'/i/eg_bg_03.gif'）;

background-repeat:

no-repeat;background-position:

center;}

设置值为50px100px，图像的左上角将在元素内边距区左上角向右50像素、向下100像素的位置上：

背景关联：

background-attachment属性

文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。

当文档滚动到超过图像的位置时，图像就会消失，默认值是scroll，也就是说，在默认的情况下，背景会随文档滚动。

background

简写属性，作用是将背景属性设置在一个声明中。

background-attachment

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

background-color

设置元素的背景颜色。

background-image

把图像设置为背景。

background-position

设置背景图像的起始位置。

background-repeat

设置背景图像是否及如何重复。

缩进文本：

text-indent属性

该属性可以方便地实现文本缩进，用途是将段落的首行缩进，下面的规则会使所有段落的首行缩进5em：

p{text-indent:

5em;}p{text-indent:

-5em;}一个行内元素的第一行“缩进”

注意：

一般来说，可以为所有块级元素应用text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用text-indent属性

text-indent可以使用所有长度单位，包括百分比值。

百分数要相对于缩进元素父元素的宽度。

换句话说，如果将缩进值设置为20%，所影响元素的第一行会缩进其父元素宽度的20%。

在下例中，缩进值是父元素的20%，即100个像素：

div{width:

500px;}p{text-indent:

20%;}

text-indent属性可以继承，

水平对齐：

text-align属性

影响一个元素中的文本行互相之间的对齐方式,值left、right和center会导致元素中的文本分别左对齐、右对齐和居中,最后一个水平对齐属性是justify,两端对齐文本.

字间隔:

word-spacing属性

可以改变字（单词）之间的标准间隔。

其默认值normal与设置值为0是一样的

p.spread{word-spacing:

30px;}p.tight{word-spacing:

-0.5em;}

字母间隔:

letter-spacing属性

与word-spacing的区别在于，字母间隔修改的是字符或字母之间的间隔

h1{letter-spacing:

-0.5em}h4{letter-spacing:

20px}

字符转换:

text-transform属性

处理文本的大小写。

这个属性有4个值：

默认值none对文本不做任何改动，将使用源文档中的原有大小写。

uppercase和lowercase将文本转换为全大写和全小写字符。

capitalize只对每个单词的首字母大写。

h1{text-transform:

uppercase}

文本装饰:

text-decoration属性

这个属性有5个值：

默認值none值会关闭原本应用到一个元素上的所有装饰，underline会对元素加下划线。

overline的作用恰好相反，会在文本的顶端画一个上划线。

值line-through则在文本中间画一个贯穿线。

blink会让文本闪烁，类似于Netscape支持的颇招非议的blink标记。

还可以在一个规则中结合多种装饰。

如果希望所有超链接既有下划线，又有上划线，则规则如下：

a{text-decoration:

none;}

a:

linka:

visited{text-decoration:

underlineoverline;}

注意：

如果两个不同的装饰都与同一元素匹配，胜出规则的值会完全取代另一个值

处理空白符：

white-space属性

影响到用户代理对源文档中的空格、换行和tab字符的处理，默認值normal：

丢掉多余的空白符。

如果给定这个值，换行字符（回车）会转换为空格，一行中多个空格的序列也会转换为一个空格；值pre：

空白符不会被忽略；值nowrap：

会防止元素中的文本换行；

值

空白符

换行符

自动换行

pre-line

合并

保留

允许

normal

合并

忽略

允许

nowrap

合并

忽略

不允许

pre

保留

保留

不允许

pre-wrap

保留

保留

允许

文本方向：

direction属性

direction属性有两个值：

ltr和rtl。

默认值是ltr，显示从左到右的文本。

如果显示从右到左的文本，应使用值rtl

属性

描述

color设置文本颜色

direction：

设置文本方向。

line-height

设置行高。

letter-spacing

设置字符间距。

text-align

对齐元素中的文本。

text-decoration

向文本添加修饰。

text-indent

缩进元素中文本的首行。

text-transform

控制元素中的字母。

unicode-bidi

设置文本方向。

white-space

设置元素中空白的处理方式。

word-spacing

设置字间距。

指定字体系列：

 font-family属性 

定义文本的字体系列

body{font-family:

sans-serif;}

p{font-family:

'NewCenturySchoolbook',Georgia,'NewYork',serif;}

注意到了，上面的例子中使用了单引号。

只有当字体名中有一个或多个空格（比如NewYork），或者如果字体名包括#或$之类的符号，才需要在font-family声明中加引号

字体风格：

font-style属性

属性有三个值：

normal-文本正常显示italic-文本斜体显示oblique-文本倾斜显示

斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。

与此不同，倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。

字体变形：

font-variant属性

设定小型大写字母

p{font-variant:

small-caps;}

字体加粗:

font-weight属性

文本的粗细,bold关键字可以将文本设置为粗体,关键字100~900为字体指定了9级加粗度。

如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100对应最细的字体变形，900对应最粗的字体变形。

数字400等价于normal，而700等价于bold。

p.normal{font-weight:

normal;}p.thick{font-weight:

bold;}

p.thicker{font-weight:

900;}

字体大小:

font-size属性

注意：

如果您没有规定字体大小，普通文本（比如段落）的默认大小是16像素（16px=1em）。

属性

描述

font

简写属性。

作用是把所有针对字体的属性设置在一个声明中。

font-family

设置字体系列。

font-size

设置字体的尺寸。

font-style

设置字体风格。

font-variant

以小型大写字体或者正常字体显示文本。

font-weight

设置字体的粗细。

设置链接的样式

链接的四种状态：

∙a:

link-普通的、未被访问的链接

∙a:

visited-用户已访问的链接

∙a:

hover-鼠标指针位于链接的上方

∙a:

active-链接被点击的时刻

当为链接的不同状态设置样式时，请按照以下次序规则：

∙a:

hover必须位于a:

link和a:

visited之后

∙a:

active必须位于a:

hover之后

列表類型：

list-style-type属性

修改用于列表项的标志类型，把无序列表中的列表项标志设置为方块

ul.disc{list-style-type:

disc}實心圓ul.circle{list-style-type:

circle}空心圓

ul.square{list-style-type:

square}方塊ul.none{list-style-type:

none}

列表項圖像：

 list-style-image 属性

对各标志使用一个图像

ulli{list-style-image:

url（xxx.gif）}

列表標誌位置:

 list-style-position 属性

确定标志出现在列表项内容之外还是内容内部

ul.inside{list-style-position:

inside}ul.outside{list-style-position:

outside}

簡寫列表樣式：

list-style属性

将以上列表样式属性合并为一个方便的属性

li{list-style:

url（example.gif）squareinside}

ul{list-style:

squareinsideurl（'/i/eg_arrow.gif'）}

属性

描述

list-style

简写属性。

用于把所有用于列表的属性设置于一个声明中。

list-style-image

将图象设置为列表项标志。

list-style-position

设置列表中列表项标志的位置。

list-style-type

设置列表项标志的类型。

表格边框：

border属性

设置表格边框，表格具有双线条边框

table,th,td{border:

1pxsolidblue;}

折叠边框：

border-collapse属性

设置表格边框折叠为单一边框，显示为单线条边框

table{border-collapse:

collapse;}

表格宽度和高度：

width和height属性

table{width:

100%;}th{height:

50px;}

表格文本对齐：

text-align和vertical-align属性

text-align属性设置水平对齐方式，比如左对齐、右对齐或者居中

vertical-align属性设置垂直对齐方式，比如顶部对齐、底部对齐或居中对齐：

td{text-align:

right;}td{height:

50px;vertical-align:

bottom;}

表格内边距：

padding属性

控制表格中内容与边框的距离

td{padding:

15px;}

表格颜色：

backgroup-color與color属性

设置边框的颜色，以及th元素的文本和背景颜色

table,td,th{border:

1pxsolidgreen;}

th{background-color:

green;color:

white;}

属性

描述

border-collapse

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

border-spacing

设置分隔单元格边框的距离。

caption-side

设置表格标题的位置。

empty-cells

设置是否显示表格中的空单元格。

table-layout

设置显示单元、行和列的算法。

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

CSSoutline属性规定元素轮廓的样式、颜色和宽度。

属性

描述

CSS

outline

在一个声明中设置所有的轮廓属性。

2

outline-color

设置轮廓的颜色。

2

outline-style

设置轮廓的样式。

2

outline-width

设置轮廓的宽度。

2

p{border:

redsolidthin;outline:

#00ff00dottedthick;}

p.dotted{outline-style:

dotted}

单边内边距属性：

padding屬性

按照上、右、下、左的顺序分别设置各边的内边距

padding

简写属性。

作用是在一个声明中设置元素的所内边距属性。

padding-bottom

设置元素的下内边距。

padding-left

设置元素的左内边距。

padding-right

设置元素的右内边距。

padding-top

设置元素的上内边距。

边框：

border属性

元素的边框（border）是围绕元素内容和内边距的一条或多条线。

CSSborder属性允许你规定元素边框的样式、宽度和颜色。

边框的样式：

border-style属性，默認值為none

a:

linkimg{border-style:

outset;}把一幅图片的边框定义为outset，像是“凸起按钮”

p.aside{border-style:

soliddotteddasheddouble;}为一个边框定义多个样式

上面这条规则为类名为aside的段落定义了四种边框样式：

实线上边框、点线右边框、虚线下边框和一个双线左边框。

（top-right-bottom-left的顺序）

定義單邊樣式：

∙border-top-styleborder-right-styleborder-bottom-styleborder-left-style

p{border-style:

solidsolidsolidnone;}

p{border-style:

solid;border-left-style:

none;}

注意：

如果要使用第二种方法，必须把单边属性放在简写属性之后。

因为如果把单边属性放在border-style之前，简写属性的值就会覆盖单边值none。

边框的宽度：

border-width属性

为边框指定宽度有两种方法：

可以指定长度值，比如2px或0.1em；或者使用3个关键字之一，它们分别是thin、medium（默认值）和thick。

p{border-style:

solid;border-width:

5px;}

定義邊框單邊寬度：

按照top-right-bottom-left的顺序设置元素的各边边框：

∙border-top-widthborder-right-widthborder-bottom-widthborder-left-width

p{border-style:

solid;border-width:

15px5px15px5px;}

边框的颜色：

border-color属性

p{border-style:

solid;border-color:

bluergb（25%,35%,45%）#909090red;}

定義邊框單邊顏色：

∙border-top-colorborder-right-colorborder-bottom-colorborder-left-color

透明邊框：

如果边框没有样式，就没有宽度。

不过有些情况下您可能希望创建一个不可见的边框。

边框颜色值transparent。

这个值用于创建有宽度的不可见边框

a:

link,a:

visited{border-style:

solid;border-width:

5px;

border-color:

transparent;}

CSS边框属性

属性

描述

border

简写属性，用于把针对四个边的属性设置在一个声明。

border-style

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

border-width

简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。

border-color

简写属性，设置元素的所有边框中可见部分的颜色，或为4个边分别设置颜色。

border-bottom

简写属性，用于把下边框的所有属性设置到一个声明中。

border-bottom-color

设置元素的下边框的颜色。

border-bottom-style

设置元素的下边框的样式。

border-bottom-width

设置元素的下边框的宽度。

border-left

简写属性，用于把左边框的所有属性设置到一个声明中。

border-left-color

设置元素的左边框的颜色。

border-left-style

设置元素的左边框的样式。

border-left-width

设置元素的左边框的宽度。

border-right

简写属性，用于把右边框的所有属性设置到一个声明中。

border-right-color

设置元素的右边框的颜色。

border-right-style

设置元素的右边框的样式。

border-right-width

设置元素的右边框的宽度。

border-top

简写属性，用于把上边框的所有属性设置到一个声明中。

border-top-color

设置元素的上边框的颜色。

border-top-style

设置元素的上边框的样式。

border-top-width

设置元素的上边框的宽度。

外边距：

margin属性

margin属性接受任何长度单位，可以是像素、英寸、毫米或em。

h1{margin:

10px0px15px5px;}margin:

toprightbottomleft

p{margin:

0.5em1em0.5em1em;}====p{margin:

0.5em1em;}兩行規則一致

∙如果缺少左外边距的值，则使用右外边距的值。

∙如果缺少下外边距的值，则使用上外边距的值。

∙如果缺少右外边距的值，则使用上外边距的值。

换句话说，如果为外边距指定了3个值，则第4个值（即左外边距）会从第2个值（右外边距）复制得到。

如果给定了两个值，第4个值会从第2个值复制得到，第3个值（下外边距）会从第1个值（上外边距）复制得到。

最后一个情况，如果只给定一个值，那么其他3个外边距都由这个值（上外边距）复制得到。

h1{margin:

0.25em1em0.5em;}/*等价于0.25em1em0.5em1em*/

h2{margin:

0.5em1em;}/*等价于0.5em1em0.5em1em*/

p{margin:

1px;}/*等价于1px1px1px1px*/

单边外边距属性：

∙margin-topmargin-rightmargin-bottommargin-left

使用单边外边距属性为元素单边上的外边距设置值

属性

描述

margin

简写属性。

在一个声明中设置所有外边距属性。

margin-bottom

设置元素的下外边距。

margin-left

设置元素的左外边距。

margin-right

设置元素的右外边距。

margin-top

设置元素的上外边距。

div、h1或p元素常常被称为块级元素。

这意味着这些元素显示为一块内容，即“块框”。

与之相反，span和strong等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。

一切皆为框

您可以使用 display属性改变生成的框的类型。

这意味着，通过将display属性设置为block，可以让行内元素（比如元素）表现得像块级元素一样。

还可以通过把display设置为none，让生成的元素根本没有框。

这样的话，该框及其所有内容就不再显示，不占用文档中的空间。

CSSposition属性

通过使用 position属性，我们可以选择4种不同类型的定位，这会影响元素框生成的方式。

position属性值的含义：

static

元素框正常生成。

块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

Relative（相對定位）

元素框偏移某个距离。

元素仍保持其未定位前的形状，它原本所占的空间仍保留。

Absolute（絕對定位）

元素框从文档流完全删除，并相对于其包含块定位。

包含块可能是文档中的另一个元素或者是初始包含块。

元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。

元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

fixed

元素框的表现类似于将position设置为absolute，不过其包含块是视窗本身。

提示：

相对定位实际上被看作普通流定位模型的一部分，因为元素的位置