第2章 CSS基本概念 1css的基本概念学习目标学习目标l理解CSS技术在网页制作过程中所起的重要作用，掌握CSS样式定义的方法。l掌握三种在网页中使用CSS样式的方法，并对比各自的优劣。lppt中所有实例参考网网页页设设计计与与制制作作电电子子教教材材及及源源代代码码2css的基本概念2.1 CSS的概念的概念 CSS (Cascading Style Sheet) 中文译为层叠样式表，是一系列格式规则，用于控制网页内容的外观(样式)并允许将样式信息和网页内容分离的一种标记语言。 HTML与CSS的关系就是“网页结构”与“表现形式”的关系 3css的基本概念演示演示样式的作用样式的作用l无样式l层叠样式表示例4css的基本概念无样式示例无样式示例l假设现在要在网页中为所有的“标题1”标记符（H1）应用“居中”对齐方式和“楷体”字体那么如果使用HTML方式解决，则必须在每次出现该标记符时使用align=“center”属性，并将标题中文字用FONT标记符括起来以设置字体，如右所示：代码：代码： 使用使用HTMLHTML方式方式/TITLE/TITLE/HEAD/HEADBODYBODY FONT face= _GB2312一一级标题级标题 . .其他正文其他正文. FONT face= _GB2312一一级标题级标题/BODY/BODY/HTML/HTML5css的基本概念示例演示效果图示例演示效果图6css的基本概念层叠样式表示例层叠样式表示例l代码如下：代码如下： 使用使用HTML方式方式 H1text- align:center; font-family:楷体楷体_GB2312; 一级标题一级标题 .其他正文其他正文. 一级标题一级标题7css的基本概念2.2 CSS的基本语法的基本语法 l样式表项的组成：选择符、选择属性、定义属性值选择符 属性1:值1; 属性2:值2; 属性3:值3; 选择符定义样式作用的对象。例如：例如：H1text- align:center; font-family:楷体楷体_GB2312;8css的基本概念样式定义的语法样式定义的语法 H1 text-align:center; font-family:黑体选择器样式定义样式属性属性取值9css的基本概念2.3 常用常用Selector类型类型l标记选择器标记选择器 l类别选择器类别选择器 lID选择器选择器l虚类（伪类）虚类（伪类）l集体声明集体声明l嵌套声明嵌套声明l继承性继承性10css的基本概念标记选择器l一个一个HTML页面中由很多不同的标记组成，而页面中由很多不同的标记组成，而CSS标记选择器就是用来声明哪些标记采用哪标记选择器就是用来声明哪些标记采用哪种种CSS样式的。因此每一种样式的。因此每一种HTML标记的名称标记的名称都可以作为相应的标记选择器名称。例如：都可以作为相应的标记选择器名称。例如：lH1text-align:center;color:redl使所有用使所有用H1标记符修饰的内容都居中和用红色显示。标记符修饰的内容都居中和用红色显示。11css的基本概念演示演示HTML选择器效果选择器效果l演示效果12css的基本概念效果浏览效果浏览13css的基本概念类别选择器l. 类名 属性: 值标记选择器一旦声明，那么页面中所有的相应标记都会产生变化。如果希望其中的某一个不产生变化，这时仅靠标记选择器是不够的，还要引入类别(class)选择器。 它表示任何class属性为类名的标记符都采用所定义的样式。14css的基本概念class选择器选择器.onecolor:red;/* 红色红色 */font-size:18px;/* 文字大小文字大小 */.twocolor:green;/* 绿色绿色 */font-size:20px;/* 文字大小文字大小 */.threecolor:cyan;/* 青色青色 */font-size:22px;/* 文字大小文字大小 */ class选择器选择器1class选择器选择器2 class选择器选择器2h3同样适用同样适用15css的基本概念class选择器与标记选择器选择器与标记选择器class选择器与标记选择器选择器与标记选择器1class选择器与标记选择器选择器与标记选择器2class选择器与标记选择器选择器与标记选择器3class选择器与标记选择器选择器与标记选择器4class选择器与标记选择器选择器与标记选择器5class选择器与标记选择器选择器与标记选择器616css的基本概念类别选择器l标记名. 类名 属性: 值可以通过class选择器和标记选择器配合使用 表示标记名中的class属性为类名的标记符都采用所定义的样式。17css的基本概念标记选择器标记选择器.class标记选择器标记选择器.class1标记选择器标记选择器.class2标记选择器标记选择器.class3标记选择器标记选择器.class4标记选择器标记选择器.class5使用于别的标记使用于别的标记18css的基本概念例如，我们打算让某一些段落缩进0.5in，另一些段落缩进1.0in，我们知道段落采用这个标记。 代码如下： This is a sample 这个段落将缩进这个段落将缩进0.5in这个段落将比上面缩进一倍距离这个段落将比上面缩进一倍距离 19css的基本概念同时使用两个同时使用两个class 一种都不使用一种都不使用同时使用两种同时使用两种class，只使用第一种，只使用第一种同时使用两种同时使用两种class，只使用第二种，只使用第二种同时使用两种同时使用两种class，同时使用，同时使用一种都不使用一种都不使用同时给一个标记运用多个同时给一个标记运用多个class类别选择器，从而将类别选择器，从而将两个类别的样式风格同时两个类别的样式风格同时运用到个标记中。运用到个标记中。 20css的基本概念ID选择器选择器 l#idname property: value 表示任何ID属性为idname的标记符都采用所定义的样式。l用户定义ID与class的作用完全相同，一般使用其中之一即可。21css的基本概念ID选择器 ID选择器1ID选择器2ID选择器3ID选择器3 /*用法错误ID选择器不支持class选择器那样多风格同时使用*/22css的基本概念ID选择器选择器l注意：将ID选择器用于多个标记是错误的，因为 每 个 标 记 的 ID不 只 是 CSS可 以 调 用 ，JavaScript等其他脚本语言同样可以调用。如果一个HTML中有两个相同的id的标记，将导致JavaScript在查找id时出错。网站建设者在编写CSS代码时，应该养成良好的编写习惯，一个id最多只能赋予一个HTML标记。23css的基本概念伪类和伪元素伪类和伪元素伪类和伪元素是特殊的类和元素特殊的类和元素，能自动地被支持CSS的浏览器所识别。伪类区别开不同种类的元素(例如，visited links(已访问的连接)和active links(可激活连接)描述了两个定位锚(anchors)的类型)。伪元素指元素的一部分伪元素指元素的一部分，例如段落的第一个字母。伪类或伪元素规则的形式如选择符选择符:伪类伪类 属性属性: 值值 或 选择符选择符:伪元素伪元素 属性属性: 值值 伪类和伪元素不应用伪类和伪元素不应用HTML的的CLASS属性来指定属性来指定。一般的类可以与伪类和伪元素一起使用，如下:选择符选择符.类类: 伪类伪类 属性属性: 值值 或 选择符选择符.类类: 伪元素伪元素 属性属性: 值值 24css的基本概念定位锚伪类定位锚伪类伪类可以指定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%; float: left 25css的基本概念选择器的选择器的集体声明集体声明l在声明各种CSS选择器时，如果某些选择器的风格完全相同，或者部分相同，这时可以利用集体声明的方法，将风格相同的CSS选择器同时声明，例如 ：l全局声明符* 26css的基本概念集体声明 集体声明h1集体声明h2集体声明h3集体声明h4集体声明h5集体声明p1集体声明p2集体声明p327css的基本概念全局声明 全局声明h1全局声明h2全局声明h3全局声明h4全局声明h5全局声明p1全局声明p2全局声明p328css的基本概念选择器的选择器的嵌套声明嵌套声明l在CSS选择器中，还可以通过嵌套的方式，对特殊位置的HTML标记进行声明，例如当与 之间包含标记时，就可以使用嵌套选择器进行相应的控制，代码如下：29css的基本概念CSS选择器的嵌套声明 嵌套使用CSS标记的方法嵌套之外的标记不生效30css的基本概念l选择器的嵌套在CSS的编写中可以大大减少对class和id的声明。因此在构建页面HTML框架时通常只给外层标记定义class或id，内层标记能通过嵌套表示的则利用嵌套方式，而不需要再定义class或id。只有当子标记无法利用此规则时，才能单独进行声明，例如一个标记中包含多个标记，需要对其中某个单独设置CSS样式时才给该一个单独的class或id，而其他同样采用ul li的嵌套方式来设置。31css的基本概念选择器的选择器的继承性继承性l在HTML页面中，有时需要将两个标记的样式定义混合使用，使两个标记嵌套的内容，既有第一个标记样式的特点，也有第二个标记样式的特点，这就是样式表的继承性。l父标记和子标记的概念l包含在外面的标记为父标记l被包含在里面的标记为子标记32css的基本概念父子关系 33css的基本概念关系1页面父子关系复杂时页面父子关系复杂时这里省略20个嵌套.页面父子关系复杂时页面父子关系复杂时这里省略20个嵌套.关系2页面父子关系复杂时页面父子关系复杂时这里省略20个嵌套.页面父子关系复杂时页面父子关系复杂时这里省略20个嵌套.34css的基本概念2.4使用使用CSS控制页面控制页面 一般说来，可以通过四种不同的方法将样式表添加到页面中。这四种方法是：l行内样式l内嵌式样式 l链接式样式l导入样式 35css的基本概念行内样式行内样式行内样式是所有样式方法中最为直接的一种，它直接对HTML的标记使用style属性，如下例所示： 页面标题 正文内容1正文内容2正文内容3 行内样式最为简单的CSS使用方法，但由于需要为每个标记设置style属性，后期维护成本高，网页容易过胖，因此不推荐使用。36css的基本概念内嵌式样式内嵌式样式l内嵌式样式表就是将CSS写在与之间，并且用和标记进行声明。l使用该方法将所有CSS的代码部分被集中在同一个区域，方便了后期的维护，页面本身也大大瘦身。但如果是一个网站，拥有很多的页面，对于不同页面上的相同标记都希望采用同样的风格时，该方法显得有些麻烦，维护成本也不低。因此仅使用于特殊的页面设置单独的样式风格。样式表。37css的基本概念演示演示用用STYLE 定义样式定义样式 在在STYLESTYLE标记符中定义样式信息标记符中定义样式信息/TITLE/TITLE!- 一代人一代人黑夜给了我黑色的眼睛黑夜给了我黑色的眼睛我却用它寻找光明我却用它寻找光明/HTML/HTML38css的基本概念链接式样式链接式样式l链接式CSS样式表将HTML页面本身与CSS样式分离为两个或者多个文件，实现了页面框架HTML代码与美工CSS代码的完全分离，使得前期制作和后期维护都十分方便，网站后台的技术人员与美工设计者也可以很好的分工合作。l而且对于同一个CSS文件可以链接到多个HTML文件中，甚至可以链接到整个网站的所有页面中，使得网站整体风格统一、协调，并且后期维护的工作量大大减少。 l格式：在HTML文件的和标记之间加上 39css的基本概念演示演示链接外部样式表文件链接外部样式表文件l主要代码：-网页源文件- 链接外部样式表文件/TITLE 一代人黑夜给了我黑色的眼睛我却用它寻找光明/HTML-与网页源文件同一目录下的mycss.css 文件-Pfont-size;24px;text-align:center“H1font-family;黑体;text-align:center40css的基本概念演示效果：演示效果：41css的基本概念导入样式导入样式l导入样式表与链接样式表的功能基本相同，只是语法和运导入样式表与链接样式表的功能基本相同，只是语法和运作上略有不同。在作上略有不同。在HTML文件中导入样式表，常用如下几种文件中导入样式表，常用如下几种import语句，可以选择任意一种放在语句，可以选择任意一种放在和和标标记之间。记之间。import url(sheet1.css);import url(“sheet1.css”);import url(sheet1.css);import sheet1.css;import “sheet1.css”;import sheet1.css;42css的基本概念导入样式导入样式 在在STYLE标记符中定义样式信息标记符中定义样式信息 一代人一代人黑夜给了我黑色的眼睛黑夜给了我黑色的眼睛我却用它寻找光明我却用它寻找光明样式表样式表example.cssPfont-size:24;text-align:center;H1font-family:黑体黑体;text-align:center;43css的基本概念2.5各种样式的优先级问题各种样式的优先级问题l如果将四种CSS控制页面的方法同时用到同一个HTML文件的同一个标记上时，将会出现优先级问题。样式如果冲突，则采用高优先级样式；如果不冲突，则采用叠加的样式效果。l行内样式优先级最高，其次是采用标记的链接式，再次是位于和之间的内嵌式，最后才是上面提到的import导入式 44css的基本概念2.6各种样式的优先级问题各种样式的优先级问题举例如下：样式优先级问题 CSS标题测试文件3.css:h3padding-top: 50px; /* 顶端间隔50px */ color:# 0000 FF;文件2.cssh3color:#00FF00;font-style:italic;font-size:40px;45css的基本概念