[05css1基础.pptVIP

CSS 基础 王斌 一、CSS定义 CSS—Cascade Style Sheet层叠样式表 1998/5/12，CSS level2成为W3C标准 用来装饰HTML/XML的标记集合 特点： 样式表由样式规则组成，以告诉浏览器如何显示一个文档 每个规则的组成包括一个选择符通常是一个HTML的元素和该选择符所接受的样式 每个元素可以定义多个属性，每个属性带有一个值，共同的描述选择符如何呈现 为什么需要CSS 由于html的主要功能是描述网页的结构，所以控制网页外观和表现的能力很差， 1 无法精确到像素级调整文字大小，行间距等， 2 不能对多个网页元素进行统一的样式设置，只能一个一个元素的设置。 学习CSS可实现对网页的外观和排版进行更灵活的控制，使网页更美观 CSS禅意花园（网站，书名） html只能对元素一个一个的设置样式 body h2font color=#FF0000 face=黑体CSS标记1/font/h2 pCSS标记的正文内容1/p h2font color=#FF0000 face=黑体CSS标记2/font/h2 pCSS标记的正文内容2/p h2font color=#FF0000 face=黑体CSS标记3/font/h2 pCSS标记的正文内容3/p h2font color=#FF0000 face=黑体CSS标记4/font/h2 pCSS标记的正文内容4/p /body 产生的问题：代码冗余 如果要修改元素的样式，也要一个个的改，修改工作量大 使用CSS后 h2{ font-family:黑体; color:red; } h2CSS标记1/h2 pCSS标记的正文内容1/p h2CSS标记2/h2 pCSS标记的正文内容2/p h2CSS标记3/font/h2 pCSS标记的正文内容3/p h2CSS标记4/font/h2 pCSS标记的正文内容4/p 二、CSS的语法 样式表的一般形式： HTML标签{标签属性：属性值；标签属性：属性值；标签属性：属性值；……} HTML标签不带尖括号:如P、TABLE 标签属性：属性值，两参数是一一对应的 属性之间用分号隔开。 ?H2 { font-size: 25px; color: red } 三、CSS的调用方式 调用css文件(外部文件方式、导入式) 在Head中调用(内嵌方式) 在Body中调用(行内式) 在统一站点风格上，用第一方式，在某个网页风格统一上，用第二种方式，而在网页内部某个标签的具体调整上，用第三种方式。 1、外部文件方式 外部文件方式：CSS以文件的形式存在，在HTML文档头通过文件引用进行控制。 CSS文件的引用是在head/head标签之间写下列语句: link rel=“stylesheet” href=“文件名.CSS” type=“text/css” 2、内嵌样式 不以文件的形式存在,仅作用于本文档,直接定义在head/head 之间. Style type=“text/css” !— P{font-family:“宋体” font-size:9pt;color:blue} H2{font-family: “宋体” ;font-size:13pt;color:red} -- /style 3、直接插入式 只需要在每个HTML标签后书写CSS属性。作用范围只限于本标签。 table style=“color:red;font-size:10pt” 四、 CSS选择器的分类 标记选择器 类选择器 . id选择器 # 伪类选择器 通配选择符 * 类选择符 类选择符：Class . 一个选择符能有不同的Class，因而允许同一个选择符具有不同的样式(class1.htm) 不同的选择符也可以同时定义一样的样式(class2.htm) ID选择符 ID选择符:ID # 定义一个元素的独特的样式 以半角“#”开头，且id名称的第一个字母不能为数字 (class3.htm) 伪类选择符 伪类和伪元素是特殊的类和元素，能自动地被支持CSS的浏览器所识别。 形式 ：选择符:伪类（元素） { 属性: 值 } 锚伪类：对链接的修饰（标签处于某种状态时） A:link 未访问时的状态 A:visited 访问过后的状态 A:active 鼠标点中不放时的状态 A:hover 鼠标划过时的状态 首行伪元素： P:first-line {font-weight: bold } 伪类选择器 所谓伪类就是指标记的状态。 网页中的链接标记能响应浏览者的点击。a标记有四种状态能描述这种响应，分别是a:link、a:visited、a:hover、a:active