资源简介 (共22张PPT)9CSS基础知识CSS与HTML的关系CSS式表( Style sheets)技术诞生于1996年,全称是层叠样式表( Cascading Style Sheets)。样式就是格式,对网页来说,例如文字的大小、颜色及图片的位置等,都是网页显示信息的样式。层叠是当在HTML文件中引用多个定义样式文件(CSS文件)时,若多个样式文件间所定义的样式发生冲突,则将依据层次处理样式表是HTML的“表兄弟”。由于最初的HTML标准还不尽人意,用HML制作网页就像是用画笔绘制一幅图画,只有那些对网页制作痴迷且执着的人才可能精确地实现预定的结果。正是在这种情况下,样式表技术诞生了。样式表的目的是为了对布局、字体、背景和其他图文效果实现更加精确的控制样式表的宗旨就是将结构和格式分离。样式表将定义结构和定义格式的两个部分相互分离,从而使网页设计人员能够对网页的布局施加更多的控制。HTML仍可以保持简单明了的初衷,而样式表代码独立出来后,则从另一个角度控制网页外观。利用样式表,可以将站点上所有的网页都指向某个CSS文件,用户只需要修改CSS文件中的某一行,那么整个站点都会随之发生改变。这样,通过样式表就可以将许多网页的风格格式同时更新,不用再一页一页地更新了。CSS+DIV基本语法CSS语法由选择符,属性和属性取值构成,分为内嵌样式表、内部样式表和外部样式表三种。格式:选择符{属性:值}说明:属性和取值由大括号括起来,属性与取值之间用冒号分隔;当属性取值由多个单词构成时,要用引号将属性的取值括起来;对一个选择符指定多个属性时,不同属性之间用分号分隔,可采用分行方式书写选择符组把相同属性和值的多个选择符写在一起,相互之间用逗号进行分隔,以便减少对样式的重复定义类选择符对相同标记进行分类定义为不同样式,在标记和自定义类名之间加上英文句点符号。使用时在HTML文件中通过标记的 CLASS属性指定不同类即可。这种方式的定义还可以在自定义类名前省略HTM标记,以便将一种样式应用到不同的标记中。ABDC04链接到外部样式表格式:< link rel=Stylesheet "type="text/ css" href="外部样式表文件URL地址”>标记必须放在标记内,外部样式表的文件扩展名为css03导入外部样式表格式:@ import”外部样式表文件URL地址；功能:在< style>标记中导入一个外部样式02内部样式表格式:< style type="text/css">内部样式表功能:在当前HTML文件中定义并应用内部样式表。< style>标记必须放在下01内嵌样式（行内样式）直接在HTML内容部分的标记中通过 style属性来定义样式,可以直接对某个标记进行单独定义容CSS+DIVAB格式:<标签名称 style="样式属性:属性值;样式属性:属性值…">功能:可以直接在HTML代码行中加入样式规则。这种方法适用于指定网页内的某一小段文字的显示风格。不过,利用这种方法定义样式时,其效果只可以控制该标签如何在网页中加入CSS01在行内直接加入样式B02把样式表嵌入到文件头语法:如何在网页中加入CSS功能:在标签中,用设置 style属性的方法,一次只能控制一个标签的样式,实在显示不出css对网页设计有什么特别的效果。第二种方法是在文件头嵌入样式表规则的方法。浏览器在整个HTML网页中都执行该规则。如果想对网页一次性加入样式表,就可采用该方法。这种方法就是将所有的样式表信息都列于HTML文件的头部B02把样式表嵌入到文件头如何在网页中加入CSS03链接到样式表语法:创建一个普通的网页,但不使用< style>规则,而是在HTML文件头部使用标签。< title>…如何在网页中加入CSS功能:想要达到集中管理网站网页样式的目的时,就必须将样式定义在独立的CSS文件中,并将该文件链接或输入到要运用样式的HTML文件上。这种方法就是将多个HTML文件链接到一个样式表文件上。这个外部的样式表将设定所有网页的规则。如果改变样式表文件中的某一个细节,所有网页都会随之改变。说明:①*.css为预先编写好的样式表文件。②外部样式表文件中不能含有任何如同或< style>这样的HTML标签。样式表仅仅是由样式表规则或声明组成的。③在href属性中可以使用绝对URL或相对URL。④在外部样式表文件中,不必须使用注释标签。⑤如同发布HTML文件那样,将这个CSS文件发布到服务器中。在网页被打开时,浏览器将按照链接标签将含有链接外部样式表文件的HTML网页按照样式表规则显示。C04输入样式表语法:如何在网页中加入CSS说明:① Import语句后的“;”是必需的。②要输入的样式表文件的扩展名为cssD样式的优先级内联样式>内部样式内联样式>外部样式思考当同时有内部样式和外部样式时，哪个优先呢？A容器标签：DIV标题标签：H1—H6段落标签：p表格标签：table,tr,td水平线标签：hr预格式化标签：pre表单标签：form注：块级元素独占一行，可设置宽度，高度，边框，内填充和外边距等所有盒子信息块元素与行内元素01块级元素B02行内元素图片标签：img超链接标签：a文本修饰标签：b sub sup del i em strong u换行标签：br容器元素：span lable注：行内元素不能设置宽度和高度行内元素可以设置边框线样式行内元素可以设置填充样式行内元素可以设置左右方向的外边距样式块元素与行内元素AB格式:< div id/ class="名称">…功能:用于定义文档中的分区或节,使文档成为更加独立、不同的部分。id和 class属性用于标记div标签,不需要为每个标签都定义id和 class属性,通常只选择应用一种02DVI应用语法:< div style="内部样式">…功能:定义内容样式, style属性是样式中的内部样式和01标签AB格式:< span id=指定样式名称>…或者< span class=指定样式名称>…功能:标签主要用来定义网页上的区域,通常用于比较大范围的设置,而标签也可以用在区段的定义,不过一般都是用在网页中某一个小文件段落。02DVI和span①在和区域内的对象与区域外的上下文会自动换行;而在和区域内的对象与区域外的上下文不会自动换行。和01标签②与标签可同时使用,但建议标签可包含,但最好不要包含标签,否则会造成标签的区域不完整,而形成断行的现象。CSS格式选择器 声明快比如：h2 {color:blue;font-family:宋体;font-size:18px;}元素选择器：H1，p,tr,td等标签元素ID选择符：#ID名{}类选择器：.类名{}分组选择器：h1.p{}#par,p,tr,td{}通用选择器：*{}CSS简单选择器简单选择器是根据标签名称，ID名类别来选择元素CSS组合选择器后代选择器 div p子选择器 div>p元素选择器：H1，p,tr,td等标签元素ID选择符：#ID名{}类选择器：.类名{}分组选择器：h1.p{}#par,p,tr,td{}通用选择器：*{}CSS简单选择器简单选择器是根据标签名称，ID名类别来选择元素04Class类选择符语法: 说明:(1)*.a1…*.an定义的类选择符名称,通常在定义样式时指定给出样式的名称。其适用范围是整个HTML文件中所有由cass类选择符所引用的设置。“*”符号也可以用HTML内的标签替代(即标签1…标签n),此外“*”符号,在设置可以省略。使用时<元素 class=a1>类名称不能以数字开头class和ID类选择符功能:class类选择符用于指定标签属于何种样式类。或者说明:(2)标签1.a1…标签n.anHTML的标签名称,也可以用HTML内的标签替代。其不同点在于,若在定义 class类选择符前加上HTML的标签时,其适用范围将只限于该标签所包含的内容。04ID类选择符语法: 说明:(1)#a1…#an定义的ID类选择符名称,通常在定义标签时指定给出ID的名称。使用时<元素 ID=a1>ID名不能以数字开头，class和ID类选择符id类选择符与clas两者之间最大的区别在于定义样式名称前的符号。用cas定义为“米样式名称”;用id定义时,为“#样式名称”或者说明:(2)标签1#a1…标签n#anHTML的标签名称, 其不同点在于,若在ID选择符前加上HTML的标签时，其使用范围将只限于标签所包含的内容。ADB01可以归类CSS的规则可以多个HTML标签采用同一个样式,例如h1,p{font- family;黑体}这项规则设定所有被和标签包含的网页内容将用黑体显示。02样式表的规则具有继承性样式表的规则具有继承性03情景选择如果想让所有斜体显示的文字(即被和标识的文字)都以红色显示,但条件是只有当这些斜体显示的文字出现在通常的段落文字(即被标识的文字)内时。这就需要使用情景选择来实现。通过情景选择可设定一个可以执行选择说明的情景。带情景选择的样式表的格式如下情景标签 标识符{属性1:属性值1；属性2:属性值2；}标签 .class类名称{属性1:属性值1；属性2:属性值2；}标签#ID类名称{属性1:属性值1；属性2:属性值2；}CSS的几个特性作业：完成下发的TASK9 中的作业要求：利用记事本编辑网页，按照要求保存为HTML文件，自己预览后提交。有问题及时反馈练习。 展开更多...... 收起↑ 资源预览