第4课 用CSS设置图像与背景颜色_第1页
第4课 用CSS设置图像与背景颜色_第2页
第4课 用CSS设置图像与背景颜色_第3页
第4课 用CSS设置图像与背景颜色_第4页
第4课 用CSS设置图像与背景颜色_第5页
已阅读5页，还剩36页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第2章CSS选择器与相关特性2.4复合选择器2.5CSS的继承特性2.4

复合选择器2.4.1

交集选择器2.4.1交集选择器图2.14交集选择器示意图2.4.1交集选择器<styletype="text/css">p{color:blue; /*标记选择器*/}.special{color:green; /*类别选择器*/}p.special{color:red; /*标记.类别选择器*/}</style></head><body><h3>普通标题文本</h3><p>普通段落文本</p><h3class="special">指定了.special类别的标题文本</h3><pclass="special">指定了.special类别的段落文本/p></body>2.4.2

并集选择器图2.16并集选择器示意图h3,p{ /*并集选择器*/color:purple; /*文字颜色*/font-size:15px; /*字体大小*/}2.4.2并集选择器<styletype="text/css">h1,h2,h3,p{ /*并集选择器*/

color:purple; /*

文字颜色*/font-size:15px; /*

字体大小*/}h2.special,.special,#one{ /*集体声明*/text-decoration:underline;/*下画线*/}</style></head><body><h1>示例文字h1</h1><h2class="special">示例文字h2</h2><h3>示例文字h3</h3><p>示例文字p1</p><pclass="special">示例文字p2</p><pid="one">示例文字p3</p></body></html>2.4.3后代选择器<html><head><title>后代选择器</title><styletype="text/css">p

span{color:red;

/*

嵌套声明*/}span{color:blue;}</style></head><body><h3>嵌套之外的<span>标记（蓝色）</span>不生效</h3><p>嵌套使<span>用CSS（红色）</span>标记的方法</p></body></html>2.4.3后代选择器a{background-color:#FFFF00;}#navia{text-decoration:none;color:#FFFFFF;}</style></head><body><ahref="first.html"<imgsrc="images/title.gif"/><divid="navi"><ahref="#">files</a><ahref="#">edit</a><ahref="#">see</a><ahref="#">format</a></div></body>2.5CSS的继承特性

图2.20包含多层列表的页面<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>

<li>Flash</li> <li>Dreamweaver</li> <li>Photoshop</li> </ol>

</li></ul>

<p>如果您有任何问题，欢迎联系我们</p></body>

图2.21继承关系树型图2.6

CSS的层叠特性

（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设置图片边框<styletype="text/css">.test1{border-width:4px; /*边框粗细*/border-color:#996600;/*边框颜色*/border-style:dotted; /*

点画线*/}.test2{border:2pxbluedashed;}</style><body><imgsrc="cup.gif"class="test1"> <imgsrc="cup.gif"class="test2"></body>

其显示效果如图所示。2．为不同的边框分别设置样式如果希望分别设置4条边框的不同样式，可用以下属性:border-topborder-rightborder-bottomborder-left分别设定左、右、上、下4条边框。在使用时，依然是每条边框分别设置粗细、颜色和线型这3项。6.2.2

图片缩放

<html><head><title>图片缩放</title><style>img.test1{width:50%; /*相对宽度*/}</style></head><body><imgsrc="pear.jpg"class="test1"></body></html>6.2.3图文混排

1．文字环绕在CSS中主要是通过给图片设置float属性来实现文字环绕。

6.2.3图文混排<html><head><title>图文混排</title><styletype="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;/*首字放大*/font-size:60px;font-family:黑体;margin:0px;padding-right:5px;}</style></head><body><imgsrc="zcz.jpg"border="0">…</body></html>6.2.3图文混排

6.2.4

制作八大行星科普网页实例

图6.23八大行星页面6.2.5

设置图片与文字的对齐方式

1．横向对齐方式图片水平对齐的方式与上一章中文字水平对齐的方式基本相同，分为左、中、右3种。不同的是图片的水平对齐通常不能直接通过设置图片的text-align属性，而是通过设置其父元素的该属性来实现的。

6.2.5设置图片与文字的对齐方式<html><head><title>水平对齐</title><styletype="text/css">#p1{text-align:left}#p2{text-align:center}#p3{text-align:right}</style></head><body> <pid="p1"><imgsrc="cup.gif"></p> <pid="p2"><imgsrc="cup.gif"></p> <pid="p3"><imgsrc="cup.gif"></p></body></html>6.2.5设置图片与文字的对齐方式

图6.26水平对齐2．纵向对齐方式

有如下代码：

<p><img

src="demo.jpg">lpsum</p>图11.27

默认的纵向对齐方式2．纵向对齐方式

由此可以得出结论，在默认情况下，行内的图像的最下端，将与同行的文字的基线对齐。图6.28图像与文字基线对齐

2．纵向对齐方式用vertical-align属性。<p><img

src="demo.jpg"style="vertical-align:text-middel;">lpsum</p>

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-

人人文库> 全部分类> 教育资料 > 中学教育

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论