计算机基础(15)-CSS样式表概述

HTML&CSS回顾1.表单标记课程知识拓扑图本次课内容1.WEB标准的了解2.CSS的概念3.CSS的位置与写法4.CSS选择器5.样式优先权6.书写规范本次课知识点的作用本次课是HTML&CSS课程的重点，也是难点之一，通过学习CSS相关语法及标记，形成对WEB标准的基本认识，了解表现与分离的定义，并且学会如何运用CSS。教学目标1.了解WEB标准的概念及构成。2.掌握CSS语法及写法。教学重难点重点：CSS语法及写法难点：CSS选择器及样式优先权本次课教学目标与重难点Web标准WEB标准是由W3C和其他标准化组织制定的一套规范集合，包含一系列标准，自然也包含了我们所熟悉的HTML、XHTML、JavaScript以及CSS等。Web标准的构成三大部分组成的标准集：结构（Structure）、表现（Presentation）以及行为（Behavior）。1.结构（Structure）--XML、XHTML、HTML2.表现（Presentation）--CSS3.行为（Behavior）--DOM、JavaScriptWeb标准的好处表现与内容分离技术是目前Web标准制定的核心目的。内容：指具体的信息，仅仅表示信息正文。正文通过XHTML结构化语言被标记为各个独立的部分，如左分栏、右分栏等。表现：指信息的展示形式，如字号、字体、排版的设计等。10CSS中文翻译为“层叠样式表”，简称样式表。CSS1:1997年CSS2:1998年5月CSS3:2005年12月CSS的概念及版本11CSS的定义是由三个部分构成：选择符（selector）属性（properties）属性的值（value）。基本格式如下：选择符{属性：值；}(单一选择符的复合样式声明应该用分号隔开）选择符{属性1:值1;属性2:值2；}CSS的样式规则121.head内styletype=“text/css”…/style2.body内style=“color:blue”3.文件外调用（后缀名为.css）linkrel=“stylesheet”href=“style.css”type=“text/css”CSS位置与写法CSS语法结构-类型选择符指网页中已有的标签名作为名称的选择符，body是网页中的一个标签，p也是。因此以下的选择符都是类型选择符。body{}p{}CSS语法结构-群组选择符除了可以对单个XHTML对象进行样式指定外，同样可以对一组对象进行相同的样式指派，例如：h1,h2,h3,p{font-size:12px;font-family:arial}使用逗号对选择符进行分隔。CSS语法结构-包含选择符1.包含选择符指选择符组合中前一个对象包含了后一个对象，对象之间使用空格作为分隔符。例如：h1span{......}2.包含选择符除了可以二者包含，也可以多级包含：例如：bodyh1span{......}CSS语法结构-id及class选择符id及class均是CSS提供自定义标签名称的选择符。对于id与class而言，id的定义优先于class的定义。1.id选择符使用#符号进行标识（#content{......}）;2.class在CSS中使用点符号加上名称的形式定义(.p1{......})。6-1.html#idcolor:yellow;font-size:30px;{}ID选择器属性值属性值声明声明CSS选择器--ID选择器18超链接a:link{font-size:9pt;color:black;text-decoration:none;}a:visited{font-size:9pt;color:black;text-decoration:underline;}a:hover{font-size:9pt;color:green;text-decoration:none;}a:active{font-size:9pt;color:blue;text-decoration:none;}CSS选择器--伪类选择器样式优先权问题-样式继承XHTML中的子标签会继承部分父标签的样式特征例如：定义body{color:red;}，那么页面中body之下所有的标签及标签下的所有子标签的文本都将变为红色。案例：1.父子关系（6-2.html）2.CSS继承的运用（6-3.html）样式优先权问题-!important在两行相同类型的CSS样式定义中，往往优先执行后面一个，可以通过!important语法，提升某一句样式表的重要性，使其优先执行。!important标注的语句：该body背景色为红色body{background-color:red;!importantbackground-color:blue;}21类型CSS属性值字体属性font-familyArial，宋体…font-size指定字体大小font-stylenormal,italic…font-weightnormal,bold…文本属性text-alignleft,right,centertext-decorationnone,underline,overline文本属性221.所有的CSS的尽量采用外部调用linkhref=style/style.cssrel=stylesheettype=text/css2.书写时重定义的最先，伪类其次，自定义最后（其中a:linka:visiteda:hovera:actived要按照顺序写）。3.为了保证不同浏览器上字号保持一致，字号建议用点数pt和像素px来定义:•pt一般使用中文宋体的9pt和11pt•px一般使用中文宋体12px和14.7px这是经过优化的字号CSS编码书写规范本次课课程总结1WEB标准的概念及构成2CSS概念、语法及写法3样式优先权作业布置与要求1、练习本次课学习的内容2、完成一个页面的制作下次课内容CSS样式高级应用31