第10章 CSS样式表演示文稿.PPTVIP

CSS样式表 本 章 主 要 内 容 了解CSS样式表的定义与作用 熟悉CSS样式表的基本规则 掌握CSS样式表的元素属性 掌握在Dreamweaver 8新建CSS的一般步骤 掌握调用外部CSS样式文件的方法 概 述 1.CSS CSS：Cascading Style Sheets 层叠样式表 2. 作用 样式表的目的是为了对布局、字体、颜色、背景和其他图文效果实现更加 精确的控制。 3.CSS的特点 特点如下： 只通过修改一个文件就改变大量网页的外观和格式 在所有浏览器和平台之间实现兼容 编码更少，下载速度更快 CSS样式表基础 CSS的每一个样式表都由相对应的样式规则组成，使用HTML中的要“style标 签就可将样式规则加入到HTML中。“style”标签位于HTM的“head”部分，其中 也包含网页的样式规则，可以看出CSS的语句是内嵌在HTML文档内，所以编 写CSS的方法和编写HTML文档的方法是一样的。 创建的CSS样式表可以应用到很多页面中，从而使不同的页面获得相同的布 局和外观，因此CSS具有很好的易用性与扩展性。通过样式面板可以对网页中 的样式表进行管理，而且通过扩展可以用样式表制作比较复杂的样式。 CSS 语 法 简 介 1.基本语法 CSS的代码都是由一些最基本的语句构成的。它的基本语句语法是： Selector{ property:value} 其中： Selector: 选择符 property:value: 声明 property: 属性 value: 属性值 注：属性与属性值之间用冒号“：”隔开；声明与声明之间用分号“；”隔开。 任何HTML元素都可用作选择符，所以可以将样式表信息附加到网页的任 何元素，所以可以将样式表信息附加到网页的任何元素，从通常的P和h1及 整个table内容，甚至可以通过将样式表用于标识符img而控制图像。 CSS 语 法 简 介 2. CSS与HTML的关系 嵌入（内部）样式表： head style type=“text/css” !—样式表定义内容-- /style /head 其中： type=“text/css”：用于设定上MIME类型，使不支持CSS的浏览器可以忽略 样式表 注释标识符（!—注释--）：避免有些低版本的浏览器不能忽略样式表 而继续执行下面的命令，而且还会显示样式表的代码 CSS 语 法 简 介 样式表与HTML关系十分紧密。HTML是CSS应用的对象；CSS是控制HTML 显示的规则。样式表的主旨就是将结构与格式分离。利用样式表，可以将站 点上的所有的网页都指向某个CSS文件，只需要修改CSS文件中的某一行，那 么整个站点都会随之发生改变，真可谓牵一发而动全身。 新建CSS样式规则 1.打开CSS面板 方法如下：窗口/CSS样式（快捷键：Shift+F11） 2.新建样式规则 操作方法（略） 3.应用样式规则 应用样式规则到文档有两种方法： 方法一：借助属性面板，首先选中对象，然后在属性面板里从“样式”菜单 里选择样式 方法二：选中Dreamweaver状态栏里将要应用样式的标签，通过设置类实 现 CSS 元 素 属 性 1.控制字体与文本 (1).字体属性 font-size:设置字体的大小 语法格式：font-size:xx-small | x-small | small | medium | large|x-large | xx-large|larger | smaller | length 注：“length”的长度单位有像素（px）、点（pt）、英寸（in）、厘米(cm)、 毫米（mm）、pc Font-family:　使用的字体名称。属性值可以选择在本机上所有的字体 语法格式：font-family:字体名称 注：若在font-family后加上多种字体的名称，浏览器会按字体名称的顺序逐一 在用户的计算机里寻找已经安装的字体，一旦遇到与要求的相匹配的字体， 就按这种字体显示网页内容，并停止搜索；若不匹配就继续搜索，直到找到 为止，若样式表里的所有字体都没有安装的话，浏览器会使用默认字体。 CSS 元 素 属 性 font-style:是指字体是否要使用特殊样式。正常的字体为“normal”(默认值)、 “italic”(斜体，对于没有斜体变量的特殊字体，将应用oblique)、“oblique”(倾 斜的字体)三个值。 语法格式：font-style: normal | italic | oblique text-transform: 控制文字的大小写。文字大小写使网页的设计者不用在输 入文字时就完成文字的大小写，而可以在输入完毕后，再根据需要对局部