任务6.2 设置网页文本样式

模块6文本格式的高级设置任务6.2设置网页文本样式网页设计项目教程（HTML5+CSS3+JavaScript）任务描述本任务介绍文本样式相关属性，掌握这些技术能优化文本排版，提升可读性与视觉效果。介绍单词间距、字符间距、文字修饰、垂直与水平对齐、文本缩进、行高及空白处理等属性。相关知识和技能任务6.2涵盖以下10个文本样式知识点：▪6.2.1单词间隔——word-spacing▪6.2.2字符间隔——letter-spacing▪6.2.3文字修饰——text-decoration▪6.2.4垂直对齐——vertical-align▪6.2.5水平对齐——text-align▪6.2.6文本缩进——text-indent▪6.2.7文本行高——line-height▪6.2.8处理空白——white-space▪6.2.9文本阴影——text-shadow▪6.2.10文本换行——word-wrap6.2.1单词间隔word-spacing控制英文单词（或数字）之间的间距，可增可减。▪作用：增加或减少单词间的空白（字间隔），优化英文文本的疏密观感。▪normal：等同设置为0，使用浏览器默认字间距。▪长度值（如20px）：调整字之间的间隔；负长度值（如-5px）使更紧凑。▪注意：值过大易造成字间距过宽、可读性下降，应谨慎调整。案例演示6-7单词间隔（一）CSS部分：normal/20px/-5px三种字间距对照。<style>.normal-spacing{word-spacing:normal;}.wide-spacing{word-spacing:20px;}.tight-spacing{word-spacing:-5px;}.container{margin:20px;padding:15px;background-color:#f9f9f9;border:1pxsolid#ddd;border-radius:5px;}h2{color:#333;}p{font-size:16px;line-height:1.6;}</style>案例演示6-7单词间隔（二）HTML部分：三组容器分别应用三种字间距。<body><divclass="container"><h2>NormalWordSpacing</h2><pclass="normal-spacing">Loremipsumdolorsitamet,consecteturadipiscingelit.</p></div><divclass="container"><h2>WideWordSpacing</h2><pclass="wide-spacing">Loremipsumdolorsitamet,consecteturadipiscingelit.</p></div><divclass="container"><h2>TightWordSpacing</h2><pclass="tight-spacing">Loremipsumdolorsitamet,consecteturadipiscingelit.</p></div></body>6.2.2字符间隔letter-spacing控制汉字字间、英文字母间的距离。▪语法：letter-spacing:normal|<长度值>▪normal：使用默认字符间距；长度值（如20px/14px）自定义间隔。<style>.p1{letter-spacing:normal;}.p2{letter-spacing:20px;}.p3{letter-spacing:14px;}</style><body><pclass="p1">Iamagoodstudent</p><pclass="p2">测试改变汉字间距样式</p><pclass="p3">Testthespaceofenglish!</p></body>6.2.3文字修饰text-decoration为文本添加下划线、上划线、删除线等视觉效果。▪语法：text-decoration:none|overline|underline|line-through|blink|inherit▪none：无装饰，文本常规显示。▪overline：文本上方添加上划线。▪underline：文本下方添加下划线（超链接默认样式）。▪line-through：文本中间贯穿线（表示删除/过时内容）。▪blink：文本闪烁（非所有浏览器支持，现代设计少用）。▪inherit：从父元素继承装饰效果，并延伸至后代元素。案例演示6-8文字修饰（一）CSS部分：none/overline/underline/line-through/inherit。<style>.no-decoration{text-decoration:none;}.overline{text-decoration:overline;}.underline{text-decoration:underline;}.line-through{text-decoration:line-through;}.inherit-decoration{text-decoration:inherit;}.container{margin:20px;padding:15px;background-color:#f9f9f9;border:1pxsolid#ddd;border-radius:5px;}h2{color:#333;}p{font-size:16px;line-height:1.6;margin-bottom:10px;}</style>案例演示6-8文字修饰（二）HTML部分：应用不同修饰效果并演示继承。<body><divclass="container"><h2>TextDecorationExamples</h2><pclass="no-decoration">无装饰文本（normal）。</p><pclass="overline">上划线文本（overline）。</p><pclass="underline">下划线文本（underline）。</p><pclass="line-through">删除线文本（line-through）。</p><pclass="overline">上划线父元素：<spanclass="inherit-decoration">继承上划线的子元素</span></p></div></body>6.2.4垂直对齐方式vertical-align设置行内元素基线相对于所在行的垂直对齐。▪常用于图片与文本、表格单元格内容的垂直对齐；可用负长度值或百分比。▪常用值：top/middle/bottom（其余如baseline、sub、super、text-top等较少用）。<styletype="text/css">img.top{vertical-align:text-top;}img.bottom{vertical-align:text-bottom;}</style><body><p>这是一幅<imgclass="top"border="0"src="01.gif"/>位于段落中的图像。</p><p>这是一幅<imgclass="bottom"border="0"src="02.gif"/>位于段落中的图像。</p></body>6.2.5水平对齐方式text-align控制文字内容、图片在水平方向的对齐方式。▪语法：text-align:left|right|center|justify▪left：左对齐。▪right：右对齐。▪center：居中对齐。▪justify：两端对齐（使文本两端对齐，常用于多行段落排版）。案例演示6-9水平/垂直对齐（CSS）“科技兴国成果展”页面：text-align居中与flex+vertical-align对齐。body{font-family:Arial,sans-serif;margin:0;padding:0;background-color:#f5f5f5;}.header{background-color:#0066cc;color:white;text-align:center;padding:20px0;}.container{width:80%;margin:0auto;}.achievement-name{text-align:center;color:#0066cc;}.achievement-content{display:flex;align-items:center;}.achievement-description{vertical-align:middle;display:inline-block;width:70%;text-align:left;line-height:1.5;}.footer{text-align:center;background-color:#0066cc;color:white;}6.2.6文本缩进text-indent实现段首缩进，类似Word的首行缩进。▪语法：text-indent:<长度值>（如20px，也可用2em）。▪只对段落首行有效；<p>段落换行后每段首行均缩进。▪若用<br/>换行，换行后的文本不会出现缩进。<style>#div6{text-indent:25px;}</style><body><divid="div6"><p>第一段段首开始缩进效果</p><p>第二段使用p标签段落首行也会缩进</p></div></body>6.2.7文本行高line-height设置文字行间的间隔，也可实现单排文字垂直居中。▪长度值：px、em等（推荐px）。▪百分比：基于字体高度计算（如150%）。▪无单位浮点数：相对字体大小的比例（如1.5表示1.5倍）。▪技巧：行高=容器高度时，单排文字在容器内上下居中。<style>#div5{line-height:20px;}/*多排文字行高20px*/#div6{line-height:25px;height:25px;}/*单行垂直居中*/</style><divid="div5">我是第一排<br/>我是第二排<br/>我是第三排</div><divid="div6">我的高度为25px，实现上下居中</div>6.2.8处理空白white-space控制文本中空格、制表符、换行符的处理规则。▪语法：white-space:normal|nowrap|pre|pre-wrap|pre-line▪normal：合并空白符、忽略换行、允许自动换行。▪nowrap：合并空白符、忽略换行、不允许自动换行。▪pre：保留空白与换行、不允许自动换行。▪pre-wrap：保留空白与换行、允许自动换行（推荐）。▪pre-line：合并空白符、保留换行、允许自动换行。案例演示6-10处理空白（CSS）五种white-space取值对照（normal/nowrap/pre/pre-wrap/pre-line）。.container{width:300px;margin:20pxauto;padding:10px;border:1pxsolid#ccc;background-color:#f9f9f9;}.normal{white-space:normal;}.nowrap{white-space:nowrap;}.pre{white-space:pre;}.pre-wrap{white-space:pre-wrap;}.pre-line{white-space:pre-line;}6.2.9文本阴影（text-shadow）text-shadow为文本添加阴影效果，增强层次与立体感。▪语法：text-shadow:<水平偏移><垂直偏移><模糊半径><颜色>;▪依次指定阴影的横向、纵向偏移、模糊程度与颜色。<style>h1{text-shadow:5px5px5px#FF0000;}</style>6.2.10文本自动换行（word-wrap）word-wrap允许对文本强制换行，解决内容超出区域的问题。▪语法：word-wrap:normal|break-word▪normal：只在允许的断点换行。▪break-word：允许对长单词拆分并换行到下一行。<style>p{word-wrap:break-word;}</style>任务实施设计“科技弘扬传统文化”网页，综合运用文本样式属性美化排版。▪设计目标：展示科技如何推动传统文化传承（头部/内容/展望/页脚）。▪步骤1：确定主题与结构规划（科技应用案例+文本样式演示）。▪步骤2：基础HTML结构搭建（DOCTYPE/header/main/footer）。▪步骤3：基础样式与文本属性设置（重置+全局字体/行高/颜色）。▪步骤4：文本对齐与缩进设置（text-indent:2em、text-align:justify）。▪步骤5：垂直对齐方式设置（baseline/sub/super/top/middle/bottom）。▪步骤6：文本修饰效果应用（text-decoration:underline等）。▪步骤7：空白处理方式设置（white-space:normal/nowrap/pre）。▪步骤8：响应式布局调整（@media小屏单列显示）。任务实施关键样式代码整合本任务所学文本样式属性，综合应用于网页。/*标题：字符间距+颜色*/h1{font-size:2.5rem;color:#1a73e8;letter-spacing:0.2em;}.header-sub{font-style:it