《HTML5+CSS3任务驱动教程(第2版)（微课版）》课件 模块8 CSS3样式基础_第1页
《HTML5+CSS3任务驱动教程(第2版)（微课版）》课件 模块8 CSS3样式基础_第2页
《HTML5+CSS3任务驱动教程(第2版)（微课版）》课件 模块8 CSS3样式基础_第3页
《HTML5+CSS3任务驱动教程(第2版)（微课版）》课件 模块8 CSS3样式基础_第4页
《HTML5+CSS3任务驱动教程(第2版)（微课版）》课件 模块8 CSS3样式基础_第5页
已阅读5页，还剩16页未读， 继续免费阅读

下载本文档

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

文档简介

模块八

CSS3样式基础《HTML5+CSS3任务驱动教程》目录任务一任务二任务三网页大标题的样式设计网页中的文字排版制作产品分类本模块任务安排：引入知识点任务1网页大标题的样式设计8.1什么是CSS8.2CSS的应用任务1网页大标题的样式设计8.1什么是CSSCSS是层叠样式表(CascadingStyleSheets)的简称，是用来表现HTML或XML的标记语言，运用CSS样式与HTML所描述的信息结构相结合，能够帮助设计师将网页内容与表现相分离，使网站更加容易构建与维护。任务1网页大标题的样式设计8.1什么是CSSCSS的语法结构任务1网页大标题的样式设计8.2CSS的应用1、行间样式行间样式，也叫内联样式，由HTML标记中的style属性所支持，要使用行间样式，你需要在相关的标签内使用样式（style）属性。行间样式将表现和内容混杂在一起。<pstyle="color:#f00;padding-left:20px">这是一个段落。</p>任务1网页大标题的样式设计8.2CSS的应用2、内部样式内部样式是CSS样式编码的初级应用形式，样式表作为页面的一个单独部分，由<style></style>标记定位在<head></head>之中。只能针对当前页面有效，不能跨页面执行。<head><styletype="text/CSS">hr{color:blue;}p{margin-left:20px;}body{background-color:#ccc;}</style></head>任务1网页大标题的样式设计8.2CSS的应用3、外部样式外部样式表是CSS应用中最好的一种形式，它将CSS样式代码单独放在一个外部文件中，再由网页进行调用。而且多个网页可以调用同一个样式表文件，这样能够实现代码的最大限度重用及网站文件的最优化配置。当样式需要应用于很多页面时，外部样式表将是理想的选择。<head><linkrel="stylesheet"type="text/CSS"href="mystyle.CSS"/></head>任务1网页大标题的样式设计8.2CSS的应用CSS的文本属性任务1网页大标题的样式设计任务实现（1）使用HBuilder创建一个html文件，保存为index.html，文档中包含<head>、<body>等基本的HTML结构。（3）为<h1>标记设计CSS样式（2）在<body>标记中，使用标题标记<h1>将内容进行语义化标记引入知识点任务2网页中的文字排版8.3CSS字体样式任务2网页中的文字排版8.3CSS字体样式任务实现（1）在HBuilder中新建一个HTML5页面，保存为news1.html，使用<div>、<h1>、<h2>、<p>标记对网页内容进行结构定义（3）采用外部样式表的方式，将CSS与html链接（2）新建CSS文件，保存于与HTML文档同一目录下，保存文件名称为news.css任务2网页中的文字排版body{ font-size:100%;}div{ width:600px; font-family:MicrosoftYahei;/*字体为微软雅黑*/}h2{ text-indent:2em;/*首行缩进2个字符*/ font-style:italic;/*设置倾斜字体*/}p{ font-size:1.2em;/*字体放大0.2倍*/ line-height:1.8em;/*行高为原来的1.8倍*/ text-indent:2em;/*首行缩进*/ color:#333;}效果图任务2网页中的文字排版效果图任务2网页中的文字排版按相同方法完成new2.html页面，采用外部样式表，实现相同的外观。引入知识点任务3制作产品分类8.4列表元素列表HTML标记任务3制作产品分类1、ul无序列表2、ol有序列表3、自定义列表dl<h3>无序列表:</h3><ul><li>循环制</li><li>淘汰制</li><li>混合制</li></ul><h3>有序列表:</h3><ol> <li>一等奖</li> <li>二等奖</li> <li>三等奖</li> </ol><dl><dt>欢迎来学习HTML+CSS</dt><dd>这里有，html教程</dd><dd>这里有，css模块</dd><dd>这里有，css教程</dd></dl>列表的CSS属性任务3制作产品分类任务实现任务3制作产品分类（1）启动HBuilder，新建文档，选择HTML文档，保存为list.html，将文档内容写入<body>标记中

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

温馨提示

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

最新文档

评论

0/150

提交评论