第4课 用CSS设置图像与背景颜色ppt课件

第2章CSS选择器与相关特性 2 4复合选择器2 5CSS的继承特性 2 4复合选择器 2 4 1交集选择器 2 4 1交集选择器 图2 14交集选择器示意图 2 4 1交集选择器 p color blue 标记选择器 special color green 类别选择器 p special color red 标记 类别选择器 普通标题文本普通段落文本指定了 special类别的标题文本指定了 special类别的段落文本 p 2 4 2并集选择器 图2 16并集选择器示意图 h3 p 并集选择器 color purple 文字颜色 font size 15px 字体大小 2 4 2并集选择器 h1 h2 h3 p 并集选择器 color purple 文字颜色 font size 15px 字体大小 h2 special special one 集体声明 text decoration underline 下画线 示例文字h1示例文字h2示例文字h3示例文字p1示例文字p2示例文字p3 2 4 3后代选择器 后代选择器pspan color red 嵌套声明 span color blue 嵌套之外的标记 蓝色 不生效嵌套使用CSS 红色 标记的方法 2 4 3后代选择器 a background color FFFF00 navia text decoration none color FFFFFF fileseditseeformat 2 5CSS的继承特性 图2 20包含多层列表的页面 前沿Web开发教室Web设计与开发需要使用以下技术 HTMLCSS选择器盒子模型浮动与定位Javascript此外 还需要掌握 FlashDreamweaverPhotoshop如果您有任何问题 欢迎联系我们 图2 21继承关系树型图 2 6CSS的层叠特性 1 行内式 嵌入式 外部式 2 特殊性越高的元素 其样式的优先级越高 3 外部样式中 出现在后面的优先级高于出现在前面的 第6章用CSS设置文本和图象 6 1使用CSS设置文字样式6 2使用CSS设置图象样式6 3使用CSS设置背景样式 6 2用CSS设置图象样式 6 2 1设置图片边框 Border widthBorder colorBorder style 6 2 2图片缩放 WidthHeight 6 2 3图文混排 Float 6 2 4制作八大行星科普网页实例6 2 5设置图片与文字的对齐方式 6 2 1设置图片边框 边框的样式用border style来定义一个边框由3个要素组成 1 border width 粗细 可以使用各种CSS中的长度单位 最常用的是像素 2 border color 颜色 可以使用各种合法的颜色来定义颜色 3 border style 线型 可以在一些预先定义好的线型中选择 6 2 1设置图片边框 test1 border width 4px 边框粗细 border color 996600 边框颜色 border style dotted 点画线 test2 border 2pxbluedashed 其显示效果如图所示 2 为不同的边框分别设置样式 如果希望分别设置4条边框的不同样式 可用以下属性 border topborder rightborder bottomborder left分别设定左 右 上 下4条边框 在使用时 依然是每条边框分别设置粗细 颜色和线型这3项 6 2 2图片缩放 图片缩放img test1 width 50 相对宽度 6 2 3图文混排 1 文字环绕在CSS中主要是通过给图片设置float属性来实现文字环绕 6 2 3图文混排 图文混排body background color EAECDF margin 0px padding 0px img float right 文字环绕 p color 000000 文字颜色 margin 0px padding top 10px padding left 5px padding right 5px span float left 首字放大 font size 60px font family 黑体 margin 0px padding right 5px 6 2 3图文混排 6 2 4制作八大行星科普网页实例 图6 23八大行星页面 6 2 5设置图片与文字的对齐方式 1 横向对齐方式图片水平对齐的方式与上一章中文字水平对齐的方式基本相同 分为左 中 右3种 不同的是图片的水平对齐通常不能直接通过设置图片的text align属性 而是通过设置其父元素的该属性来实现的 6 2 5设置图片与文字的对齐方式 水平对齐 p1 text align left p2 text align center p3 text align right 6 2 5设置图片与文字的对齐方式 图6 26水平对齐 2 纵向对齐方式 有如下代码 lpsum 图11 27默认的纵向对齐方式 2 纵向对齐方式 由此可以得出结论 在默认情况下 行内的图像的最下端 将与同行的文字的基线对齐 图6 28图像与文字基线对齐 2 纵向对齐方式 用vertical align属性 lpsum 2 纵向对齐方式 图6 30图像与文字顶端对齐 6 3用CSS设置背景样式 6 3 1设置背景颜色 Background color 6 3 2设置背景图像 Background image 6 3 3设置背景图像平铺 Background repeat 6 3 4设置背景图像位置 Background position 6 3 5设置背景图像位置固定 Background attachment 6 3 6设置标题的图像替换 6 3 1设置背景颜色 在CSS中 网页元素的背景颜色使用background color属性来设置 属性值为某种颜色 6 3 2设置背景图像 设置背景图像使用background image属性实现 body background image url bg gif 在默认情况下 图像会自动向水平和竖直两个方向平铺 6 3 3设置背景图像平铺 如果不希望平铺 或者只希望沿着一个方向平铺 可以使用background repeat属性来控制 repeat 沿水平和竖直两个方向平铺 这也是默认值 no repeat 不平铺 只显示一次 repeat x 只沿水平方向平铺 repeat y 只沿竖直方向平铺 6 3 3设置背景图像平铺 首先准备一个图像 然后 对body元素设置如下CSS样式 body background image url bg gif background repeat repeat x 6 3 3设置背景图像平铺 6 3 4设置背景图像位置 当背景图像不平铺时 默认位置为左上角 可用background position属性来设置背景图像的位置 如 body background image url bg gif background repeat no repeat background position rightbottom background position 200px100px background position 30 60 6 3 5设置背景图像位置固定 网页的背景图像会随滚动条的移动而移动 使用background attachment属性可将背景图像位置固定 如 body background ima