css属性列表
|
字体属性
字体属性比较多,大致说来有字体族、风格、变形、加粗与大小等,我们在上几个单节中介绍了font属性可同时表示好几个字体的属性,所以要注意一下,它并不仅仅单独地表示字体某一方面的属性。
字体族科可以用一个指定的的字体名或一个种类的字体族科。很明显,定义一个指定的字体名不会比定义一个种类的字体族科合适。多个族科的赋值是可以使用的,而如果确定了一个指定的字体赋值,就应该有一个种类族科名随后,以防第一个选择不存在。 字体族科声明的例子如下: 留意头两个赋值指定了字体的类型: New Century Schoolbook和Times。可是,因为它们两者都是serif字体,字体族科的种类作为后备列了出来,以防系统没有两者但有另一个serif合资格的字体。 任何包含空格的字体名都必须用单引号或双引号引住。 字体族科也可以用字体属性给出。 字体风格
字体风格属性以三个方法的其中一个来定义显示的字体: normal (普通),italic (斜体) 或oblique (倾斜)。样式表的字体风格声明例子如下:
字体变形
字体变形属性决定了字体的显示是normal (普通) 还是small-caps (小型大写字母)。当文字中所有字母都是大写的时候,小型大写字母(值)会显示比小写字母稍大的大写字符。稍后版本的CSS将会支持附加的变形,如收缩、扩张、小写数码或其它自定义的变形。字体变形的定义例子如下:
字体加粗
字体加粗属性用作说明字体的加粗。当其它值绝对时,bolder和lighter值将相对地成比例增长。 注意: 因为不是所有的字体都有九个有效的加粗显示,一些加粗的会在指定下组合。如果指定的加粗无效,会按以下原则选择:
一些字体加粗的定义例子如下:
字体大小
字体大小属性用作修改字体显示的大小。绝对长度(使用的单位为pt-像素和in-英寸) 需要谨慎地考虑到其适应不同浏览环境时的弱点。对于一个用户来说,绝对长度的字体很有可能会很大,或很小。 一些大小指定的定义如下:
网页制作者需要清楚Microsoft Internet Explorer 3.x 会错误地将em 和ex单位当作像素,这很可能会令到使用了这些单位的文本不可读。浏览器还会错误地将百分比值视为相对于选中部分的缺省字体大小,而不是上级元素的字体大小。这种做法像
这是危险的,其大小将被视为IE的一级标题的缺省字体大小的两倍,而不是两倍于上级元素的字体大小。在这种情况中,BODY 通常会被视为上级元素,而且很可能定义一个medium的字体大小,然而,在IE中一级标题的缺省字体大小可能被认为是xx-large。 注意到了这些错误后,网页制作者在使用字体大小属性时,应该小心使用百分比的值,而且应该尽量避免使用em和ex这两个单位。 字体
字体属性用作不同字体属性的略写,特别是行高。例如, 指定该段为bold(粗体)和italic(斜体)Times或serif字体,12点大小,行高为14点。 |
颜色与图像属性
color 功能:设置前景或元素的颜色。 background-color 功能:设置页面或页面元素的背景颜色。 background-image 功能:定义背景图形。 background-repeat 功能:控制图形背景是否重复排列。 background-attachment 功能:指定元素的背景是随元素一起滚动还是固定在页面某个位置上。 background-position 功能:用于在空间中定位元素背景 background 功能:简写属性,可以设置所有背景属性。 display 功能:改变元素的显示值,可以将元素类型线上,块和清单项目相互变换。 |
边框属性
{框填充属性 padding-bottom 功能:毎个容器都有边框,这些属性设置边框与框內元素间的距离。 框填充属性--- padding 功能:是个简写属性,用于设置上,下,左,右各个方向边框和内容元素的间距。 框边框属性 功能:这四个属性都是简写属性,分别设置上,下,右,左的边框属性。缺省情况下,边框没有样式设置。 框边框属性 border-top-width 功能:分别设置各个边框的厚度。 框边框属性 border-color 功能:简写属性,设置四个边框的颜色值。 框边框属性 border 功能:简写属性,设置所有边框属性。 框边框属性 border-style 功能:用于显示边框和指定边框样式。 框边界属性 margin-bottom 功能:这四个属性用来设置元素与其相邻元素间的距离,可以用长度或相对于其父文本的宽度的百分比来定义,也可以自动处理。 框边界属性 margin 功能:简写属性,用于設置元素的所有边界。这是用于描述元素的内容的边缘到框边缘的距离的。这个区总是透明的,可以看到下面的页面背景。 框位置属性 height 功能:设置元素高度,浏览器按照这个高度调整图形。 框位置属性 width 功能:设置元素宽度,浏览器按照这个宽度调整图形。 框位置属性 |
文本属性
letter-spacing 功能:控制文本元素字母间的间距,所设置的距离适用于整个元素。 line-height 功能:设置元素中文本的行间距。
功能:在元素框中水平对齐文本。 text-decoration 功能:文本修饰,用于控制文本元素所用的效果,特别适用于引人注意的说明,警告等文本效果。 text-indent 功能:文本缩排,用于段落的第一行缩排上。 text-transform 功能:设置一个或几个元素的大写标准。 vertical-align 功能:垂直对齐。 word-spacing 功能:控制文本中元素单词间的间距。设置的间距适用于整个元素,不能在某个单词间插入更大或更小的间距。 |
定位属性
定位属性将是网虫们打开幸福之门的钥匙: 绝对定位 H4 { position: absolute; left: 100px; top: 43px } 这项CSS规则让浏览器将<H4>的起始位置精确地定在距离浏览器左边100象素,距离其顶部43象素的位置,请观看代码的执行效果。 注意这里唯一设置了的是左边和顶部,也就说,文字将从左到右,从上到下载入浏览窗口。 左边和顶部属性很直观,左边(left)设定要素距浏览器窗口左边的距离,顶部(top)设定距离浏览器窗口顶部的距离。 设定这些距离时,你可以使用所学过的各种度单位或比例值。使用比例值时,比例值的是相对于母体要素的尺寸。 绝对定位使你能精确地定位要素在页面的独立位置,而不考虑页面其它要素的定位设置。相对定位指你所定位的要素的位置相对于在文件中所分配的位置。例: I { position: relative; left: 40px; top: 10px } 请点击查看代码的执行效果 相对定位的关键在于定位了的要素的位置是相对于它通常应在的位置进行定位。如果你停止使用相对定位,则文字的显示位置将恢复正常。范例。 使用相对定位时要小心,否则容易将页面弄得非常乱。 除了相对定位和绝对定位,你还可以使用static(静止)参数值。它的使用方法同普通HTML中的定位方法,不能附加特殊的定位设置。
|
分类属性
|
在以前的HTML里,元素的位置只能靠元素的依次排列觉得,而在CSS里你可以更精确的定位元素。Netscape曾提出过Layer标记,它对于精确布局很有好处,但是并没有被W3C承认,W3C在CSS提出了类似于Layer标记的功能。
position属性: position属性用来决定元素的位置类型,详见属性: 属性名称: 'position' direction属性决定BOX的排列方向,详见属性: 属性名称: 'direction' 在HTML中图片可以选择飘浮的位置,现在BOX对象通过CSS对于也可以选择飘浮的位置。改变BOX的float属性,BOX将飘浮在其他元素的左或右方: 属性名称: 'float' 例如:
相反的,使用clear属性将禁止元素在BOX的左方或右方飘浮: 属性名称: 'clear' 绝对位置属性有四个属性:top、right、bottom和left,属性值为长度单位或百分数: 属性名称: 'top'、'right'、'bottom'、'left' 利用以上属性,用户就可以精确定义元素的位置,如:
z-index属性: 在CSS中允许元素的重叠显示,这样就有一个显示顺序的问题,z-index属性描述了元素的前后位置,如果把电脑屏幕看作X-Y平面的话,那么Z轴就是垂直于屏幕的,z-index使用整数表示元素的前后位置,数值越大,就会显示在相对靠前的位置,并且CSS同意在z-index中使用负数。 属性名称: 'z-index' 规定BOX的width属性,可以使BOX的宽度不依靠它所包含的内容的多少: 属性名称: 'width' 在CSS中还提供了min-width和max-width属性,使得BOX的宽度在最小宽度和最大宽度之间。 属性名称: 'min-width' 相同的BOX还有height属性来控制本身的高度: 属性名称: 'height' 在CSS中还提供了min-height和max-height属性,使得BOX的高度在最小高度和最大高度之间。 属性名称: 'min-height' 在规定元素的宽度和高度时,如果元素的面积不足以显示全部内容的话就要用到overflow属性: 属性名称: 'overflow' 属性值含义如下: visible:扩大面积以显示所有内容。 CSS还提供了一种clip属性,可以把元素区域剪切成各种形状,但目前提供的只有方形一种: 属性名称: 'clip' <shape>值为rect(top right bottom left)。 line-height属性可以规定元素内部的行间距,使用长度单位或百分数: 属性名称: 'line-height' 例如下面的例子,虽然表达方式不同,但结果一样:
vertical-align属性决定元素在垂直位置的显示: 属性名称: 'vertical-align' 属性值含义如下: 该属性用于控制元素的显示或隐藏: 属性名称: 'visibility' |
习惯于使用 Windows 的用户对各种各样的鼠标样式一定不会陌生,当鼠标移动到不同的地方时,当鼠标需要执行不同的功能时,当系统处于不同的状态时,都会使鼠标形状发生改变。 虽然在网络上有各种各样的鼠标可供下载,图形五花八门,但是就 Windows 的默认系统来说,这些图形是固定不变的。改变鼠标的属性,简单说就是当鼠标移动到不同的元 素对象上面时,让鼠标以不同的形状、图案显示。这种样式是通过改变“cursor”属性来完成的。下面的表格把鼠标的完部属性都列出来,可供参考:
关键字 解释 在动态的页面里恰当地种用这些鼠标有时可以起到意想不到的效果。例如,有一个链接的目标为帮助文件,于是可以使用帮助形式的鼠标。还有在一些需要使用鼠标事件的页面中,如果想告诉用户哪里可以点击鼠标,那么只要在页面上特定的位置让鼠标变成手形,用户就会辨认出页面上的活动区域。 |