1、CSS介绍

1.1 什么是CSS？

CSS （Cascading Style Sheets）层叠样式表。
层叠：
css的一种特性，后面讲。
样式表：
如何描述一个人的外观？
苍老师
身高:165cm;
脸型:娃娃脸;
发色:黑色;
肤色:白色;
发型:马尾辫;
胸围：D
通过一系列属性:值来描述外观或样式，这一系列属性:值被称为样式表。

1.2 CSS的使用方式

方式一：行内样式，标签的style属性（不推荐使用）
<标签名 style=”样式表属性1:值;样式表属性2:值...”></标签名>

注意：

   → 要能够区分 标签属性       和   样式属性
   → 样式表属性和值之间用英文的冒号（:）分割，多个样式属性之间用英文的分号（;）分割。

方式二：内部（内联、内嵌）样式，style标签（学习过程会用）
<style>
选择到的元素目标 {
样式表属性1:值;
样式表属性2:值
...
}
</style>

注意：

   → style标签要写在head标签里
  → 样式表属性和值之间用英文的冒号（:）分割，多个样式属性之间用英文的分号（;）分割。

方式三：外联样式，link标签：（实际开发用）
<link rel=”stylesheet” href=”样式文件的路径”>
link标签属性：
→ rel告诉浏览器该标签所引用的内容是样式表
→ href通过路径引入样式表文件

注意：

   → 要单独建立一个后缀名为.css的样式表文件，文件里的内容格式和方式二中style标签里的内容是一样的。
  → link标签要写在head标签里。

2、 web三层分离

web三层原则：
HTML
CSS
JS

• 这三种技术都作用于网页，为了方便网页后期的管理和维护，需要对这三种技术分而治之。
• 所谓的分而治之就是把这三种技术分为三种独立的文件来管理（HTML文件、CSS文件、JS文件）

3、CSS样式属性

• 3.1 宽度、高度、背景色

• 3.2 字体属性

font属性联写：
font:font-style font-weight font-size/line-height font-family
注意：在font联写时 font-style 、font-weight、line-height这三个属性可以省略。

4、 CSS基本选择器

• 4.1 什么是选择器？

选择器：
选择器就是，要对页面上的元素进行样式修饰时，得先找到要修饰的元素。 怎么找？就是通过选择器（选择的方式）来找网页中要修饰的元素。
语法格式：
选择器 {
样式属性1:值;
样式属性2:值;
...
}

注意：

   → 选择器和第一个大括号之间要有空格。
  → 第二大括号要和选择器的开始垂直方向对齐。
   → 样式属性和值要写在大括号里，且在大括号里要有缩进（2个或4个空格）。
  →每一组样式属性和值要独占一行，且要加分号。

• 4.2 基本选择器（单个选择器）

通配符选择器：
语法：
* {
样式属性1:值;
样式属性2:值;
...
}
作用（特点）：
对页面上所有元素进行样式修饰。

标签名选择器：
语法：
标签名 {
样式属性1:值;
样式属性2:值;
...
}
作用（特点）：
对页面上和选择器中的标签名一样的所有元素进行样式修饰。

id选择器：
语法：
#id值 {
样式属性1:值;
样式属性2:值;
...
}
作用（特点）：
对页面上和选择器中id值一样的单个元素进行修饰。

注意：

          → 选择器中的id值前要加#号
          → id就是标签的一个属性。
          → id属性的id值，id值在页面上要唯一，不要重复。 
          → id 命名规范，可以由数字、字母、下划线组合，不能由数字开头。

class类选择器：
语法：
.类名 {
样式属性1:值;
样式属性2:值;
...
}
作用（特点）：
对页面上和选择器中class属性值一样的元素进行修饰。

   注意：
          → class 是标签中的属性。
         → class 属性的值可以有多个，多个值之间要用空格隔开。
          → class 属性值可以重复。
          → 在选择器中类名之前要加点(.)。 
          → class命名规范，可以由数字、字母、下划线、中划线组合，不能                    由数字开头。

5、CSS组合选择器

• 5.1 什么是组合选择器？

组合选择器就是由多个基本选择器组合成的一个复合选择器。

