用CSS设置图像与背景颜色

合集下载

相关主题

背景颜色透明度和css

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

18
6.2.3 图文混排
1．文字环绕在CSS中主要是通过给图片设置float属
性来实现文字环绕。
19
6.2.3 图文混排
<html> <head> <title>图文混排</title> <style type="text/css"> 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;/* 首字放大 */
21
6.2.4 制作八大行星科普网页实例
图6.23 八大行星页面 22
6.2.5 设置图片与文字的对齐方式
1．横向对齐方式
图片水平对齐的方式与上一章中文字水平对齐的方式基本相同，分为左、中、右3种。
不同的是图片的水平对齐通常不能直接通过设置图片的text-align属性，而是通过设置其父元素的该属性来实现的。
竖直两个方向平铺。
32
6.3.3 设置背景图像平铺
如果不希望平铺，或者只希望沿着一个方向平铺，可以使用background-repeat 属性来控制。
repeat：沿水平和竖直两个方向平铺，这也是默认值。
no-repeat：不平铺，只显示一次。 repeat-x：只沿水平方向平铺。 repeat-y：只沿竖直方向平铺。
</html>
24
6.2.5 设置图片与文字的对齐方式
图6.26 水平对齐 25
2．纵向对齐方式
有如下代码： <p><img src="demo.jpg">lpsum </p>
图11.27 默认的纵向对齐方式
26
2．纵向对齐方式
由此可以得出结论，在默认情况下，行内的图像的最下端，将与同行的文字的基线对齐。
17
6.2.2 图片缩放
<html> <head> <title>图片缩放</title> <style> img.test1{width:50%; } </style>
</head> <body>
<img src="pear.jpg" </body> </html>
/* 相对宽度 */ class="test1">
text-decoration:underline;
/* 下画线 */
}
</style>
</head>
<body>

