资源预览内容
第1页 / 共34页
第2页 / 共34页
第3页 / 共34页
第4页 / 共34页
第5页 / 共34页
第6页 / 共34页
第7页 / 共34页
第8页 / 共34页
第9页 / 共34页
第10页 / 共34页
亲,该文档总共34页,到这儿已超出免费预览范围,如果喜欢就下载吧!
资源描述
企业管理表格基础文本 格式化表格样式浮动定位 显示列表样 企业管理表格基础文本 格式化表格样式浮动定位 显示列表样 1.文本格式化1.文本格式化 本章主要讲解如何实现文本的格式化,包括控制文本的字体(如字体大小、字 体样式和字体系列等)和设置文本的格式(如文本颜色、文本排列和文本缩进 等)。 1.1.文本格式化1.1.文本格式化 1.1.1.控制字体1.1.1.控制字体 CSS 字体属性定义文本的字体系列、大小、加粗、风格(如斜体)等,这些属 性会直接影响字体及其外观。常用的属性有: 1、指定字体(font-family)1、指定字体(font-family) 可以使用 font-family 属性指定文本的字体,语法如下: 1. font- -family: :name/ /inherit; ; 如果需要指定字体,则设置值为 name,即首选字体的名称。如果字体名称有 多个单词,即中间有空格,则需要将字体名称用一对单引号或者双引号包围起来。 如果字体名称包含非 ASCII 字符,就必须声明样式表的编码。 这个属性最大的问题在于,如果用户机器上并没有安装所需要的字体,则会显 示默认字体。因此,在指定字体时,最好同时指定替代字体。 我们可以为 font-family 属性指定多种字体,且多种字体之间用逗号隔开,这 样可以为页面指定一个字体列表。如果用户机器没有第一种字体,则浏览器会查找 字体列表中的下一种字体作为替代字体显示。如果找遍了字体列表还是没有可以使 用的字体,浏览器会使用默认字体显示页面。 我们可以结合特定字体和通用字体系列来指定字体,如: 1. h1 font- -family: :Georgia, ,serif; 如果用户机器上没有安装 Georgia,但安装了 Times 字体(serif 字体系列中 的一种字体),浏览器就可能对元素使用 Times。尽管 Times 与 Georgia 并不 完全匹配,但至少足够接近。 2、字体大小(font-size)2、字体大小(font-size) font-size 属性用来设置文本的大小。如果没有规定字体大小,普通文本(比 如段落)的默认大小是 16 像素(16px=1em)。 可以使用多种方式指定这个属性的值:绝对大小、相对大小、长度单位和百分 比。其中,如果使用长度单位来设置字体大小,还可以分别使用相对单位和绝对单 位。 长度是指采用一种长度单位来表达字体的大小。可使用的绝对单位如表1 所 示。 表1 长度的绝对单位 图1 给出了使用长度的绝对单位来设置字体大小的效果。 图-1 也可以使用相对单位的长度来设置字体大小,可使用的相对单位如表2 所 示。 表2 长度的相对单位 如果需要使用相对单位来设置大小,我们可以使用 px,表示像素。通过像素 设置文本大小,可以对文本大小进行完全控制。比如,我们可以这样设置: 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 级加粗度。如果一个字体内置了这些加粗级 别,那么这些数字就直接映射到预定义的级别,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;: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) color 属性用于设置文本的颜色,即元素的前景色。这个颜色还会应用到元素 的所有边框,除非被 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 是一个基本的属性,用于设置一个元素中的文本行互相之间的对 齐方式。 该属性通过指定行框与哪个点对齐,从而设置块级元素内文本的水平对齐方 式。该属性可能的取值如表4 所示。 表4text-align 属性的取值 前 3 个值相当直接,不用额外解释。 text-align 属性还可能取值 justify,我们称为两端对齐。在两端对齐文本 中,文本行的左右两端都放在父元素的内边界上。然后,调整单词和字母间的间 隔,使各行的长度恰好相等。这种两端对齐的排列方式经常用于打印。 比如,我们可以这样定义样式规则: 1. text- -align: :left; 2. text- -align: :right; 3. text- -align: :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, ,roseswillbl oomseveraltimesininaseason./. 10. / 11. 12. Withsunshine, ,water, ,andcarefultending, ,roseswillb loomseveraltimesininaseason./. 13. / 14. / 上述代码在浏览器中的显示效果如图-3 所示。 图-3 由图3 可以看出,居左或者居右排列后,另外一端会显示为锯齿状(使用默 认的字宽和间隔,以单词为单位换行);而如果使用 justify 则会显示为两端对齐 的效果。 3、文字修饰(text-decoration)3、文字修饰(text-decoration) text-decoration 属性用于对文本进行修饰。它允许对文本设置某种效果,如 加下划线、上划线或者闪烁等。 text-decoration 属性可能的取值如表5 所示。 表5text-decoration 属性的取值 underline 会对元素加下划线;而 overline 的作用恰好相反,会在文本的顶端 画一个上划线;值 line-through 则在文本中间画一个贯穿线;blink 会让文本闪 烁。 还可以在一个规则中结合多种装饰,只需要为 text-decoration 属性设置多个 值,且多个值之间用空格隔开。 比如,如果一个段落中的文本既有下划线,又有上划线,我们可以这样定义: 1. p text- -decoration: :underlineoverline; none 值会关闭原本应用到一个元素上的所有装饰。通常,无装饰的文本是默 认外观,但某些元素例外。比如,链接默认地会有下划线。因此,如果希望去掉超 链接的下划线,可以使用以下 CSS 来做到这一点: 1. a text- -decoration: :none; 如果显式地用这样一个规则去掉链接的下划线,那么它与正常文本之间在视觉 上的唯一差别可能就是颜色(浏览器往往会为链接设置默认的颜色)。 blink 值会创建闪烁的文本,但是这通常被认为是不赞成使用的方式,大部分 浏览器也不支持它。 4、行高(line-height)4、行高(line-height) line-height 属性用于设置行间的距离。 当处理大量文本时,增加文本行之间的垂直空间量可以提高文档可阅读性,这 种空间量称为行间距。在 Web 页面中增加行间距是非常有用的。比如,如果文本行 之间存在更多的空间,当达到一行的末尾之后,更容易发现下一行的起点。 line-height 属性会影响行框的布局。在应用到一个块级元素时,它定义了该 元素中基线之间的最小距离。 行间距是 line-height 与 font-size 的计算值之差。行间距会被分为两半,分 别加到一个文本行内容的顶部和底部。而可以包含这些内容的最小框就是行框。比 如,我们可以这样定义样式规则: 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 所示。 图-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 属性除了可以使用长度单位,还包括百分比值。百分数是相对于
网站客服QQ:2055934822
金锄头文库版权所有
经营许可证:蜀ICP备13022795号 | 川公网安备 51140202000112号