《Web前端开发项目教程》网页中添加图像和文本-网站首页中文本的应用_第1页
《Web前端开发项目教程》网页中添加图像和文本-网站首页中文本的应用_第2页
《Web前端开发项目教程》网页中添加图像和文本-网站首页中文本的应用_第3页
《Web前端开发项目教程》网页中添加图像和文本-网站首页中文本的应用_第4页
《Web前端开发项目教程》网页中添加图像和文本-网站首页中文本的应用_第5页
已阅读5页，还剩18页未读， 继续免费阅读

下载本文档

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

文档简介

项目04网页中添加图像和文本任务4-2网页中文本的应用任务4-2网站首页中文本的应用

知识点掌握各类文本标签及其属性的用法掌握文本标记的样式技能点能够向网页中添加文本能够熟练调整文本的样式一、插入文本用合适语义的标签对文本数据进行结构化是网站架构的基本技能。常用的文本标记有标题标签<h1>~<h6>、段落标签<p>、换行标签<br>、水平线标签<hr>、强调文本标签<strong>、<em>等，不同浏览器对不同文本标签有自己默认的呈现样式。块级文本标记行内文本标记特殊字符块级文本——标题标记<h1>~<h6><h1>~<h6>标签可定义六级不同大小的标题。<h1>定义最大的标题，<h6>定义最小的标题。用法：<hn>标题文本</hn>标题标记为双标记，n的取值为1到6。由于其拥有确切的语义，有明显的主次和轻重关系，因此要选择恰当的标签层级来构建文档的结构，常用h1用作主标题，h2是次重要的标题，依次后推。块级文本——段落标记<p>在网页中要把文字有条理地显示出来，离不开段落标记，就如同我们平常写文章一样，整个网页也可以分为若干个段落，段落的标记就是<p>。<p>段落文本</p>作为块级元素，p标签会自动在其前后创建一些空白，大小可以通过样式属性margin来改变。块级文本——水平线标记<hr/>在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单地通过标记来完成，<hr/>就是创建横跨网页水平线的标记。<hr/><hr/>是块级元素，块级元素的样式属性对于hr标记同样有效。例如：<hrstyle="width:80%;margin:0auto;background:#0000FF;">我们看到的水平线其实是一个高度为0的有边框的小矩形盒子。行内文本标记<span><span>标签经常被用来修饰段落中的某一部分文本，通过对span元素设置css样式可以为行内文本设置特殊效果。绝大多数行内修饰标记如加粗<b><strong>、斜体<i><em>、下划线<u>等都可以被<span>所取代，在样式表中设置span元素的样式可以更好地实现内容与形式的分离。例如：<i>斜体字</i>等价于<span>斜体字</span>样式表中span{font-style:italic;}<mark>标记文本<mark>是HTML5中的新标记，用来定义带有记号的文本，表示页面中需要突出显示或高亮显示的信息，也是行内元素。例如：<p>床前明月<mark>光</mark></p>换行标记<br/>在HTML中，一个段落中的文字会从左到右依次排列，直到父级盒子的右端，然后自动换行。如果希望某段文本强制换行显示，就需要使用换行标记<br/>，如果还像在word中直接敲回车键换行就不起作用了。HTML中<br/>元素属于内联元素，但是除了换行也没有其他实际意义。注释标记在开发中为代码添加适当的注释是一种良好的习惯。注释只在编辑文本情况下可见，在浏览器展示页面时并不会显示。在HTML中用“<!--”和“-->”标记插入注释，且不支持任何属性。语法结构为：<!--注释的文本内容-->例如：<!--以下是通知板块--><div>这里是最新通知。</div>在CSS中的注释则必须以“/*”开始、以“*/”结束，中间加入注释内容。注释可以放在样式表之外，也可以放在样式表内部。语法结构为：/*注释的文本内容*/例如：/*定义网页的头部样式*/.head{width:960px;}特殊字符字符描述实体名称

空格

<

小于号<>

