CSS_01

Cascading style sheets 层叠样式表，级联样式表

简称样式表

设置html网页中元素的样式，美化页面

HTML：负责网页的搭建，内容的展示

CSS：负责网页的修饰，样式的构建

W3C规定我们尽量的使用css的方式来取代HTML属性

css样式

 1.样式代码可以高度重用，html属性不能重用

 2.方便后期维护，提高可维护性。

在html标签的style属性中，编写样式

语法：<any style="样式声明"></any>  any:任意标签

样式声明：样式属性 : 值

有多个样式声明：样式属性1：值1 ；样式属性2：值2

ex:

<div style="color:red;

内联样式在项目中，很少使用。

学习和测试的时候用  

原因：1.内联样式不能重用

      2.内联样式优先级最高

color:orange; 字体颜色

背景颜色

font-size:36px； 字号大小

在网页头部中，添加一对<style></style>标签

在style标签定义此网页所有的样式

<style>

   选择器{样式属性：值；样式属性：值；........}

</style>

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

项目中使用内部样式较少，学习和测试使用较多

内部样式的重用不能在其他html页面中生效

单独创建一个css文件，编写样式

在html页面的head中使用link，引入这个外部样式

<link rel="stylesheet" href="css文件的url">

注意：rel="stylesheet"必须写，不然无效

此种方式，是开发中使用最多方式。

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

必须是父子结构，子继承父

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

多个规则中样式属性不冲突时，可以同时应用到当前元素上

如果对一个元素的多个样式声明，发生冲突时，按照样式规则的优先级去应用

默认优先级：由高到低

1.内联样式(行内样式)

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

3.浏览器默认样式

!important规则

放在属性值后面，与值之间有一个空格

作用，调整样式显示的优先级

内联样式不可以写!important

!important优先级，比内联样式高

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

选择器就是为了匹配元素用

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

*{样式声明}

由于*的效率低下，项目中很少使用通用选择器

唯一使用的场合*{margin:0;padding:0}所有元素内外边距清0

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

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

元素名称{样式声明}

ex:p{}   div{}

<any id="id值"></any>

#id值{样式声明} 这种写法仅仅对页面上一个标签生效

一般id选择器在项目中很少单独使用。

通常会作为子代选择器或者后代选择器的一部分

<any class="类名"></any>

.类名{样式声明}

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

(公共样式，谁想用，谁就可以用)

class属性来引用类名

类名的规则：1.类名之前的点不能省略，引用的时候没有点

             2.类名不能以数字开头

             3.类名只能包含 -  _ 符号

             4.类名尽量的见名知意

类选择器的特殊用法

1.多类选择器

让元素引用多个类名，这些类的样式都会作用到当前元素上

<div class="text-danger bg-warning font-24">d</div>

2.分类选择器

 元素选择器+类选择器{}

div.text-danger{ }div元素有text-danger类,才能应用这个样式

 类选择器+类选择器{}

.font-24.text-danger{ }

元素，必须有font-24类和text-danger，才能应用此样式

作用：1.更精确的确定使用样式的元素

      2.增加选择器的权值

将多个选择器放在一起定义公共的样式

语法：选择器1,选择器2,......{公共样式声明}

ex:

#content,div,.mycolor,p.text{color:red}

相当于

#content{color:red}

div {color:red}

p.text {color:red}

.mycolor {color:red}

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

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

语法：选择器1  选择器2  选择器3........{}

#content p span{color:red;}  

id我content的元素，内部不管隔着多少代，有一个p元素

p元素内部，不管隔着多少代，有一个span.这个span就符合要求

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

子代：一级嵌套，直接的儿子

选择器1>选择器2>....{}

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

#content p>span{}

匹配同一个元素，不同的状态下的样式

所有的伪类选择器都是这样开头的  选择器:

1.链接伪类

  a标签，没有访问的状态

  a:link{color:red;}

  a标签，被访问过之后的状态

  a:visited{color:black;}

2.动态伪类

  :hover 鼠标悬停在元素上时，元素的样式

  :active 匹配元素被激活时的状态

  :focus 匹配元素获取焦点时的状态

权值：标识当前选择器的重要程度，权值越大，优先级越高

!important   >1000

内联样式     1000

id选择器     100

类选择器      10

元素选择器     1

*通用选择器    0

继承的样式    无

权值的特点

1.当一个选择器中含有多个选择器时，需要将所有的选择器权值进行相加，然后比较，权值大的优先显示

2.权值相同，就近原则

3.群组选择器的权值，单独各算各的，不能相加

4.样式后面追加!important直接获取最高优先级

  内联样式不能加!important

5.选择器的权值计算，结果不会超过自己的最大数量级

(1000个1相加，也不会大于10)