设计主页 > 网站制作 > CSS教程 >

样式表(CSS:Cascading Style Sheets)[中]

设计前沿收集 /  时间:2006-05-21 09:00

  样式表(CSS:Cascading Style Sheets)学习[上]

七.CSS1属性

31  font属性

       字模、字体样式、字体大小、字体效果等。常用属性有:

font-family:字模,CursiveFantasyComic Sans MS等。

font-size:字体物理大小或相对大小,物理大小包括:xx-smallx-smallsmallmediumlargex-largexx-large分别对应17号字体。

font-style:是否斜体, normalitalicoblique(=italic)。

font-weight:文字粗细,normalboldbolderlighter

font-variant:小型大写字母,normalsmall-caps(小型大写字母)。

<!--[if !supportEmptyParas]--> <!--[endif]-->

<!--[endif]-->32  text属性

       文本修饰、文本缩进、单词间距、字母间距、行间距、文本的水平对齐和垂直对齐以及空白大小的控制。常用属性有:

text-transform:单词大小写,nonecapitalizeuppercaselowercase

text-decoration:特殊效果,noneline-throughoverlineunderline

word-spacing:单词间距,normal、英寸(in)、厘米(cm)、pointpt)、picapc)、emem)、像素(px)。

letter-spacing:字母间距。

vertical-align:文本或图像的垂直定位,baseline(默认)、subsupertoptext-topmiddlebottomtext-bottom

text-align:文本水平对齐方式,leftrightcenterjustify

text-indent:为段落元素第一行产生缩进。

line-height:当前行的高度,这样设置的行上下会空出相同的距离。

white-space:控制元素内空格的处理方式,normal(默认)、pre(不压缩空格)、nowrap(即使文本行超出了元素内容的宽度也不会换行)

<!--[if !supportEmptyParas]--> <!--[endif]-->

33  color属性和background属性

color:文字颜色

background-color:背景色

background-image:背景图像,背景色显示在背景图像的下面,以提供不透明的背景,比 background-repeat:决定当背景图像比元素的画布空间小时该如何排列。

repeat:默认,在水平和垂直两个方向上平铺;

repeat-x:仅在水平方向平铺;

repeat-y:仅在垂直方向平铺;

no-repeat:不平铺。

background-attachment

scroll:默认,图像和文本一起滚动;

fixed:图像不动,水印效果。

background-position:背景图像在元素画布空间中的定位方式,指定了图像左上角相对于画布的水平间距和垂直间距。可以用绝对距离(像素)、百分比或特殊关键字。

水平方向关键字:leftcenterright

垂直方向关键字:topcenterbottom

<!--[if !supportEmptyParas]--> <!--[endif]-->

举例:background-image属性使用。

b{background-imageurl(donut-tile.gif);background-colorwhite;}

p{background-imageurl(picture.gif);background-position20%  40%;}

body{background-imageurl(picture.gif);background-positioncenter  center;}

<!--[if !supportEmptyParas]--> <!--[endif]-->

34  box属性

       <p>元素这样的块级元素可以作为屏幕上的一个矩形容器来考虑。可以通过样式属性来控制这些容器的三个方面。可以控制的box属性如下:

margin属性:决定元素的box的边和相邻元素的边的距离。

border属性:决定包围元素的边的边框的视觉特性。

padding属性:决定元素内它的边和它的实际内容间的距离。

heightwidthpositioning属性:决定由元素产生的box的大小和位置。

<!--[if !supportEmptyParas]--> <!--[endif]-->

341  margin属性

       单边距的设置规则:

margin-top:上边距

margin-right:右边距

margin-bottom:下边距

margin-left:左边距

<!--[if !supportEmptyParas]--> <!--[endif]-->

举例:单边距的设置。

body {margin-top:20px; margin-bottom:20px; margin-left:30px; margin-right:50px;}

p {margin-bottom:20mm;}

div.fun {margin-left:1.5cm; margin-right: 1.5cm;}

<!--[if !supportEmptyParas]--> <!--[endif]-->

也可以用margin属性来一次性为四条边设置边距。

<!--[if !supportEmptyParas]--> <!--[endif]-->

举例:通过margin属性设置边距的规则。

如果仅指定了单个值,则该值被应用到4个“空白”。

如:p{margin:1.5cm;}

如果四个值都指定了,则它们按照顺时针方向应用到各个空白(上、右、下、左的顺序),

