前端网页设计第3次课.ppt

* 分发本次课所用文件 项目准备-任务3 –子任务1-任务实施过程.doc 项目准备-任务3 –子任务1-任务实施总结.doc 项目准备-任务3 –子任务2-任务实施准备.doc 定义：CSS就是(Cascading Style Sheets)“层叠样式表”，简称样式表，它是一种定义网页页面排版样式的工具 特点： 1、CSS精确地控制网页面里各元素的格式，通过修改一个 文件就可以改变大量网页的外观和格式； 2、CSS需要IE4(Internet Explorer 4.0)和NC4(Netscape 4.0)以上的浏览器支持； 3、编码更少，下载速度更快； 知识点： （一）CSS基础 提问：属于网页设计 哪种标准语言？ 将样式表文件嵌入HTML或XHTML文档的方法  (1)一般是嵌入到文档头即:head标记中 (2)将样式表加入到代码行中 (3)将外部CSS文件链接到HTML或XHTML文档 (4)将外部CSS文件导入到HTML或XHTML文档 链接外部样式表 导入外部样式表 内嵌样式表 提问 内部样式表 知识点： （二）语法结构 1. CSS基本语法结构 CSS的语法结构由三部分组成： 选择符(selector) 属性(properties) 属性值(value) 书写格式如下： selector {property: value} 选择符 {属性:值} 提问 练习：请大家快速完成一个CSS命令语句的编辑，内容自定义 2、选择符的类型 3种 HTML或XHTML标记选择符：HTML或XHTML标记 如 body、p、table等，属性和值要用冒号隔开： 例如 style type=“”body {margin: 50px 40px 20px 10px;} /style id选择符：#选择符 （id属性） 定义一个元素的独特样式，每个id属性的值是唯一的，必须 以字母开头并且仅包含字母、数字或连字符(字母:A~Z、a~z) 例如：style type=“”#m{bgcolor:#00ffff;width:260px;height:160px;}/style bodyp id=“m”欢迎使用CSS层叠式样式表/p/body 类选择符：.选择符（class属性） 类的名称可以是任意英文单词或以英文开头与数字的组合， 一般以其功能和效果简要命名。 例如： style type=“”.t{color:#0000ff;font-family:”隶书”}/style bodyp class=“t”欢迎使用CSS层叠式样式表/p/body 提问 知识点： （三）CSS元素分类 1、块级元素 (display:block)每个块级元素都从新行开始，其后元 素也要另起一行开始，如div 2、内联元素 (display:inline)不需要在新行内显示，其后元素也不 必另起一行，如span 3、列表项 (display:list-item)和列表类似 块状元素与内联元素区别 块状元素 内联元素 最大区别：块状元素可以定义大小，即设置宽度、高度属性 知识点：(四)盒模型 (边距、填充距) left 内容宽度、边距、填充据、边框之间的关系，如下图所示： *