当前位置：文档之家 › 第3章 CSS样式表

第3章 CSS样式表

  • 格式：doc
  • 大小：121.50 KB
  • 文档页数：3

CSS 样式表1第3章 CSS 样式表 一、CSS 概述⏹ CSS ：Cascading Style Sheets ，“层叠样式表”，简称样式表，它是一种制作网页的新技术。

⏹ 1997年W3C(The World Wide Web Consortium)颁布HTML4标准的同时也公布了有关样式表的第一个标准CSS1, 自CSS1的版本之后，又在1998年5月发布了CSS2版本。

⏹ W3C 把DHTML(Dynamic HTML)分为三个部分来实现：脚本语言(包括JavaScript 、Vbscript 等)、支持动态效果的浏览器(包括InternetExplorer 、Netscape Navigator 等)和CSS 样式表。

⏹ 用CSS 精确的控制页面里每一个元素的字体样式、背景、排列方式、区域尺寸、四周加入边框等。

⏹ 使用CSS 能够简化网页的格式代码，加快下载显示的速度，外部链接样式可以同时定义多个页面，大大减少了重复劳动的工作量。

二、语法⏹ 1.CSS 的定义是由三个部分构成：☐ 选择符（selector ） ☐ 属性（properties ） ☐ 属性的取值（value ）⏹ 基本格式如下：selector {property: value} 选择符 {属性：值}⏹ 例如： body {color: black}⏹ 如果属性的值是多个单词组成，必须在值上加引号，比如字体的名称经常是几个单词的组合：p {font-family: "sans serif"}⏹ 如果需要对一个选择符指定多个属性时，我们使用分号将所有的属性和值分开：p {text-align: center; color: red}（段落居中排列；并且段落中的文字为红色） 采用分行的书写格式 例1：1.htm p {text-align: center; color: black; font-family: arial } 2.引用方法⏹ 在<head>…</head>之间 <style type="text/css"> <!-- p{text-align: center; color: blue;font-family: arial } --></style> 3.选择符组⏹ 把相同属性和值的选择符组合起来书写，用逗号将选择符分开，减少重复定义⏹ 如：h1, h2, h3, h4, h5, h6 { color: green } p, table{ font-size: 9pt } 例：h1.htm 4.类选择符⏹ 把相同的元素分类定义不同的样式，定义类选择符时，在自定义类的名称前面加一个点号。

⏹ 两个不同的段落，一个段落向左对齐，一个段落居中：p.left {text-align: left}p.center {text-align: center}⏹ 引用：☐ <p class=“left”>这是第一段</p> ☐ <p class=“center”>这是第二段</p>⏹ 例2：2.htm⏹ 在选择符中省略HTML 标记名，这样可以把几个不同的元素定义成相同的样式：.center {text-align: center}（定义.center 的类选择符为文字居中排列）⏹ 这样的类可以被应用到任何元素上。

⏹ 例3：3.htm5.ID 选择符⏹ ID 参数指定了某个单一元素，用来对单一元素定义单独的样式。

⏹ 定义ID 选择符要在ID 名称前加上一个“#”号。

⏹ ID 属性将匹配所有id="intro"的元素：#intro {font-size:110%; font-weight:bold; color:#0000ff;background-color:transparent }⏹ID 属性只匹配id="intro"的段落元素： p#intro {font-size:110%; font-weight:bold; color:#0000ff;background-color:transparent }⏹引用方式：<p id="intro"> 这个段落应用ID 选择符 </p> 6.包含选择符⏹ 单独对某种元素包含关系定义的样式表，元素1里包含元素2，这种方式只对在元素1里的元素2定义，对单独的元素1或元素2无定义。

table a {font-size: 12px}⏹ 表格内的链接改变了样式，文字大小为12象素，而表格外的链接的文字仍为默认大小。

⏹ 例4：4.htm7.样式表的层叠性⏹ 层叠性就是继承性，样式表的继承规则是外部的元素样式会保留下来继承给这个元素所包含的其他元素。

div { color: red; font-size:9pt} …… <div> <p>这个段落的文字为红色9号字 </p> </div > 例5：5.htm⏹ 当样式表继承遇到冲突时，总是以最后定义的样式为准。

div { color: red; font-size:9pt} p {color: blue} …… <div> <p>这个段落的文字为蓝色9号字 </p> </div > 例6：6.htm 8.注释⏹ CSS 注释以"/*" 开头，以"*/" 结尾，如下：/* 定义段落样式表 */ p {text-align: center; /* 文本居中排列 */ color: black; /* 文字为黑色 */ font-family: arial /* 字体为arial */ }三、伪类——动态链接⏹ 一种特殊的类选择符，对链接在不同状态下定义不同的样式效果。

selector:pseudo-class {property: value}（选择符:伪类 {属性: 值}）CSS⏹ 伪类和类不同，是CSS 已经定义好的，不能象类选择符一样随意用别的名字。

