(
课件网) 9 CSS基础知识 CSS与HTML的关系 CSS式表( Style sheets)技术诞生于1996年,全称是层叠样式表( Cascading Style Sheets)。样式就是格式,对网页来说,例如文字的大小、颜色及图片的位置等,都是网页显示信息的样式。层叠是当在HTML文件中引用多个定义样式文件(CSS文件)时,若多个样式文件间所定义的样式发生冲突,则将依据层次处理 样式表是HTML的“表兄弟”。由于最初的HTML标准还不尽人意,用HML制作网页就像是用画笔绘制一幅图画,只有那些对网页制作痴迷且执着的人才可能精确地实现预定的结果。正是在这种情况下,样式表技术诞生了。样式表的目的是为了对布局、字体、背景和其他图文效果实现更加精确的控制 样式表的宗旨就是将结构和格式分离。样式表将定义结构和定义格式的两个部分相互分离,从而使网页设计人员能够对网页的布局施加更多的控制。HTML仍可以保持简单明了的初衷,而样式表代码独立出来后,则从另一个角度控制网页外观。 利用样式表,可以将站点上所有的网页都指向某个CSS文件,用户只需要修改CSS文件中的某一行,那么整个站点都会随之发生改变。这样,通过样式表就可以将许多网页的风 格格式同时更新,不用再一页一页地更新了。 CSS+DIV 基本语法 CSS语法由选择符,属性和属性取值构成,分为内嵌样式表、内部样式表和外部样式表三种。 格式:选择符{属性:值} 说明:属性和取值由大括号括起来,属性与取值之间用冒号分隔;当属性取值由多个单词构成时,要用引号将属性的取值括起来;对一个选择符指定多个属性时,不同属性之间用分号分隔,可采用分行方式书写 选择符组 把相同属性和值的多个选择符写在一起,相互之间用逗号进行分隔,以便减少对样式的重复定义 类选择符 对相同标记进行分类定义为不同样式,在标记和自定义类名之间加上英文句点符号。使用时在HTML文件中通过标记的 CLASS属性指定不同类即可。这种方式的定义还可以在自定义类名前省略HTM标记,以便将一种样式应用到不同的标记中。 A B D C 04 链接到外部样式表 格式:< link rel= Stylesheet "type="text/ css" href="外部样式表文件URL地址”>
标记必须放在标记内,外部样式表的文件扩展名为css 03 导入外部样式表 格式:@ import”外部样式表文件URL地址； 功能:在< style>标记中导入一个外部样式 02 内部样式表 格式:< style type="text/css">内部样式表 功能:在当前HTML文件中定义并应用内部样式表。< style>标记必须放在下 01 内嵌样式（行内样式） 直接在HTML内容部分的标记中通过 style属性来定义样式,可以直接对某个标记进行单独定义容 CSS+DIV A B 格式:<标签名称 style="样式属性:属性值;样式属性:属性值…"> 功能:可以直接在HTML代码行中加入样式规则。这种方法适用于指定网页内的某一小段文字的显示风格。不过,利用这种方法定义样式时,其效果只可以控制该标签 如何在网页中加入CSS 01 在行内直接加入样式 B 02 把样式表嵌入到文件头 语法: 如何在网页中加入CSS 功能:在标签中,用设置 style属性的方法,一次只能控制一个标签的样式,实在显示不出css对网页设计有什么特别的效果。第二种方法是在文件头嵌入样式表规则的方法。浏览器在整个HTML网页中都执行该规则。如果想对网页一次性加入样式表,就可采用该方法。 这种方法就是将所有的样式表信息都列于HTML文件的头部 B 02 把样式表嵌入到文件头 如何在网页中加入CSS 03 链接到样式表 语法:创建一个普通的网页,但不使用< style>规则,而是在H ... ...
