初识CSS.pptxVIP

初识CSS 第四章 回顾与作业点评 常用的表单元素有哪些？ 使用语义化标签制作表单的作用是什么？ 请找出下面代码的错误之处。 input name=userName type=text value=zhangsan readonly/ input name=btn type=submit disabled value=提交 / 2/36 预习检查 使用CSS制作网页的优点是什么？ CSS的基本语法结构是什么？ HTML中引入CSS样式的几种方式是什么？ 3/36 本章任务 制作《望庐山瀑布》 制作《水调歌头》 制作《如梦令》 制作开心餐厅介绍页面 制作团队风采页面 4/36 本章目标 会使用CSS三种基本的选择器设置字体大小和颜色 会使用行内样式，内部样式表和外部样式表3种方式为HTML文档添加CSS样式 会使用复合选择器为特定的网页元素添加CSS样式 理解CSS继承特性，并掌握其在CSS样式中的应用 5/36 使用CSS的意义 CSS：层叠样式表（Cascading Style Sheet） CSS在网页中的应用 6/36 CSS的优势 内容与表现分离 网页的表现统一，容易修改 丰富的样式，使得页面布局更加灵活 减少网页的代码量，增加网页的浏览速度，节省网络带宽 运用独立于页面的CSS，有利于网页被搜索引擎收录 7/36 选择器 { 声明1; 声明2; …… } CSS的基本语法2-1 CSS基本语法结构 h1 { font-size:12px; color:#F00; } 选择器 声明 属性 值 CSS的最后一条声明后的“;”可写可不写，但是，基于W3C标准规范考虑，建议最后一条声明的结束“;” 都要写上 8/36 CSS的基本语法2-2 style标签 style type=text/css h1 { font-size:12px; color:#F00; } /style 9/36 CSS选择器3-1 标签选择器 类选择器 ID选择器 HTML标签作为标签选择器的名称 h1…h6、p、img/ p { font-size:16px;} 标签选择器 声明 属性 值 10/36 CSS选择器3-2 标签选择器 类选择器 ID选择器 .class { font-size:16px;} 类选择器 声明 属性 值 类名称 标签名 class= 类名称标签内容/标签名 11/36 CSS选择器3-3 标签选择器 类选择器 ID选择器 #id { font-size:16px;} id选择器 声明 属性 值 id名称 12/36 小结 标签选择器直接应用于HTML标签 类选择器可在页面中多次使用 ID选择器在同一个页面中只能使用一次 13/36 学员操作—制作《望庐山瀑布》 需求说明 使用标题标签和段落标签制作李白的诗《望庐山瀑布》，诗正文字体颜色为绿色，字体大小为14px。 14/36 学员操作—制作《水调歌头》 需求说明 标题颜色为红色，字体大小为18px；正文第一段字体大小为12px，字体颜色为红色，第二段字体颜色为黑色，字体大小为12px 红色18px字体 水平线 黑色12 px字体 红色12px字体 15/36 学员操作—制作《如梦令》 需求说明 使用标签选择器设置标题字体大小为20px 页面中所有段落中的文本字体大小为16px 使用类选择器设置正文和译文内容字体颜色为绿色 使用ID选择器设置译文标题颜色为蓝色 16/36 共性问题集中讲解 常见问题及解决办法 代码规范问题 共性问题集中讲解 17/36 行内样式 内部样式表 外部样式表 HTML中引入CSS样式7-1 18/36 行内样式 使用style属性引入CSS样式 HTML中引入CSS样式7-2 h1 style=color:red;style属性的应用/h1 p style=font-size:14px; color:green;直接在HTML标签中设置的样式/p 19/36 内部样式表 CSS代码写在head的style标签中 优点 方便在同页面中修改样式 缺点 不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底 HTML中引入CSS样式7-3 20/36 外部样式表 CSS代码保存在扩展名为.css的样式表中 HTML文件引用扩展名为.css的样式表，有两种方式 链接式 导入式 HTML中引入CSS样式7-4 21/36 HTML中引入CSS样式7-5 外部样式表 链接外部样式表 head …… link href=style.css rel=stylesheet type=text/css / …… /head 文件路径 使用外部样式表 文件类型 22/36 HTML中引