{企业管理表格}基础文本格式化表格样式浮动定位显示列表样

《{企业管理表格}基础文本格式化表格样式浮动定位显示列表样》由会员分享，可在线阅读，更多相关《{企业管理表格}基础文本格式化表格样式浮动定位显示列表样（34页珍藏版）》请在金锄头文库上搜索。

1、企业管理表格基础文本 格式化表格样式浮动定位 显示列表样 企业管理表格基础文本 格式化表格样式浮动定位 显示列表样 1.文本格式化1.文本格式化 本章主要讲解如何实现文本的格式化，包括控制文本的字体（如字体大小、字 体样式和字体系列等）和设置文本的格式（如文本颜色、文本排列和文本缩进 等）。 1.1.文本格式化1.1.文本格式化 1.1.1.控制字体1.1.1.控制字体 CSS 字体属性定义文本的字体系列、大小、加粗、风格（如斜体）等，这些属 性会直接影响字体及其外观。常用的属性有： 1、指定字体（font-family）1、指定字体（font-family） 可以使用 font-family

2、 属性指定文本的字体，语法如下： 1. font- -family: :name/ /inherit; ; 如果需要指定字体，则设置值为 name，即首选字体的名称。如果字体名称有 多个单词，即中间有空格，则需要将字体名称用一对单引号或者双引号包围起来。 如果字体名称包含非 ASCII 字符，就必须声明样式表的编码。 这个属性最大的问题在于，如果用户机器上并没有安装所需要的字体，则会显 示默认字体。因此，在指定字体时，最好同时指定替代字体。 我们可以为 font-family 属性指定多种字体，且多种字体之间用逗号隔开，这 样可以为页面指定一个字体列表。如果用户机器没有第一种字体，则浏览器会查

3、找 字体列表中的下一种字体作为替代字体显示。如果找遍了字体列表还是没有可以使 用的字体，浏览器会使用默认字体显示页面。 我们可以结合特定字体和通用字体系列来指定字体，如： 1. h1 font- -family: :Georgia, ,serif; 如果用户机器上没有安装 Georgia，但安装了 Times 字体（serif 字体系列中 的一种字体），浏览器就可能对元素使用 Times。尽管 Times 与 Georgia 并不 完全匹配，但至少足够接近。 2、字体大小（font-size）2、字体大小（font-size） font-size 属性用来设置文本的大小。如果没有规定字体大小，

4、普通文本（比 如段落）的默认大小是 16 像素(16px=1em)。 可以使用多种方式指定这个属性的值：绝对大小、相对大小、长度单位和百分 比。其中，如果使用长度单位来设置字体大小，还可以分别使用相对单位和绝对单 位。 长度是指采用一种长度单位来表达字体的大小。可使用的绝对单位如表1 所 示。 表1 长度的绝对单位 图1 给出了使用长度的绝对单位来设置字体大小的效果。 图-1 也可以使用相对单位的长度来设置字体大小，可使用的相对单位如表2 所 示。 表2 长度的相对单位 如果需要使用相对单位来设置大小，我们可以使用 px，表示像素。通过像素 设置文本大小，可以对文本大小进行完全控制。比如，我们

5、可以这样设置： 1. h1 font- -size: :60px; 2. h2 font- -size: :40px; 3. p font- -size: :14px; font-size 属性的值还可以设置为“inherit”，规定应该从父元素继承字体 尺寸。 3、字体加粗（font-weight）3、字体加粗（font-weight） font-weight 属性用于设置文本的粗细，常用于实现将显示元素的文本中所用 的字体加粗。 该属性可能的值如表3 所示。 表3font-weight 属性的取值 使用 bold 关键字可以将文本设置为粗体。 关键字 100900 为字体指定了 9 级加粗

6、度。如果一个字体内置了这些加粗级 别，那么这些数字就直接映射到预定义的级别，100 对应最细的字体变形，900 对 应最粗的字体变形。数字 400 等价于 normal，而 700 等价于 bold。 如果将元素的加粗设置为 bolder，浏览器会设置比所继承值更粗的一个字体 加粗。与此相反，关键词 lighter 会导致浏览器将加粗度下移而不是上移。 比如，我们可以这样定义样式规则： 1. p. .normal font- -weight: :normal; 2. p. .thick font- -weight: :bold; 3. p. .thicker font- -weight:900

7、;:900; 然后查看如下代码： 1. font- -weight: :normal/ 2. font- -weight: :bold/ 3. font- -weight:900/:900 上述代码在浏览器中的显示效果如图-2 所示。 图-2 其中，bold 是最常用的值，也会遇到使用 normal 的情况，尤其是在大量加粗 文本中创建不同效果的文本时。 1.1.2.控制文本格式1.1.2.控制文本格式 CSS 除了可以设置字体，还可以定义文本的外观。通过文本属性，可以改变文 本的颜色、字符间距、对齐文本、装饰文本、对文本进行缩进等。 1、文本颜色（color）1、文本颜色（color） co

