CSS样式在网页中的应用.ppt

例：透明效果OPACITY属性的使用 例: 用样式设计文本的缩进属性 html headtitle文本的缩进属性/title style type=text/css .a1{text-indent:2em;} .a2{text-indent:-2em;} .a3{text-indent:-2em; margin:2em} /style/head body bgcolor=ffffff p class=a1常用的缩进方式是首行缩进/p p class=a2如果我们把属性值取为负值时，这就是悬挂缩进。首行文字左移一段距离后可能看不见。/p p class=a3这是设置左边距后的悬挂缩进效果/p !2em缩进单位--br !margin距离框边缘的位置-- !不要在Style中加注释-- /body/html 注：关于单位在后面讲解 例：用样式设计文本的对齐属性 html headtitle文本的对齐属性/title style type=text/css .left{text-align:left} .center{text-align:center} .right{text-align:right} /style/head body bgcolor=ffffff p class=leftNow let us look a sample./p p class=centerthat shows.p/ p class=rightsome text is left for body./p table width=180 border=3 trtd div class=right Yet this samplebr that showsbr all text in table is right./div /td/tr/table /body/html 4. 框边界属性 Width,height,float,clear等 设置元素的宽度、高度 框位置 Padding-bottom,padding-top等 控制位置的元素 Padding Border-wight,border-style,border-color,border 边框宽度、颜色、样式 Border Margin-bottom,margin-top,margin-left,margin-right 控制一个元素在页面上的位置 Margin 属性值 含 义 属性名 例：框边界属性的用法 html headtitle方框属性的用法/title style type=text/css p{background-color:#ddeeff; margin-top:10; margin-right:30; margin-bottom:10; margin-left:30; border-width:20pt; border-style:groove; border-color:lightblue; padding:20pt ; width:500; height:350; } img.float{float:left;}! Float为定义图片的样式名和对齐方式 img.nofloat{clear:both}!同上，定义图片文字上下排列 /style/head （代码未完，接下页） body table border=1 trtd p这是本段的开始文字！本行距段边框20pt。brbr img class=float src=image1.jpg这些文字应该围绕图像右边显示。 左边是一幅图像。br img class=nofloat src=image2.jpgbr这些 这些文字不围绕在图像两边。/p/td /tr/table /body/html （接上页） 5. 列表属性（分级属性） 前面的: List-style-image, List-style-position, List-style-space 综合设置项目属性 List-style Block, inline, ist-item, one 设定显示方式 Display Normal, pre, nowrap 决定一个元素如何处理空白部分 List-style-space Outside, inside 设置项目符号是否在文字里面，与文字对齐 List-style-position url,none 使用图像作项目符号 List-style-image Disc,circle,square,decimal,lowerroman,upper-rom