网页设计 CSS的基础知识.ppt

第 10 章 CSS的基础知识;10.1 什么是样式表 10.2 样式表的基本结构 10.3 如何在网页中加入css 10.4 div与span标签 10.5 CSS的几个特性 ;CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。 样式：网页的内容以什么样的形式显示出来，如文字的大小、颜色，图片的大小、插入的位置等。 层叠：当HTML文件引用CSS文件的时候，如果CSS所定义的样式发生了冲突，将依据层次的先后来处理网页中内容的样式。;CSS 主要是用于控制网页元素的显示方式 样式表的宗旨就是将结构(内容)和格式分离，HTML标记只控制网页的内容，内容的样式则交由CSS来控制。 CSS也是一种标记语言，有很多属性来源于HTML，它也需要通过浏览器解释执行。;10.2 样式表的基本结构;样式定义的语法示例;常用Selector类型;HTML标记符的Selector;例10-1：建立一个简单的样式表 html headtitle简单的样式表/title style type=text/css !-- h1{color:red;font-size:35px;font-family:黑体} p{background:yellow;color:blue;font-size:25px;font-family:隶书} -- /style /head body bgcolor=lightblue centerh1样式表/h1 p这是一个简单的样式表/p /center /body/html;;用户定义类;定义方式;举例如下 html head titleCSS类选择器使用 /title style type=text/css .red{color:red; font-size:18px;} .green{color:green; font-size:25px} /style /head body p class=redclass选择器red/p p class=greenclass选择器green/p h3 class=greenh3 也同样适用/p /body/html ;;用户定义ID;# idname{样式属性:属性值;  样式属性:属性值;......} 所有HTML标签都可引用它 HTML标签# idname {样式属性:属性值;  样式属性:属性值;......} 只有该指定的标签才能引用它;举例如下 html head titleCSS id选择器使用/title style type=text/css #pp{color:red; font-family:黑体} p#pt{color:blue; font-family:仿宋} /style /head body h1 id=pp 这是我们定义的PP类 /h1 p id=pp这是我们定义的PP /p p id=pt这是我们定义的PT类 /p /body/html;;ID使用注意事项;CSS属性单位;相对长度单位： CSS还支持下列三种长度的相对单位 em　（当前字体中字母M的宽度） ex　（当前字体中字母X的高度） px　（一个象素的大小）。;颜色单位： 颜色名: #RRGGBB rgb(rrr, ggg, bbb) rgb(rrr%, ggg%, bbb%);10.3 如何在网页中加入css;10.3.1内联样式;以下是一个例子;10.3.2 嵌入一个样式表;示例： STYLE TYPE=text/css MEDIA=screen !– BODY { background: url(foo.gif);color: black } P.EM { background: yellow; color: black } .note { margin-left: 5em; margin-right: 5em } -- /STYLE;样式表的规则单独保存在一个文件中 外部的样式表可以通过HTML的LINK元素连接到HTML文档中 一个样式表文件可链接到多个HTML文件;基本语法如下： head title.../title link Rel=stylesheet href=ab.css type=text/css /head;LINK标签: LINK REL=StyleSheet HREF=“aaa.css” TYPE=“text/css” TITLE=