09-CSS字体与文本.ppt

《09-CSS字体与文本.ppt》由会员分享，可在线阅读，更多相关《09-CSS字体与文本.ppt（36页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第9 9章 CSS CSS字体与文本2023年2月4日第1页学习目标 掌握CSS字体相关属性设置并能应用 掌握CSS文本相关属性设置并能应用 掌握CSS背景相关属性设置并能应用2023/2/49.1 CSS字体CSS字体属性定义字体，加粗，大小，文字样式。font-family 属性设置文本的字体系列，如果字体系列的名称超过一个字，它必须用引号，如：font-family 属性应该设置几个字体名称作为一种“后备”机制，如果浏览器不支持第一种字体，将尝试下一种字体：2023/2/49.1 CSS字体font-style 属性最常用于规定斜体文本，该属性有三个值：normal（默认，文本正常显示）

2、；italic（文本斜体显示）；oblique-（文本倾斜显示）。实例：2023/2/49.1 CSS字体font-weight 属性设置文本的粗细，取值如下表所示2023/2/49.1 CSS字体font-weight 实例：font-size设置实例2023/2/49.1 CSS字体课本例9-1综合运行CSS字体与内外边距等进行网页排版。2023/2/49.1 CSS字体2023/2/49.1 CSS字体例9-1在浏览器中的浏览效果如图所示2023/2/49.2 CSS文本CSS文本主要设置文本颜色、对齐方式、字符间距以及文本修饰效果等。text-indent 属性规定文本块中首行文本的缩

3、进。该属性允许使用负值，如果使用负值，那么首行会被缩进到左边；text-indent 可以使用百分比值，百分数要相对于缩进元素父元素的宽度。实例：2023/2/49.2 CSS文本text-align 属性规定元素中的文本的水平对齐方式，该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式，该属性取值如下表所示2023/2/49.2 CSS文本实例：“text-align:justify;”实现两端对齐2023/2/49.2 CSS文本word-spacing 属性增加或减少单词间的空白（即字间隔），letter-spacing 属性增加或减少字符间的空白。设有CSS代码分别设

4、置字间隔和字符间距：若HTML代码为：2023/2/49.2 CSS文本此HTML代码在浏览器中的浏览效果如图所示：2023/2/49.2 CSS文本text-transform 属性控制文本的大小写，其属性取值如下表：2023/2/49.2 CSS文本若有CSS代码与HTML代码：2023/2/49.2 CSS文本这段代码在浏览器中的显示效果如图所示：2023/2/49.2 CSS文本text-decoration属性规定添加到文本的修饰，如下划线。如果后代元素没有自己的装饰，祖先元素上设置的装饰会“延伸”到后代元素中。其取值如下表：2023/2/49.2 CSS文本若有CSS代码与HTML

5、代码：2023/2/49.2 CSS文本这段代码在浏览器中的显示效果如图所示：2023/2/49.2 CSS文本white-space 属性设置如何处理元素内的空白，其取值如下表：2023/2/49.2 CSS文本overflow 属性规定当内容溢出元素框时怎样处理。其取值如下表：2023/2/49.2 CSS文本CSS代码：2023/2/49.2 CSS文本分别将定义的三个CSS类应用与下面的：2023/2/49.2 CSS文本可以看到三个段落在浏览器中的效果如图所示：2023/2/49.2 CSS文本例9-2综合运行内外边距、文本、字体等在网页上排列新闻标题。（源码参照课本）例9-2在浏览

6、器中的浏览效果如图所示：2023/2/49.3 CSS背景CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。CSS属性background-color设置元素的背景颜色：2023/2/49.3 CSS背景背景颜色会填充元素的内容、内边距和边框区域，background-color 不能继承。课本例9-3通过设置背景色等利用超链接制作按钮。（源码参照课本）在浏览器中的显示效果如图：2023/2/49.3 CSS背景background-image 属性为元素设置背景图像，元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距：2023/2/49.3 CSS背景默认地，

7、背景图像位于元素的左上角，并在水平和垂直方向上重复。background-repeat 属性设置是否及如何重复背景图像，该属性的取值如下表所示2023/2/49.3 CSS背景background-position 属性设置背景图像的起始位置。背景图片在元素中的位置包括水平位置和垂直位置，因此设置background-position 属性时，需要指定两个位置，改属性取值如下表：2023/2/49.3 CSS背景2023/2/4有CSS代码：2023/2/49.3 CSS背景若HTML代码为：显示效果如图：2023/2/49.3 CSS背景例9-4利用背景图片来制作特殊的元素边框线（源码参照课本）例9-4在浏览器中的浏览效果如图(a)、(b)为没有设置背景图片的效果：2023/2/4本章小结 本章介绍了CSS字体、CSS文本和背景色等相关属性，对每一部分用实例说明其具体应用。通过本章的学习，读者可以掌握相关属性的含义，在此基础上应用所学知识到网页设计中，使页面达到想要的效果。2023/2/4