css的基本概念.ppt

1、1,第2章 CSS基本概念,2,学习目标,理解CSS技术在网页制作过程中所起的重要作用，掌握CSS样式定义的方法。 掌握三种在网页中使用CSS样式的方法，并对比各自的优劣。 ppt中所有实例参考网页设计与制作电子教材及源代码,3,2.1 CSS的概念,CSS (Cascading Style Sheet) 中文译为层叠样式表，是一系列格式规则，用于控制网页内容的外观(样式)并允许将样式信息和网页内容分离的一种标记语言。 HTML与CSS的关系就是“网页结构”与“表现形式”的关系,4,演示样式的作用,无样式 层叠样式表示例,5,无样式示例,假设现在要在网页中为所有的“标题1”标记符（H1）应用“

2、居中”对齐方式和“楷体”字体那么如果使用HTML方式解决，则必须在每次出现该标记符时使用align=“center”属性，并将标题中文字用FONT标记符括起来以设置字体，如右所示：,代码： 使用HTML方式/TITLE /HEAD BODY 一级标题 .其他正文. 一级标题 /BODY /HTML,6,示例演示效果图,7,层叠样式表示例,代码如下： 使用HTML方式 H1text- align:center; font-family:楷体_GB2312; 一级标题 .其他正文. 一级标题 ,8,2.2 CSS的基本语法,样式表项的组成： 选择符、选择属性、定义属性值 选择符 属性1:值1; 属

3、性2:值2; 属性3:值3; 选择符定义样式作用的对象。,例如： H1 text- align:center; font-family:楷体_GB2312; ,9,样式定义的语法,H1 text-align:center; font-family:黑体,选择器,样式定义,样式属性,属性取值,10,2.3 常用Selector类型,标记选择器 类别选择器 ID选择器 虚类（伪类） 集体声明 嵌套声明 继承性,11,标记选择器,一个HTML页面中由很多不同的标记组成，而CSS标记选择器就是用来声明哪些标记采用哪种CSS样式的。因此每一种HTML标记的名称都可以作为相应的标记选择器名称。例如： H1

4、text-align:center;color:red 使所有用H1标记符修饰的内容都居中和用红色显示。,12,演示HTML选择器效果,演示效果,13,效果浏览,14,类别选择器,. 类名 属性: 值 标记选择器一旦声明，那么页面中所有的相应标记都会产生变化。如果希望其中的某一个不产生变化，这时仅靠标记选择器是不够的，还要引入类别(class)选择器。 它表示任何class属性为类名的标记符都采用所定义的样式。,15, class选择器 .one color:red;/* 红色 */ font-size:18px;/* 文字大小 */ .two color:green;/* 绿色 */ fon

5、t-size:20px;/* 文字大小 */ .three color:cyan;/* 青色 */ font-size:22px;/* 文字大小 */ class选择器1 class选择器2 class选择器2 h3同样适用 ,16, class选择器与标记选择器 class选择器与标记选择器1 class选择器与标记选择器2 class选择器与标记选择器3 class选择器与标记选择器4 class选择器与标记选择器5 class选择器与标记选择器6 ,17,类别选择器,标记名. 类名 属性: 值 可以通过class选择器和标记选择器配合使用 表示标记名中的class属性为类名的标记符都采用

6、所定义的样式。,18, 标记选择器.class 标记选择器.class1 标记选择器.class2 标记选择器.class3 标记选择器.class4 标记选择器.class5 使用于别的标记,19,例如，我们打算让某一些段落缩进0.5in，另一些段落缩进1.0in，我们知道段落采用这个标记。 代码如下： This is a sample 这个段落将缩进0.5in 这个段落将比上面缩进一倍距离 ,20, 同时使用两个class 一种都不使用 同时使用两种class，只使用第一种 同时使用两种class，只使用第二种 同时使用两种class，同时使用 一种都不使用 ,同时给一个标记运用多个cla

7、ss类别选择器，从而将两个类别的样式风格同时运用到个标记中。,21,ID选择器,#idname property: value 表示任何ID属性为idname的标记符都采用所定义的样式。 用户定义ID与class的作用完全相同，一般使用其中之一即可。,22, ID选择器 ID选择器1 ID选择器2 ID选择器3 ID选择器3 /*用法错误ID选择器不支持class选择器那样多风格同时使用*/ ,23,ID选择器,注意：将ID选择器用于多个标记是错误的，因为每个标记的ID不只是CSS可以调用，JavaScript等其他脚本语言同样可以调用。如果一个HTML中有两个相同的id的标记，将导致Java

8、Script在查找id时出错。网站建设者在编写CSS代码时，应该养成良好的编写习惯，一个id最多只能赋予一个HTML标记。,24,伪类和伪元素 伪类和伪元素是特殊的类和元素，能自动地被支持CSS的浏览器所识别。伪类区别开不同种类的元素(例如，visited links(已访问的连接)和active links(可激活连接)描述了两个定位锚(anchors)的类型)。伪元素指元素的一部分，例如段落的第一个字母。 伪类或伪元素规则的形式如 选择符:伪类 属性: 值 或 选择符:伪元素 属性: 值 伪类和伪元素不应用HTML的CLASS属性来指定。一般的类可以与伪类和伪元素一起使用，如下: 选择符.

