CSS属性值.docx
- 文档编号:22986569
- 上传时间:2023-04-29
- 格式:DOCX
- 页数:16
- 大小:30.48KB
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%;}
thisisaparagragh
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,不过其包含块是视窗本身。
提示:
相对定位实际上被看作普通流定位模型的一部分,因为元素的位置
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- CSS 属性