第4章 设计文本样式_第1页
第4章 设计文本样式_第2页
第4章 设计文本样式_第3页
第4章 设计文本样式_第4页
第4章 设计文本样式_第5页
已阅读5页，还剩37页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第4章设计文本样式掌握使用CSS设置文本颜色、字型、大小、大小写、粗体和斜体等样式掌握使用CSS设置文本行高、缩进和对齐方式等掌握使用CSS设置字符间距和单词间距学习目标010203本章任务任务1：设计字体样式任务2：设计文本样式任务3：案例实战——文本页面的排版任务1设计字体样式任务描述本案例我们通过设计字体样式在网页中展示这首李白的《静夜思》，效果如图5-1-1。图5-1-1：《静夜思》文字排版任务实现任务分析1.标题文字居中显示，设置字体类型。2.正文内容设置字体类型、字体大小和字体颜色。3.各部分内容之间用水平线分隔。实现思路本案例主要内容包括：突出显示的标题、字体类型、字体大小、字体颜色等。任务实现如何定义字体？使用font-family属性来定义字体类型使用font属性也可以定义字体类型font-family用法：font-family：namename表示字体名称，可指定多种字体，多个字体将按优先顺序排列，以逗号隔开，如果字体名称包含空格，则应使用引号括起。定义字体类型font是一个复合属性，该属性能够设置多种字体属性，用法如下：font：font-style||font-variant||font-weight||font-size||line-height||font-family属性值之间以空格分割。font属性至少应设置字体大小和字体类型，且必须放在后面，否则无效。案例设置字型：部分代码如下：.font2{font-family:隶书,华文行楷,宋体;}.font3{font-family:Calibri,"TimesNewRoman",Arial;}</style></head><body><h2>设置字型</h2><pclass="font1">设置文本为微软雅黑</p><pclass="font2">文本按照隶书、华文行楷、宋体的顺序设置</p><pclass="font3">TheorderoffontisCalibri,TimesNewRoman,Arial</p></body>定义字体类型案例<head><title>设置字型</title><styletype="text/css">.font1{font-family:微软雅黑;}如何定义字体大小？HTML5之前：使用<font>标记，它有大小7个级别的字号，具有很大的局限性HTML5之中：使用font-size属性设置字体大小font-size语法：font-size:长度|绝对尺寸|相对尺寸|百分比定义字体大小长度：用长度值指定文字大小，不允许负值。长度单位有px（像素）、pt（点）、pc（皮卡）、in（英寸）、cm（厘米）、mm（毫米）、em（字体高）和ex（字符X的高度），其中px、em和ex是CSS相对长度单位，in、cm、mm、pt（1pt=1/72in）和pc（1pc=12pt）是css绝对长度单位。绝对尺寸：每一个值都对应一个固定尺寸，可以取值为xx-small（最小）、x_x0002_small（较小）、small（小）、medium（正常）、large（大）、x-large（较大）和xx-large（最大）。相对尺寸：相对于父对象中字体尺寸进行相对调节，可选参数值为smaller和

larger。百分比：用百分比指定文字大小，相对于父对象中字体的尺寸。设置字体尺寸：部分代码如下：.fs3{font-size:14px;}.fs4{font-size:12pt;}.fs5{font-size:larger;}.fs6{font-size:150%;}</style></head><body><h2>字体尺寸（h2标题），父对象为浏览器窗口</h2><pclass="fs1">x-large大小的文字</p><pclass="fs2">medium大小的文字</p><p>未使用样式，默认大小的文字</p><pclass="fs3">14px大小的文字</p><pclass="fs4">12pt大小的文字</p><pclass="fs5">larger大小的文字</p><pclass="fs6">150%大小的文字</p></body>定义字体大小案例<head><title>设置字体尺寸</title><styletype="text/css">.fs1{font-size:x-large;}.fs2{font-size:medium;}如何定义字体颜色？使用color属性来设置color还会应用到元素的所有边框，除非被其它边框颜色属性覆盖color语法：color:color_name|HEX|RGB|RGBA|HSL|HSLA|transparent常用：color:color_name|RGB|

