分享
 
 
 

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

王朝html/css/js·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

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

七.CSS1属性

3.1 font属性

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

① font-family:字模,Cursive、Fantasy、Comic Sans MS等。

② font-size:字体物理大小或相对大小,物理大小包括:xx-small、x-small、small、medium、large、x-large、xx-large分别对应1~7号字体。

③ font-style:是否斜体, normal、italic、oblique(=italic)。

④ font-weight:文字粗细,normal、bold、bolder、lighter。

⑤ font-variant:小型大写字母,normal、small-caps(小型大写字母)。

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

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

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

① text-transform:单词大小写,none、capitalize、uppercase、lowercase。

② text-decoration:特殊效果,none、line-through、overline、underline。

③ word-spacing:单词间距,normal、英寸(in)、厘米(cm)、point(pt)、pica(pc)、em(em)、像素(px)。

④ letter-spacing:字母间距。

⑤ vertical-align:文本或图像的垂直定位,baseline(默认)、sub、super、top、text-top、middle、bottom、text-bottom。

⑥ text-align:文本水平对齐方式,left、right、center、justify。

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

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

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

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

3.3 color属性和background属性

① color:文字颜色

② background-color:背景色

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

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

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

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

no-repeat:不平铺。

⑤ background-attachment:

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

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

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

水平方向关键字:left、center、right

垂直方向关键字:top、center、bottom

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

举例:background-image属性使用。

b{background-image:url(donut-tile.gif);background-color:white;}

p{background-image:url(picture.gif);background-position:20% 40%;}

body{background-image:url(picture.gif);background-position:center center;}

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

3.4 box属性

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

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

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

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

④ height,width和positioning属性:决定由元素产生的box的大小和位置。

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

3.4.1 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]-->

3.4.2 border属性

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

(一)border-style属性

① none:无边框

② dotted:点边框

③ dashed:虚线边框

④ solid:实线边框

⑤ double:双边框

⑥ groove:蚀刻边框

⑦ ridge:突出边框

⑧ inset:凹进边框

⑨ outset:凸起边框

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

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

(二)border-width属性

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

(三)border-color属性

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

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

可以将border-style、border-width、border-color一起应用到border、border-top、border-right、border-bottom、border-left上来实现对相关border属性的快速设置。当三个属性在放在一起设置时,最好按照border-style、border-width、border-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]-->

3.4.3 padding属性

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

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

举例:一个涉及margin、border、padding的综合应用。

<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]-->

3.4.4 width、height属性

举例:综合。

P

{

width:300px;

height:400px;

padding:10px;

border:solid 5px;

background-color:yellow;

color:black;

}

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

[1] [2] 下一页

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有