8、lor 属性用于设置文本的颜色，即元素的前景色。这个颜色还会应用到元素 的所有边框，除非被 border-color 或另外某个边框颜色属性覆盖。 没有设置 color 属性的文本将使用浏览器的默认颜色显示。如果需要使用该属 性设置文本颜色，该属性的值可以是颜色名称、rgb 值或者十六进制数，其默认值 取决于浏览器。 比如，我们可以这样设置： 1. p color: :rgb(255,255,0);(255,255,0); 或者 1. p color: :#FFFF00; 2、文本排列（text-align）2、文本排列（text-align） text-align 是一个基本的属性，用于设置

9、一个元素中的文本行互相之间的对 齐方式。 该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方 式。该属性可能的取值如表4 所示。 表4text-align 属性的取值 前 3 个值相当直接，不用额外解释。 text-align 属性还可能取值 justify，我们称为两端对齐。在两端对齐文本 中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间 隔，使各行的长度恰好相等。这种两端对齐的排列方式经常用于打印。 比如，我们可以这样定义样式规则： 1. text- -align: :left; 2. text- -align: :right; 3. text- -a

10、lign: :center; 4. text- -align: :justify; 然后，查看如下代码： 1. 2. 3. Withsunshine, ,water, ,andcarefultending, ,roseswillbloo mseveraltimesininaseason./. 4. / 5. 6. Withsunshine, ,water, ,andcarefultending, ,roseswillblo omseveraltimesininaseason./. 7. / 8. 9. Withsunshine, ,water, ,andcarefultending, ,ros

11、eswillbl oomseveraltimesininaseason./. 10. / 11. 12. Withsunshine, ,water, ,andcarefultending, ,roseswillb loomseveraltimesininaseason./. 13. / 14. / 上述代码在浏览器中的显示效果如图-3 所示。 图-3 由图3 可以看出，居左或者居右排列后，另外一端会显示为锯齿状（使用默 认的字宽和间隔，以单词为单位换行）；而如果使用 justify 则会显示为两端对齐 的效果。 3、文字修饰（text-decoration）3、文字修饰（text-decora

12、tion） text-decoration 属性用于对文本进行修饰。它允许对文本设置某种效果，如 加下划线、上划线或者闪烁等。 text-decoration 属性可能的取值如表5 所示。 表5text-decoration 属性的取值 underline 会对元素加下划线;而 overline 的作用恰好相反，会在文本的顶端 画一个上划线；值 line-through 则在文本中间画一个贯穿线;blink 会让文本闪 烁。 还可以在一个规则中结合多种装饰，只需要为 text-decoration 属性设置多个 值，且多个值之间用空格隔开。 比如，如果一个段落中的文本既有下划线，又有上划线，我

13、们可以这样定义： 1. p text- -decoration: :underlineoverline; none 值会关闭原本应用到一个元素上的所有装饰。通常，无装饰的文本是默 认外观，但某些元素例外。比如，链接默认地会有下划线。因此，如果希望去掉超 链接的下划线，可以使用以下 CSS 来做到这一点： 1. a text- -decoration: :none; 如果显式地用这样一个规则去掉链接的下划线，那么它与正常文本之间在视觉 上的唯一差别可能就是颜色（浏览器往往会为链接设置默认的颜色）。 blink 值会创建闪烁的文本，但是这通常被认为是不赞成使用的方式，大部分 浏览器也不支持它。 4

14、、行高（line-height）4、行高（line-height） line-height 属性用于设置行间的距离。 当处理大量文本时，增加文本行之间的垂直空间量可以提高文档可阅读性，这 种空间量称为行间距。在 Web 页面中增加行间距是非常有用的。比如，如果文本行 之间存在更多的空间，当达到一行的末尾之后，更容易发现下一行的起点。 line-height 属性会影响行框的布局。在应用到一个块级元素时，它定义了该 元素中基线之间的最小距离。 行间距是 line-height 与 font-size 的计算值之差。行间距会被分为两半，分 别加到一个文本行内容的顶部和底部。而可以包含这些内容的最小

15、框就是行框。比 如，我们可以这样定义样式规则： 1. p border: :1pxsolidred; 2. p. .smallLength line- -height: :10px; 3. p. .bigLength line- -height: :30px; 然后，查看如下代码： 1. 这是拥有标准行高的段落。在大多数浏览器中默认行高大约是 20px。这是拥有 标准行高的段落。/ 2. length= =10px。这个段落拥有更小的行高。这个段落拥有 更小的行高。/ 3. length= =30px。这个段落拥有更大的行高。这个段落拥有更 大的行高。/ 上述代码在浏览器中的显示效果如图-4

16、所示。 图-4 5、首行文本缩进（text-indent）5、首行文本缩进（text-indent） 把 Web 页面上的段落的第一行缩进，这是一种最常用的文本格式化效果。CSS 提供了 text-indent 属性，该属性可以方便地实现文本缩进。 text-indent 属性缩进元素中的首行文本，即使用该属性可以让元素的第一行 缩进一个给定的距离。这个属性最常见的用途是将段落的首行缩进，下面的规则会 使段落的首行缩进 2em： 1. p. .first text- -indent: :2em; 可以为块级元素应用 text-indent 属性，但无法将该属性应用于行内元素，且 图像之类的替换元素上也无法应用 text-indent 属性。不过，如果一个块级元素 （比如段落）的首行中有一个图像，它会随该行的其余文本移动。 text-indent 属性除了可以使用长度单位，还包括百分比值。百分数是相对于