《CSS网页设计》课件——第6章用CSS设置文本和图像
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
图6.17 设置各种图片边框
2．为不同的边框分别设置样式
上面的设置方法对一幅图片的4条边框 同时产生作用。
如果希望分别设置4条边框的不同样式， 在CSS中也是可以实现的，只需要分别设定 border-left、border-right、border-top 和border-bottom的样式即可，依次对应于 左、右、上、下4条边框。
font-style:oblique;
图6.4 设置文本倾斜后的效果
6.1.4 设置文字的加粗效果
然而遗憾的是，实际上大多数操作系 统和浏览器还不能很好地实现非常精细的 文字加粗设置，通常只能设置“正常”和 “加粗”两种粗细，分别如下。
font-weight:normal
/*正常*/
font-weight:bold
#p2{ text-indent:2em;
}
这里再举一个不太常用的例子，如果 希望首行不是缩进，而是凸出一定距离， 也称为“悬挂缩进”，请看如下代码，实 例文件为“06-09.html”。
#p2{
padding-left:2em;
text-indent:-2em;
}
图6.9 设置段落中首行文本缩进
width:50%;
/* 相对宽度 */
}
</style> </head> <body>
<img src="pear.jpg" </body> </html>
class="test1">
6.2.3 图文混排
Word中文字与图片有很多排版的方式， 在网页中同样可以通过CSS设置实现各种图 文混排的效果。
在HTML中，设置文字的字体需要通过 <font>标记的face属性。
而在CSS中，则使用font-family属性。 针对上述网页，在样式部分增加对<p>标记 的样式设置如下，实例文件为“0602.html”。
<style type="text/css"> h1{ font-family:黑体; } p{ font-family: Arial, "Times New Roman"; }
当设置该值为0时，则显示为没有边框。
代码如下所示： <img src="img.jpg" border="0"> <img src="img.jpg" border="2">
然而使用这种方法存在很大的限制， 即所有的边框都只能是黑色，而且风格十 分单一，都是实线，只是在边框粗细上能 够进行调整。
/*加粗*/
6.1.5 转换英文字母大小写
例如下面3个文字段落分别可以实现单 词的首字母大写、所有字母大写和所有字 母小写。
p.one{ text-transform:capitalize; } /* 单词首字母大写 */
p.two{ text-transform:uppercase; } /* 全部大写 */
图6.21 修改后的文字环绕效果
6.2.4 制作八大行星科普网页实例
图6.23 八大行星页面
第6 章 用CSS设置文本和图像
6.1
使用CSS设置文本样式
6.2
用CSS设置图像样式
6.3
用CSS设置背景样式
前文介绍了CSS设计中必须了解的4个 核心基础——盒子模型、标准流、浮动和 定位。
有了这4个核心的基础，从本章开始逐 一介绍网页设计的各种元素，例如文本、 图像、链接、表格，如何使用CSS来进行样 式设置。
}
图6.13 为段落增加边框
图6.14 调整段落间距后的效果
6.1.12 控制文本的水平位置
表6.4 text-align属性设置
Left right center justify
设置值
说明 左对齐，也是浏览器默认的 右对齐 居中对齐 两端对齐
图6.15 标题居中对齐
6.1.13 设置文字与背景的颜色
（2）border-color（颜色）：可以使 用各种合法的颜色来定义方式。
（3）border-style（线型）：可以在 一些预先定义好的线型中选择。
下面给出一个简单的案例，说明使用 CSS设置边框的方法。
实例文件为“06-15.html”。
<style type="text/css">
.test1{
</style>
图6.2 设置正文字体
6.1.3 设置文字的倾斜效果
图6.3 正常字体与“意大利体”，及“倾斜体”的对比
CSS中的font-style属性正是用来控制 字体倾斜的，它可以设置为“正常”、 “意大利体”和“倾斜”3种样式，分别如 下：
font-style:normal;
font-style:italic;
}
span{
float:left;
/* 首字放大 */
font-size:60px;
font-family:黑体;
margin:0px;
padding-right:5px;
}
</style> </head>
<body> <img src="zcz.jpg" border="0">
图6.20 文字环绕
本节介绍CSS图文混排的具体方法。
1．文字环绕
文字环绕图片的方式在实际页面中的 应用非常广泛，如果再配合内容、背景等 多种手段便可以实现各种绚丽的效果。
在CSS中主要是通过给图片设置float 属性来实现文字环绕，如下例所示。
代码如下，实例文件为“0618.html”。
<html> <head> <title>图文混排</title> <style type="text/css"> body{
}
图6.16 设置标题背景颜色和文字颜色
6.2 用CSS设置图像样式
图片是网页中不可缺少的内容，它能 使页面更加丰富多彩，能让人更直观地感 受网页所要传达给浏览者的信息。
本节详细介绍CSS设置图片风格样式的 方法，包括图片的边框、对齐方式和图文 混排等，并通过实例综合讲解文字和图片 的各种运用。
第1种方式是使用颜色的英文名称作为 属性值。
第2种方式是最常用一个6位的十六进 制数值表示。
第3种方式是第2种方式的简写方式， 形如#aabbcc的颜色值，就可以简写为#abc。
第4种方式是分别给出红绿蓝3种颜色 分量的十进制数值。
第5种方式是分别给出红绿蓝3种颜色 分量的百分比。
h1{ background:#678; color:white;
设置值
line-through
overline blink
说明 正常显示 为文字加下划线 为文字加删除线 为文字加顶线 文字闪烁，仅部分浏览器支持
6.1.8 设置段落首行缩进
Text-indent属性是以各种长度为属性 值，为了缩进两个字的距离，最经常用的 是“2em”这个距离。
例如，对网页代码的p2段落进行如下 设置，实例文件为“06-08.html”。
图6.10 设置段落中首行文本悬挂缩进
6.1.9 பைடு நூலகம்置字词间距
在CSS中，可以通过letter-spacing和 word-spacing这两个属性分别控制字母间 距和单词间距。例如下面的代码，实例文 件为“06-10.html”。
#p1{ font-style:italic; text-transform:capitalize; word-spacing:10px; letter-spacing:-1px;
border-style:dotted; /* 点画线 */
border-color:#996600; /* 边框颜色 */
border-width:4px;
/* 边框粗细 */
}
.test2{ border-style:dashed; /* 虚线 */ border-color:blue; /* 边框颜色 */ border-width:2px; /* 边框粗细 */
图6.5 设置英文单词的大小写形式
6.1.6 控制文字的大小
p{ font-family: Arial, "Times New Roman";
font-size:12px;}
图6.6 设置了正文文字的大小为12像素
6.1.7 设置文字装饰效果
表6.2 text-decoration属性设置
none underline
在使用时，依然是每条边框分别设置 粗细、颜色和线型这3项。
例如，设置有边框的颜色，那么相应 的属性就是border-right-color，因此这 样的属性共有12（4 × 3 = 12）个。
6.2.2 图片缩放
<html>
<head>
<title>图片缩放</title>
<style>
img.test1{
文字的各种颜色配合其他页面元素组 成了整个五彩缤纷的页面，在CSS中文字颜 色是通过color属性设置的。
下面的几种方法都是将文字设置为蓝 色，它们是完全等价的定义方法。
h3{ color: blue; } h3{ color: #0000ff; } h3{ color: #00f; } h3{ color: rgb(0,0,255); } h3{ color: rgb(0%,0%,100%); }
p.three{ text-transform:lowercase; } /* 全部小写 */
对上述网页代码的#p1和#p2两个段落 分别设置如下，实例文件为“0604.html”。
#p1{ font-style:italic; text-transform:capitalize; } #p2{ text-transform:lowercase; }
}
</style> <body> <img src="cup.gif" class="test1"> <img src="cup.gif" class="test2"> </body>
其显示效果如图6.17所示，第1幅图片 设置的是金黄色、4像素宽的点画线，第2 幅图片设置的是蓝色、2像素宽的虚线。
百分比
相对于font-size的百分比
6.1.11 设置段落之间的距离
下面介绍如何控制段落之间的距离。 例如为<p>标记增加一条CSS样式，目 的是给两个段落分别增加1像素粗细的红色 实线边框，代码如下，实例文件为“0612.html”。
p{ border:1px red solid;
}
p{ border:1px red solid; margin:5px 0px;
6.1 使用CSS设置文本样式
在学习HTML的时候，通常也会使用 HTML对文本进行一些非常简单的样式设置， 而使用CSS对文本的样式进行设置远比使用 HTML灵活、精确得多。
6.1.1 创建基础页面
创建一个基本的网页，如图6.1所示。
图6.1 预备用于设置CSS样式的网页文件
6.1.2 设置文字的字体
background-color:#EAECDF; 背景颜色 */ margin:0px; padding:0px;
}
/* 页面
img{ float:right;
/* 文字环绕图片 */ } p{
color:#000000; /* 文字颜色 */
margin:0px; padding-top:10px; padding-left:5px; padding-right:5px;
作为单独的图片本身，它的很多属性 可以直接在HTML中进行调整，但是通过CSS 统一管理，不但可以更加精确地调整图片 的各种属性，还可以实现很多特殊的效果。
首先讲解用CSS设置图片基本属性的方 法，为进一步深入探讨打下基础。
6.2.1 设置图片边框
在HTML中可以直接通过<img>标记的 border属性值为图片添加边框，属性值为 边框的粗细，以像素为单位，从而控制边 框的粗细。
如果希望更换边框的颜色，或者换成 虚线边框，仅仅依靠HTML都是无法实现的。
1．基本属性
在CSS中可以通过边框属性为图片添加 各式各样的边框。border-style用来定义 边框的样式，如虚线、实线或点画线等。
在CSS中，一个边框由3个要素组成。
（1）border-width（粗细）：可以使 用各种CSS中的长度单位，最常用的是像素。
}
6.1.10 设置段落内部的文字行高
在HTML中是无法控制段落中行与行之 间的距离的。
在CSS中，使用line-height可以控制 行的高度，通过它就可以调整行与行之间 的距离。
line-height属性的设置如表6.3所示。
表6.3 line-height属性设置
长度 倍数
设置值
说明 数值，可以使用前面所介绍的尺度单位 font-size的设置值的倍数