transparent定义字体颜色color_name是颜色英文名称，例如green表示绿色、red表示红色、gold表示金色。RGB是指用RGB函数表示颜色，所有浏览器都支持该方法，RGB颜色值规定形式为RGB(red,green,blue)，red、green和blue分别表示红、绿、蓝光源的强度，可以为0-255之间的整数，或者是0%-100%之间的百分比值，例如RGB(255,0,0)和RGB(100%,0%,0%)都表示红色。表示透明。设置字体颜色：部分代码如下：font-size:18px;/*字体大小*/}.hex1{color:#808000;}/*HEX#RRGGBB形式*/.hex2{color:#F0F;}.rgb1{color:RGB(0,145,153);}/*RGB*/.rgba1{color:RGBA(0,145,153,0.5);}/*RGBA*/.rgb2{color:RGB(80%,50%,50%);}/*RGB*/.rgba2{color:RGBA(80%,50%,50%,0.5);}/*RGBA*/.hsl{color:HSL(159,100%,69%);}/*HSL*/.hsla{color:HSLA(159,100%,69%,0.8);}/*HSLA*/.trans{color:transparent;}/*transparent*/</style></head>定义字体颜色案例<head><styletype="text/css">body{color:orange;/*color_name*/font-weight:bold;/*字体加粗*/<body><pclass="hex1">颜色为HEX形式，橄榄绿#808000</p><pclass="hex2">颜色为HEX形式，紫红色#F0F</p><pclass="rgb1">颜色为RGB形式，RGB(0,145,153)</p><pclass="rgba1">颜色为RGBA形式，RGBA(0,145,153,0.5)</p><pclass="rgb2">颜色为RGB形式，RGB(80%,50%,50%)</p><pclass="rgba2">颜色为RGBA形式，RGBA(80%,50%,50%,0.5)</p><pclass="hsl">颜色为HSL形式，HSL(159,100%,69%)</p><pclass="hsla">颜色为HSLA形式，颜色为HSLA(159,100%,69%,0.8)</p><pclass="trans">颜色为transparent完全透明</p><p>颜色继承body的颜色，橙色orange</p></body>如何定义字体粗细？使用font-weight属性来定义字体粗细语法：font-weight:normal|bold|bolder|lighter|100|200....900语法说明normal：正常的字体。相当于数字值400bold：粗体。相当于数字值700。bolder：定义比继承值更重的值lighter：定义比继承值更轻的值100-900：用数字表示字体粗细定义字体粗细设置字体粗细效果：部分代码如下：.fw4{font-weight:400;}.fw5{font-weight:500;}.fw6{font-weight:600;}.fw7{font-weight:700;}.fw8{font-weight:800;}.fw9{font-weight:900;}.fw10{font-weight:normal;}.fw11{font-weight:bold;}.fw12{font-weight:bolder;}.fw13{font-weight:lighter;}</style></head><p><spanclass="fw1">100</span><spanclass="fw2">200</span><spanclass="fw3">300</span>定义字体粗细案例<head><styletype="text/css">.fw1{font-weight:100;}.fw2{font-weight:200;}.fw3{font-weight:300;}<spanclass="fw4">400</span><spanclass="fw5">500</span><spanclass="fw6">600</span><spanclass="fw7">700</span><spanclass="fw8">800</span><spanclass="fw9">900</span></p><p><spanclass="fw10">normal</span><spanclass="fw11">bold</span><spanclass="fw12">bolder</span><spanclass="fw13">lighter</span></p><pclass="fw10">这段文字是normal文字，但有时我们会对其中某些文字进行强调，可将其设置为<spanclass="fw11">粗体bold</span>，这时它明显比其它文字粗一些。</p><pclass="fw11">这段文字是bold文字，整段文字都是粗体，但有时我们需要其中某些文字恢复正常粗细，可将其设置为<spanclass="fw13">正常normal</span>，这时其它文字明显比它粗一些。</p>如何定义斜体字体？使用font-style属性来定义字体粗细语法：font-style：normal|italic|oblique语法说明normal表示默认值，即正常的字体italic表示斜体oblique表示倾斜的字体定义斜体字体设置字体尺寸：部分代码如下：<styletype="text/css">.fs1{font-style:normal;}.fs2{font-style:italic;}.fs3{font-style:oblique;}</style></head><body><ul><liclass="fs1">正常字体normal</li><liclass="fs2">斜体italic</li><liclass="fs3">倾斜的字体oblique</li></ul></body></html>定义斜体字体案例<!DOCTYPEhtml><html><head><title>字体风格</title>如何定义字体大小写？使用font-variant属性来定义字大小写语法：font-variant：normal|small-caps语法说明normal表示默认值，即正常的字体small-caps表示小型的大写字母字体定义字体大小写使用小型大写字母：部分代码如下：<styletype="text/css">.fv1{font-variant:normal;}.fv2{font-variant:small-caps;}</style></head><body><pclass="fv1">GonewiththeWind</p><pclass="fv2">GonewiththeWind</p></body>定义斜体字体案例<!DOCTYPEhtml><html><head><title>小型大写字母</title>任务实现参考代码任务描述任务分析任务2设计文本样式任务描述本案例主要内容包括：突出显示的标题、导航条、正文内容以及被文字环绕的图像、页脚等，设计文本样式来完成如下图5-2-1的页面效果。图5-2-1：设计文本样式任务实现任务分析实现思路背景色和不同部分前景色的设置页眉部分的标题文字居中显示、具备一定的字符间距以及阴影导航部分连接没有下划线正文部分文字采用统一的行高、颜色和缩进，图像浮动在左边页脚部分文字用灰色略小文字显示，并设置居中各部分内容之间用水平线分隔任务实现定义文本水平对齐（1）text-align属性语法：text-align：left|right|center|justify（2）语法说明left：内容左对齐。center：内容居中对齐。right：内容右对齐。justify：内容两端对齐，适用于文字中有空格的情况，例如英文文本。定义文本水平对齐案例<head><title>对齐方式</title><styletype="text/css">p{font-size:14px;}.ta1{text-align:left;}.ta2{text-align:center;}.ta3{text-align:right;}.ta4{text-align:justify;}</style></head><body><pclass="ta1">左对齐</p><pclass="ta2">居中对齐</p><pclass="ta3">右对齐</p><pclass="ta1">左对齐之段落：Ihaveadreamthatonedaythisnationwillriseupandliveoutthetruemeaningofitscreed:"Weholdthesetruthstobeself-evident,thatallmenarecreatedequal."</p><pclass="ta4">两端对齐段落：Ihaveadreamthatonedaythisnationwillriseupandliveoutthetruemeaningofitscreed:"Weholdthesetruthstobeself-evident,thatallmenarecreatedequal."</p></body>示例定义文本垂直对齐vertical-align属性语法：vertical-align:baseline|sub|super|top|text-top|middle|bottom|text-bottom|百分比|长度语法说明：baseline：默认值，与基线对齐。sub：垂直对齐文本的下标。super：垂直对齐文本的上标。top：顶端与行中最高元素的顶端对齐。text-top：顶端与行中最高文本的顶端对齐。middle：垂直对齐元素的中部。bottom：底端与行中最低元素的底端对齐。text-bottom：底端与行中最低文本的底端对齐。百分比：用百分比指定由基线算起的偏移量，基线为0%。长度：用长度值指定由基线算起的偏移量，基线为0定义文本垂直对齐案例案例设置垂直对齐方式图5-2-3部分代码<head><styletype="text/css">p{font-size:18px;font-weight:bold;}span{font-size:13px;}.va1{vertical-align:baseline;}.va2{vertical-align:sub;}.va3{vertical-align:super;}.va4{vertical-align:top;}.va5{vertical-align:text-top;}.va6{vertical-align:middle;}.va7{vertical-align:bottom;}.va8{vertical-align:text-bottom;}.va9{vertical-align:10px;}.va10{vertical-align:20%;}</style></head><body><p>参考文字<spanclass="va1">baseline基线对齐</span></p><p>参考文字<spanclass="va2">sub下标对齐</span></p><p>参考文字<spanclass="va3">super上标对齐</span></p><p>参考图文<imgsrc="images/panda.png"title="参考图片"/><spanclass="va4">top顶部对齐</span></p><p>参考图文<imgsrc="images/panda.png"title="参考图片"/><spanclass="va5">text-top顶端对齐</span></p><p>参考文字<spanclass="va6">middle居中对齐</span></p><p>参考文字<spanclass="va7">bottom底部对齐</span></p><p>参考文字<spanclass="va8">text-bottom底部对齐</span></p><p>参考文字<spanclass="va9">10px数值对齐</span></p><p>参考文字<spanclass="va10">20%数值对齐</span></p></body>定义字符间距letter-spacing

基本语法：letter-spacing:normal|长度|百分比语法说明：normal：默认间隔。长度：用长度值指定间隔，可以为负值。百分比：CSS3新增，用百分比指定间隔，可以为负值，但目前主流浏览器均不支持百分比属性值。案例设置字符间距定义字符间距案例<head><styletype="text/css">.ls1{letter-spacing:normal;}.ls2{letter-spacing:0.25em;}.ls3{letter-spacing:-1px;}</style></head><body><p>原文：Confidenceofsuccessisalmostsuccess.</p><pclass="ls1">normal字符间距：Confidenceofsuccessisalmostsuccess.</p><pclass="ls2">0.25em字符间距：Confidenceofsuccessisalmostsuccess.</p><pclass="ls3">-1px字符间距：Confidenceofsuccessisalmostsuccess.</p></body>单词间距word-spacing

基本语法：word-spacing:normal|长度|百分比语法说明：normal：默认间隔。长度：用长度值指定间隔，可以为负值。百分比：CSS3新增，用百分比指定间隔，可以为负值，但目前主流浏览器均不支持百分比属性值。字距和词距一般很少使用，使用时应慎重考虑用户的阅读体验和感受。对于中文用户来说，letter-spacing属性有效，而word-spacing:属性无效。注意案例设置行高单词间距案例<head><styletype="text/css">p{font-size:13px;}.lh1{line-height:normal;}.lh2{line-height:24px;}.lh3{line-height:188%;}.lh4{line-height:1.5;}</style></head><body><pclass="lh1">（line-height:normal;所有段落文字的大小均为13px）我与父亲不相见已二年余了，我最不能忘记的是他的背影。</p><pclass="lh2">（line-height:24px;）那年冬天，……………</p><pclass="lh3">（line-height:188%;）回家变卖典质，…………</p><pclass="lh4">（line-height:1.5;）到南京时，………..</p></body>定义行高line-height

基本语法：line-height:normal|长度|百分比|数值语法说明：normal：默认行高。长度值：用长度值指定行高，不允许负值。如“line-height:18px”设定行高为18px。百分比：用百分比指定行高，其百分比取值是基于字体的高度尺寸。如“line-height:150%”设定行高为字体尺寸的150%，即1.5倍行距。数值：用乘积因子指定行高，不允许负值。如“line-height:2”设定行高为字体大小的2倍，相当于2倍行距。定义行高案例案例设置行高：图5-2-6部分代码<head><styletype="text/css">p{font-size:13px;}.lh1{line-height:normal;}.lh2{line-height:24px;}.lh3{line-height:188%;}.lh4{line-height:1.5;}</style></head><body><pclass="lh1">（line-height:normal;所有段落文字的大小均为13px）我与父亲不相见已二年余了，我最不能忘记的是他的背影。</p><pclass="lh2">（line-height:24px;）那年冬天，……………</p><pclass="lh3">（line-height:188%;）回家变卖典质，…………</p><pclass="lh4">（line-height:1.5;）到南京时，………..</p></body>定义缩进text-indent属性语法：text-indent:[长度值|百分比]&&hanging?&&each-line?语法说明：长度值：用长度值指定文本的缩进，可以为负值。如“text-indent:2em”表示缩进两个字体高百分比：用百分比指定文本的缩进，可以为负值。如“text-indent:20%”each-line：CSS3新增属

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论