Web技术应用基础css.pptVIP

htmlhead title选择符的应用/title/head style type=text/css /*定义样式*/ !-- h2{ color:green; font-family:楷体; } .redfont{font-family:华文彩云;color:red} h4.bluefont{font-family:隶书;color:blue} #id_olivefont{font-family:楷体;color:olive} h4#purplefont{font-family:仿宋体;color:purple} -- /style body h2显示楷体绿色/h2 h3 class=redfont显示华文彩云红色/h3 h4 class=bluefont显示隶书蓝色/h4 h3 id=id_olivefont显示楷体橄榄绿/h3 h4 id=purplefont显示仿宋体紫色/h4 /body/html 5.4 样式表应用案例 使用用CSS样式的4种方式显示界面 练习1 /head body span class=level2Web技术应用基础/span span class=level1Web技术应用基础/span span class=level0Web技术应用基础/span p class=lev1欢迎学习/span p class=lev2欢迎学习/span /body/html ex5-7.html 练习2 实验报告1 课程名称：网站设计基础 实验题目：css技术的应用 实验目的：掌握运用HTML制作页面，并使用CSS技术对页面进行风格和样式的统一。 实验环境：windows xp ,dreamweaver 8 实验内容：运用html和css技术，制作一个具有三个页面的网站，内容自定，并用css技术使它们具有相同的样式风格。 * CSS 5.1 CSS简介 5.1.1 CSS作用 网页展现的样式从网页中独立出来集中管理 CSS 5.1.2样式表的使用结构 ? 多个网页文件共享样式文件 ? 多个样式文件套用在一个网页文件上 HTML 文件1 HTML 文件N CSS 样式文件 HTML CSS 样式文件N CSS 样式文件1 CSS 5.2 定义样式格式 选择器 { 规则 } ? 选择器(Selector) ?规则(Rule) 例5.1 CSS 5.3 应用CSS样式的4种方式 直接定义style属性 在HTML文档内定义内部样式表 嵌入式样式单 外部(链接)样式单 CSS 1.直接定义style属性 例5.2 htmlhead title直接定义HTML标记中的style属性/title /head body h1 style=color:green;text-align:center;font-style: italic;font-family:隶书;font-size:x-large; 用四种方式将样式表功能应用到Web页面中/h1 /body/html 例5.2 CSS 2.定义内部样式表 htmlhead title定义内部样式表/title style type=text/css /*定义样式*/ !-- h1{color:green; text-align:center; font-style:italic; font-family:隶书; font-size:x-large; } -- /style /head body h1用四种方式将样式表功能应用到Web页面中/h1 /body/html 例5.3 CSS 3.嵌入外部样式表 CSS ? style1.css 保存文字的其它样式 h1 { text-align:center; font-style:italic; font-family:隶书; font-size:x-large; } ? style2.css 保存文字的颜色 h1{ color:green;} CSS html head title嵌入外部样式表/title style type=text/css /*定义样式*/ !-- @import url(