网页设计第15次课CSS段落属性讲解.pptVIP

华丽的分割线 任务 5 任务名称：《CSS段落属性1——古诗课文》 任务要求：建立一个文件夹，用于放置网页和素材文件，使用学习过的CSS技术设计出一个如效果图中显示的网页。文件夹命名为：“任务5 **的CSS段落属性1—古诗课文”） 任务参考图：见下一页幻灯片 * 第三章 使用CSS样式表（中） 第3节、CSS段落属性 3、段落属性 利用CSS还可以控制段落的属性，主要包括单词间隔、字符间隔、文字修饰、纵向排列、 文本转换、文本排列、文本缩进和行高等。 （1）单词间隔 word-spacing： 使用单词间隔word-spacing可以控制单词之间的间隔距离。取值可以使用normal（默认），也可以使用长度值。长度值包括数值及单位，可以使用负值。【注意：word-spacing属性是为英文准备的，由于英文都是以空格分开的单词，所以它就代表词与词之间的距离。在中文的句子中只能使用空格隔开每个字才能表现出word-spacing属性。】 语法，word-spacing : 取值 （2）字符间隔 letter-spacing： 使用字符间隔letter-spacing可以控制字符之间的间隔距离，长度值包括数值及单位，允许使用负值。 语法，letter-spacing : 取值 学完就练之3-1（请将源代码复制到页面中，开始练习）： !--请将**替换成个人信息-- div我的中文名字叫**，my name is **！（单词间隔为20px）/div div大 家 都 叫 我 * * ！（单词间隔为20px） /div div每次坐232的感觉用英文说就是：It is very very bad。（单词间隔为-20px） /div div希望你一切okey，（字符间隔为20px）/div div 明天见，goodbye! （字符间隔为-10px或-20px） /div （3）文字修饰 text-decoration： 使用文字修饰text-decoration可以对文本进行修饰，如设置下划线、删除线等。【取值中none表示不修饰（默认值）；underline表示对文字添加下划线；overline表示对文字添加上划线；line-through表示对文字添加删除线；blink表示文字闪烁效果，但很多浏览器不支持】。 语法，text-decoration : none / underline / overline / line-through / blink （4）文本转换 text-transform： 使用文本转换text-transform可以转换英文字母的大小写。【取值中none表示对文本不做任何改动（默认值）；capitalize表示将每个单词的第一个字母转换成大写；uppercase表示转换成大写；lowercase表示转换成小写】 语法，text-transform : none / capitalize / uppercase / lowercase 学完就练之3-2（请将源代码复制到页面中，开始练习）： !--请将歌词名用中划线标注， 组合名TFBOYS变成小写；将中英文的”左手”设置上划线，中英文”右手”设置下划线；将所有的go go go变成大写，其他英文设置为首字母大写。-- p《青春修炼手册》TFBOYS/p p跟着我 左手右手 一个慢动作/p p右手 左手 慢动作重播/p p这首歌 给你快乐/p p你有没有爱上我/p p left left right right /p p go turn around /p p go go go /p p left left right right /p p go turn around /p p go go go /p （5）文字垂直对齐方式 vertical-align： 使用文字垂直对齐方式vertical-align可以设置丰富的文字垂直对齐方式。取值含义见下一页表格总结。 语法，vertical-align : baseline | sub | super | top | text-top | middle | bottom | text-bottom |inherit baseline,middle,top,bottom 的含义 规定应该从父元素继承 vertical-align 属性的值。 inherit 用百分比指定由基线算起的偏移量。可以为负值。基线对于百分数来说就是0%。 % 用长度值指定由基线算起的偏移量。可以为负值。基线对于数值来说为0。 length 把元素的底端与父元素字体的底端对齐。 text-bottom 把元素的顶端与行中最低的元素的顶端对齐。 bottom 把此元素放置在父元素的中部。 middle