CSS基本样式规则讲稿.pptx

第十章 用CSS美化页面元素;用CSS设置丰富的文字效果;1.CSS文字样式;1.CSS文字样式;;;写一写 ;1.CSS文字样式;绝对单位;1.CSS文字样式;;1.CSS文字样式;;html head title文字大小_相对值/title style !-- p.one{ font-size:15px; /* 象素，因此实际显示大小与分辨率有关，很常用的方式 */ } p.one span{ font-size:200%; /* 在父标记的基础上200% */ } p.two{ font-size:30px; } p.two span{ font-size: 0.5em; /* 在父标记的基础上×0.5 */ } -- /style /head body p class=one文字大小span相对值/span，15px。/p p class=two文字大小span相对值/span，30px。/p /body /html;1.CSS文字样式;1.CSS文字样式;1.CSS文字样式;1.CSS文字样式;font设置综合字体属性;;2.模拟Google公司Logo实例;html head titleGoogle/title style !-- p{ font-size:80px; letter-spacing:-2px; /* 字母间距 */ font-family:Arial, Helvetica, sans-serif; } .g1, .g2{ color:#184dc6; } .o1, .e{ color:#c61800; } .o2{ color:#efba00; } .l{ color:#42c34a; } -- /style /head body pspan class=g1G/spanspan class=o1o/span span class=o2o/spanspan class=g2g/span span class=ll/spanspan class=ee/span/p /body /html;3.CSS 段落文字;text-indent首行缩进;letter-spacing字符间距;line-height行距属性;text-align水平对齐;Vertical-align垂直对齐;text-transform转换英文大小写;4.百度搜索实例;二、用CSS设置图片效果;html head title边框/title style !-- img.test1{ border-style:dotted; /* 点画线 */ border-color:#FF9900; /* 边框颜色 */ border-width:5px; /* 边框粗细 */ } img.test2{ border-style:dashed; /* 虚线 */ border-color:blue; /* 边框颜色 */ border-width:2px; /* 边框粗细 */ } -- /style /head body img src=banana.jpg class=test1 img src=banana.jpg class=test2 /body /html;图片边框;图片缩放;图片横向对齐方式;图片纵向对齐方式;图文混排;八仙过海实例;三、用CSS设置网页中的背景;页面背景色;用背景色给页面分块;用背景色给页面分块;页面背景图和背景颜色的重复;页面背景图和背景图的重复;页面背景图的位置;页面背景图的位置;固定背景图片;背景样式综合设置;综 合 练 习