css语言学习.ppt

HTML语言——CSS语言学习 DIV+CSS 什么是CSS CSS是Cascading Style Sheets(层叠样式表)的简称. CSS语言是一种标记语言,它不需要编译,可以直接由浏览器执行(属于浏览器解释型语言). 在标准网页设计中CSS负责网页内容(XHTML)的表现. CSS文件也可以说是一个文本文件,它包含了一些CSS标记,CSS文件必须使用css为文件名后缀. 可以通过简单的更改CSS文件,改变网页的整体表现形式,可以减少我们的工作量,所以她是每一个网页设计人员的必修课. CSS是由W3C的CSS工作组产生和维护的. HTML语言 DIV+CSS 使用css的好处 内容与表现分离,有了CSS,网页的内容(XHMTL)与表现就可以分开了. 表现的统一,可以使网页的表现非常统一,并且容易修改. CSS可以支持多种设备,比如手机,PDA,打印机,电视机,游戏机等. 使用CSS可以减少网页的代码量,增加网页的浏览速度,减少硬盘容量. HTML语言 DIV+CSS 内嵌样式(Inline Style) 内部样式表(Internal Style Sheet) 外部样式表(External Style Sheet) HTML语言 DIV+CSS 内嵌样式(Inline Style) Inline Style是写在Tag里面的。内嵌样式只对所在的Tag有效。 P style=font-size:20pt; color:red这个Style定义p/p里面的文字是20pt字体，字体颜色是红色。 HTML语言 DIV+CSS 内部样式表(Internal Style Sheet) 内部样式表是写在HTML的head/head里面的。内部样式表只对所在的网页有效。 HTML HEADSTYLE type=text/cssH1.mylayout {border-width:1; border:solid; text-align:center; color:red}/STYLE /HEAD BODYH1 class=mylayout 这个标题使用了Style。/H1 H1这个标题没有使用Style。/H1 /BODY /HTML HTML语言 DIV+CSS 外部样式表(External Style Sheet) HTML HEAD link href=home.css rel=stylesheet type=text/css !--rel=\stylesheet\指链接的元素是一个样式表，一般不需要修改 type=\text/css\ / 定义样式表单 -- /HEAD BODYH1 class=mylayout 这个标题使用了Style。/H1 H1这个标题没有使用Style。/H1 /BODY /HTML H1.mylayout {border-width: 1; border: solid; text-align: center;color:red} HTML语言 DIV+CSS 使用外部(Extenal)样式表，相对于内嵌(Inline)和内部式(Internal)的，有以下优点： 样式代码可以复用。一个外部CSS文件，可以被很多网页共用。 便于修改。如果要修改样式，只需要修改CSS文件，而不需要修改每个网页。 提高网页显示的速度。如果样式写在网页里，会降低网页显示的速度，如果网页引用一个CSS文件，这个CSS文件多半已经在缓存区(其它网页早已经引用过它)，网页显示的速度就比较快。 HTML语言 DIV+CSS 串联(Cascading) CSS第一个字母，是Cascading，意为串联。它是指不同来源的样式(Styles)可以合在一起，形成一种样式。 Cascading的顺序是： 浏览器缺省(browser default)(优先级最低) 外部样式表(Extenal Style Sheet) 内部样式表(Internal Style Sheet) 内嵌样式表(Inline Style)(优先级最高) 样 式(Styles)的优先级依次是内嵌(inline), 内部(internal), 外部(external), 浏览器缺省(browser default)。假设内嵌(Inline)样式中有font-size:30pt, 而内部(Internal)样式中有font-size:12pt，那么内嵌(Inline)式样式就会覆盖内部(Internal)样式。 HTML语言 DIV+CSS 基本语法 一个样式(Style)的语法由三部分构成： Selector(选择器)，属性(Property)，属性值(Value