大于号>&和号&¥人民币¥©版权©®注册商标®°摄氏度°±正负号±×乘号×÷除号÷²平方²³立方³二、CSS文本和字体样式应用---字体样式样式属性描述取值font-family字体系列font-family:"TimesNewRoman",Times,serif;font-size字号14px16pt1.5emfont-style斜体italicfont-weight粗体boldfont一次性设置所有的字体属性font:italicbold18px‘幼圆’;二、CSS文本和字体样式应用---字体样式（1）设置字体font-family:字体1,字体2;font-family有两种类型的字体系列名称可以取值。第一种是指定具体字体名称，比如："timesnewroman"、"黑体"、"arial"等。为防止用户机器上该字体系列不可用，font-family取值为具体字体的时候通常多定义几个备用字体，如果第一个字体没有的话就按照第二个字体显示。双引号可以省略，但是字体名称内部如果有空格的话一定要用双引号把字体名称引起来。第二种是指定通用字体集名称，所谓通用字体集名称就是统一描述一类字体样式的名称，例如“serif（有边饰字体）”、“sans-serif（无边饰字体）”等。浏览器在遇到字体集名称的时候，会自动从系统中寻找与之匹配的字体进行显示。使用的时候通常多定义几个备用字体，如果第一个字体没有的话就按照第二个字体显示，字体名称内部如果有空格的话要用双引号把字体名称引起来。二、CSS文本和字体样式应用---字体样式（2）文字大小font-size:16pt;font-size:12px;font-size:2em;在CSS中，字体大小的设置单位常用的有3种：px、pt和em。px就是表示pixel，像素，是屏幕上显示数据的最基本的点；而pt就是point，英文音译为“磅”，中文读作“点”，是排版印刷中常用的文字大小单位。

任意浏览器的默认字体高都是16px。96px=72pt。

Chrome中文界面下默认会将小于12px的文本强制按照12px显示。em是相对长度单位，相对于当前对象内文本的字体尺寸。默认大小:1em=16px，1.25em=16px*1.25=20px；如果在body里面定义font-size:12px;则1em=12px，1.25em=12px*1.25=15px。二、CSS文本和字体样式应用---字体样式（3）文字加粗、倾斜与大小写倾斜：font-style:italic粗体：font-weight:bold变体：font-variant:small-caps(小体大写)（4）用font综合设置样式如果将所有的关于字体的样式设置在一个font属性里面，必须按照指定的顺序来写，各个属性使用空格隔开。格式如下：

选择器{font:font-style

font-weight

font-size/line-height

font-family;}其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。二、CSS文本和字体样式应用---文本样式样式属性描述取值color文本颜色red#f00#ff0000rgb(255,0,0)line-height行高14px1.5em120%text-decoration装饰线noneoverlineunderlineline-throughtext-indent首行缩进2emtext-align对齐centerleftrightjustifyletter-spacing字符间距2px-3px二、CSS文本和字体样式应用---文本样式（1）文字颜色前景字符颜色属性：color该属性改变的是文本的颜色，使用时要与背景色background-color属性相区分。color:blue;color:#0000ff;color:#00f;color:rgb(0,0,255);color:rgb(0%,0%,100%);二、CSS文本和字体样式应用---文本样式（2）行高line-height:30px;行高指的是文本行的基线间的距离，即每行文字下基线与下一行文字的下基线之间距离（或者是每行文字上基线与下一行文字的上基线之间距离）。应用：通过调整line-height的值实现单行文字的垂直居中。#txt{ font-family:微软雅黑;

height:60px;

background-color:#eee;

font-size:16px; line-height:60px;

}二、CSS文本和字体样式应用---文本样式（3）文字的修饰效果text-decoration属性的作用就是在文本上面、中间或下面添加线条。取值为overline的时候，在上面有装饰线；取值是line-through的时候，在中间有一条删除线；取值为underline的时候，在最下面有一条下划线。经常用于超链接中去掉下划线

a{text-decoration:none;}二、CSS文本和字体样式应用---文本样式（4）文字的水平对齐方式text-align设置水平方向上的对齐方式，可以取值为left|right|center等。（5）文字布局字符间距属性：letter-spacing字符间距可以是负数，此时字符之间会有重叠的效果。二、CSS文本和字体样式应用---文本样式（6）段落的首行缩进首行缩进是将段落的第一行缩进，这是常用的文本格式化效果，一般为缩进两个字符。text-indent属性的初始值为0，text-indent:2em;实现段首空两格的效果。text-indent还可以取负值，实现悬挂缩进的效果。实训任务1：为文本添加CSS样式完成以下页面效果。<body>

<h1>新华网评：以科学家精神引领创新之路</h1>

<imgsrc="img/xinhua.jpg">

<p><span>一</sp

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

温馨提示

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

最新文档

评论

0/150

提交评论