网页设计与制作-CSS样式.pptVIP

第四章CSS样式 4．1 CSS样式的定义和使用 4.1.1什么是CSS CSS（Cascading Style Sheet，层叠样式表）是一种格式化网页的标准方式，它扩展了HTML的功能，使网页设计者能够以更为有效的方式设置网页格式。 第四章CSS样式 它的作用之一就是针对网页中的对象的风格和样式进行定义；其二，使得HTML各个标记的属性更具有一般性和通用性。然而建立样式表的真正意义在于把对象引入了HTML，使得可以使用脚本程序（如JavaScript、VBScript）调用对象属性，并且可以改变对象属性，达到动态的目的，这在以前的HTML中是无法实现的。同时样式表扩展了原先的标记功能，实现了更多的效果，甚至还超越了Web页面的本身显示功能而把样式扩展到多媒体上，故其功能也是非常强大的。 第四章CSS样式 在同一个Web文档中可以有多个样式表存在，这些样式表根据所在的位置，拥有不同的优先级，优先级越高，就会被最后在显示时采用。从样式表插入的形式来看可以分为三种：１）内联式样式表：它利于现有的HTML标记，把特殊的样式加入到那些由标记控制的信息中，比如刚才的例子。２）嵌入式样式表：它和Javascript一样可以嵌入到HTML文件的头部中去（html和body标记之间），使用Style和/Style容器装载，例如：“stylep{color:red;font-weight:bold}/style”，这样会对页面中所有p标记都起作用。３）外部式样式表：是一种保存在外部的样式表文件，外部文件以.CSS为扩展名，例如“link　rel=stylesheet　href=”main-sheet.css”　type=”text/css””。 4.1.2 CSS样式的定义 样式定义的基本结构如下： Selector{property:value}对于单一的选择符的复合样式声明应该用分号隔开： Selector{property1:value1;property2:value2;…}其中：Selector:也称为选择符、选择器，表示需要应用样式的内容。Property:表示由CSS标准定义的样式属性，就是希望修改的属性， 4.1.2 CSS样式的定义 下面我们来详细学习CSS样式的基本结构中的内容。 1、选择符 选择符（selector）的作用在于定义CSS，在CSS中主要有三种选择符：超文本标记选择符（HTML selector），类选择符（class selector），ID选择符（ID selector）。三类选择符分别针对不同的要求而设，各自的定义方式也不同。 超文本标记选择符：任何HTML元素都可以是一个CSS选择符，选择符仅仅是指向需要特别样式的元素。例如：P{text：3em}中选择符是段落标记P，而A{color：red}中选择符是超级链接标记A。 4.1.2 CSS样式的定义 类选择符：单一选择符能有不同的CLASS（类），因而允许同一元素有不同的样式。例如：一个网页制作者也希望视其语言而定，用不同的颜色显示代码： font.html {color: red} font.css {color: blue} 在上面的例子中建立了两个类，类名分别是html和css，供HTML的font标记使用。HTML中的CLASS属性是用在HTML中来指明元素的类，例如： html headtitle试验选择符的效果/title STYLE font.html {color: red} font.css {color: blue} /STYLE /head body pfont class=html这里是html类的效果/font/p pfont class=css这里是css类的效果/font/p p这里是没有使用类的效果，理解了类选择符的意义了吗？/p /body /html 4.1.2 CSS样式的定义 须注意的是，每个选择符只允许有一层类。例如，font.html.proprietary是无效的。 类的声明也可以是无须相关的元素.note{font_size:small}。其意义为：名为note的类可以被任何元素使用。 ID选择符：我们可以为页面内所有的标记定义一个ID，在CSS中的选择符可以根据ID个别地定义每个元素的样式属性。这种选择符应该尽量少用，因为它具有一定的局限。一个ID选择符的指定要有指示符“#”在定义前面。例如，ID选择符可以指定如下：#indent3em{text-indent：3em}。这样可使用具有ID属性为indent3em的HTML标记具有选择符所定义的样式：文本缩进3em。 应该这样引用：P　ID=indent3em文本缩进3em/P 2、CSS属性 （1）字体属性： 字体属性用于控制网页