43-样式表的各项属性

网页制作样式表的各项属性样式表的各项属性字体图文和布局颜色和背景定位一、字体•1、CSS文字样式–1.1字体–1.2文字大小–1.3文字颜色–1.4加重字体和斜体字的各种CSS方式–1.5文字的CSS特殊效果•2、文字实例：模拟Goole公司logo•3、CSS段落文字•4、段落实例：百度搜索1.1字体在CSS中通过font-family来控制文字的字体。h2{font-family:黑体,幼圆;}示例1.2文字大小使用font-size属性，你可以对文字的尺寸进行无限的控制。确定这的3种基本方法：1）Points,ems,pixels,及其它单位–P{font-size:16pt}–B{font-size:1.5em}/*在父标记的基础上×0.5*/–P{font-size:20px}/*象素，因此实际显示大小与分辨率有关，很常用的方式*/•其它单位：如果上述单位仍然不符合你的要求，请试试这些单位：•in（英寸）•cm（厘米）•mm（毫米）•pc（打字机字型尺寸单位）1.2文字大小2）关键字•如果你不喜欢使用这些单位，你还可以选择以关键字说明文字尺寸，例：P{font-size:large}•有7种关键字，相对应于FONTSIZE中所用的数字参数：–xx-small–x-small–small–medium–large–x-large–xx-large1.2文字大小3）比例参数•设定文字尺寸的第3种办法就是使用比例参数，例：B{font-size:300%}/*在父标记的基础上200%*/1.3文字颜色•控制文字颜色时统一使用color属性。而颜色的表示方法有很多种：•第1种采用RGB颜色表示，如：h2{color:rgb(51,204,0);}RGB的数值范围从0到255，R代表红色，G代表绿色，B代表蓝色•第2种采用16进制的表示方式：p{color:#333333;}•第3种采用预定义的关键字，如bluepspan{color:blue;}–颜色名称•16种基本色为aqua,black,blue,fuchsia,gray,green,lime,maroon,navy,olive,purple,red,silver,teal,white,andyellow.InternetExplorer4.0支持的颜色.doc1.4加重字体和斜体字的各种CSS方式1)字体风格font-style是用来控制斜体字的属性：•语法：font-style:normal|italic|oblique•参数：normal:正常的字体italic:斜体。对于没有斜体变量的特殊字体，将应用obliqueoblique:倾斜的字体•示例：H3{font-style:italic}1.4加重字体和斜体字的各种CSS方式2)字重font-weight（设置文本字体的粗细）：利用字重属性，可以创造出一系列新的加重字体。•语法：font-weight:normal|bold|bolder|lighter|number•参数：normal:正常的字体。相当于number为400。声明此值将取消之前任何设置•bold:粗体。相当于number为700。也相当于b对象的作用•bolder:IE5+特粗体•lighter:IE5+细体•number:IE5+100|200|300|400|500|600|700|800|900•示例：P{font-weight:bold}1.5文字的CSS特殊效果1）文字变形（text-transform）：这项属性可以使你轻而易举地控制字母大写。基本代码：B{text-transform:uppercase}•以下为所有可用的参数：–uppercase使所有字母大写显示–lowercase使所有字母小写显示–capitalize使每个单词的第1个字母大写显示.–none使所有继承的文字变形参数被忽略，文字将以正常形式显示。1.5文字的CSS特殊效果2）文字修饰（text-decoration)。其基本语法如下：•B{text-decoration:underline}•以下为所有可用的参数：–underline给文字下划线，–overline给文字上划线，–line-through给文字划出删除线.–blink文字在闪烁（IE浏览器不支持）–none使得上述效果都不会发生。2、文字实例：模拟Goole公司logo示例3、段落实例：百度搜索示例二、布局字间距字母间距行高文字对齐方式垂直对齐方式文字缩位顶边距、左边距等空格填充－顶部、左边等等边框－宽度、颜色、样式等浮动清除1、css控制字间距和字母间距字间距利用字间距属性，你可以在字之间加入更多的距离：H3{word-spacing:1em}你所使用的参数值将加入任何浏览器的缺省设置，你可以使用我们昨天谈到的任何一种长度单位：in（英寸）cm（厘米）mm（毫米）pt（点数）pc（打字机字间距）em（ems）ex(x-height)px（象素）字母间距H3{letter-spacing:10px}2、css行距行高行高可以控制行与行之间的垂直距离。B{line-height:16pt}设定行高的方法：长度单位B{font-size:12pt;line-height:11pt}比例B{font-size:10pt;line-height:140%}3、css文字对齐文字对齐利用文字对齐属性，你可以控制段落的水平对齐：H4{text-align:center}这项属性只用于整块的内容，如P、H1-H6、BLOCKQUOTE和UL。以下为各种选项：left指将要素左对齐，如本段所示。center指将要素居中，如本段所示。justify指将要素左右对齐，如本段所示。4、垂直对齐方式：vertical-align示例5、首字放大（float）首字放大（float）H4{float:left}6、css边距及空格填充box包括：要素本身围绕要素的空格填充（padding）围绕空格填充的边框（border）围绕边框的边距（空白－margin）图示如下：你可以分别控制空格填充、边框和边距顶边距、底边距、左边距和右边距这4项属性可以使你控制一个要素的四周的边距。如下：H4{margin-top:20px;margin-bottom:5px;margin-left:100px;margin-right:55px}7、css边框顶边框宽度，底边框宽度，左边框宽度和右边框宽度你可以控制整个边框的宽度，也可以分别控制每一边的边框宽度：H4{border-top-width:2px;border-bottom-width:5px;border-left-width:1px;border-right-width:1px}边框颜色例：P{border-color:green;border-width:3px}边框样式例：P{border-style:double;border-width:3px}可以使用的关键字参数值如下：soliddoubledotteddashedgrooveridgeinsetoutset三、背景背景色背景图象重复背景固定背景背景定位背景1、背景色背景色利用CSS在网页要素后面加入固定的背景色及图象。P.yellow{background-color:#FFFF66}2、背景图象背景图象你可以很轻松地将GIF或JPEG图象加到一个要素后面：B{background-image:url(background.gif)}3、控制背景图象背景重复(background-repeat)P{background-repeat:no-repeat;background-image:url(background.gif)}如果你只想让图象垂直或者水平方向平铺，你可以使用repeat-x将其水平平铺，用repaet-y将其垂直平铺。而repeat参数值则将图象从水平和垂直两个方向平铺。固定背景（background－attachment）BODY{background-attachment:fixed;background-image:url(background.gif)}其参数有两种选择：scroll指背景图象随文字内容一起滚动，即通常所见的方式。fixed指文字滚动时，背景图象保持固定。背景定位(background-position)你可以设定将背景插在什么位置显示。P{background-position:centerbottom;background-image:url(background.gif)}设定位置的3种方法：关键字参数（Keywordvalues）关键字设定方法简便易用：top将背景图象同前景要素的顶部对齐。bottom将其同前景要素的底部对齐。left将其同左边对齐。right将其同右边对齐。center将其水平居中（如果使用在另一关键字前面）或垂直居中（如果用在另一关键字后面）。长度参数你可以设定水平和垂直定位起点，例：P{background-position:70px10px;background-repeat:repeat-y;background-image:url(background.gif)}比例值（Percentagevalues）例：P{background-position:75%50%;background-image:url(background.gif)}4、快捷特性利用快捷特性可以使你将学过的所有背景属性加到一个CSS规则中。背景（background）利用背景属性，你可以设定背景颜色、图象、平铺方法、固定及滚动显示及定位。例：P{background:url(background.gif)#CCFFCCrepeat-ytopright}本段应用了上述规则。你可以看到背景是浅绿色，背景图象只垂直平铺，第1次平铺的位置在右上角。