• 5.2 组合选择器

子代选择器：
语法：
选择器1 >选择器2 {
样式属性1:值;
样式属性2:值;
...
}

  作用（特点）：
         对选择器2所选定的元素进行样式修饰，但条件是所选定的元素的父元素必须符合选择器1。

后代选择器：
语法：
选择器1 选择器2 {
样式属性1:值;
样式属性2:值;
...
}

  作用：
         对选择器2所选定的元素进行样式修饰，但条件是所选定的元素的父元素或祖先元素必须符合选择器1。

兄弟选择器：
语法：
选择器1+选择器2 {
样式属性1:值;
样式属性2:值;
...
}

  作用：
         对选择器2所选定的元素进行样式修饰，但条件是所选定的元素的上一个兄弟元素必须符合选择器1。

交集选择器：
语法：
选择器1选择器2 {
样式属性1:值;
样式属性2:值;
...
}

  作用：
         对选择器2所选定的元素进行样式修饰，但条件是所选定的元素同时必须符合选择器1。

   注意：
          → 选择器1通常是标签选择器或类选择器。
          → 选择器2通常是类选择器。

并集选择器：
语法：
选择器1,选择器2 {
样式属性1:值;
样式属性2:值;
...
}
作用：
对于符合选择器1或符合选择器2的元素进行样式修饰。

6、CSS伪类选择器

• 6.1 锚伪类

什么是锚伪类？
和a标签相关的伪类选择器。
:link
作用：给超链接没有被访问前修饰的样式。
语法：
a:link {
样式属性1:值;
样式属性2:值;
...
}
注意：
仅仅对a标签有作用。
:visited
作用：给超链接被访问后修饰的样式。
语法：
a:visited {
样式属性1:值;
样式属性2:值;
...
}
注意：
仅仅对a标签有作用。
:hover
作用：鼠标悬停在元素上时修饰的样式
语法：
a:hover {
样式属性1:值;
样式属性2:值;
...
}
注意：
→ 对所有标签有效果。
→ 针对超链接，:hover必须放在:link和:visited之后。
:active
作用：对元素鼠标键按下不弹起时所修饰的样式。
语法：
a:active {
样式属性1:值;
样式属性2:值;
...
}
注意：
→ 对所有标签有效果。
→ 针对超链接，:active必须放在:hover之后。

• 6.2 input输入框伪类

:focus
作用：input输入框获取焦点时要修饰的样式。
语法：
input:focus {
样式属性1:值;
样式属性2:值;
...
}

7、CSS样式表中的注释

/* 注释的内容 */
注意： 注释不能嵌套

8、元素的显示模式

模式一：块级元素
特点：
→ 独占一行
→ 可设置宽高
默认是块级元素的标签有：
h1-h6、p、div、ul、ol、li、dl、dt、dd
通过样式属性将一个元素设为块级元素：
display:block;
模式二：行内元素
特点：
→ 不独占一行
→ 不能设置宽高，宽高由内容决定。
默认的是行内元素的标签有：
a、span
通过样式属性将一个元素设为行内元素：
display:inline;
模式三：行内块级元素
特点：
→ 不独占一行 （行内元素的特点）
→ 可设置宽高 （块级元素的特点）
默认的是行内块级元素的标签有：
img,input,select,textarea
通过样式属性将一个元素设为行内块级元素：
display:inline-block

9、颜色

颜色表示方式：
方式一：颜色名称
如：red、blue、green
方式二：十六进制 （应用比较多）
0 1 2 3 4 5 6 7 8 9 A B C D E F
如：#FFB6C1 六个 或 三个
#ffbbcc → #fbc （字母大小写一样）
方式三：rgb
red、green、blue 三种颜色调和，每个颜色等级范围是0-255
如：rgb(255,0,0)
方式四：rgba
red、green、blue 三种颜色调和，每个颜色等级范围是0-255
a是透明度alpha 透明度的等级是0-1，可包含小数。
如：rgba(0,0,0,0.5); 或 rgba(0,0,0,.5);
注意：最后一个数值是小数时,可以省略.前面的0