【CSS层叠样式表-----Part1】-----CSS基本语法，基础/复合选择器

模块目标：

一 CSS简介：

CSS也是一种标记语言

定位：美化网页，布局页面—网页美容师

作用：设置文字样式，图片的样式，版面布局，外观显示。
html只关心显示主要结构（一般不做样式，因为比较繁琐，因此比较丑）

CSS存在的价值：使html专注结构，样式交给CSS样式和结构相互独立

二 CSS语法规范：

构成：选择器+声明（属性＋属性值）

声明就是键值对：

CSS标记书写位置：

style双标签写在head双标签中

CSS标签写在style双标签中

三 CSS代码风格：

非强制性，但是好习惯（实际开发中的样式）

1 样式格式：

（1）紧凑格式：写在一行

（2）展开格式：键值对写在多行，每行一个键值对，更直观，更推荐

2 样式大小写：一般写成小写

3 空格规范：

(1)属性值前面冒号后面有个空格

(2)选择器和{ }之间也得有个空格

四 CSS选择器：基础选择器和复合选择器

这里只介绍基础选择器

选择器的作用：
实际开发中，不同需求需要不同的选择的，选择器用来选择标签的

选择器分类：

基础选择器（由单个选择器组成）：标签选择器，类选择器，id选择器，通配符选择器
复合选择器：#

CSS基础选择器：

4.1标签选择器：

标签名作为选择器

作用：某一类标签全都选出来，是优点同时也是缺点

4.2类选择器：

作用：单独选择一个或者多个标签

语法：

利用class属性来调用类选择器

类选择器口诀：样式点定义，结构类调用，一个或多个，开发最常用

注意：

（1）类选择器使用.进行标识，后紧跟类名（自定义）

（2）自定义类选择器自定义名字不能使用关键字，尽量有意义

（3）长的名称可以用短横线给类选择器命名

（4）有约定俗成的类命名规则手册（英文单词）

类选择器—多类名：

一个标签可以指定多个类名（同时调用多个类）

1 多类名的使用：

（1）在标签class属性写入多个类名

（2）多个类名需要空格隔开

2 多类名在开发中的应用：

（1）可以把公共的样式写到同一个类选择器中

（2）这些标签都可以调用公共的类，再调用其独有的类

（3）减少代码量，并且更方便后期对相同样式进行修改

4.3id选择器：

也用于选择标签，对特定html标签指定样式

html元素以id属性来设置选择器，CSS中id选择器以#定义

语法：

id选择器使用类似于类选择器？？？

区别：

（1）类选择器：像是人的名字，可以是多个人叫同一个名

（2）id选择器：像是人的身份证号，唯一，不能重复使用

并且一般配合js配合使用

4.4通配符选择器：

作用：选择页面中所有的标签

语法：

注意：

1. 通配符不需要调用，自动选择所有的元素使用样式

2. 特殊情况才使用

基础选择器总结：

CSS复合选择器：作用也是选择标签

什么是复合选择器：基础选择器的组合

作用:更高效，由两个以上的基础选择器组合而成

常用的复合选择器：后代选择器，子选择器，并集选择器，伪类选择器

4.5 后代选择器(包含选择器)：

语法规范：

注意：

1 表示的选择元素1里面的所有元素2（体现出选择后代的效果）

2 可以选择儿子，也可以选择儿子的儿子（选择孙子），重孙子…

4.6子选择器：

选距离最近的一级子元素（只选亲儿子）

语法：元素1和元素2之间使用>号，选择的是元素2

使用例子：

4.7并集选择器：

作用：选择多组标签，用逗号分隔开 表示和

语法：

注意：任何形式的选择器都可以是并集选择器中的一部分

约定的语法规范是竖着书写并集选择器，最后一个选择器不用加逗号

4.8 伪类选择器：

作用：

特点： 书写时用冒号

包含链接伪类选择器和焦点伪类选择器

（1）链接伪类选择器

a：link----->选中没有未被访问的的链接

a：visited------>选中已经被访问过的链接

a：hover------->选中鼠标经过时的链接

a：active------>选中鼠标正在按下但是未弹起的链接

链接伪类的注意事项：

1 必须有序：按照LVHA的顺序书写（记忆方法：lv包hao）

2 链接在浏览器有默认样式，链接要单独指定样式

链接伪类实际写法：

实际开发中一般只设置a（鼠标未选中），和a:hover（鼠标经过）

（2)focus伪类选择器：

作用：选中获得焦点(光标）的表单元素，针对input表单元素

语法格式：

复合选择器总结：