1、第六章,CSS简介,CSS概述 用CSS控制网页外观,CSS概述,CSS（Cascading Style Sheet ）层叠式样式表 是用于增强控制网页样式并允许将样式信息与网页内容分离的一种标记性语言 CSS的优点 提供了一种能使所有Web页面样式保持一致的方法 样式信息独立于网页内容，只修改一个.CSS文件就可以改变页数不定的网页的外观和格式 版面和页面布局控制能力更强 更快的下载速度,CSS概述,样式表的“层次” 三种不同层次的样式表 内置(inline)样式表 文档层(document level)样式表 外部(external)样式表某个标记内容的样式是由样式表的叠加来确定的，低层次
2、的样式表具有使用上的优先权,CSS概述,内置样式表 作用范围：适用于单个标记的内容 出现位置 内置样式说明出现在标记中，并且仅适用于那个标记所标识的内容,CSS概述内置样式表,内置样式表格式： 以style属性值的形式出现的，一般形式如下： style=“property1:value1；property2:value2；”,课程设置,CSS概述,文档层样式表 作用范围:适用于整个文档的主体 出现位置 文档层样式说明在文档头部。,CSS概述文档层样式表,文档层样式表格式 以一个元素内容的形式出现 每条样式规则的格式 ： selector property1:value；property2:va
3、lue；,CSS概述文档层样式表,Selector类型 常用选择器 HTML的标记名选择器 CLASS选择器 ID选择器 通用选择器 匹配所有可用html标记元素 格式：* property1：value；property2：value； 高级选择器（IE6及以下版本不支持） 子选择器、相邻同胞选择器、属性选择器,CSS概述文档层样式表,常用选择器selector有三种类型： HTML的标记名 文档中不同位置的同一标记都得使用同一样式 选择器组 格式：选择符1，选择符2 属性1：值1；属性2：值2 包含选择器格式：选择符1 选择符2 属性1：值1；属性2：值2 CLASS样式类 样式类允许在不
4、同地方出现的同一个标记使用来自文档样式表或外部样式表的不同样式说明 格式一： 标记名.样式类名称属性1：值1；属性2：值2； 格式二： .样式类名称属性1：值1；属性2：值2； 能作用于若干标记的内容 ID样式类,CSS概述文档层样式表,第一段与第二段样式相同第二段与第一段样式相同 ,例如：1. 选择器为HTML的标记名选择器组,CSS概述文档层样式表,table a font-size:32ptp b color:blue,普通链接表格内的链接黑体字黑体字 ,例如：2. 选择器为HTML的标记名包含选择器,CSS概述文档层样式表,普通效果特殊效果 ,例如：2. 选择器为class样式类的第一
5、种格式 （在某个文档中如果需要设置两种段落样式，譬如normal和special，那么可以在元素的注释中定义这两个类，形式如下：）,CSS概述文档层样式表,第3章首先,其次, ,例如：3. 选择器为class样式类的第二种格式 （能作用于若干标记的内容。）,CSS概述,外部样式表 作用范围 可以应用在多个文档的主体中。 出现位置 外部样式表单独存储成.CSS文件（文本文件），它们可以存储在因特网上的任何一台计算机中，浏览器获取外部样式表就如同获取文档一样。,CSS概述外部样式表,使用外部样式表 说明的位置: 之间 (必须) 说明格式： rel属性：用于指定被链接的文档与包含该链接的文档之间的关
6、系； href属性：用于指定样式表文档的URL地址, 外部样式表的引用,CSS概述,三种样式表演示实例：同样的效果 css-1-1.htm 内置样式表实现 css-1-2.htm 文档层样式表实现 css-1-3.htm 外部样式表实现, 游园不值应怜屐齿印苍苔，小扣柴扉久不开。春色满园关不住，一枝红杏出墙来。 ,文档层样式表-1游园不值应怜屐齿印苍苔，小扣柴扉久不开。春色满园关不住，一枝红杏出墙来。 ,外部样式表游园不值应怜屐齿印苍苔，小扣柴扉久不开。春色满园关不住，一枝红杏出墙来。, h1font-family:隶书;font-size:30px;text-align=center;col
7、or:red; p.bgc1font-family: 华文行楷;font-size:25px;text-align:center;background-color:#ffff00; p.bgc2font-family: 华文行楷;font-size:25px; text-align:center;background-color:#aaaa00;,用CSS控制网页外观,CSS的字体属性 font-family 设置字体 font-style 设置字体风格 属性值：normal | italic | oblique(扁斜体) font-weight 设置加重字体(不是对所有字体都有效) 属性值：
8、正常nomal 相对灰度bold、bolder、light、lighter 梯度灰度100、200、300、400(normal)、 500、600、700、(bold)、 800、900 font-size 精确控制文本字号大小 属性值：small、medium、big、n度量单位 font 用作不同字体属性的略写,标题1 标题2,P font: italic bold 12pt/14pt,用CSS控制网页外观CSS的字体属性,注意： 属性值若为数值，后面必须紧跟着用两个字符的缩写词表示的单位名，在数字和单位名之间不能留有空格。 可能出现的单位名包括：px(像素)/ in(英寸)/ cm(厘
9、米)/ mm(毫米)/ pt(点)和百分比，百分比形式的值是在数字后面加上百分号。 （1pt=1.5px）,用CSS控制网页外观,CSS的颜色和背景属性 color 设置前景色 background-color 设置背景色 background-image 定义背景图形 background-attachment 指定背景是否随前 景一起滚动(与background-image一起使用) 属性值：scrool、 fixed,标题1 标题2,用CSS控制网页外观,CSS的文本属性 letter-spacing 控制文本(包括字母)间距 line-height 设置文本的行间距 text-alig
10、n 对文本行火文本段进行横 向对齐设置 text-decoration 文本修饰 属性值：none(默认) | underline | overline line-through | blink,用CSS控制网页外观CSS的文本属性,正常：-Letter Spacing 间距：-Letter Spacing 间距：-Letter Spacing 文字加下划线 文字加上划线,演示实例：css-2.htm,用CSS控制网页外观,边距、边框与填充距的关系,演示实例：css-3.htm、css-4.htm,用CSS控制网页外观,CSS的边距属性 margin 设置对象与浏览器边框之间的边距 例如： 上
11、 右 下 左(缺省的一边与其对边的值等) margin: n1 n2 n3 n4 margin: n1 n2 n3 (左边距缺省，等于右边距n2) margin: n1 n2 (下边距缺省，等于上边距n1； 左边距缺省，等于右边距n2 ) margin: n1 (所有的边距均为n1)margin-left 设置左边距margin-right 设置右边距 margin-top 设置上边距 margin-bottom 设置下边距,用CSS控制网页外观,CSS的边框属性 border 设置边框的厚度、样式、颜色 例如：border:3px solid red (border-top、border-r
12、ight、border-bottom、border-left) border-width 设置边框的厚度 属性值： thin | medium | thick | 厚度值(类似margin) (border-top-width、border-right-width、border-bottom-width、 border-left-width) border-style 设置边框的样式 属性值：solid | groove | double | dashed | dotted (border-top-style、border-right-style、border-bottom-style、 bo
13、rder-left-style) border-color 设置边框的颜色 (border-top-color 、border-right-color 、border-bottom-color 、 border-left-color ),用CSS控制网页外观,CSS的填充边距属性 padding 设置填充边距 属性值： 填充边距值(类似margin) padding-top、padding-bottom、padding-left、padding-right,用CSS控制网页外观,CSS的层属性 与标记 标记 作用： 要求某些特殊的字体属性只应用于整个段落中的部分文本时，使用。 元素的惟一用法是
14、使用内置样式表更改属性值 例如： 能够对文本进行全面控制是一件很有意思的事,用CSS控制网页外观CSS的层属性,标记 作用： 是一个层块标记，可以包含段落、标题、表格、章节等。可以通过对层进行样式设置，该标记中内嵌的所有标记将通过继承获得这些属性值。,用CSS控制网页外观CSS的层属性,CSS的层属性 position 定义位置 (absolute | relative) left、top 指定横向、纵向坐标位置 width、height 指定占用空间的大小 overflow 内容超出时的处理方法 (visible | hidden | scroll | auto),演示实例：css-5.ht
15、m,第一层本层字体颜色为红色第二层本层字体颜色为黄色,用CSS控制网页外观,下页对应的网页,兰花劫电视剧/ 港台.其他,用CSS控制网页外观,CSS的滤镜属性 http:/ http:/ http:/ 演示实例：css-6.htm,CSS的鼠标属性 cursor ( auto、crosshair、default、hand、move、 e-resize、ne-resize、nw-resize、n-resize se-resize、sw-resize、s-resize、w-resize text、wait、help),用CSS控制网页外观,演示实例说明： CSS-1-1.htm：内置样式表 CSS-1-2.htm：同样的效果用文档层样式表实现 CSS-1-3.htm：同样的效果用外部样式表实现 CSS-2.htm： CSS文本属性示例 CSS-3.htm： 边距、边框与填充距示例 CSS-4.htm： CSS的边框属性示例 CSS-5.htm： CSS的层属性示例 CSS-6.htm： CSS的滤镜属性示例,