<h1>示例文字h1</h1>
<h2 class="special">示例文字h2</h2>
<h3>示例文字h3</h3>
<p>示例文字p1</p>
<p class="special">示例文字p2</p>
<p class="special">指定了.special类别的段落文本/p>
</body>
4
2.4.2 并集选择器
h3, p{ color:purple; font-size:15px;
}
/*并集选择器*/ /* 文字颜色 */ /* 字体大小 */
h3
.special
h3 , .special
6.3.1 设置背景颜色(Background-color ) 6.3.2 设置背景图像(Background-image) 6.3.3 设置背景图像平铺(Background-repeat) 6.3.4 设置背景图像位置(Background-position) 6.3.5 设置背景图像位置固定(Background-
font-size:60px; font-family:黑体; margin:0px; padding-right:5px; } </style> </head> <body> <img src="zcz.jpg" border="0"> … </body> </html>
20
6.2.3 图文混排
第2章 CSS选择器与相关特性
2.4 复合选择器 2.5 CSS的继承特性
1
2.4 复合选择器
2.4.1 交集选择器
2
2.4.1 交集选择器
h3 h3.special .special
图2.14 交集选择器示意图
3
2.4.1 交集选择器
<style type="text/css">
p{color:blue;
8
2.5 CSS的继承特性
<body> <h1>前沿<em>Web开发</em>教室</h1> <ul> <li>Web设计与开发需要使用以下技术： <ul> <li>HTML</li> <li>CSS <ul> <li>选择器</li> <li>盒子模型</li> <li>浮动与定位</li>
</ul> </li> <li>Javascript</li> </ul> </li> <li>此外，还需要掌握： <ol>
/* 标记选择器 */
}
.special{color:green;
/* 类别选择器 */
}
p.special{color:red;
/* 标记.类别选择器 */
}
</style>
</head>
<body>
<h3>普通标题文本</h3>
<p>普通段落文本</p>
<h3 class="special">指定了.special类别的标题文本</h3>
attachment) 6.3.6 设置标题的图像替换()
30
6.3.1 设置背景颜色
在CSS中，网页元素的背景颜色使用 background-color属性来设置，属性值为某种颜色。
31
6.3.2 设置背景图像
设置背景图像使用background-image 属性实现。
body{background-image:url(bg.gif); } 在默认情况下，图像会自动向水平和
}
</style>
<body>
<img src="cup.gif" class="test1">
<img src="cup.gif" class="test2">
</body>
15
其显示效果如图所示。
16
2．为不同的边框分别设置样式
如果希望分别设置4条边框的不同样式，可用以下属性:
border-top border-right border-bottom border-left 分别设定左、右、上、下4条边框。在使用时，依然是每条边框分别设置粗细、颜色和线型这3项。
</head>
<body>
<h3>嵌套之外的<span>标记（蓝色）</span>不生效</h3>
<p>嵌套使<span>用CSS（红色）</span>标记的方法</p>
</body>
</html>
7
2.4.3 后代选择器
a{background-color:#FFFF00; } #navi a{text-decoration:none; color:#FFFFFF; } </style> </head> <body>
li ul
p li
li
li
li
ol
ul
li
li
li
li
li
li
图2.21 继承关系树型图
10
2.6 CSS的层叠特性
（1）行内式>嵌入式>外部式。（2）特殊性越高的元素，其样式的优先级越
高。（3）外部样式中，出现在后面的优先级高于
出现在前面的。
11
第6章用CSS设置文本和图象
6.1使用CSS设置文字样式 6.2使用CSS设置图象样式 6.3使用CSS设置背景样式
<p id="one">示例文字p3</p>
</body>
</html>
6
2.4.3 后代选择器
<html>
<head>
<title>后代选择器</title>
<style type="text/css">
p span{color:red;
/* 嵌套声明 */
}
span{color:blue;
}
</style>
图6.28 图像与文字基线对齐
27
2．纵向对齐方式
用vertical-align属性。 <p><img src="demo.jpg" style="vertical-
align:text-middel;">lpsum </p>
28
2．纵向对齐方式
图6.30 图像与文字顶端对齐
29
6.3 用CSS设置背景样式
14
6.2.1 设置图片边框
<style type="text/css">
.test1{
border-width:4px;
/* 边框粗细 */
border-color:#996600;
/* 边框颜色 */
border-style:dotted;
/* 点画线 */
}
.test2{
border:2px blue dashed;
6.2.1 设置图片边框
边框的样式用border-style来定义一个边框由3个要素组成。
（1）border-width（粗细）：可以使用各种CSS中的长度单位，最常用的是像素。（2）border-color（颜色）：可以使用各种合法的颜色来定义颜色。（3）border-style（线型）：可以在一些预先定义好的线型中选择。
<li>Flash</li> <li>Dreamweaver</li> <li>Photoshop</li> </ol> </li> </ul> <p>如果您有任何问题，欢迎联系我们</p> </body>
图2.20 包含多层列表的页面 9
html
head title
子
h1
父
子
em
父 body ul
33
6.3.3 设置背景图像平铺
首先准备一个图像。然后，对body元素设置如下CSS样式.
body{background-image:url(bg.gif); background-repeat:repeat-x; }
34
6.3.3 设置背景图像平铺
35
6.3.4 设置背景图像位置
当背景图像不平铺时，默认位置为左上角。可用background-position属性来设置背景图像的位置。如： body{background-image:url(bg.gif);
<a href="first.html"<img src="images/title.gif" /> <div id="navi">
<a href="#">files</a> <a href="#">edit</a> <a href="#">see</a> <a href="#">format</a> </div> </body>
background-repeat:no-repeat; background-position：right bottom; background-position：200px 100px; background-position：30% 60%; }
36
6.3.5 设置背景图像位置固定
网页的背景图像会随滚动条的移动而移动，使用background-attachment属性可将背景图像位置固定。如：
body{background-image:url(bg.gif); background-repeat:no-repeat; background-position：30% 60%; background-attachment：fixed;
图2.16 并集选择器示意图
5
2.4.2 并集选择器
<style type="text/css">
h1, h2, h3, p{
/*并集选择器*/
color:purple;
/* 文字颜色 */
font-size:15px;
/* 字体大小 */
}
h2.special, .special, #one{
/* 集体声明 */
23
6.2.5 设置图片与文字的对齐方式
<html> <head> <title>水平对齐</title> <style type="text/css"> #p1{text-align:left} #p2{text-align:center} #p3{text-align:right} </style> </head> <body> <p id="p1"><img src="cup.gif"></p> <p id="p2"><img src="cup.gif"></p> <p id="p3"><img src="cup.gif"></p> </body>