最新版全面学习css+DIV教程课件PPT完整版

少了 < STYLE> 和注释标记。 保存为 example.css 。
9
有两种办法可以实现引用外部样式表。 （一）使用 < LINK> 标记链接外部样式表
< LINK REL=STYLESHEET HREF="example.css">
HREF 中应包含路径信息。
一个 HTML 文档可引用多个外部样式表，例如：
1 、内联样式表
例如我们要设置一 HTML 页面中所有 H1 标题字显示为蓝色，其代码如
下：
< HTML> < HEAD> < TITLE>This is a CSS samples< /TITLE> < STYLE TYPE="text/css"> < !-H1 { color: blue } 1.样式表信息包括在 --> < style> 和 < /style> < /STYLE> 标记中。 < /HEAD> 2.放到 < HEAD> 和 < < BODY> /HEAD> 中去。 ... 页面内容… 3.整个页面中产生作用， < /BODY> < /HTML>
11
四、创建CLASS 同一个HTML标志有多种风格时。应该创建类（CLASS）， 也可直接插入方式可以一一的对之进行定义，但繁琐。
定义语法为：
标志.类名 {标志属性：属性值； 标志属性：属性值； …… 标志属性：属性值}
引用方法是： < 标志 CLASS="类名">
12
例如，我们打算让某一些段落缩进0.5in，另一些段落缩进1.0in， 我们知道段落采用< P>这个标记。 代码如下：
17
五、边框属性
每一个网页都可以理解成是被一个方框框起来
的，而页面中不同的部分又可以分为一个个小的方框。因此定义方
框的边距、边界、颜色等的边框属性应用而生。
1、边距属性：
· 左边距（margin-left） · 右边距（margin-right） · 上边距（margin-top） · 下边距（margin-bottom） · 边距（margin）
15
伪类和伪元素
伪类和伪元素是特殊的类和元素，能自动地被支持CSS的浏览器所识别。伪 类区别开不同种类的元素(例如，visited links(已访问的连接)和active links(可激活连 接)描述了两个定位锚(anchors)的类型)。伪元素指元素的一部分，例如段落的第一 个字母。 伪类或伪元素规则的形式如
5
注意， 1. < STYLE> 标记中包括了 TYPE ＝ “text/css‖ ， 这是让浏览器知道你是使用 CSS1 样式规则。 2. 加入 < !-- 和 --> 这一对注释标记是防止有些老式 的浏览器不认识样式表规则，可以把该段代码忽略 不计。
6
在使用样式表时，经常会有多标志用同一个属性
22
3.4、尺寸属性 定义方框的宽度width和高度height。 例：DIV.sample {width: 300px; height: 200px } 3.5、浮动和清除属性 浮动属性是指某一对象在母体元素内的浮动位置，清除 属性和浮动属性一起使用，则表示同一母体内的其他对象可 以流到浮动对象的旁边。 例： .float1 { float: left; clear: right } 假如这个样式定义在表格单元中的某个对象，则该对象 将浮动在单元中的左边，而同一单元格中的其他对象在它右 边的周围部分。
存在于在 < STYLE> 和 < /STYLE> 标记中
例如：
< STYLE TYPE=“text/css”> @import “example.css”; @import “style/other.css”; < /STYLE>
样式表产生作用的优先级按照导入的先后顺序来设定。样式 表信息规则一多，就比较容易产生冲突。这时就看哪一个样 式表被引用在前，它就是具有第一优先权的。
< style type="text/css"> < !–
.main01 { font-size: 10pt; color: blue}
--> < /style>
引用的方法： < HTML标志 CLASS="类名"> 例如 设置某单元格中的字符大小： < td class="main01"> 设置某一段落字符： < p class="main01">
19
3、边界属性（ 3.1 边界宽度）
· 上边界宽（border-top-width） · 右边界宽（border-right-width） · 下边界宽（border-bottom-width） · 左边界宽（border-left-width） · 边界宽（border-width 这几个属性定义边界宽度，用thin、medium和thick 分别表示细、中等和粗，或者指定具体的数值来定义边界的 宽度。
20
3.2 边界样式（border-style）
该属性用以定义边框的风格呈现式样。共有九种。 none － 不显示边框，为缺省值 dotted － 点线 dashed —虚线 solid － 实线 double － 双线 groove －凹线 ridge － 凸线 inset － 使整个方框凸起 outset － 使整个方框凹陷 · 上边界（border-top） · 右边界（border-right） · 下边界（border-bottom） · 左边界（border-left） · 边界（border） 这几个是简写属性，它集合了上面几种属性的特点，可使用其 给边框一次性定义宽度、式样和颜色。各属性值之间用空格隔开。
8
2 、外部样式表 建立一个完全独立的文本文件，其扩展名为 .css ，文件内容 则输入样式表信息，除去任何相关的 HTML 语言。 例如在外部样式表中输入：
body { line-height: 130pt} H1,H2,H3,H4,H5,H6 { color: red; text-decoration: underline; fontfamily: " 黑体 " } b { font-style: italic; color: #FF3333; text-decoration: underline }
< html> < head> < title>This is a sample< /title>
< style type="text/css"> < !–
p.first { text-indent: 0.5in} p.second { text-indent: 1.0in} -->
< /style>
< /head>
< body bgcolor="#FFFFFF">
…… < p class=“first”>这个段落将缩进0.5in< /p> < p class=“second">这个段落将比上面缩进一倍距离< /p> ……
< /body> < /html>
13
可以直接定义CLASS，应用于HTML页面中的各个标记。其 语法只是比上面的少了一个标志： .类名{标志属性：属性值；标志属性：属性值；……标 志属性：属性值} 例如：
边距属性定义HTML页面中方框四边和其他元素之间的空白 距离，每一个margin-side属性只影响到一条边，而margin则提供了一个 同时设置四个边距的机会。
18
2、填充属性：
· 左填充（padding-left） · 右填充（padding-right） · 上填充（padding-top） · 下填充（padding-bottom） · 填充（padding） 填充属性设置边框和内部元素的距离。它和边距 属性十分相似，每个padding-side定义一个边框距离， padding则同时定义四个距离。
层叠样式表为你完成这一任务。
2
通过大量的 HTML 语言实现，即每次遇上标题，用 HTML 标 签进行设置： < h1>< font face=" 宋体 " color="blue"> 这里是标题 < /font> < /h1> 显然你很容易就会为之头大如斗的，即使你有很好的耐心 却难保挂一漏万，设置一多就会有所疏忽。 ――最后，对于公司建设的大型站点来说，往往分成几个 组各自开发，这时候就更需要一个统一的样式表来规划网站的 整体面貌，各个组都在遵循这统一的样式表的基础上进行各 自的开发建设。
21
3.3 边界颜色（border-color） 这个属性定义边界的颜色，可以用16种颜色 名或RGB值来设置。16种颜色名分别为：aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow。 RGB值则应表示为#RRGGBB或r%,g%,b%。 #rrggbb (如，#00cc00) rgb(x,x,x) x是一个介乎0到255之间的整数 (如， rgb(0,204,0)) rgb(y%,y%,y%) y是一个介乎0.0到100.0之间的 整数 (如，rgb(0%,80%,0%))
A:link { color: red } A:active { color: blue; font-size: 125% } A:visited { color: green; font-size: 85% }
首个字母伪元素 首个字母伪元素用于加大(drop caps)和其他效果 P:first-letter { font-size: 300%; float: left }
3
HTML 语言由标志和属性构成， CSS 也是如此。 样式表基本语法： HTML 标志 { 标志属性：属性值；标志属性： 属性值；标志属性：属性值；…… }
样式表放在不同的地方，产生作用的范围也不 同。大致来说，样式表分为内联样式表和外联样式 表，即有页面内放置、外部引用、外部导入三种方 式。
4
网页制作系列制作
www.0371yun.com
CSS 教 程
1
一本优秀的杂志不仅仅是具备一套完整的结构 内容、巧妙出奇的页面布局，还需要一个统一的风 格，好的风格代表了一种高级的品味。 优秀的网页制作也不再是漂亮的图形、优美的 布局和完整的结构就能满足了，使网站整体保持一 致的风格，例如字体字形的显示，页面边距等等， 也是使网站作品有美感有品味的关键一步。
H1,H2,H3,H4,H5,H6 { color: red; text-decoration: underline; font-family: " 黑体 " }
注意各个标志属性之间用分号隔开。
7
内联样式表还包括一种直接插入方式，即单独指定 HMTL 页面中某一个标志，规定其风格样式，可以写为： < Table style=" font-size:10pt; color:blue"> 定义该表格内的字符大小为 10pt ，颜色为蓝色。
选择符:伪类 { 属性: 值 }
或 选择符:伪元素 { 属性: 值 } 伪类和伪元素不应用HTML的CLASS属性来指定。一般的类可以与伪类和伪元素一 起使用，如下:
选择符.类: 伪类 { 属性: 值 }
或
选择符.类: 伪元素 { 属性: 值 }
16
定位锚伪类
伪类可以指定A元素以不同的方式显示连接(links)、已访问连 接(visited links)和可激活连接(active links)。定位锚元素可 给出伪类link、visited或active。
14
用ID建立多种风格，实现同一规则被应用到页面中不同的 地方。 语法是： #id名 {标志属性：属性值；标志属性：属性 值；……标志属性：属性值} 如上面的例子，可以改写为： < style type="text/css"> < !-#001 { font-size: 10pt; color: red} #002 { font-size: 12pt; color: blue} --> < /style> 引用的方法也相同：< 标志 ID＝"ID名">。
比如：
B { color: red} I { color: red} H1 { color: red} 用逗号分隔各个 HTML 标志，把三行代码合并成一行，我们可以写成： B,I,H1 {color: red}
同一个 HTML 标志，可能定义到多种属性，例如，我们规定把 从ቤተ መጻሕፍቲ ባይዱH1 到 H6 各级标题定义为红色黑体字，带下划线，则应写为：
< LINK REL=STYLESHEET HREF="example.css"> < LINK REL=STYLESHEET HREF="style/other.css">
首先链接的 example.css 作为该文档缺省样式表， 当样式定义产生冲突时首先满足前者。
10
（二）使用 @IMPORT 导入样式表信息