"本资源是一份关于CSS的课件PPT,主要讲解了CSS的调用方式和优先级问题,以及一些基本的CSS概念和属性。通过实例展示了在HTML文档中如何内联、内部和外部调用CSS,还探讨了当存在多个CSS规则时的优先级规则。此外,还提到了类选择符(Class)和ID选择符的使用,以及CSS的组合、注释功能。课程中详细介绍了字体属性和颜色与背景属性,帮助学习者理解和应用CSS来美化HTML页面。"
CSS,即层叠样式表,是用于美化HTML或XML文档的标记集合。它由样式规则组成,每个规则包含一个选择符(通常是HTML元素)和该选择符的样式。样式规则的基本格式是选择符{属性:值},多个属性之间用分号分隔。
1. CSS调用方式:
- 在Head中调用:将CSS代码直接写在`<style>`标签内,位于`<head>`部分。
- 在Body中调用:通过`<style>`标签直接在HTML元素内部定义样式。
- 调用CSS文件:将CSS代码写入独立的`.css`文件中,然后在HTML文件中通过`<link>`标签引用。
2. CSS优先级问题:
- 优先级遵循就近原则,即最接近元素的定义会优先显示。
- 当两个CSS文件冲突时,以引入的后一个文件中的规则为准。
3. 类选择符(Class)和ID选择符:
- 类选择符允许同一个选择符具有不同的样式,一个元素可以有多个类。
- ID选择符是唯一的,用于标识页面上的一个特定元素。
4. CSS组合与注释:
- 可以一次性定义多个选择符的样式,如`H1,H2,H3{color:red;font-family:serif}`。
- 使用`/* */`进行注释,方便理解代码。
5. 字体属性:
- `font-family`指定字体类型。
- `font-style`定义字体样式,如斜体(italic)。
- `font-variant`控制小体大写(small-caps)效果。
- `font-weight`设定字体粗细,如bold。
- `font-size`设置字体大小,支持绝对、相对和百分比单位。
- `color`设置字体颜色,可以使用颜色值。
6. 颜色与背景属性:
- `color`定义文字颜色。
- `background-color`设置背景颜色。
- `background-image`添加背景图像。
- `background-repeat`控制背景图像的重复方式,如水平、垂直或不重复。
- `background`属性可以合并背景颜色和图像等属性。
通过学习这些基本概念和实战示例,学习者可以在1-6小时内掌握CSS的基础应用,为成为一名程序员打下坚实基础。