css基础学习01

1. 什么是css

层叠样式表（cascading style sheets）

css是一种用来美化网页的手段。

2. css的书写位置

1. 内嵌式：书写在html的head中

<style>

　　css代码

</style>

特点：结构和样式有一定的分离

　　　可维护性较高

　　　只可以影响当前页面

2.外联式：书写在.css文件中，被html调用

<link rel=”stylesheet” href=”css文件的路径” >

特点：结构和样式完全分离

　　　可维护性最高

　　　可以影响所有引用它的页面

3.行内式：内联式，书写在标签中

<div style="width:200px;height:200px;background-color:red;"></div>

特点：结构和样式混合在一起

　　　可维护性最差

　　　只能影响当前标签

3. css的语法结构

选择器名称  {

　　属性名：属性值;

　　...

}

4.css基础选择器

1.标签选择器

语法结构：

标签名 {

　　属性名：属性值;

　　....

}

选择原理：根据标签名选中并修饰对应的标签。

选择范围：当前页面上所有的同名标签。

2.类选择器

语法结构：

.+目标标签的class值 { 属性：属性值; ... }

选择原理：根据标签的class的值找到并修饰这个标签。

特点：类名可以重复，class选择器可以修饰多个标签。

　　　一个标签可以有多个类名，一个标签可以被多个class选择器修饰。

选择范围：拥有相同类名的标签。

3.ID选择器

语法结构：

#+目标元素的id属性的值 {属性：属性值;...}

注意点：id好比是标签的身份证，不允许使用同样的id值

缺点：可重用性低

选择范围：id为选择器名称的标签。

4.通配符选择器

语法结构：

* {属性：属性值;...}

选择原理：选择所有的标签进行样式控制

缺点：选择器效率低

5.css复合选择器

1.标签指定式选择器（交集选择器）

语法结构：

标签选择器+class或者id选择器 {属性：属性值;...}

选择原理：同时符合要求的标签选择器名和class或者id选择器名的标签。

2.后代选择器

语法结构：

选择器1 + 空格 + 选择器2 + 空格 + ...{属性：值;}

选择原理：先符合选择器1，并在选择器1下找到符合选择器2的后代元素

3.并集选择器

语法结构：

选择器1+逗号+选择器2+逗号+选择器3..... { 属性：值;}

选择原理：只要满足任意一个选择器的选择条件，就可以被选中。