chap04 使用CSS样式表.ppt

4.1 初识CSS样式表 （1）为ocean.html案例添加内部样式表 在ocean.html页面的head/head之间添加如下的CSS定义 4.1 初识CSS样式表 （2）为ocean.html案例添加外部样式表文件 设计外部样式表，文件名为kuangjia_m.css 在ocean.html文件的head/head之间加入如下语句即可添加外部样式表： 4.2 CSS样式的声明 4.2.1 定义样式的基本语法 4.2.2 组合选择符 4.2.3 派生选择符 4.2.1 定义样式的基本语法 基本语句的结构格式 ： 选择符：指明后续样式规则的有效范围，通常是需要定义的 XHTML 元素或标记 。 属性：即希望改变的元素属性。 4.2.1 定义样式的基本语法 几点语法要求 ： （1）如果值为若干单词，则要给值加引号 （2）如果要定义不止一个声明，则需要用分号将每个声明分开 4.2.2 组合选择符 组合选择符：把相同属性和值的选择符组合起来书写 4.2.3 派生选择符 通过依据元素在其位置的上下文关系来定义样式，可以使标记更加简洁。 派生选择符的样式定义格式为 : 4.3 CSS样式的应用 4.3.1 内部样式表 4.3.2 外部样式表 4.3.3 内联样式表 4.3.1 内部样式表 内部样式表是把样式表放到页面的head…/head内 格式： 4.3.2 外部样式表 （1）外部样式表文件 样式表文件可以用任何文本编辑器（例如：记事本）打开并编辑，一般样式表文件扩展名为.css。 内容是定义的样式表，不包含XHTML标记。 内容格式： 4.3.2 外部样式表 （2）链入外部样式表 将外部样式表文件用link标记链入 （3）导入外部样式表： 将外部样式表文件用@import方式导入 注意其他的CSS规则应该仍然包括在style元素中，但所有的@import声明必须放在样式表的开始部分。 导入样式表的优先级低于后面定义的其他样式表的声明。 （4）链入与导入 两者基本没区别 一般小文件用导入的方式，大文件用链入的方式 4.3.3 内联样式表 内联样式表是混合在XHTML标记里使用的，用这种方法，可以很简单地对某个元素单独定义样式。 内联样式表的使用是直接将在XHTML标记里加入style参数。而style参数的内容就是CSS的属性和值。 其格式为 4.4 CSS的高级语法 4.4.1 样式类的创建和引用 4.4.2 id样式的创建和引用 4.4.3 新增加的定位标记 4.4.4 伪类和伪元素 4.4.5 CSS样式的继承和冲突 4.4.1 样式类的创建和引用 （1）创建：使用类选择符，可在内部和外部样式表中创建样式类。 ① 针对某个XHTML元素的类选择符样式，格式为： ② 另一种用法，省略XHTML元素名 （2）样式类的引用 在标记内设置class属性值为样式类名即可，引用格式如下： 4.4.2 id样式的创建和引用 定义id选择器要在id名称前加上一个“#”号。 （1）创建 ① 针对某个XHTML元素的id选择符样式，格式为： ②普通 id样式定义方法为在选择器中省略XHTML标记名 （2）id样式的引用 id样式的引用和类样式类似，只要把class换成id即可。引用格式如下 ： 4.4.3 新增加的定位标记 HTML的文档结构分为两大类：行级结构与块级结构，它来源于CSS的块级（Block）和行级（Inline）的概念。 块级结构中可以包含行级和其他块级结构，行级结构中只能包含数据和其他行级结构。 在HTML中有span 和div两个标记，分别对应于行级结构和块级结构。span与div本身并没有什么特殊意义，它们被广泛地与CSS联合使用。 4.4.3 新增加的定位标记 （1）span span标记被用来组合文档中的行内元素，以便通过样式来格式化它们 注意：span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。 实例 （2）div div标记也称层标记，可定义文档中的分区或节（division/section）。div标记可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。 4.4.4 伪类和伪元素 （1）锚伪类 相应的锚伪类有如下4种： 锚伪类的应用格式为 类选择器也可以和锚伪类一起使用，其格式为 实例 （2）首字母和首行伪元素 格式 与类选择符结合 4.4.5 CSS样式的继承和冲突 （1）CSS样式的继承 CSS的继承是指被包在内部的标记将拥有外部标记的样式性质。继承特性最典型的应用通常发挥在整个网页的样式预设，即整体布局声明。 注意 有些情况下内部选择符不继承外部选择符