计算机文化

Size: px

Start display at page:

Download "计算机文化"

螺熊
5 years ago
Views:

1 1 Web 前端开发技术与实践第 9 章 : 文字样式阮晓龙 / rxl@hactcm.edu.cn 河南中医学院管理信息工程学科河南中医学院网络信息中心

2 2 本章主要内容文本样式字体样式文本效果使用服务器端字体案例 : 诗歌排版案例 : 使用服务器端字体实现网站图标

3 3 1. 文本样式由于 Web 是 HTML 文档的集合体, 有动态的元素静态的元素功能展示的元素, 它们的呈现不能够是杂乱无章的, 这就需要对各种文字样式进行排版排版是对文本样式进行各种操作 ( 例如改变文本的颜色字符间距行高文字对齐方式等, 并需实现文本缩进字体装饰等内容 ) CSS 的文字样式可以通过各种属性的综合使用实现各种样式的文字排版

4 4 1. 文本样式 1.1 属性

5 5 1. 文本样式 1.2 文本颜色 :color color 属性规定文本的颜色这个颜色还会应用到元素的所有边框, 除非被 border-color 或另外某个边框颜色属性覆盖

6 6 现场演示 : 案例 9-01: 文本颜色

7 7 1. 文本样式 1.3 缩进 :text-indent text-indent 属性规定文本块中首行文本的缩进该属性值可以为像素值百分比或相对值 em, 也可以为正值或负值, 如果使用负值, 那么首行会被缩进到左边

8 8 现场演示 : 案例 9-02: 文本缩进

9 9 1. 文本样式 1.4 行高 :line-height line-hight 属性用来设置行间的距离 ( 行高 ) line-height 与 font-size 的计算值之差在 CSS 中成为行间距, 将其值分为两半, 分别加到一个文本行内容的顶部和底部, 其中可以包含这些内容的最小框就是行框

10 10 现场演示 : 案例 9-03: 行高

11 11 1. 文本样式 1.5 字母间隔 :letter-spacing letter-spacing 属性用来定义字符间的空白大小 ( 字符间距 ) 该属性定义了在文本字符框之间插入多少空间, 由于字符字形通常比其字符框要窄, 指定长度值时, 会调整字母之间通常的间隔,normal 就相当于值为 0

12 12 现场演示 : 案例 9-04: 字母间隔

13 13 1. 文本样式 1.6 水平对齐 :text-align text-align 属性规定元素中文本的水平对齐方式该属性通过指定行框与某点对齐, 来设置块级元素内文本的水平对齐方式

14 14 现场演示 : 案例 9-05: 水平对齐

15 15 1. 文本样式 1.7 文本装饰 :text-decoration text-decoration 属性规定添加到文本的修饰, 修饰的颜色由 color 属性设置

16 16 现场演示 : 案例 9-06: 文本装饰

17 17 1. 文本样式 1.8 字符转换 :text-transform text-transform 属性用来对文本的大小写进行转换处理该属性会改变元素中的字母大小写, 而不管源文本的大小写如果值为 capitalize, 则要对某些字母大写, 但是并没有明确定义如何确定哪些字母要大写, 这取决于浏览器如何识别出各个词

18 18 现场演示 : 案例 9-07: 字符转换

19 19 1. 文本样式 1.9 空白处理 :white-space white-space 属性设置如何处理元素内的空白该属性声明建立布局过程中如何处理元素中的空白符, 其中值 pre-wrap 和 pre-line 是 CSS2.1 中新增的

20 20 现场演示 : 案例 9-08: 元素空白处理

21 21 1. 文本样式 1.10 文字间隔 :word-spacing word-spacing 属性用来增加或减少单词 ( 英文 ) 间的空白 ( 即字间隔 ) 针对这个属性, 字定义为由空白符包围的一个字符串如果指定为长度值, 会调整字之间的通常间隔,normal 就等同于设置为 0, 允许指定负长度值, 这会让字之间挤得更紧

22 22 现场演示 : 案例 9-09: 文字间隔

23 23 1. 文本样式 1.11 首字下沉 ::first-letter first-letter 属性用来实现文本首字下沉效果, 此伪对象仅作用于块对象

24 24 现场演示 : 案例 9-10: 首字下沉

25 25 2. 字体样式 2.1 什么是字体文字是网页中最重要的设计元素之一, 同时也是网站信息传递给用户的主要载体在网页设计中, 字体是文字的外在形式特征, 一些设计师为了凸显不同的设计效果, 往往选择不同样式的字体来进行视觉效果设计

