css的基本概念.ppt

《css的基本概念.ppt》由会员分享，可在线阅读，更多相关《css的基本概念.ppt（45页珍藏版）》请在三一办公上搜索。

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/HEADBODY 一级标题.其他正文.一级标题/BODY/HTML,6,示例演示效果图,7,层叠样式表示例,代码如下：使用HTML方式 H1text-align:center;font-family:楷体_GB2312;一级标题.其他正文.一级标题,8,2.2 CSS的基本语法,样式表项的组成：选择符、选择属性、定义属性值选择符 属性1:值1;属性2:值2;属性3:值3;选择符定义样式作用的

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

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

5、2px;/*文字大小*/class选择器1class选择器2 class选择器2h3同样适用,16,class选择器与标记选择器class选择器与标记选择器1class选择器与标记选择器2class选择器与标记选择器3class选择器与标记选择器4class选择器与标记选择器5class选择器与标记选择器6,17,类别选择器,标记名.类名 属性:值可以通过class选择器和标记选择器配合使用 表示标记名中的class属性为类名的标记符都采用所定义的样式。,18,标记选择器.class标记选择器.class1标记选择器.class2标记选择器.class3标记选择器.class4标记选择器.cl

6、ass5使用于别的标记,19,例如，我们打算让某一些段落缩进0.5in，另一些段落缩进1.0in，我们知道段落采用这个标记。代码如下：This is a sample 这个段落将缩进0.5in这个段落将比上面缩进一倍距离,20,同时使用两个class 一种都不使用同时使用两种class，只使用第一种同时使用两种class，只使用第二种同时使用两种class，同时使用一种都不使用,同时给一个标记运用多个class类别选择器，从而将两个类别的样式风格同时运用到个标记中。,21,ID选择器,#idname property:value 表示任何ID属性为idname的标记符都采用所定义的样式。用户定

7、义ID与class的作用完全相同，一般使用其中之一即可。,22,ID选择器 ID选择器1ID选择器2ID选择器3ID选择器3/*用法错误ID选择器不支持class选择器那样多风格同时使用*/,23,ID选择器,注意：将ID选择器用于多个标记是错误的，因为每个标记的ID不只是CSS可以调用，JavaScript等其他脚本语言同样可以调用。如果一个HTML中有两个相同的id的标记，将导致JavaScript在查找id时出错。网站建设者在编写CSS代码时，应该养成良好的编写习惯，一个id最多只能赋予一个HTML标记。,24,伪类和伪元素伪类和伪元素是特殊的类和元素，能自动地被支持CSS的浏览器所识别

8、。伪类区别开不同种类的元素(例如，visited links(已访问的连接)和active links(可激活连接)描述了两个定位锚(anchors)的类型)。伪元素指元素的一部分，例如段落的第一个字母。伪类或伪元素规则的形式如选择符:伪类 属性:值 或 选择符:伪元素 属性:值 伪类和伪元素不应用HTML的CLASS属性来指定。一般的类可以与伪类和伪元素一起使用，如下:选择符.类:伪类 属性:值 或 选择符.类:伪元素 属性:值,25,定位锚伪类伪类可以指定A元素以不同的方式显示连接(links)、已访问连接(visited links)和可激活连接(active links)。定位锚元素可

9、给出伪类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%;float:left,26,选择器的集体声明,在声明各种CSS选择器时，如果某些选择器的风格完全相同，或者部分相同，这时可以利用集体声明的方法，将风格相同的CSS选择器同时声明，例如：全局声明符*,27,集体声明 集体声明h1集体声明h2集体声明h

10、3集体声明h4集体声明h5集体声明p1集体声明p2集体声明p3,28,全局声明 全局声明h1全局声明h2全局声明h3全局声明h4全局声明h5全局声明p1全局声明p2全局声明p3,29,选择器的嵌套声明,在CSS选择器中，还可以通过嵌套的方式，对特殊位置的HTML标记进行声明，例如当与 之间包含标记时，就可以使用嵌套选择器进行相应的控制，代码如下：,30,CSS选择器的嵌套声明 嵌套使用CSS标记的方法嵌套之外的标记不生效,31,选择器的嵌套在CSS的编写中可以大大减少对class和id的声明。因此在构建页面HTML框架时通常只给外层标记定义class或id，内层标记能通过嵌套表示的则利用嵌套方

