《网页设计与制作-css样式》由会员分享，可在线阅读，更多相关《网页设计与制作-css样式（56页珍藏版）》请在金锄头文库上搜索。
1、第四章CSS样式,41 CSS样式的定义和使用 4.1.1什么是CSS CSS（Cascading Style Sheet，层叠样式表）是一种格式化网页的标准方式，它扩展了HTML的功能，使网页设计者能够以更为有效的方式设置网页格式。,第四章CSS样式,它的作用之一就是针对网页中的对象的风格和样式进行定义；其二，使得HTML各个标记的属性更具有一般性和通用性。然而建立样式表的真正意义在于把对象引入了HTML，使得可以使用脚本程序（如JavaScript、VBScript）调用对象属性，并且可以改变对象属性，达到动态的目的，这在以前的HTML中是无法实现的。同时样式表扩展了原先的标记功能，实现了
2、更多的效果，甚至还超越了Web页面的本身显示功能而把样式扩展到多媒体上，故其功能也是非常强大的。,第四章CSS样式,在同一个Web文档中可以有多个样式表存在，这些样式表根据所在的位置，拥有不同的优先级，优先级越高，就会被最后在显示时采用。从样式表插入的形式来看可以分为三种： ）内联式样式表：它利于现有的HTML标记，把特殊的样式加入到那些由标记控制的信息中，比如刚才的例子。 ）嵌入式样式表：它和Javascript一样可以嵌入到HTML文件的头部中去（和标记之间），使用和容器装载，例如：“pcolor:red;font-weight:bold”，这样会对页面中所有标记都起作用。 ）外部式样式表
3、：是一种保存在外部的样式表文件，外部文件以.CSS为扩展名，例如“”。,4.1.2 CSS样式的定义,样式定义的基本结构如下： Selectorproperty:value对于单一的选择符的复合样式声明应该用分号隔开： Selectorproperty1:value1;property2:value2;其中：Selector:也称为选择符、选择器，表示需要应用样式的内容。Property:表示由CSS标准定义的样式属性，就是希望修改的属性，,4.1.2 CSS样式的定义,下面我们来详细学习CSS样式的基本结构中的内容。 1、选择符 选择符（selector）的作用在于定义CSS，在CSS中主要
4、有三种选择符：超文本标记选择符（HTML selector），类选择符（class selector），ID选择符（ID selector）。三类选择符分别针对不同的要求而设，各自的定义方式也不同。 超文本标记选择符：任何HTML元素都可以是一个CSS选择符，选择符仅仅是指向需要特别样式的元素。例如：Ptext：3em中选择符是段落标记，而Acolor：red中选择符是超级链接标记。,4.1.2 CSS样式的定义,类选择符：单一选择符能有不同的CLASS（类），因而允许同一元素有不同的样式。例如：一个网页制作者也希望视其语言而定，用不同的颜色显示代码： font.html color: red
5、 font.css color: blue 在上面的例子中建立了两个类，类名分别是html和css，供HTML的标记使用。HTML中的CLASS属性是用在HTML中来指明元素的类，例如：试验选择符的效果font.html color: red font.css color: blue这里是html类的效果 这里是css类的效果 这里是没有使用类的效果，理解了类选择符的意义了吗？,4.1.2 CSS样式的定义,须注意的是，每个选择符只允许有一层类。例如，font.html.proprietary是无效的。 类的声明也可以是无须相关的元素.notefont_size:small。其意义为：名为no
6、te的类可以被任何元素使用。 ID选择符：我们可以为页面内所有的标记定义一个ID，在CSS中的选择符可以根据ID个别地定义每个元素的样式属性。这种选择符应该尽量少用，因为它具有一定的局限。一个ID选择符的指定要有指示符“#”在定义前面。例如，ID选择符可以指定如下：#indent3emtext-indent：3em。这样可使用具有ID属性为indent3em的HTML标记具有选择符所定义的样式：文本缩进3em。 应该这样引用：文本缩进3em,2、CSS属性,（1）字体属性： 字体属性用于控制网页中文本的字符显示方式，例如：控制文字的大小、粗细以及使用的字体等。CSS中的字体属性包括：font-
7、family、font-size、font-style、font-weight和font-variant。 Font-family属性： 用于确定要使用的字体列表（类似于FONT标记符的face属性），取值可以是字体的名称，也可以是字体族的名称，值之间用逗号分隔。例如： H1font-family：楷体_gb2312，黑体 在使用字体或字体族时，字体或字体族名称中间的空格应用“_”进行替换（例如，new centry变为new-centry）或对字体或字体族加上引号（例如，“new centry”）,2、CSS属性,Font-size属性 用于控制字体的大小，它的取值分为四种类型：绝对大小（a
8、bsolute-size）、相对大小（relative-size）、长度（length）和百分比（percentage）。如果不设置，它的默认值是中等大小（medium）。 绝对大小（absolute-size）：是通过一个字型计算表检索到的、并能为浏览器所看到的屏幕尺寸，它可以取的值有7个：xx-small、x-small、small、medium、large、x-large、xx-large，表示越来越大的字体。在计算机屏幕上每改变一个相邻的值，尺寸便会增加50%或缩减三分之一。也就是说一般情况下，medium为12pt的时候，large为18pt，small为8pt。所以不同的mediu
9、m值会产生不同的字型尺寸表。 相对大小（relative-size）：是对于字型表或者被定义元素的参照元素字型尺寸表而言的。它可能的取值包括：large和small两种。 长度（length）和百分比（percentage），这是推荐使用的字型定义大小的单位。例如： bodyfont-size：12pt h1font-size：150% 但是要注意，使用负数值定义是无效。,2、CSS属性,Font-style 属性 用于确定指定元素显示的字形。它的取值包括：normal、ittalic和oblique三种。默认值为normal，表示普通的字形；italic表示斜体；oblique表示偏斜体。
10、Font-weight属性 用于定义字体粗细值。它的取值包括：normal、bold、bolder、lighter、100、200、300、400、500、600、700、800、900。默认值为normal表示正常粗细，bold表示粗体。100900对应从最细到最粗，而normal相当于400，bold相当于800。Bolder和light的值是相对于其他参照值的，例如： STRONGfont-weight：bolder,2、CSS属性,Font-variant 属性 决定了浏览器显示指定元素的字体变体。它的取值包括：small-caps和normal。默认值为normal，表示使用标准字体
11、；small-caps表示小体大写，也就是说，字体中所有小写字母看上去与大写字母一样，不过尺寸要比标准的大写字母要小一些。 以下示例显示了各种常用字体属性的用法，代码如下：字体属性示例生活最沉重的负担，不是工作，而是无聊。 我需要工作，工作就是我的生活。 Life means struggle。 学者贵于行之，而不贵于知之。,2、CSS属性,（2）文本属性： 文本属性用于控制文本的段落格式，例如设置首行缩进、段落对齐方式等。CSS中的常用文本属性包括：letter-spacing、line-height、text-align、text-decoration、text-indent和text-t
12、rsform。 letter-spacing属性 该属性的值决定了字符间距（除去默认距离外）。它的取值包括：normal或具体的长度值，也可以是负值。默认值为normal，表示浏览器根据最佳状态调整字符间距。也就是说，如果将letter-spacing设置为0，它的效果并不与normal相同。 line-height属性 该属性决定了相邻行之间的间距（或者说行高）。其值可以是数字、长度或百分比，默认值是normal。当以数字指定值时，行高就是当前字体高度与该数字相乘的倍数。例如：IVfont-size：10pt；line-height：1.5表示的行高是15pt。如果指定具体的长度值，则行高为
13、该值。如果用百分比指定行高，则行高为当前字体高度与百分比相乘。,2、CSS属性,text-align属性 该属性的值指定了所选元素的对齐方式（类似于HTML标记的align属性），它的取值包括：left、right、center和justify，分别表示左对齐、右对齐、居中对齐和两端对齐。此属性的默认值依浏览器的类型而定。 text-decoration属性 可以对特定选项的文本进行修饰，它的取值包括：none、underline、overline、line-through，默认值为none，表示不加任何修饰。Underline表示添加下划线；overline表示添加上划线；line-thro
14、ugh表示添加删除线；blink表示添加闪烁效果（不过要在网景的NS4浏览器中才可以看到）。,2、CSS属性,text-indent属性 可以对特定选项的文本进行首行缩进。它的取值可以是长度或百分比，默认值为0，表示无缩进。文字的缩进量指定在第一行的前面缩进的距离，它可以取负值，但不能超出指定的范围。如果某一行是通过软回车（）拆分得到的，那也不能对它指定缩进量。 vertical-align属性 该属性的值指定了所选元素的垂直对齐方式，它的取值包括：baseline、sub、super、top、text-top、middle、bottom、text-bottom、percentage。此属性的
15、默认值依浏览器的类型而定。Baseline表示以其他普通元素的底线作为被定义元素的底线；sub表示下标；super表示上标；top表示以其他普通元素的顶线作为被定义元素的底线；text-top表示以其他文本元素的底线作为被定义元素的底线；middle表示和其他元素的中线对齐；bottom表示以其他普通元素的底线作为被定义元素的顶线；text-bottom表示以其他文本元素的底线作为被定义元素的顶线；percentage使用百分比值是以被参照元素的底线为准，以被参照元素的高为单位，例如：100%（-100%）为升高（或降低）。,2、CSS属性,text-trsform属性 该属性用于文本转换，它
16、的取值包括：capitalize、uppercase和none，默认值为none。Capitalize表示所选元素中文本的每个单词的首字母以大写显示；uppercase表示所有的文本都以大写显示；lowercase表示所有的文本都以小写显示。 以下示例显示了各种常用文本属性的用法，代码如下：文本属性示例Success 伟大人物最明显的标志，就是他坚强的意志。 天才就是耐心。 人思考越多，话越少。 有许多人是用青春的幸福作为成功的代价大的。 Idleness makes the wit rut。,2、CSS属性,3）颜色和背景属性： 在CSS中，颜色属性可以设置元素内文本的颜色，和其中背景颜色以及图案。CSS背属性包括：background-color、background-image、background-attachment、background-position和background-repeat。 background-color属性 用于设置HTML元素的背景颜色，取值可以是4123中介绍的任意一种表示颜色的方式，默认值为transparent，表示没有颜色（或者说是透明色）。 background-image属性 用于设置HTML元素的背景图案，取值为url（image）或none。默认值为none，即没有图案。当指定图案的位置时，应包括在“url”字样后的括号中。,
