网页的文本元素

例子4-8
第4章 网页的文本元素
+
4.3 使用CSS控制页面文本
4.3.2 字体的类别、尺寸、样式、粗细和颜色
3．字体的样式、粗细与颜色——font-style、font-weight与color （1）font-style属性 • 该属性用于定义字体的风格，其中包括normal（默认值，正常字体）、 italic（斜体）和oblique（倾斜体）三个属性值。 （2）font-weight属性 • 该属性用于设置字体的粗细，它包含normal、bold、bolder、lighter、 100～900多个属性值，数字值400相当于关键字normal，700等价于 bold。 （3）color属性 • 该属性用于设置字体的颜色，可以使用颜色名称（如red、blue等）、 十六进制值的颜色，以及RGB代码的颜色。
第4章 网页的文本元素
+
4.1 插入并编辑文本
4.1.2 插入特殊字符、水平线和日期
1．插入特殊字符
插入版权字符“©”
2．插入水平线 水平线可以分隔页面内容，使得页面元素相互区分。在与此相对应的“代码” 视图中，水平线用<hr/>标签表示。 3．插入时间日期 Dreamweaver提供了一个方便的日期对象，该对象使设计人员可以以喜欢的格式 插入日期，并且可以选择在每次保存文件时都自动更新该日期。
图4-24 通过“属性”面板创建邮件链接
第4章 网页的文本元素
+
4.2 创建超链接
4.2.3 锚链接 浏览网页时，用户肯定都有这种体验：当浏览的页面内容较多，需要连续 滚动多次才能完整阅读时，网页设计者通常会增加诸如“返回页面顶部”的 超链接，为用户提供方便。对于这种用户体验，就是采用锚链接完成的。
第4章 网页的文本元素
+
4.3 使用CSS控制页面文本
4.3.1 CSS的字体和文本属性 CSS文本属性解释 • Color:设置文本的颜色。 • line-height:设置行高。 • text-indent:设置文本块首行的缩进（段落设置中经常使用）。 • text-align:设置文本的水平对齐方式。
第4章 网页的文本元素
+
4.1 插入并编辑文本
2．浏览器兼容性检查 4.1.4 批量替换与浏览器兼容性检查 2．浏览器兼容性检查
Dreamweaver CS5的浏览器兼容性检查功能，能够很好的检查网页文件中影响 最终效果的因素，为用户提供进一步完善的便捷途径。
图4-17 浏览器兼容性检查
第4章 网页的文本元素
第4章 网页的文本元素
+
4.1 插入并编辑文本
4.1.3 设置文本格式
第4章 网页的文本元素
+
4.1 插入并编辑文本
4.1.4 批量替换与浏览器兼容性检查 1．批量替换 Dreamweaver CS5的批量替换功能可以在“当前文档”、“当前本地站点” 和“打开的文档”等多种范围中搜索并替换.
图4-16 “查找和替换”对话框
+
4.2 创建超链接
4.2.1 文本链接
超链接根据目标的不同，又可以分为内部链接、外部链接和空链接。
图4-20 通过属性检查器创建超链接
图4-21 创建超链接
第4章 网页的文本元素
+
4.2 创建超链接
4.2.2 邮件链接 邮件链接是一种特殊的链接，单击这种链接，可以启动电子邮件程序。
图4-23 “电子邮件链接”对话框
由于IE8并不支持 text-shadow属性，这 里使用火狐6进行预览
例子：4-12
该容器使用了 word-wrap属性，此处 长单词被强行换行
该容器没有使用 word-wrap属性，此处模 拟的长单词溢出容器外
第4章 网页的文本元素
+
4.4 案例精粹——环保公司主页
4.4.1 布局规划
图4-49 页面最终效果
第4章 网页的文本元素
+
4.3 使用CSS控制页面文本
IE9.0, FF4.0, Chrome11.0 以上；DW cs 5.0以上；
4.3.5 CSS3.0中文字的新增属性
1．text-shadow 该属性用来设置文本是否具有阴影及模糊效果。 语法：text-shadow: h-shadow v-shadow blur color; 2．word-wrap 该属性用来设置当前行超过指定容器的边界时是否断开转行。 • normal控制连续文本换行； • break-word容器边界换行；
图4-50 布局示意图
第4章 网页的文本元素
+
4.5 举一反三——微型博客
图4-76 页面效果
图4-77 布局示意图
4.3.3 首行缩进与设置行高 例子：4-10
设置缩进距离为字体 大小的 2 倍，即两个 汉字的距离 行 高 设 置 为 60% ， 文字出现重叠现象 使用像素值设置行高 为 30px ，不能根据字 体大小自动调整
使用数值设置行高 为 1.5 ， 指 的 是 1.5 倍行距，能够根据 字体大小自动调整 行间距
• text-decoration:设置添加到文本的装饰效果（超链接设置中经常使用）。
第4章 网页的文本元素
+
4.3 使用CSS控制页面文本
4.3.2 字体的类别、尺寸、样式、粗细和颜色 1．字体的类别——font-family 一般使用系统默认的“宋体”、“仿 宋体”、“黑体”、“楷体”、 “Arial”、“Verdana”和“Times New Roman”等常规字体。 在CSS中，可以一次定义多个字体类 别让系统自行选择，样式代码如下：
p {font-family:"微软雅黑", "宋体", Arial, Verdana, "Time New Roman";}
例子：4-7
第4章 网页的文本元素
+
4.3 使用CSS控制页面文本
4.3.2 字体的类别、尺寸、样式、粗细和颜色
2．字体的尺寸——font-size 该属性用于设置元素的字体大小，其值可以是绝对值也可以是相对值。常见的有“px”（ 绝对单位）、“em”（相对单位）、“%”（相对单位）和“pt”（绝对单位）等。
图4-27 创建锚链接
图4-28 单击底部锚链接
图4-29 返回页面顶部
第4章 网页的文本元素
+
4.3 使用CSS控制页面文本
4.3.1 CSS的字体和文本属性
CSS字体属性解释
• • • • • • Font:该属性是简写属性，其作用在于将所有针对字体的属性设置在一个声明中。 font-family:设置网页使用字体的类别 font-size:设置文本的字体大小 font-weight:设置字体的粗细，包含100～900等多个级别。 font-style:设置文本的字体样式 font-variant:设置文本为小型大写字母的外形。
图4-41 “首行缩进与设置行高”预览效果
第4章 网页的文本元素
+
4.3 使用CSS控制页面文本
4.3.4 文字的截断与首字下沉 1．文字的截断 • 在CSS样式中“text-overflow”属性可以实现这种效果，该属性包含clip 和ellipsis两个属性值。前者表示简单的裁切，不显示省略标记（…）； 后者表示当文本溢出时显示省略标记（…）。 • 特别注意的是，要实现溢出文本显示省略号的效果，除了使用textoverflow属性以外，还必须配合 • white-space:nowrap（强制文本在一行内显示） • overflow:hidden（溢出内容为隐藏）同时使用才能实现。 2．首字下沉 • 使用伪对象：first-letter • 配合font-size和float • 语法： *: first-letter{float: left; font-size: 2em; font-weight: bold;} 例子：4-11
p {text-indent: 24px;}/*由于是固定值，故不能根据字体大小变化准确地缩进两个汉字距离*/ p {text-indent: 2em;}/*由于是相对值，故能够根据字体大小变化自动缩进两个汉字距离*/
2．设置行高 段落中两行文字之间垂直的距离称为行高。
第4章 网页的文本元素
+
4.3 使用CSS控制页面文本
第4章 网页的文本元素
+
4.3 使用CSS控制页面文本
4.3.2 字体的类别、尺寸、样式、粗细和颜色 例子：4-9
图4-38 “字体的样式、粗细与颜色”预览效果
第4章 网页的文本元素
+
4.3 使用CSS控制ห้องสมุดไป่ตู้面文本
4.3.3 首行缩进与设置行高
1．首行缩进 在CSS样式中text-indent属性能够实现文本缩进效果，该属性值可以为百分比 数字或者由浮点数字和单位标识符组成的长度值，且允许为负值。
第4章 网页的文本元素
+
4.3 使用CSS控制页面文本
4.3.4 文字的截断与首字下沉
此列表项内容超出了 容器设置的范围，出现了 省略标记
此列表项没有超出容 器范围，没有出现省略标 记
利用伪对象:firstletter选中第一个汉字， 再配合浮动属性实现首 字下沉效果
图4-45 “文字的截断与首字下沉”预览效果
网页设计与制作实用教程
吴 丰 主编
清华大学出版社
第4章 网页的文本元素
+
4.1 插入并编辑文本
4.1.1 插入文本 1．直接输入文本 将光标定位在“设计”视图中需要插入文本的地方，通过键盘直接输入的方法 即可输入文本。 （1）换行 如果使用组合键〈Shift+Enter〉进行换行 （2）输入多个空格 使用〈Ctrl+Shift+Space〉组合键增加空格。 2．复制粘贴