11、式，而不需要再定义class或id。只有当子标记无法利用此规则时，才能单独进行声明，例如一个标记中包含多个标记，需要对其中某个单独设置CSS样式时才给该一个单独的class或id，而其他同样采用ul li的嵌套方式来设置。,32,选择器的继承性,在HTML页面中，有时需要将两个标记的样式定义混合使用，使两个标记嵌套的内容，既有第一个标记样式的特点，也有第二个标记样式的特点，这就是样式表的继承性。父标记和子标记的概念包含在外面的标记为父标记被包含在里面的标记为子标记,33,父子关系,34,关系1页面父子关系复杂时页面父子关系复杂时这里省略20个嵌套.页面父子关系复杂时页面父子关系复杂时这里省略2

12、0个嵌套.关系2页面父子关系复杂时页面父子关系复杂时这里省略20个嵌套.页面父子关系复杂时页面父子关系复杂时这里省略20个嵌套.,35,2.4使用CSS控制页面,一般说来，可以通过四种不同的方法将样式表添加到页面中。这四种方法是：行内样式内嵌式样式 链接式样式导入样式,36,行内样式,行内样式是所有样式方法中最为直接的一种，它直接对HTML的标记使用style属性，如下例所示：页面标题 正文内容1正文内容2正文内容3 行内样式最为简单的CSS使用方法，但由于需要为每个标记设置style属性，后期维护成本高，网页容易过胖，因此不推荐使用。,37,内嵌式样式,内嵌式样式表就是将CSS写在与之间，并

13、且用和标记进行声明。使用该方法将所有CSS的代码部分被集中在同一个区域，方便了后期的维护，页面本身也大大瘦身。但如果是一个网站，拥有很多的页面，对于不同页面上的相同标记都希望采用同样的风格时，该方法显得有些麻烦，维护成本也不低。因此仅使用于特殊的页面设置单独的样式风格。样式表。,38,演示用STYLE 定义样式,在STYLE标记符中定义样式信息/TITLE 一代人黑夜给了我黑色的眼睛我却用它寻找光明/HTML,39,链接式样式,链接式CSS样式表将HTML页面本身与CSS样式分离为两个或者多个文件，实现了页面框架HTML代码与美工CSS代码的完全分离，使得前期制作和后期维护都十分方便，网站后台

14、的技术人员与美工设计者也可以很好的分工合作。而且对于同一个CSS文件可以链接到多个HTML文件中，甚至可以链接到整个网站的所有页面中，使得网站整体风格统一、协调，并且后期维护的工作量大大减少。格式：在HTML文件的和标记之间加上,40,演示链接外部样式表文件,主要代码：-网页源文件-链接外部样式表文件/TITLE 一代人黑夜给了我黑色的眼睛我却用它寻找光明/HTML-与网页源文件同一目录下的mycss.css 文件-Pstyle=font-size;24px;text-align:center“H1style=font-family;黑体;text-align:center,41,演示效果：,

15、42,导入样式,导入样式表与链接样式表的功能基本相同，只是语法和运作上略有不同。在HTML文件中导入样式表，常用如下几种import语句，可以选择任意一种放在和标记之间。import url(sheet1.css);import url(“sheet1.css”);import url(sheet1.css);import sheet1.css;import“sheet1.css”;import sheet1.css;,43,导入样式,在STYLE标记符中定义样式信息 一代人黑夜给了我黑色的眼睛我却用它寻找光明,样式表example.cssPfont-size:24;text-align:ce

16、nter;H1font-family:黑体;text-align:center;,44,2.5各种样式的优先级问题,如果将四种CSS控制页面的方法同时用到同一个HTML文件的同一个标记上时，将会出现优先级问题。样式如果冲突，则采用高优先级样式；如果不冲突，则采用叠加的样式效果。行内样式优先级最高，其次是采用标记的链接式，再次是位于和之间的内嵌式，最后才是上面提到的import导入式,45,2.6各种样式的优先级问题,举例如下：样式优先级问题 CSS标题测试,文件3.css:h3padding-top:50px;/*顶端间隔50px*/color:#0000 FF;文件2.cssh3color:#00FF00;font-style:italic;font-size:40px;,