《HTML5+CSS3任务驱动教程(第2版)（微课版）》课件 模块8 CSS3样式基础.pptx

模块八

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之中。只能针对当前页面有效，不能跨页面执行。headstyletype=text/CSShr{color:blue;}p{margin-left:20px;}body{background-color:#ccc;}/style/head

任务1网页大标题的样式设计8.2CSS的应用3、外部样式外部样式表是CSS应用中最好的一种形式，它将CSS样式代码单独放在一个外部文件中，再由网页进行调用。而且多个网页可以调用同一个样式表文件，这样能够实现代码的最大限度重用及网站文件的最优化配置。当样式需要应用于很多页面时，外部样式表将是理想的选择。headlinkrel=stylesheettype=text/CSShref=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、自定义列表dlh3无序列表:/h3ulli循环制/lili淘汰制/lili混合制/li/ulh3有序列表:/h3ol li一等奖/li li二等奖/li li三等奖/li /oldldt欢迎来学习HTML+CSS/dtdd这里有，html教程/dddd这里有，css模块/dddd这里有，css教程/dd/dl

列表的CSS属性任务3制作产品分类

任务实现任务3制作产品分类（1）启动HBuilder，新建文档，选择HTML文档，保存为list.html，将文档内容写入body标记中。为文本内容添加h1、ol-li、h3、ul-li等标记或标记对，添加标记时注意标记的配对和缩进。（2）新建CSS样式表文件，保存为list.css，并使用link标记与HTML页面关联。

效果图任务3制作产品分类

谢