(Web前端开发》课程理论教学部分 第十二讲:文字样式 河南中医学院互联网应用技术研究所 Http://Labs.51xueWeb.Com 2013.4
web前端开发》课程理论教学部分/第十二讲:文字样式 学时计划 学时计划:2学时理论,2学时实验 实验五:文字排版 教学大纲: 1、文本样式 2、字体样式 3、cSS3文本效果 4、使用服务器端字体 5、讨论与思考
web前端开发》课程理论教学部分/第十二讲:文字样式 文字是网页中最为常见、最为重要的内容,CSS对于文字内容的设 置,也是最基本的功能。 本讲主要介绍文本和字体的样式,并重点介绍cSS3新增的文本效果 。结合cSS3的新特征,介绍客户端字体合服务器端字体以及相关的 意义。最终通过新闻内容呈现和个人简历网页两个案例,展示文字 样式的应用。 河南中医学院互联网应用技术研究所/htp:/abs.51 xuewen. cn/2013.4
web前端开发》课程理论教学部分/第十二讲:文字样式 文本样式 11文本样式 表11-1文本样式 属性 描述 color 设置文本颜色 direction 设置文本方向 line-height 设置行高 letter-spacing 设置字符间距 text-align 对齐元素中的文本。 text-decoration 向文本添加修饰 text-indent 縮进元素中文本的首行。 text-shadow 设置文本阴影。Cs2包含该属性,但是cs21没有保留该属性。 text-transform 控制元素中的字母 unicode-bicr 设置文本方向 white-space 设置元素中空白的处理方式。 word-spacing 设置字间距 河南中医学院互联网应用技术研究所/htp:/abs.51 xuewen. cn/2013.4
web前端开发》课程理论教学部分/第十二讲:文字样式 文本样式 1.2缩进 text- indent属性用来实现文本缩进。该属性值可以为像素值、百分 比或相对值em,可以为正值或负数值。 河南中医学院互联网应用技术研究所/htp:/abs.51 xuewen. cn/2013.4
web前端开发》课程理论教学部分/第十二讲:文字样式 文本样式 1.3水平对齐 text-align属性用来定义一个元素内的文本在水平方向上的对齐方式 。属性值有五种情况。 (1)属性值:left、 right、 center left、 right、 center分别定义文本是左对齐、右对齐和居中对齐。中 文和西方语言都是从左向右读,所有text-algn的默认值是left,此 时文本在左边界对齐,右边界呈锯齿状(称为“从左到右”文本) 。对于希伯来语和阿拉伯语之类的语言, text-align则默认为 right, 因为这些语言从右向左阅读的。 (2)属性值: justify 值 justify可以使文本的两端都对齐。在两端对齐文本中,文本行的左 右两端都放在父元素的内边界上。然后调整单词和字母间的间隔, 使各行的长度恰好相等 河南中医学院互联网应用技术研究所/htp:/abs.51 xuewen. cn/2013.4
web前端开发》课程理论教学部分/第十二讲:文字样式 文本样式 1.3水平对齐 text-align属性用来定义一个元素内的文本在水平方向上的对齐方式 。属性值有五种情况。 (3)属性值: inherit 值 inherit规定从父元素继承水平对齐样式 河南中医学院互联网应用技术研究所/htp:/abs.51 xuewen. cn/2013.4
web前端开发》课程理论教学部分/第十二讲:文字样式 文本样式 1.4文字间隔 word- spacIng属性用来定义文字(英文单词)之间的标准间隔。其 默认值 normal与设置为0是一样的。属性值可以是正负的长度值。 河南中医学院互联网应用技术研究所/htp:/abs.51 xuewen. cn/2013.4
web前端开发》课程理论教学部分/第十二讲:文字样式 文本样式 1.5字母间隔 letter- spacing属性用来定义字母(字符)之间的标准间隔。其属性 值和word- spacing属性值相似。 河南中医学院互联网应用技术研究所/htp:/abs.51 xuewen. cn/2013.4
web前端开发》课程理论教学部分/第十二讲:文字样式 文本样式 1.5字母间隔 操作演示: 示例12-1:文本样式 河南中医学院互联网应用技术研究所/htp:/abs.51 xuewen. cn/2013.4