网页设计6-css讲解.ppt

内部培训资料,不作任何宣传用途 P o w e r B a r 中国专业PPT设计交流论坛 授课人：何蕴婷 EMAIL：jmhyt@126.com 内部培训资料,不作任何宣传用途 内部培训资料,不作任何宣传用途 网页设计与制作（6） —— CSS样式（1） 知识技能目标 1、通过实训项目了解在网页中用css设置优点。 2、通过实训项目了解css的语法结构。 实训内容 1、在网页中css的语法结构 2、用css设置网页的样式 引入 维护困难 标记不足 网页过“胖” 定位困难 --传统HTML的缺陷 引入 实例1：1-2.html html head title页面标题/title /head body h2font color=#0000FF face=黑体CSS标记1/font/h2 pCSS标记的正文内容1/p h2font color=#0000FF face=黑体CSS标记2/font/h2 pCSS标记的正文内容2/p h2font color=#0000FF face=黑体CSS标记3/font/h2 pCSS标记的正文内容3/p h2font color=#0000FF face=黑体CSS标记4/font/h2 pCSS标记的正文内容4/p /body /html 维护困难 引入 实例2：1-3.html html head title页面标题/title style !-- h2{ font-family:幼圆; color:red; } -- /style meta http-equiv=Content-Type content=text/html; charset=gb2312/head body h2CSS标记1/h2 pCSS标记的正文内容1/p h2CSS标记2/h2 pCSS标记的正文内容2/p h2CSS标记3/h2 pCSS标记的正文内容3/p h2CSS标记4/h2 pCSS标记的正文内容4/p /body /html CSS的优势 课堂讲解 CSS样式简介 创建CSS样式 设置CSS样式 管理CSS样式 应用CSS滤镜效果 扩展的CSS支持 CSS样式简介 CSS（Cascading Style Sheets）样式又叫层叠样式，使用它可以对网页中的布局元素，如表格、字体、颜色、背景、链接效果和其他图文效果实现更加精确的控制。CSS样式不仅可以在一个页面中使用，而且可以用于其他多个页面。 CSS样式简介 使用 CSS样式控制页面的方法： 1、行内样式，1-5.html html head title页面标题/title /head body p style=color:#FF0000; font-size:20px; text-decoration:underline;正文内容1/p p style=color:#000000; font-style:italic;正文内容2/p p style=color:#FF00FF; font-size:25px; font-weight:bold;正文内容3/p /body /html CSS样式简介 2、内嵌式：1-6.html html head title页面标题/title style type=text/css !-- p{ color:#FF00FF; text-decoration:underline; font-weight:bold; font-size:25px;} -- /style /head body p紫色、粗体、下划线、25px的效果1/p p紫色、粗体、下划线、25px的效果2/p p紫色、粗体、下划线、25px的效果3/p /body /html CSS样式简介 3、链接式：1-7.html head title页面标题/title link href=1.css type=text/css rel=stylesheet meta http-equiv=Content-Type content=text/html; charset=gb2312/head body h2CSS标题1/h2 p紫色、粗体、下划线、25px的效果1/p h2CSS标题2/h2 p紫色、粗体、下划线、25px的效果2/p /body /html 其中， 1.css的代码如下 h2{ color:#0000FF;} p{ color:#FF00FF; text-decoration:underline; font-weight:bold; font-size:20px;} CSS样式简介 4、导入样式：