第4单元样式应用.pptVIP

4 样式的应用 目录 4 样式的应用 我们上网都遇到过下面的情况。 1、QQ空间的给网页换肤效果 2、单击网页中的按钮（如大、中、小）来适时改变网页文字的大小等效果。 这些效果可以使用CSS样式就可轻松解决。 4.1 层叠样式表基础知识 目标 通过本节的学习，了解层叠样式表的基础知识，如语言规范、定义等，使用CSS面板定义样式，及如何应用样式。 4.1.2 层叠样式表基础知识 样式设计是指应用HTML样式和CSS（层叠样式表）设计网页的外观样式。CSS是Cascading Style Sheet的缩写，我们把它译为“层叠样式表”或“级联样式表”。 1．样式表的优点 （1）同时更新站点的许多页面，更快更容易 （2）制作体积小，下载页面快 （3）样式和结构分离 4.1.2 层叠样式表基础知识 2．CSS的基本语法和定义 （1）CSS的基本语法 CSS样式表的样式规则是由三个部分构成：Selector（选择器），Property（属性）和Value（属性的取值）。基本的格式如下。 Selector {property:value; property:value;…; property:value} 4.1.2 层叠样式表基础知识 ●selector：第一种是HTML标签选择器，只对该标签起作用，例如body，p，a等等。第二种叫class，即类选择器，必须以“．”开始，名称可以是字母和数字的组合，可应用到任何对象。第三种叫ID选择器，和类选择器类似，必须以“#”开始，名称也是字母和数字的组合，可应用到任何对象，但其有一定的局限性。第四种是关联选择器。 ●property：就是指将要被修改的性质，例如color。 ●value：给property的值，例如给color的值可以设置为red或#00ff00。 4.1.2 层叠样式表基础知识 html head style type=text/css !-- body { color: #ffffff; background-color: #000000; } a { color: #ff0000; } -- /style /head body 广西职业技术学院 a href=#计算机系/a /body /html 4.1.2 层叠样式表基础知识 （2）CSS的定义 CSS允许网站作者的网页外观以及表示方式更多控制。 它们扩展能够精确页上指定元素的位置和外观并创建特殊效果。 4.1.2 层叠样式表基础知识 ●外部样式表（Linked style sheets） 当我们想要应用相同样式一致整个 Web 站点，可以使用外部样式表。通常，外部样式表使用 .css为文件扩展名（例如, Mystyle.css)。 以下是一个独立的CSS文件： body {color:#0000FF;} p {color:#FF0000;font-size:24px;} 4.1.2 层叠样式表基础知识 注意：独立的CSS文件是不能包括style/style标记的，是仅仅由样式规则组成的。外部样式表需要通过链接来使用，通过HTML的LINK标记连接到HTML文档中。 4.1.2 层叠样式表基础知识 当样式被应用到很多的网页时，外部样式表是理想的。仅仅通过外部样式表就可以改变整个网站的外观。大多数浏览器会保存外部样式表在缓冲区，从而就可以避免显示网页时的延迟。 ●嵌入样式表（Embedded style sheets） 嵌入样式表服务于整个当前页面，适用于具有独一无二的样式的某个文档。在头标签head里面，使用style元素在文档中实现嵌入，里包含当前页面的所有样式。 4.1.2 层叠样式表基础知识 html head style type=text/css !-- body { color: #ffffff; background-color: #000000; } a { color: #ff0000; } -- /style /head body 广西职业技术学院 a href=#计算机系/a /body /html 4.1.2 层叠样式表基础知识 ●内联样式表（Inline styles） 内联样式通过style属性直接套进HTML的标记中去。当我们要定义样式对于单个元素