揭秘CSS(第 1 版)
11.3.6 嵌入对象
阅读(

概述

CSS选择器

字体和文本

盒模型

元素的定位

链接和导航

表格和表单

变换、过渡和动画

布局

解决跨浏览器问题

构建网页版WORD

布局设计

目录树设计

正文设计

超链接

表格

列表

段落

正文设计

嵌入对象

在网页中嵌入对象,实际上并不会在网页中插入对象,而是通过某种标签链接到指定的对象,标签创建的只是被引用对象的占位符而已。

嵌入式对象主要包括图片、视频、音频、文档等,不同的对象使用不同的标签,并具有不同的样式,本节重点介绍如何控制不同对象的样式,而标签的使用方法不是本节的重点。

图片

使用 img 元素,可以在网页中嵌入一幅图片,并通过CSS的width 和height 属性来定义图片的宽度和高度。定义图片尺寸时,可以使用绝对单位,也可以使用百分比。如:

img  {
    width: 200px;
    height: 200px;
}

使用百分比时,图片的宽度根据元素的 width 计算得到,图片的高度根据元素的 height 计算得到。如,设置图片的width 属性值为 50%,图片的宽度将是父元素宽度的一半。

如果同时定义了 width 和 height 属性,在 width 和height 的比值与图片本身的宽高比不相等时,图片就会在某个方向上被拉伸或压缩,使图片失真。所以,在定义图片尺寸时,建议只定义 width 和 height 中的某个属性,这样的话,浏览器就会按照图片本身的尺寸,按比例进行缩放,图片就不会失真。

当然,也可以不设置图片的宽度和高度,这样的话,图片将按原本的尺寸显示。不过,最好在CSS中作如下声明:

img  {
    max-width: 100%;
}

这样的话,图片就会随着布局自动缩放,当放大到容器的宽度后,图片就会停止放大,可以防止图片尺寸过大而撑破容器。

页面上的 img 元素也是一个盒子,也可以设置边框,既可以使用线条边框,也可以使用图像边框,并支持圆角和盒阴影,可以根据需要或个人喜好进行设置。

网页中,使用一副孤零零图像的情况很少,大多数情况下,一副图像是具有一定上下文关系的,它有标题、背景介绍、内容说明等。这时,就需要使用 figure 元素来定义一个图片单元,在图片单元中,用 img 元素来定义图片,用 figcaption 元素来定义图片的标题。

<figure>
<img src="img/gossip.jpg" />
<figcaption>八卦图</figcaption>
</figure>

figure 是块级元素,要使 figure 水平居中,只需设置 margin: 0 auto即可。默认情况下,图片和标题都是左对齐,如果要使图片及标题水平居中,为 figure 元素设置 text-align: center即可。

figure {
    margin: 0 auto;
    text-align: center;
}

在word中,图片的标题一般使用黑体,并加粗显示。在这里,为图片标题中的数字使用Georgia字体,这是报表中经常使用的字体,因为它有点艺术范儿。

figcaption {
    font-weight: bold;
    font-family: Georgia, SimHei;
}

上述方法都是使用嵌入的方式向网页插入图片,而在 word 及报纸、杂志等传统的印刷布局中,文本还可以按照需要围绕图像。在网页中,图文混排时,常常需要“文本环绕”的排版形式。

在CSS中,要实现“文本环绕”的效果,只需为图片元素应用 float 属性即可。这里使用 figure 元素来定义图片单元,使用 p 元素来定义文本,并把图片和文本放在一个容器中。

<figure>
<img src="img/gossip.jpg" />
<figcaption>八卦图</figcaption>
</figure>
<p>八卦是中国道家文化的深奥哲学概念,八卦的形成源于…</p>
<p>根据史料记载,八卦起源于三皇五帝之首的伏羲,伏羲氏在天水卦台…</p>
</div>

如果需要图像在左侧,文本在右侧环绕图片,只需把 figure 或 img(在使用 img 元素定义图片时)的 float 属性值设置为 left 即可。

figure  {
    float: left;
}

运行效果如图 11-18 所示:

文本环绕效果
图11-18 文本环绕效果

同理,如果需要图像在右侧,文本在左侧环绕图片,就要把 figure 或 img 的 float 属性值设置为 right。

使用 float 的好处是,当调整图片尺寸时,文本也将自动调整位置。也可以使容器使用相对定位,图片使用绝对定位来实现同样的布局。但使用这种方式,文本不受图片尺寸的影响,也不会随图片的尺寸自动调整位置。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验