CSS层叠样式表
一. 初识CSS
1. CSS的概念:
CSS(Cascading Style Sheets) ,通常称为CSS样式表或层叠样式表(级联样式表)
2.CSS的作用:
- 主要用于设置 HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。
- CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。
二.CSS样式的三种引入方式
1. 行内式(内联样式 )
1.1 概念:
又称 行内样式、行间样式
是通过标签的style属性来设置元素的样式
1.2 基本语法:
2. 内部样式表(内嵌样式表)
2.1 概念:
又称内嵌式
是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义
2.2 基本语法:
3. 外部样式表(外链式)
3.1 概念:
又称链入式
是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中,
通过link标签将外部样式表文件链接到HTML文档中
3.2 基本语法:
(注:link是单标签)
4. 三种样式表总结(位置)
样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
---|---|---|---|---|
行内样式表 | 书写方便,权重高 | 没有实现样式和结构相分离 | 较少 | 控制一个标签(少) |
内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面(中) |
外部样式表 | 完全实现结构和样式相分离 | 需要引入 | 最多,强烈推荐 | 控制整个站点(多) |
5. 总结CSS样式规则
-
选择器用于指定CSS样式作用的HTML标签,花括号内是对该对象设置的具体样式。
-
属性和属性值以“键值对”的形式出现。
-
属性是对指定的对象设置的样式属性,例如字体大小、文本颜色等。
-
属性和属性值之间用英文“:”连接。
-
多个“键值对”之间用英文“;”进行区分。
三. CSS选择器
1. 选择器的作用
如果想要用css为html页面中的元素添加样式,就需要用到css选择器,css设置样式都是通过css选择器进行控制。 css选择器就是用于指向需要css作用的标签,让css样式知道自己需要到那个标签上去。
2.CSS的选择器分为两大类
基本选择器和扩展(高级)选择器。
基本选择器:
- 标签选择器:针对一类标签
- ID选择器:针对某一个特定的标签使用
- 类选择器:针对你想要的所有标签使用
- 通用选择器(通配符):针对所有的标签都适用(不建议使用)
高级选择器:
- 后代选择器:用空格隔开
- 交集选择器:用.隔开
- 并集选择器(分组选择器):用逗号隔开
- 伪类选择器