网页美化_DIV层_CSS样式[精选].ppt

CSS样式实例——内部样式表 HTML HEAD STYLE type=text/css H1.mylayout {border-width: 1; border: solid; text-align: center;color:red} /STYLE /HEAD BODY H1 class=mylayout 这个标题使用了Style。/H1 H1这个标题没有使用Style。/H1 /BODY /HTML CSS样式实例——内部样式表 HTML HEAD TITLEGeneric Class Selector /title STYLE TYPE=text/css .center {text-align:center} /STYLE /HEAD h1 class = center这个标题居中显示。/h1 p class = center这个段落居中显示。/p /BODY /HTML CSS样式实例——外部样式表 HTML HEAD link href=../asdocs/css_tutorials/home.css rel=stylesheet type=text/css /HEAD BODY H1 class=mylayout 这个标题使用了Style。/H1 H1这个标题没有使用Style。/H1 /BODY /HTML CSS样式实例——背景颜色属性 html head title背景颜色 background-color/title style type=text/css body {background-color:#99FF00;} /style /head body p这个HTML使用了CSS的background-color属性，将HTML的背景颜色变成翠绿色。p /body /html CSS样式实例——背景重复属性 html head title背景重复 background-repeat/title style type=text/css body {background-image:url(../images/css_tutorials/background.jpg); background-repeat:repeat-y} /style /head body p这个HTML使用了CSS的background-repeat属性，使背景图片竖向重复。p p常用的background-repeat的属性值有: repeat-x(横向重复)，repeat-Y(横向重复), no-repeat(不重复)。/p pbackground-repeat属性要和background-image一起用。/p /body /html CSS样式实例——边距属性 HTML HEAD TITLECSS边距属性 margin/TITLE STYLE type=text/css .D1{border:1px solid #FF0000;} .D2{border:1px solid gray;} .D3{margin:0.5cm 1cm 2.5cm 1.5cm;border:1px solid gray;} /STYLE /HEAD BODY DIV CLASS=D1 DIV CLASS=D2没有margin/DIV /DIV P上面两个div没有设置边距属性(margin)，仅设置了边框属性(border)。外面那个div的border设为红色，里面那个div的border属性设为灰色。/P P和上面两个div的CSS属性设置不同的是，下面两个div中，里面的那个div设置了边距属性(margin)，设定上边距为0.5cm，右边距为1cm，下边距为2.5cm，左边距为1.5cm。/P DIV CLASS=D1 DIV CLASS=D3上下左右边距宽度各不同/DIV /DIV /BODY /HTML CSS样式实例——文本修饰属性 html head title文本修饰属性 text-decoration/title style type=text/css .p1{text-decoration: none} .p2 {text-decoration: underline} .p3{text-decoration: line-through} .p4 {text-decoration:overline} /style /head body p class = p1文本修饰属性(text-decoration)的缺省值是none。/p p class = p2这段的文本修饰属性(text-decoration)值是underline。/p p class = p3这段的文本修饰属性(text-decorati