第4章-part1CSS介简.ppt

第4章 -part1 CSS 介简 CSS: 样式标记语言 或 表现语言 一 CSS样式表 (Cascading Style Sheet层叠样式表) CSS的作用: (Cascading—串联，级联） 1) 弥补HTML显示上的不足，提供丰富的样式； 2) 将HTML内容和显示样式分离； 3) 可以进行集中样式管理。例： 样式表定义--由规则构成 基本语法: 选择符 { 规则表 } 使用内嵌CSS, css1.htm (Do it) html head titleCSS示例/title meta http-equiv=Content-Type content=text/html; charset=gb2312 style type=text/css h1 {font-family:隶书, 宋体;color: green} .text {font-family: 宋体; font-size: 14pt; color: red} #strong{ font-size: 20pt; color: Blue } /style /head body topmargin=4 h1 h1 这是一个CSS示例！/h1 span class=text span 这行文字应是红色的。/span p class=text p 文字应是红色的。/p p 梦 span id=strong 之/span 都/p /body /html span与div -- CSS与XHTML沟通的桥梁 XHTML只是负责内容.文字标签与字块标签一般都有意义, 而span与div并没有什么意义, 它们被广泛的与CSS联合使用. span是内联的,代表一行. div代表一块. div id=dreamdu p 梦 span id=“strong” 之 /span 都 /p /div id, class 属性 -- 元素链接一个样式 .text– 类(class 属性)的链接 ( 类的普通用法 ： class.text ） #strong--id 属性的链接 3. 样式引用 （1）链接到外部样式表 a) 将样式表定义为一个独立的CSS样式文件，扩展名为.css； b) 使用该样式表的HTML文件在头部用link标记链接到这个CSS样式文件即可。 样式定义存放于文件外部css.css，外部css.htm引用该样式表。(Do it) 【style.css文件】： h1 {font-family:“隶书”,“宋体”;color:#ff8800} p {background-color:yellow;color: black;font-size:12pt;} .text {font-family: 宋体; font-size: 14pt; color: red} 【css1.htm文件】： html head link rel=Stylesheet type=text/css href=外部css.css media=screen / /head body h1链接外部CSS文件/h1 span class=text文字是红色的。/span p底色是黄色。/p /body/html 3. 样式引用（续） （2）import(引入)外部样式表 在HTML文件的头部引入，格式： style type=text/css @import URL(外部css.css); /style （3）嵌入样式表 利用style标记将样式表嵌入到HTML文件的头部 style type=text/css h1 {font-family:隶书, 宋体;color:#ff8800} /style 3. 样式引用（续） （4）内联样式--在HTML中用style定义: 方法：将标记的style属性值赋为所定义的样式规则。 div style=font-size:14pt;color:darkred; 与嵌入样式表的区别：作用域不同 内联样式使样式单失去了本来的意义, 因此应该尽量避免使用内联样式. 设有两个样式表文件s1.css、s2.css和一个HTML文件example_css.htm 【文件s1.css】： h2 {font-family:隶书;color:#ff8800} p {color:black;background-color:yellow;font-size:12pt;} 【文件s2.css】： h3 {font-family:宋体;color:blue;font-style:i