⏹ 类选择符及其他选择符可以和伪类混用：selector.class:pseudo-class {property: value} （选择符.类:伪类 {属性: 值}） 1.锚的伪类⏹ 最常用的是4种a （锚）元素的伪类，它表示动态链接在4种不同的状态：☐ Link ：未访问的链接 ☐ Visited ：已访问的链接☐ Hover ：鼠标停留在链接上 ☐ A ctive ：激活链接⏹ 例7：7.htma:link {color: #FF0000; text-decoration: none} a:visited {color: #00FF00; text-decoration: none} a:hover {color: #FF00FF; text-decoration: underline} a:active {color: #0000FF; text-decoration: underline} 2.伪类和类选择符⏹ 将伪类和类组合起来，在同一个页面中做几组不同的链接效果 ⏹ 例8：8.htma.red:link {color: #FF0000} a.red:visited {color: #0000FF} a.blue:link {color: #00FF00} a.blue:visited {color: #FF00FF}<a href=“…” class=“red”>这是第一组链接</a> 定义一组链接 div.classid1 A { FONT-SIZE: 10pt; COLOR: #4F94CD; TEXT-DECORA TION:none }div.classid2 A :hover { FONT-SIZE: 10pt; COLOR: #ff0000; TEXT-DECORA TION:underline }<div class=“classid1”> <a href=“”>超连接</a> ………… </div>四、如何在网页中插入CSS⏹ 链入外部样式表⏹ 内部样式表 ⏹ 导入外部样式表 ⏹ 内嵌样式1.链入外部样式表⏹ 把样式表保存为一个样式表文件，然后在页面中<link>标记链接到这个样式表文件，这个<link>标记必须放到页面的<head>区内，如下： <head> ………… </head> 例9：9.htm 2.内部样式表 ⏹ 记插入的。

<head> ……<style type="text/css"><!--hr {color: sienna} p {margin-left: 20px}body {background-image: url("images/back40.gif")} --></style>……</head>3.导入外部样式表⏹ 指在内部样式表的<style>里导入一个外部样式表，导入时用@import<head>……<style type=”text/css”> <!-- @import “mystyle.css” --></style> …… </head> 4.内嵌样式⏹ 内嵌样式是混合在HTML 标记里使用的，可以很简单的对某个元素单独定义样式。

⏹ 内嵌样式的使用是直接将在HTML 标记里加入style 参数。

⏹ 而sty le 参数的内容就是CSS 的属性和值，如下例：<p style="color: sienna; margin-left: 20px"> 这是一个段落 </p> 五.CSS 属性 1.字体属性2.颜色和背景属性3.文本属性4.“容器”属性5.鼠标属性6.滤镜属性 2.颜色和背景属性例11：11.htm3.文本属性CSS 样式表3⏹ 例12：12.htm⏹ <p style=“letter -spacing:1em;text-align:justify ；text-indent:4em;line-height:17pt”>……</p>⏹ letter-spacing 设置了字间距为1em ，其中1em 为一个长度单位；text-align 设置了对齐方式为两端对齐；indent 设置了缩进格为4em ；line-height 设置了行高为17pt⏹ em ：相对单位，相对于实际字体的磅值来定义长度：如果现在的字体大小为12pt ，那么1.5em=18pt 。

合集下载

CSS样式表

CSS样式表

第3章CSS样式表本章概述CSS早在1996年就诞生了，近年来，由于得到浏览器的很好支持，CSS技术已经成为Web页面的一个重要技术支撑。

有人戏称CSS是HTML的表兄弟，CSS的引用就是为使HTML语言更好地适应页面的美工设计，它以HTML为基础，提供了非常丰富的外观控制功能，如字体、颜色、背景、排版等。

CSS帮助网站开发人员实现功能和外观设计的分离，提高开发效率和代码的可重用性。

最近几年流行的DIV+CSS布局模式和AJAX技术，将CSS应用推向了一个新的高潮。

本章主要介绍CSS的定义与使用方法，以及CSS样式的常见属性及模型。

学习目标：1．掌握CSS的语法规则及各种属性的定义方法；2．了解在网页中使用CSS的常用方法；3．理解样式选择符及其作用原理；4．熟练使用CSS控制网页样式。

3.1 CSS概述3.1.1 CSS概念CSS全称是Cascading Style Sheet，翻译成中文叫层叠样式表。

它是一种标记性语言，配合HTML语言进行页面外观控制。

CSS技术诞生于1996年，早期由于缺乏浏览器支持，并没有引起人们的重视，现在大多数浏览器都支持CSS。

CSS允许在HTML文档中加入样式，如字体类型、颜色、大小等，对于设计者来说，它是一个非常灵活的工具，可以帮助开发人员实现网页内容与外观控制的分离。

CSS样式表的引入也非常灵活，既可在行内定义，也可定义在页面的特定位置，甚至作为外部样式文件供网页调用，真正实现外观控制与内容功能的分离。

CSS是由W3C组织负责制订和颁布的，1996年12月发布的CSS为1.0规范，1998年发布了2.0规范，目前还有2.1和3.0规范两个版本处于应用状态。

由于W3C是一个民间技术组织，并没有强制要求各软件厂家必须符合CSS规范，因此，不同的浏览器对CSS的支持并不完全相同，这多少给开发者带来一些不便，但目前主流的浏览器IE6、IE7以及Firefox 等已经将CSS作为事实的技术规范，CSS因此得到了非常好的支持。

《CSS样式表》课件

《CSS样式表》课件


二、CSS样式表的语法结构
CSS样式表的语法规 则
CSS样式表由选择器和一系列属 性和值组成，遵循特定的语法 规则来定义样式。
CSS样式表的选择器
CSS选择器用于选择要应用样式 的HTML元素，可以根据元素名 称、class、ID等来进行选择。
CSS样式表的属性和 值
CSS样式表的属性定义了要改变 的样式特性，值为属性的具体 取值。
四、CSS样式表的优化技巧
1 CSS选择器的优化
减少通用选择器和使用具 体的选择器来提高样式匹 配的性能。
2 CSS样式表的压缩与
合并
3 CSS样式表的预加载
通过使用标签来提前加载
通过压缩和合并CSS文件，
CSS文件，减少页面渲染
减少文件大小和请求次数，
的等待时间。
提高网页加载速度。
五、CSS样式表的兼容性问题
《CSS样式表》PPT课件
CSS样式表 PPT课件
一、CSS样式表介绍
什么是CSS样式表
CSS样式表定义了如何将HTML文档呈现为具有样式的网页。
CSS样式表的作用
CSS样式表用于控制网页的布局、字体、颜色等外观特性，让网站更加美观与可读性。
CSS样式表的发展历程
CSS样式表经历了多个版本的发展，逐渐演变为现代化的样式表语言。
Байду номын сангаас
CSS样式表的不同浏览器兼容性问 题
不同浏览器对CSS样式表的支持和实现存在差异， 导致页面在不同浏览器上展示效果不同。
CSS样式表的解决方案
使用CSS前缀和媒体查询等技术，以及针对特定浏 览器的Hack来解决兼容性问题。
六、总结与参考文献
总结CSS样式表的重要性
03_css样式表

03_css样式表


标签名{ 属性名1:属性值1 ; 属性名2:属性值2 ; ……
}
标签选择器

希望修饰页面中的所有项目列表项<li>的样式为：字体大小为 28px、红色、隶书。
<style> li{color:red;font-size:28px;font-family:隶 书; } </style>
<div>
<ul> <li>家用电器</li> <li>各类书籍</li>

background-position属性设置背景图出现的位置，即背景出 现一定的偏移量
示例 0px 0px (默认，表示从左上角出现背景，无偏移） 30px 40px (正向偏移，图片向下和向右移动） -50px -60px (反向偏移，图片向上和向左移动） 30%50% (垂直方向居中，水平方向偏移30%) 可以使用水平和垂直方向的关键词进行自由组合， 如省略，则默认为center。例如: right top (右上角出现) left bottom (左下角出现） top (上方水平居中位置出现）
对象的属性1:属性值1;
对象的属性2:属性值2; } </style>

代码规范

虽然css代码不区分大小写，但推荐全用小写。 每条样式规则用分号（;）隔开 当CSS代码较多时，可以使用”/*......*/”添加必要的注释
选择器的分类

标签选择器

当需要对页面内某类标签的内容进行修饰时，则采用标签选 择器
什么是css样式 CSS是Cascading Style Sheets的缩写，一般翻译为层叠样式 表 为什么使用css样式表 实现内容和样式的分离，利于团队开发 实现样式复用，提高开发效率 实现页面的精确控制 更利于搜索引擎的搜索
CSS样式表教程

CSS样式表教程

CSS样式表教程1、什么是CSS？它的能做些什么？CSS就是一种叫做样式表（stylesheet）的技术，也有人称之为层叠样式表（Cascading Stylesheet）。

在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。

（1）css里的一行以#号开头表示是ID选择器的标记（以<DIVid=page-wrap>格式使用）；以“.”开头，这个是类（class）选择器的标记（以<UL class=dropdown>格式使用）。

（2）CSS里的 * 是通配符，意思是所有的标签都有的属性。

一般*的属性作用于：IE6、IE7。

2、样式表的例子<html><head><style type="text/css"><!--h2 { font-family: "宋体"; font-size: 12pt; font-style: italic; color: #FF0033; background-color: #FFCCCC}h1 { font-family: "Arial"; font-size: 12pt; color: #66FF66} --></style></head><body><h2> 欢迎光临 </h2><h1> welcome </h1></body></html>说明：（1）在CSS语法规则中定义了文字的风格，标签<h2>...</h2>间的字符为"宋体"，"大小12pt"，字符是"倾斜"的，颜色"#ff0033"，字符背景色"#ffcccc"。