ch3_CSS基础样式.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第,3,章,CSS,基础样式,主讲：,易丹,学习目标,掌握包含框边距、边框、填充样式的用法,掌握如何用样式表来布局页面,掌握背景颜色、背景图片样式的用法,掌握文本样式的用法,案例一：包含框样式,-1,知识点：,设置,CSS,文件的字符集为,utf-8,以便让该文件能支持中文,charset,utf-8;,知识点：,设置,标签边距，边距由,margin,属性进行设置，边距的值可以用像素,px,或行高,em,来表示。例如：,margin:30px;,设置边距为,30,像素,margin:2em;,设置边距为,2个行高,知识点：,分别设置,标签的上下左右边距。例如,margin-top:30px;,设置上边距为,30,像素,margin-bottom:1em;,设置下边距为,1,个行高,margin-left:20px;,设置左边距为,20,像素,margin-right:5px;,设置右边距为,5,像素,案例一：包含框样式,-2,知识点：,设置,标签边框样式，边框由边框大小、边框样式和边框颜色三个特性,组成，边框由,border,属性进行设置，例如：,border:6px solid blue;,设置一个大小为,6,个像素的直线型的蓝色边框,知识点：,分别设置,标签上下左右的边框样式，例如：,border-top:3px dashed#660099;,设置上边框样式,border-bottom:3px dashed#660099;,设置下边框样式,border-left:thin dotted red;,设置左边框样式,border-right-width:thin;,设置右边框大小为,thin,border-right-style:dotted;,设置右边框样式为,dotted,border-right-color:red;,设置右边框颜色为红色,案例一：包含框样式,-3,知识点：,设置,标签填充样式，填充由,padding,属性进行设置，填充的值可以用像素,px,或行高,em,来表示，注意：填充总是与内容本身的背景颜色相一致的，例如：,padding:0.5em;,设置填充为,0.5,个行高,设置,标签的背景颜色，有关背景颜色的知识我们将在后面的案例中进行,讲解，例如：,background-color:#FFFF99;,设置,标签的背景颜色为,#FFFF99,知识点：,使用,display,属性，可以改变元素的类型。该属性主要有,block,、,inline,、,none,三,个值，其中,block,表示块标签、,inline,表示内联标签、,none,表示不显示该标签的,内容，例如：,display:block,;,将标签设置为块标签,display:inline,将标签设置为内联标签,display:none,;,隐藏标签内容,案例一：包含框样式,-4,案例二：页面布局,-1,知识点,：,通过相对定位将网页内容居中，,CSS,中元素的定位方式是通过,position,属性来设置的，,常用的定位方式有以下三种：,相对定位：相对于其他元素，将当前元素放置在后面；,绝对定位：将元素放置于父元素的绝对位置上；,固定定位：将元素放置于整个网页的固定位置上。例如：,将当前元素摆放在相对于其他元素左边,5,像素，上边,5,像素的位置上,position:relative,;,left:5px;,top:5px;,将当前元素摆放在父元素之内，左边,5,像素，上边,5,像素的位置上,position:absolute,;,left:5px;,top:5px;,将当前元素摆放在网页内，左边,5,像素，上边,5,像素的位置上,position:fixed,;,left:5px;,top:5px;,案例二：页面布局,-2,知识点：,通过相对定位设置好网页头部、主体部分、底部三个部分的摆放位置,知识点：,以浮动的方式布局内容，例如：,float:left,;,浮动于父元素的左边,float:right,;,浮动于父元素的右边,知识点：,以绝对定位的方式布局内容，例如：,将当前元素摆放在父元素之内，左边,0,像素，上边,110,像素的位置上,position:absolute,;,left:0px;,top:110px;,案例二：页面布局,-3,案例三：文本及背景样式,-1,知识点,通过,background-image,属性为,标签添加背景图片，例如：,background-image:url(./images/bg1.gif);,设置,标签的背景图片为,bg1.gif,通过,background-repeat,属性来指定背景图片在屏幕上的平铺方式，其平铺方式有以下四种：,background-repeat:repeat-x;,只水平平铺,background-repeat:repeat-y;,只垂直平铺,background-repeat:repeat;,水平和垂直平铺,background-repeat:no-repeat;,背景图片只显示一次，不平铺,知识点：通过,background-color,属性为元素指定背景颜色，例如,background-,color:#CCCCCC,;,background-,color:red,;,案例三：文本及背景样式,-2,知识点：通过,background-position,属性指定背景图片摆放的位置，其摆放位置有以下,5,种,:,background-,position:top,;,将背景图片摆放在元素的顶部,background-,position:bottom,;,将背景图片摆放在元素的底部,background-,position:left,;,将背景图片摆放在元素的左边,background-,position:right,;,将背景图片摆放在元素的右边,background-,position:center,;,将背景图片摆放在元素的中间,知识点：通过,font-family,属性设置文字字体，例如：,font-family:,华文隶书,;,设置字体为“华文隶书”,通过,font-style,属性设置字体显示样式，其显示样式有以下两种：,font-,style:italic,;,以斜体的方式显示,font-,style:normal,;,以非斜体的方式显示,案例三：文本及背景样式,-3,知识点：,通过,color,属性设置文本颜色，例如：,color:#CC0066;,通过,font-size,属性设置文字大小，例如：,font-size:18px;,通过,line-height,设置文字的行高，例如：,line-height:28px;,line-height:2em;,line-height:200%;,案例三：文本及背景样式,-4,知识点：通过,font,属性设置文本的大小、字体等，例如：,font:16px,华文楷体,;,通过,font-weight,属性设置文本的粗细，例如：,font-weight:600;,font-,weight:bold,;,通过,text-decoration,属性来修饰文本以产生特殊效果，例如：,text-,decoration:underline,;,为文本添加下划线,text-,decoration:line,-through;,为文本添加删除线,通过,letter-spacing,属性来设置文字之间的间距，例如：,letter-spacing:3px;,设置文字间距为,3,个像素,通过,text-indent,属性设置文本缩进，例如：,text-indent:40px;,案例三：文本及背景样式,-5,知识点：通过,text-align,属性设置文本的对齐方式，其对齐方式有以下,4,种：,text-,align:center,;,文本居中对齐,text-,align:justify,;,文本两端对齐,text-,align:left,;,文本左对齐,text-,align:right,;,文本右对齐,小结,margin,、,border,、,padding,分别用来设置包含框边距、边框、填充,HTML,文档中常用的块标签包括,、,、,、,、,、,、,、以及,到,等标签；常用的内联标签有,、,、,、,、,、,等标签。,display,的,block,属性将标签设置为块标签；,inline,属性将标签设置为内联标签；,none,隐藏标签内容。,常用的定位方式有以下三种：,相对定位：相对于其他元素，将当前元素放置在后面；,绝对定位：将元素放置于父元素的绝对位置上；,固定定位：将元素放置于整个网页的固定位置上。,float,的,left,属性将元素移动到左边；,right,属性将元素移动到右边。,background,用来设置背景样式；,font,属性用来设置文字样式。,