网站设计与规划--第5章+CSS在网站设计中的应用.ppt

第5章CSS在网站设计中的应用,主讲：,本章要点,CSS的概念CSS的基本语法CSS的应用形式CSS的属性,5.1CSS简介,5.2,5.3,CSS是一种对页面内容外观进行精确控制的技术规范，它是由W3C组织负责发布的。尽管使用HTML标记及其属性同样可以对页面元素外观进行控制，但是这样一来缺点也显现出来了。首先，将属性描述与内容混合使代码变得混乱，可读性变差；其次，HTML标记及其属性的描述能力有限，只能实现一些常规的外观设定，对于更加多样的呈现就无能为力了。,使用CSS样式可以有效地对页面的布局、字体、颜色、背景和其他效果实现精确描述，同时对它们的修改和控制变得更加快捷。使用CSS样式还可以使Web页面内容和外观定义分开，HTML专注于内容，CSS则用于外观规划，使每个页面的内容及整个站点更趋于规范。,5.2CSS的语法,5.2.1CSS的应用形式5.2.2选择符5.2.3CSS属性,5.1,5.3,5.2.1CSS的应用形式,使用style属性定义内联样式,这种方法适合于单独定义某个对象的样式，其格式为：style=:;:;网站规划与设计该例中第一个标记使用style属性定义了样式，第二个仍遵循默认外观。,定义内部CSS样式表,如果要批量定义一类元素的样式，可以采用预先定义CSS样式的方法，这也是CSS的普遍应用方式。定义CSS样式的格式为：选择符属性:属性值;属性:属性值CSS样式定义由三部分构成：选择符（selector）、属性（properties）和属性值（value）。CSS样式需要在内部的中进行定义，在部分使用。,定义外部CSS样式表,可以将CSS样式定义在单独的文件，在需要时导入。CSS样式表文件扩展名为.CSS。在中使用标记导入样式表文件，其中定义的样式就可以用于该HTML文档了。,5.2.2选择符,标记选择符,CSS样式的选择符可以是HTML标记，这种样式重新定义了特定标记的外观。使用标记选择符定义CSS样式的格式为：标记选择符属性:属性值;,类选择符,使用自命名的标识符定义CSS样式。类选择符样式的定义格式为：类选择符属性:属性值;选择符前面加“”表示这是一个类选择符。,ID选择符,使用自命名的标识符定义CSS样式。ID选择符样式的定义格式为：#ID选择符属性;属性值;选择符前面加“#”表示这是一个ID选择符。,5.2.3CSS属性,CSS样式允许定义的属性非常多，这么多属性并不是对所有HTML标记都有效。在定义CSS样式时，只需要定义几种相关的属性即可。在涉及到数值时，往往有多种计量单位可选，限于篇幅，表中仅列出其中一种。每个CSS样式包含一系列属性，这些属性确定了CSS样式的显示效果。,文本属性,文本属性是CSS属性中的一大类，用来设置文字的显示效果。其中部分属性设置效果可以通过文字的标记实现。,CSS样式文本属性,背景属性,背景属性设定对象的背景颜色或背景图像。CSS样式背景属性,内外填充属性,一些Web元素如表格、图像等可以看作是一个容器，容器中放置了呈现内容。所谓的内外填充，可以认为是容器内外侧的衬垫。,CSS样式填充属性,定位与显示属性,内外填充属性站在容器的角度，设定了页面的排版。从容器内容的角度来说，也可以设置内容相对于容器的定位以及内容的尺寸。,CSS样式定位与显示属性,边框属性,边框属性用来设置对象的边框颜色、类型以及粗细。CSS样式边框属性,CSS样式边框属性(续表),鼠标指针及滤镜属性,可以使用鼠标指针属性（curor）设置鼠标指针的呈现形态。而滤镜（filter）是CSS样式的重要组成部分，通过设置滤镜，可以实现页面元素的特别效果。,5.3CSS的应用,5.3.1文字排版5.3.2内外填充定位与绕排5.3.3定位与绕排5.3.4边框修饰5.3.5鼠标指针效果5.3.6滤镜,5.2,5.1,5.3.1文字排版,标记可以设置文字的属性，通过CSS除了能设置基本的文字属性，还可以设置字间距、缩进等高级样式。,5.3.2内外填充所谓填充，是依容器类对象所说的，如表格、单元格、图像等。,5.3.3定位与绕排,定位,一般的，浏览器按照从前到后、从上到下的顺序解析Web文档，依次展现页面元素。若要将某个元素个性化定位，可以使用CSS样式的定位属性来决定其精确位置。top、bottom、left、right这4个属性用来设置对象与容器四边的距离。通过这4个属性，可以实现对象的精确定位。需要说明的是，配合使用的属性还有position，position的值为absolute或relative，只有加上了position属性，上述几个属性才有效。,绕排,默认情况下，图片与文字混排时，一幅图片只能处在一行文字中。由于图片往往较大，显示效果不太好，这时可以使用float属性实现图文混排。,5.3.4边框修饰,边框修饰用于定义对象的边框颜色、样式、粗细等。,表单元素外观默认呈现灰色或白色，为使表单元素外观与Web页面协调，可以使用CSS重新定义其样式。,5.3.5鼠标指针效果,默认情况下，鼠标指针停留在页面上的外观形如或者，或，可以设定页面元素的个性化鼠标指针效果。,鼠标指针属性还可以取值为某个鼠标指针文件（扩展名为cur），格式为curor:url(url)。该url可以位于本站点内部，也可以位于Internet上。,5.3.6滤镜,透明滤镜（Alpha）,设置对象的透明度，多用于图像。,透明滤镜参数,模糊滤镜（blur）,设置对象的模糊效果，多用于图像。模糊滤镜参数,去色滤镜（chroma）,去除对象中包含的特定颜色，应用格式为chroma(color=颜色值)。去除某种颜色后，被去除的区域显示后景色，即对象所在容器的颜色。该滤镜用于图像的效果不是太好，除非图像中出现连续的同一颜色。,投影滤镜（dropshadow）,dropshadow投影滤镜产生对象的投影，如同物体投射产生的影子，对图像的支持不太好。投影滤镜参数,阴影滤镜（shadow）,shadow阴影滤镜产生对象的阴影，如同光线照射形成的阴影区域。阴影滤镜参数,发光滤镜（glow）,发光滤镜用来设置对象的发光效果。发光滤镜在某种程度上与阴影滤镜有些类似，但阴影滤镜是有方向的，发光滤镜是辐射状的。发光滤镜参数,波浪滤镜（wave）,波浪滤镜用来设置对象的波浪效果。波浪滤镜参数,add参数设定波浪效果是扭曲还是缠绕。add=true设置扭曲式波浪，对象呈扭曲状；add=false设