CSS层叠样式表

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样式规则

1. 选择器用于指定CSS样式作用的HTML标签，花括号内是对该对象设置的具体样式。

2. 属性和属性值以“键值对”的形式出现。

3. 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。

4. 属性和属性值之间用英文“:”连接。

5. 多个“键值对”之间用英文“;”进行区分。

   三. CSS选择器

   1. 选择器的作用

   如果想要用css为html页面中的元素添加样式，就需要用到css选择器，css设置样式都是通过css选择器进行控制。 css选择器就是用于指向需要css作用的标签，让css样式知道自己需要到那个标签上去。

   2.CSS的选择器分为两大类

     基本选择器和扩展（高级）选择器。
   

   基本选择器：

   • 标签选择器：针对一类标签
   • ID选择器：针对某一个特定的标签使用
   • 类选择器：针对你想要的所有标签使用
   • 通用选择器（通配符）：针对所有的标签都适用（不建议使用）

   高级选择器：

   • 后代选择器：用空格隔开
   • 交集选择器：用.隔开
   • 并集选择器（分组选择器）：用逗号隔开
   • 伪类选择器