9、类: 伪类 属性: 值 或 选择符.类: 伪元素 属性: 值 ,25,定位锚伪类 伪类可以指定A元素以不同的方式显示连接(links)、已访问连接(visited links)和可激活连接(active links)。定位锚元素可给出伪类link、visited或active。 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

10、%; float: left ,26,选择器的集体声明,在声明各种CSS选择器时，如果某些选择器的风格完全相同，或者部分相同，这时可以利用集体声明的方法，将风格相同的CSS选择器同时声明，例如 ： 全局声明符*,27, 集体声明 集体声明h1 集体声明h2 集体声明h3 集体声明h4 集体声明h5 集体声明p1 集体声明p2 集体声明p3 ,28, 全局声明 全局声明h1 全局声明h2 全局声明h3 全局声明h4 全局声明h5 全局声明p1 全局声明p2 全局声明p3 ,29,选择器的嵌套声明,在CSS选择器中，还可以通过嵌套的方式，对特殊位置的HTML标记进行声明，例如当与 之间包含标记时，

11、就可以使用嵌套选择器进行相应的控制，代码如下：,30, CSS选择器的嵌套声明 嵌套使用CSS标记的方法 嵌套之外的标记不生效 ,31,选择器的嵌套在CSS的编写中可以大大减少对class和id的声明。因此在构建页面HTML框架时通常只给外层标记定义class或id，内层标记能通过嵌套表示的则利用嵌套方式，而不需要再定义class或id。只有当子标记无法利用此规则时，才能单独进行声明，例如一个标记中包含多个标记，需要对其中某个单独设置CSS样式时才给该一个单独的class或id，而其他同样采用ul li的嵌套方式来设置。,32,选择器的继承性,在HTML页面中，有时需要将两个标记的样式定义混合

12、使用，使两个标记嵌套的内容，既有第一个标记样式的特点，也有第二个标记样式的特点，这就是样式表的继承性。 父标记和子标记的概念 包含在外面的标记为父标记 被包含在里面的标记为子标记,33, 父子关系 ,34, 关系1 页面父子关系复杂时 页面父子关系复杂时 这里省略20个嵌套. 页面父子关系复杂时 页面父子关系复杂时 这里省略20个嵌套. 关系2 页面父子关系复杂时 页面父子关系复杂时 这里省略20个嵌套. 页面父子关系复杂时 页面父子关系复杂时 这里省略20个嵌套. ,35,2.4使用CSS控制页面,一般说来，可以通过四种不同的方法将样式表添加到页面中。这四种方法是： 行内样式 内嵌式样式 链

13、接式样式 导入样式,36,行内样式,行内样式是所有样式方法中最为直接的一种，它直接对HTML的标记使用style属性，如下例所示： 页面标题 正文内容1 正文内容2 正文内容3 行内样式最为简单的CSS使用方法，但由于需要为每个标记设置style属性，后期维护成本高，网页容易过胖，因此不推荐使用。,37,内嵌式样式,内嵌式样式表就是将CSS写在与之间，并且用和标记进行声明。 使用该方法将所有CSS的代码部分被集中在同一个区域，方便了后期的维护，页面本身也大大瘦身。但如果是一个网站，拥有很多的页面，对于不同页面上的相同标记都希望采用同样的风格时，该方法显得有些麻烦，维护成本也不低。因此仅使用于特

14、殊的页面设置单独的样式风格。样式表。,38,演示用STYLE 定义样式, 在STYLE标记符中定义样式信息/TITLE 一代人 黑夜给了我黑色的眼睛 我却用它寻找光明 /HTML,39,链接式样式,链接式CSS样式表将HTML页面本身与CSS样式分离为两个或者多个文件，实现了页面框架HTML代码与美工CSS代码的完全分离，使得前期制作和后期维护都十分方便，网站后台的技术人员与美工设计者也可以很好的分工合作。 而且对于同一个CSS文件可以链接到多个HTML文件中，甚至可以链接到整个网站的所有页面中，使得网站整体风格统一、协调，并且后期维护的工作量大大减少。 格式：在HTML文件的和标记之间加上

15、,40,演示链接外部样式表文件,主要代码： -网页源文件- 链接外部样式表文件/TITLE 一代人 黑夜给了我黑色的眼睛 我却用它寻找光明 /HTML -与网页源文件同一目录下的mycss.css 文件- Pstyle=font-size;24px;text-align:center“ H1style=font-family;黑体;text-align:center,41,演示效果：,42,导入样式,导入样式表与链接样式表的功能基本相同，只是语法和运作上略有不同。在HTML文件中导入样式表，常用如下几种import语句，可以选择任意一种放在和标记之间。 import url(sheet1.cs

16、s); import url(“sheet1.css”); import url(sheet1.css); import sheet1.css; import “sheet1.css”; import sheet1.css;,43,导入样式, 在STYLE标记符中定义样式信息 一代人 黑夜给了我黑色的眼睛 我却用它寻找光明 ,样式表example.css Pfont-size:24;text-align:center; H1font-family:黑体;text-align:center;,44,2.5各种样式的优先级问题,如果将四种CSS控制页面的方法同时用到同一个HTML文件的同一个标记上时，将会出现优先级问题。样