样式表的各项属性.pptx

样式表的各项属性样式表的各项属性 l字体 l图文和布局 l颜色和背景 l定位 一、字体 1、CSS文字样式文字样式1.1 字体字体 1.2 文字大小文字大小 1.3 文字颜色文字颜色 1.4加重字体和斜体字的各种加重字体和斜体字的各种CSS方式方式1.5文字的文字的CSS特殊效果特殊效果 2、文字实例：模拟、文字实例：模拟Goole公司公司logo3、CSS段落文字段落文字4、段落实例：百度搜索、段落实例：百度搜索 1.1 字体字体 在CSS中通过font-family来控制文字的字体。h2font-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种关键字，相对应于中所用的数字参数：xx-small x-small small medium large x-large xx-large 1.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进制的表示方式：pcolor:#333333;第3种采用预定义的关键字，如bluep span color:blue;颜色名称 16种基本色为aqua,black,blue,fuchsia,gray,green,lime,maroon,navy,olive,purple,red,silver,teal,white,and yellow.Internet Explorer 4.0 支持的颜色支持的颜色.doc 1.4加重字体和斜体字的各种加重字体和斜体字的各种CSS方式方式 1)字体风格字体风格font-style是用来控制斜体字的属性：语法：语法：font-style:normal|italic|oblique 参数：参数：normal:正常的字体 italic:斜体。对于没有斜体变量的特殊字体，将应用oblique oblique:倾斜的字体示例示例：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 使所有继承的文字变形参数被忽略，文字将以正常形式显示。15文字的文字的CSS特殊效果特殊效果 2）文字修饰（）文字修饰（text-decoration)。其基本语其基本语法如下：法如下：B text-decoration:underline 以下为所有可用的参数：underline 给文字下划线，overline给文字上划线，line-through给文字划出删除线.blink 文字在闪烁（IE浏览器不支持）none使得上述效果都不会发生。2、文字实例：模拟、文字实例：模拟Goole公司公司logo示例3、段落实例：百度搜索、段落实例：百度搜索 示例二、布局二、布局l字间距 l字母间距 l行高 l文字对齐方式 l垂直对齐方式 l文字缩位 l顶边距左边距等 l空格填充顶部、左边等等 l边框宽度、颜色、样式等 l浮动 l清除 1、css控制字间距和字母间距控制字间距和字母间距 l字间距 l利用字间距属性，你可以在字之间加入更 多的距离：lH3 word-spacing:1em l你所使用的参数值将加入任何浏览器的缺省设置，你可以使用我们昨天谈到的任何 一种长度单位：lin（英寸）lcm（厘米）lmm（毫米）lpt（点数）lpc（打字机字间距）lem（ems）lex(x-height)lpx（象素）l字母间距 lH3 letter-spacing:10px 2、css行距行距 l行高 行高可以控制行与行之间的垂直距离。lB line-height:16pt l设定行高的方法：l长度单位 B font-size:12pt;line-height:11pt l比例 B font-size:10pt;line-height:140%3、css文字对齐文字对齐l文字对齐 l利用文字对齐属性，你可以控制段落的水平 对齐：lH4 text-align:center l这项属性只用于整块的内容，如、-、和。l以下为各种选项：lleft指将要素左对齐，如本段所示。指将要素左对齐，如本段所示。lcenter指将要素居中，如本段所示。指将要素居中，如本段所示。ljustify指将要素左右对齐，如本段所示。指将要素左右对齐，如本段所示。4、垂直对齐方式：、垂直对齐方式：vertical-align l示例5、首字放大（、首字放大（float）l首字放大（首字放大（float）lH4 float:left 6、css边距及空格填充边距及空格填充 lbox包括：l要素本身 l围绕要素的空格填充（padding）l围绕空格填充的边框（border）l围绕边框的边距（空白margin）l图示如下：l l你可以分别控制空格填充、边框和边距l顶边距、底边距、左边距和右边距 这4项属性可以使你控制一个要素的四周 的边距。如下：lH4 margin-top:20px;margin-bottom:5px;margin-left:100px;margin-right:55px 7、css边框边框 l顶边框宽度，底边框宽度，左边框宽度和 右边框宽度l你可以控制整个边框的宽度，也可以分别 控制每一边的边框宽度：lH4 border-top-width:2px;border-bottom-width:5px;border-left-width:1px;border-right-width:1px l边框颜色 l例：P border-color:green;border-width:3px l边框样式 l例：P border-style:double;border-width:3px l可以使用的关键字参数值如下：lsolid ldouble ldotted ldashed lgroove lridge linset loutset 三、背景三、背景l背景色 l背景图象 l重复背景 l固定背景 l背景定位 l背景 1、背景色、背景色 l背景色 l利用CSS在网页要素后面加入固定的背景色 及图象。lP.yellow background-color:#FFFF66 2、背景图象、背景图象 l背景图象背景图象 你可以很轻松地将GIF或JPEG图象加到一个要 素后面：lB background-image:url(background.gif)3、控制背景图象、控制背景图象 l背景重复(background-repeat)lP background-repeat:no-repeat;background-image:url(background.gif)l如果你只想让图象垂直或者水平方向平铺，你 可以使用repeat-x将其水平平铺，用repaet-y 将其垂直平铺。而repeat参数值则将图象从水 平和垂直两个方向平铺。l固定背景（backgroundattachment）lBODY background-attachment:fixed;background-image:url(background.gif)l其参数有两种选择：lscroll指背景图象随文字内容一起滚动，即通常所见的方式。lfixed指文字滚动时，背景图象保持固 定。l背景定位(background-position)l你可以设定将背景插在什么位置显示。lP background-position:center bottom;background-image:url(background.gif)设定位置的设定位置的3种方法：种方法：l关键字参数（Keyword values）关键字设定方法简便易用：ltop将背景图象同前景要素的顶部 对齐。lbottom将其同前景要素的底部对 齐。lleft将其同左边对齐。lright将其同右边对齐。lcenter将其水平居中（如果使用在 另一关键字前面）或垂直居中（如 果用在另一关键字后面）。l长度参数 你可以设定水平和 垂直定位起点，l例：P background-position:70px 10px;background-repeat:repeat-y;background-image:url(background.gif)l比例值（Percentage values）l例：P background-position:75%50%;background-image:url(background.gif)4、快捷特性、快捷特性 l利用快捷特性可以使你将学过的所有背景 属性加到一个CSS规则中。l背景（background）l利用背景属性，你可以设定背景颜色、图象、平铺方法、固定及滚动显示及定位。例：lP background:url(background.gif)#CCFFCC repeat-y top right l本段应用了上述规则。你可以看到背景是浅绿 色，背景图象只垂直平铺，第1次平铺的位置 在右上角。