HTML5教案第6讲认识CSS_第1页
HTML5教案第6讲认识CSS_第2页
HTML5教案第6讲认识CSS_第3页
全文预览已结束

下载本文档

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

文档简介

web前端开发认识CSS（教案）教学内容及教学过程说明步骤一问题引入层叠样式表（CSS，cascadingstylesheets）又称为级联样式表，是用于控制或增强网页的外观样式，并且可以与网页内容相分离的一种标签性语言。在HBuilder中打开两个页面。一个页面使用HTML格式化；另一个页面使用CSS格式化，产生了同样的页面效果，如图4-1所示。<P>标签内的文字只能使用<font>标签进行格式化，而<font>标签不建议使用<P>标签内的文字只能使用<font>标签进行格式化，而<font>标签不建议使用CSS代码：<p>标签样式，字体大小14px，红色步骤二讲授4.1CSS概述1.CSS概念CSS是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。2.CSS的历史3.CSS的特点（1）丰富的样式定义。（2）易于使用和修改。（3）多页面应用。（4）层叠。（5）页面压缩。4.2CSS的作用和使用4.2.1.CSS的作用（1）遵循W3C标准，符合web2.0标准（2）减少重复格式化，减少网页体积，加快下载和访问速度。（3）符合内容与表现形式分离的原则，方便搜索引擎抓取到有用的内容。（4）便于更新和维护，成千上万的网页只需修改CSS便可以更改显示外观。（5）浏览器干扰相对较小，实现一些HTML格式化不能实现的高级功能。4.2.2CSS样式表的使用方式1.行内样式表。直接在HTML代码中加入样式规则，适用于网页内某一小段文字的显示规则，效果仅可控制该标签。任务实例4-2-1：行内样式表引用<pstyle="background-color:#ffff00;color:#000;font-size:28px;text-align:center;">行内样式表引用实例，重要的事情说三遍！</p>2.内部样式表。将CSS样式表以<styletype="text/css">……</style>格式嵌入到HTML文件的<head>……</head>之间。任务实例4-2-2：内部样式表引用。<head><styletype="text/css">#divbox{ margin:0auto; width:180px;/*设置宽度*/ height:250px;/*设置高度*/ border:5px#0000FFsolid;/*设置边框粗细、颜色和类型*/ padding:10px;/*设置box的内边距为10px*/ text-align:center;/*box内所有内容居中*/}.a{font-family:"黑体";}/*定义a类文字为黑体*/.b{font-family:"宋体";}/*定义b类文字为宋体*/.c{font-family:"华文行楷";}/*定义c类文字为华文行楷*/.d{font-family:"华文彩云";}/*定义d类文字为华文彩云*/.e{font-family:"微软雅黑";}/*定义e类文字为微软雅黑*/</style>3.外部链接样式表。需要把已经编写好的样式文件保存为扩展名为*.css的文件，然后将链接样式表文件链接到HTML文档中。多个网页可以调用一个样式表文件，这样会使网站的整体风格保持一致，同时也可以实现页面HTML与CSS的分离。任务实例4-2-3：外部链接样式表引用<head><metacharset="utf-8"><title>链接样式引用实例</title><linkrel="stylesheet"href="css1.css"type="text/css"/>/*引入CSS文件*/</head>4.导入外部样式表。导入外部样式引用是在浏览器解释的HTML代码时，将外部CSS文件的内容全部调入网页页面中，而外部链接样式表不将外部CSS文件的内容调入到页面中，只是在用到该样式时才在外部CSS中调入该样式的定义。<styletype="text/css">@importurl(css1.css);</style>4.3CSS的基本语法CSS样式表一般由若干样式规则构成，每个样式规则都可以看成一条CSS基本语句。CSS语言由选择符、属性及属性值构成，样式列表的基本语法如下。选择符{属性1:属性值1;属性2:属性值2;属性3:属性值3;……}其中，选择符是标识已设置格式元素（如body，table，p，类名，ID名）术语。样式在实际编写中有以下几点需要注意。（1）一般来说，一行定义一条样式，每条声明末尾都需要加上分号。（2）CSS对大小写不敏感，但在实际编写中，推荐属性名和属性值都用小写。具有相同样式的选择器，可以将这一系列的选择器分成一个组，用逗号将每个选择器隔开。例如：h1,h2,h3{color:red;步骤三课堂小结CSS概述2．CSS的作用和使用3．CSS的基本语法选择符{属性1:属性值1;属性2:属性值2;属性3:属性值3;……}步骤四作业1.对比4种CSS样式表的使用方式，并实践练习。使用CSS样式，将网页内容与网页样式分离，使网页更小、下载速度更快，还可以更加方便地更新和维护网页举例、对比、启发教授CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式注意：CSS样式多个属性及属性值包含在style=“……”之间，各属性之间用分号隔开，同一

人人文库> 全部分类> 行业资料 > 信息产业

温馨提示

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

最新文档

评论

0/150

提交评论