css的本概念.ppt

第2章 CSS基本概念 学习目标 理解CSS技术在网页制作过程中所起的重要作用，掌握CSS样式定义的方法。 掌握三种在网页中使用CSS样式的方法，并对比各自的优劣。 ppt中所有实例参考网页设计与制作电子教材及源代码 2.1 CSS的概念 CSS (Cascading Style Sheet) 中文译为层叠样式表，是一系列格式规则，用于控制网页内容的外观(样式)并允许将样式信息和网页内容分离的一种标记语言。 HTML与CSS的关系就是“网页结构”与“表现形式”的关系 演示——样式的作用 无样式 层叠样式表示例 无样式示例 假设现在要在网页中为所有的“标题1”标记符（H1）应用“居中”对齐方式和“楷体”字体那么如果使用HTML方式解决，则必须在每次出现该标记符时使用align=“center”属性，并将标题中文字用FONT标记符括起来以设置字体，如右所示： 代码： HTML HEAD TITLE使用HTML方式〈/TITLE〉 〈/HEAD〉 〈BODY〉 H1 align=centerFONT face=楷体_GB2312一级标题/FONT/H1 P...其他正文.../P H1 align=centerFONT face=楷体_GB2312一级标题/FONT/H1 〈/BODY〉 〈/HTML〉 示例演示效果图 层叠样式表示例 代码如下： HTML HEAD TITLE使用HTML方式/TITLE STYLE H1{text- align:center; font-family:楷体_GB2312;} /STYLE /HEAD BODY H1 align=center一级标题/H1 P...其他正文.../P H1 align=center一级标题/H1 /BODY /HTML 2.2 CSS的基本语法 样式表项的组成： 选择符、选择属性、定义属性值 选择符 { 属性1:值1; 属性2:值2; 属性3:值3;…… } 选择符定义样式作用的对象。 样式定义的语法 2.3 常用Selector类型 标记选择器 类别选择器 ID选择器 虚类（伪类） 集体声明 嵌套声明 继承性 标记选择器 一个HTML页面中由很多不同的标记组成，而CSS标记选择器就是用来声明哪些标记采用哪种CSS样式的。因此每一种HTML标记的名称都可以作为相应的标记选择器名称。例如： H1{text-align:center;color:red} 使所有用H1标记符修饰的内容都居中和用红色显示。 演示——HTML选择器效果 演示效果 效果浏览 类别选择器 . 类名{ 属性: 值…} 标记选择器一旦声明，那么页面中所有的相应标记都会产生变化。如果希望其中的某一个不产生变化，这时仅靠标记选择器是不够的，还要引入类别(class)选择器。 它表示任何class属性为类名的标记符都采用所定义的样式。 html head titleclass选择器/title style type=text/css .one{ color:red; /* 红色 */ font-size:18px; /* 文字大小 */ } .two{ color:green; /* 绿色 */ font-size:20px; /* 文字大小 */ } .three{ color:cyan; /* 青色 */ font-size:22px; /* 文字大小 */ } /style /head body p class=oneclass选择器1/p p class=twoclass选择器2/p p class=threeclass选择器2/p h3 class=twoh3同样适用/h3 /body/html html head titleclass选择器与标记选择器/title style type=text/css !-- p{ /* 标记选择器 */ color:blue; font-size:18px; } .special{ /* 类别选择器 */ color:red; /* 红色 */ font-size:23px; /* 文字大小 */ } -- /style /head body pclass选择器与标记选择器1/p pclass选择器与标记选择器2/p pclass选择器与标记选择器3/p p class=specialclass选择器与标记选择器4/p pclass选择器与标记选择器5/p pclass选择器与标记选择器6/p /body /html 类别选择器 标记名. 类名{ 属性: 值…}