css概述

css:cascading style sheets

层叠样式表，级联样式表，简称为样式表

设置html网页中元素的样式

html：负责网页的搭建，内容的展示(素颜)

css:负责网页的修饰。(亚洲四大邪术)

对于元素样式的修饰，W3C建议使用css而不用html的属性

html的属性，代码不能重用，没有可维护性

将css的样式写在元素的style属性中

color:red；   字体颜色

background-color：yellow;背景颜色

font-size:32px;     字号大小

语法

样式声明  由样式属性和样式值组成

          样式属性:值;

内联样式不能重用

内联样式优先级最高

在项目中，基本不用，只有在学习和测试中使用

在head标签中，使用

语法:

   选择器{样式声明;样式声明;}

   选择器{样式声明}

选择器就是页面能够使用当前样式的条件

div{}  p{}  img{}  span{}

总结：内部样式，只能在本页面重用

内部样式在项目中用的少，主要用于学习和测试

单独创建一个.css文件，在html文件中的head标签里

使用link标签引入这个css文件

其中rel属性必须写，不写就不生效

项目中大批量的使用外部样式，但是，学习中用的少

大部分的css效果是可以直接被子元素继承的

必须是有层级嵌套关系的元素，才能继承。孩子继承父亲。

a标签的字体颜色，是不继承的

可以为一个元素定义多个样式

如果样式属性不冲突的时候，可以同时作用到这个元素上

当样式属性冲突时，根据优先级去应用样式。

默认优先级，有高到低

1.内联样式

2.内部样式和外部样式，使用就近原则

3.浏览器默认样式

解释型语言---代码逐行从上往下运行，后执行会覆盖之前执行的

!important 规则

h2{color:red !important;}

写在值和；之间，前面要有空格

意义，我这个值是最重要的，其它的值不要覆盖我

如果有多个!important;，那么还是遵循就近原则

规范了页面中哪些元素能够使用定义好的样式

选择器就是一个条件，符合这个条件的元素，可以应用这个样式

*{样式声明}

*{margin:0;padding:0} 所有元素内外边距清0

如果取值为0，可以省略单位

div{color:red;}

页面中所有对应元素，都应用这个样式

设置页面中某种元素的默认样式

ex:p{}   img{}   span{}

特殊用法：body{margin:0;padding:0;}

          body以及body内的元素，都会内外边距清0

只对当前页面，一个元素生效

#id值{}

总结：一般id选择器在项目中很少单独使用，通常会作为子代选择器和后代选择器一部分。

定义页面上某个或者某类元素的样式

是一个公共样式，谁想使用，就用class调用一下

声明类选择器

.类名{样式声明}

类名的特点

1.必须有点

2.类名不能以数字开头

3.只能使用- _两种符号

引用类名

引用时，没有点

特殊用法

1.多类选择器

一个元素引用多个类选择器

2.分类选择器

更精准的确定使用这个样式元素

增加了选择器的权值？？？坑

①.类名1.类名2{}

匹配同时引用类名1，和类名2的元素

.font36.text-danger{

  font-style:italic;

}

②元素名.类名{}

h4.font36{}

Lorem  amet.

匹配引用了font36这个类的h4元素

将多个选择器放在一起，定义公共样式（选择器之间使用,连接）

选择器1，选择器2，选择器3........{样式声明}

通过元素的后代关系匹配元素

后代关系：一级嵌套或者多级嵌套

语法: 选择器1 选择器2 选择器3....{样式声明}

子代关系：就是一级嵌套关系

语法：选择器1>选择器2>....{样式声明}

子代选择器和后代选择器可以混写

div>p span{background-color:purple;} 

匹配元素不同状态的选择器

伪类选择器，都是以:开头

1.匹配未访问的链接

  选择器:link{样式声明}

2.匹配访问后的链接

  选择器:visited{样式声明}

3.鼠标悬停

  选择器:hover{样式声明}

4.元素激活状态，鼠标按住元素不抬起

 选择器:active{样式声明}