26 26 2. 字体样式 2.1 什么是字体字体从商业角度划分, 分为收费字体和免费字体两大类例如在日常生活中常用到的方正系列字体, 从方正字库官网 ( 可以看到, 将方正字体分为 : 免费字体基础字体和精选字体三类免费字体 : 包括方正黑体方正书宋方正仿宋方正楷体

27 27 2. 字体样式 2.1 什么是字体字体从商业角度划分, 分为收费字体和免费字体两大类基础字体 : 包括方正超粗黑体方正宋黑体方正大黑体方正细黑一体方正中等线体方正细等线体方正粗圆体方正准圆体方正细圆体方正报宋体方正宋三体方正宋一体方正大标宋体方正小标宋体方正彩云体方正琥珀体方正隶变体方正隶书体方正魏碑体方正行楷体方正姚体方正综艺体精选字体 : 包括免费字体基础字体类以外的其它全部方正字体如方正兰亭黑系列博雅宋系列正黑系列倩体系列等注 : 基础字体和精选字体如需使用, 需要购买方正字库授权

28 28 2. 字体样式 2.2 属性

29 29 2. 字体样式 2.3 字体系列 :font-family font-family 规定元素的字体系列 font-family 可以把多个字体名称作为一个回退机制在 CSS 中, 有两种不同类型的字体系列通用字体系列 : 拥有相似外观的字体系统组合特定字体系列 : 具体的字体系列 ( 如黑体微软雅黑等 ) 除了各种特定的字体系列外,CSS 定义了 5 种通用字体系列, 分别是 Serif 字体 Sans-serif 字体 Monospace 字体 Cursive 字体 Fantasy 字体

30 30 现场演示 : 案例 9-11: 字体系列

31 31 2. 字体样式 2.4 字体大小 :font-size font-size 属性用来定义文本的大小该属性值可以为绝对值或相对值绝对值是将文本设置为指定的大小, 此时不允许用户在所有浏览器中改变文本大小 ( 不利于可用性 ), 绝对大小在确定了输出的物理尺寸时很有用相对值是相对于周围的元素来设置大小, 允许用户在浏览器改变文本大小

32 32 现场演示 : 案例 9-12: 字体大小

33 33 2. 字体样式 2.5 字体加粗 :font-weight font-weight 属性用来定义字体的粗细

34 34 现场演示 : 案例 9-13: 字体加粗

35 35 2. 字体样式 2.6 字体风格 :font-style font-style 属性用来定义字体的风格, 该属性值有三种 : normal italic oblique normal: 默认值, 对文本不做任何改动 italic: 定义文本斜体显示斜体 (italic) 是一种简单的字体风格, 对每个字母的结构有一些小改动, 来反映变化的外观 oblique: 定义文本倾斜显示倾斜 (oblique) 文本则是正常竖直文本的一个倾斜版本

36 36 现场演示 : 案例 9-14: 字体风格

37 37 3. 文本效果 3.1 CSS3 新增文本属性

38 38 3. 文本效果 3.2 文本溢出 :text-overflow 在网页开发过程中, 可能会遇到内容溢出而导致网页变形的情况, 通常采用以下两种方法解决 : 通过 JavaScript 截取字符串网站后台程序截取一定的字符串将超出宽度的内容以省略号 ( ) 显示上述的两种方法都有其不足之处, 如中英文计算字符长度的问题, 会导致截取字符串长度无法控制, 从而降低程序的通用性

39 39 3. 文本效果 3.2 文本溢出 :text-overflow CSS3 新增了 text-ovreflow 属性, 使用该属性可快速地解决内容溢出问题

40 40 现场演示 : 案例 9-15: 溢出文本

41 41 3. 文本效果 3.3 文字阴影 :text-shadow text-shadow 属性用来给页面上的文字添加阴影效果注 : 可以对文字设置多个阴影, 只需要为 text-shadow 属性设置多组属性值即可

42 42 现场演示 : 案例 9-16: 文字阴影

43 43 3. 文本效果 3.4 文本换行浏览器自身具有让文字自动换行的功能, 在浏览器中显示文本的时候, 会让文本在浏览器或 div 元素的右端自动实现换行对于西方文字来说, 浏览器会在半角空格或连字符的地方自动换行, 而不会在单词中间突然换行, 因此, 浏览器不能够给较长的单词自动换行对于中文来说, 浏览器可以在任何一个中文文字后面进行换行

44 44 3. 文本效果 3.4 文本换行在 CSS3 中,word-warp 属性可以指定实现长单词与 URL 地址的自动换行该属性值有两种 :normal 和 break-word normal: 默认值, 表示只允许在断字点换行 break-word: 指定长单词或 URL 地址可以自动换行在 CSS3 中,word-break 属性可以让浏览器实现在任意位置的换行该属性值有三种 :normal keep-all 和 break-word normal: 默认值, 使用浏览器默认的换行规则 break-all: 允许在单词内换行 keep-all: 只能在半角空格或连字符处换行

45 45 现场演示 : 案例 9-17: 内容换行案例 9-18: 词内换行

46 46 4. 使用服务器端字体在 CSS3 之前, 页面文字所使用的字体, 必须为用户计算机已经安装且能够正常使用的字体如果页面中指定了一种字体, 而该字体用户计算机上没有安装, 则该字体就无法正常显示用户在浏览页面时, 该字体会使用默认字体替代显示

47 47 现场演示 : 案例 9-19: 不使用服务器端字体案例 9-20: 使用服务器端字体

48 48 5. 案例 : 诗歌排版 CSS 中文字样式的定义, 实现了对页面中字体段落的综合排版本案例通过中英文对照的诗歌排版, 综合演示文字样式的属性, 方便 Web 前端开发者了解使用文字排版

49 49 现场演示 : 案例 9-21: 诗歌排版

50 50 6. 案例 : 使用服务器端字体实现网站图标 CSS3 新增加了服务器字体的文字样式, 通过服务器字体可以实现一些非常规字体在 Web 前端开发中的使用, 极大的丰富了 Web 前端中字体的展示效果服务器字体的出现也为 Web 前端开发中图标的处理提供了新的方法,Web 前端开发者可以通过使用服务器字体设置页面中的小图标, 统一使用

51 51 现场演示 : 案例 9-22: 使用服务器端字体实现网站图标

52 52 Thanks.

Microsoft Word - diy_chi.doc

Microsoft Word - diy_chi.doc 目录 1. DIY 网页功能设定... 1 1.1. 更改密码功能... 2 1.2. 选择的语言版本... 2 1.3. 联络电邮... 2 1.4. 网页名称 ( 英文版 )... 2 1.5. 网页介绍 ( 英文版 )... 2 1.6. 网页 Keywords( 英文版 )... 2 1.7. 查询表格 ( 英文版