常州网页制作培训,CSS样式表基础知识教程-东方博宜

CSS样式表基础知识是网页制作过程中必须掌握的知识,在网页制作的过程中也经常要用到!该教程由东方博宜IT培训机构提供!

DIV+CSS样式表简介 样式表分类 基本语法 样式表优点 样式表优化w w w. c z o s . c n

1 3 2

3 4 3

CSS样式表基础知识是网页制作过程中必须掌握的知识,在网页制作的过程中也经常要用到!该教程由东方博宜IT培训机构提供!

样式表简介

一、样式表简介

w w w. c z o s . c n

CSS样式表基础知识是网页制作过程中必须掌握的知识,在网页制作的过程中也经常要用到!该教程由东方博宜IT培训机构提供!

样式表简介

这是标题：<h3 align="center">微软操作系统首选12种浏览器名单曝光 </h3>

这是段落：<p>12月17日消息，微软……</p>

这是样式：

w w w. c z o s . c n

CSS样式表基础知识是网页制作过程中必须掌握的知识,在网页制作的过程中也经常要用到!该教程由东方博宜IT培训机构提供!

二、样式表分类

1.内嵌样式表

2.内部样式表

3.链入外部样式表

4.导入外部样式表 导入样式表写在样式表的第一行！

w w w. c z o s . c n

CSS样式表基础知识是网页制作过程中必须掌握的知识,在网页制作的过程中也经常要用到!该教程由东方博宜IT培训机构提供!

样式表分类

样式表的继承性(层叠) 内部样式表： 居中，灰色

出现这种情况： 外部样式表： 左对齐，蓝色

后来居上，最近原则！?

内嵌样式表： 右对齐，紫色

w w w. c z o s . c n

CSS样式表基础知识是网页制作过程中必须掌握的知识,在网页制作的过程中也经常要用到!该教程由东方博宜IT培训机构提供!

三、基本语法 3.1 基本语法 CSS的定义是由三个部分构成：选择符(selector),属性(properties)和属性的取值 (value)。 基本格式如下： selector {property: value} (选择符 {属性：值}) 选择符是可以是多种形式，一般是你要定义样式的HTML标记，例如body、p、table…… ,你可以通过此方法定义它的属性和值，属性和值要用冒号隔开： body {color: black}

w w w. c z o s . c n

CSS样式表基础知识是网页制作过程中必须掌握的知识,在网页制作的过程中也经常要用到!该教程由东方博宜IT培训机构提供!

选择符分类

3.2 选择符的分类 1.类型选择符 body { font-size:12px; } p { color:blue; } 指对网页中已有的标签类型作为名称的选择符，如上表示：body标签内的 所有文字大小为12px;段落内的文字颜色为蓝色。

w w w. c z o s . c n

CSS样式表基础知识是网页制作过程中必须掌握的知识,在网页制作的过程中也经常要用到!该教程由东方博宜IT培训机构提供!

选择符分类

2.群组选择符 h4,p,span { font-size:12px; } 表示页面所有的h4,p,span标签内文字都为12px大小，即对一组对 象进行相同的样式指定，每个标签之间用逗号分隔开来。

w w w. c z o s . c n

CSS样式表基础知识是网页制作过程中必须掌握的知识,在网页制作的过程中也经常要用到!该教程由东方博宜IT培训机构提供!

选择符分类

3.包含选择符 table a { font-size: 12px } 在表格内的链接改变了样式，文字大小为12象素，而表格外的链接的 文字仍为默认大小。

w w w. c z o s . c n

CSS样式表基础知识是网页制作过程中必须掌握的知识,在网页制作的过程中也经常要用到!该教程由东方博宜IT培训机构提供!

选择符分类

4.ID选择符 id是对页面中的唯一元素进行样式定义，这个样式在页面中只使用 一次、即id不重复 < id="myDiv"> .. </> #myDiv { font-size:12px; }

w w w. c z o s . c n

CSS样式表基础知识是网页制作过程中必须掌握的知识,在网页制作的过程中也经常要用到!该教程由东方博宜IT培训机构提供!

5.类选择符 或者写成： .center {text-align: center} <h1 class="center"> 这个标题是居中排列的 </h1> <p class="center">

选择符分类

w w w. c z o s . c n

CSS样式表基础知识是网页制作过程中必须掌握的知识,在网页制作的过程中也经常要用到!该教程由东方博宜IT培训机构提供!

选择符分类

6.组合选择符 使用id或class,同时也使用标签来进行组合 h1#cont { } 表示id为cont的h1标签 h1 .cont { }表示所有class为cont的h1标签 p.right {text-align: right} p.center {text-align: center} 然后用不在不同的段落里，只要在HTML标记里加入你定义的class参 数： <p class="right"> 这个段落向右对齐的 </p> w w w. c z o s . c n

CSS样式表基础知识是网页制作过程中必须掌握的知识,在网页制作的过程中也经常要用到!该教程由东方博宜IT培训机构提供!

选择符分类 7.伪类选择符 常见为a标签 a:link { } { } a:ac

tive{ } { } a:hover a:visited

w w w. c z o s . c n

CSS样式表基础知识是网页制作过程中必须掌握的知识,在网页制作的过程中也经常要用到!该教程由东方博宜IT培训机构提供!

选择符分类

8.通配选择符 * { color:blue; } 表示所有对象的字体都为蓝色。

w w w. c z o s . c n

CSS样式表基础知识是网页制作过程中必须掌握的知识,在网页制作的过程中也经常要用到!该教程由东方博宜IT培训机构提供!

3.3 CSS的属性和值

3.3.1 字体属性 字体属性主要包括：字体族科、字体风格、字体加粗、字体大小 。 Font-family:用一个指定的字体名或一个种类的字体族科。 Font-size:字体显示的大小。 Font-style:设定字体风格。 Font-weight:以bold为值可以使字体加粗。

w w w. c z o s . c n

CSS样式表基础知识是网页制作过程中必须掌握的知识,在网页制作的过程中也经常要用到!该教程由东方博宜IT培训机构提供!

字体族科

1.Font-family

可以使用一个指定的字体名或一个种类的字体族科。很明 显定义一个指定的字体名不如定义一个种类的字体族科。 当浏览器解析执行的时候，会控制族科中所列的字体顺序 从前到后选择字体，当客户机中没有第一种字体的时候会 默认使用第二种字体显示，依此类推。

w w w. c z o s . c n