最后一个距离后加分号,之间用空格相隔。

如:p{margin:10px  5px  15px  5px;}

如果在规则中仅指定了两个或三个值,缺少一边的取值将由它的对边决定。

如:p{margin:10px  5px ;}

将设置上边、下边的空白为10像素,右边、左边的空白为5像素。

<!--[if !supportEmptyParas]--> <!--[endif]-->

342  border属性

       border位于空白(margin)和间隙(padding)之间。

(一)border-style属性

none:无边框

dotted:点边框

dashed:虚线边框

solid:实线边框

double:双边框

groove:蚀刻边框

ridge:突出边框

inset:凹进边框

outset:凸起边框

也可以通过border-top-styleborder-right-styleborder-bottom-styleborder-left-style来单独设置各边的边框类型。当使用border-style来设置四边时,规则同margin类似。

<!--[if !supportEmptyParas]--> <!--[endif]-->

(二)border-width属性

       border-widthborder-top-widthborder-right-widthborder-bottom-widthborder-left-width可以分别设置边框的粗细。典型取值有:thinmediumthick,当然也可取其他长度值。

(三)border-color属性

       border-colorborder-top-colorborder-right-colorborder-bottom-colorborder-left-color可以分别设置边框的颜色。

<!--[if !supportEmptyParas]--> <!--[endif]-->

       可以将border-styleborder-widthborder-color一起应用到borderborder-topborder-rightborder-bottomborder-left上来实现对相关border属性的快速设置。当三个属性在放在一起设置时,最好按照border-styleborder-widthborder-color的顺序来给出值。

<!--[if !supportEmptyParas]--> <!--[endif]-->

举例:border组合属性的设置。

#RainbowBox

{

background-color:yellow;

border-top:solid 20px red;

border-right:double 10px blue;

border-bottom:solid 20px green;

border-left:dashed 10px orange;

}

<!--[if !supportEmptyParas]--> <!--[endif]-->

343  padding属性

       在元素的边框和它的实际内容之间的空白可以通过padding属性来控制。元素的4个间隙(padding)可以通过padding-toppadding-rightpadding-bottompadding-left来设置。与空白(margin)和边框(border)一样,你可以使用速记符形式的padding属性来一次性地对四边的间隙进行设置。

<!--[if !supportEmptyParas]--> <!--[endif]-->

举例:一个涉及marginborderpadding的综合应用。

<style type = “text/css”>

<!--

#one

{

background:yellow;

border-style:double;

border-width:medium;

padding-left:1cm;

padding-right:0.5cm;

}

#two

{

background:yellow;

border-style:double;

border-width:medium;

padding-top:1cm;

padding-bottom:1cm;

}

#three

{

background:yellow;

border-style:double;

border-width:medium;

padding:1cm  1cm;

margin:0.5cm  4cm;

}

-->

<!--[if !supportEmptyParas]--> <!--[endif]-->

344  widthheight属性

举例:综合。

P

{

width:300px;

height:400px;

padding:10px;

border:solid 5px;

background-color:yellow;

color:black;

}

<!--[if !supportEmptyParas]--> <!--[endif]-->

345  floatclear属性

       float属性影响元素在水平方向上的对齐方式,类似与多数html元素的align属性。它使得它所包含的元素“流”向左边或右边,这时我们称这个元素为“流动”元素。 clear属性对“流动”元素进行垂直定位,决定是否继续或清除当前的流动方式,类似于html元素brclear属性,取值有leftrightbothnone(默认)。

<!--[if !supportEmptyParas]--> <!--[endif]-->

346  display属性

       CSS模型定义了三种类型的显示元素:块级元素、行内元素和列表。display属性允许一个元素的显示类型成为下面四个值中的一个:blockinlinelist-itemnone

none:元素将不会显示出来,并且也不会占据画布空间,这点和设置visibility属性不同。

block:块级元素。

inline:行内元素。

list-item:列表元素

<!--[if !supportEmptyParas]--> <!--[endif]-->

举例:display属性使用。

“关闭”一个段落,使其不显示出来:

p.remove{display:none;}

将一个块级元素(比如段落)转变成行内元素,这样就可以不换行显示!

p{display:inline;}

将一个行内元素转变成块级元素,这样就增加了一个回车(换行)!

em{display:block;}

强制一个元素在一定程度上像列表那样显示:

b{display:list-item;}