11.23

css引入

1.行间样式    style属性   

优点：直接写在标签内，对该标签生效

缺点：内容和样式没有分离，代码阅读性比较差，样式不能复用

2.内部引入    style标签     

优点：样式可以复用，样式和内容分离，提高代码阅读性

缺点：代码并没有完全复用

3.外部引入     引入css文件

优点：可以让样式在不同的html文件中得到复用，也让内容和样式得到分离

缺点：外部引入会让网页在加载的过程中发送一次额外的请求

选择器

统配选择器  *  对所有的标签生效

类选择器：.class{}  1.标签里面添加class属性 class=“test”

2.在style里面写.test{}给所有的类名为test的标签添加属性

3.一个标签可以有多个类名（类名之间用空格隔开），一个类名可以被多个标签使用

id选择器：#id{}   1.在标签里面添加id属性 id=“test”

2.在style里面写#test{}给id为test的标签添加属性

3.一个标签一般只有一个id，一个id能被一个标签使用

标签选择器：使用标签名{}给所有这个名字的标签添加样式，范围很大。一般用于重置标签的默认样式

后代选择器：是一个结构，子父（父父）级的结构，子级在后，样式作用域最后一个子级

群组选择器：样式会作用于多个选择器，代表每一个用逗号隔开的选择器都会拥有这种样式

优先级问题

只有当两个选择器里面的样式出现冲突之后才会产生优先级的概念

样式不冲突的时候每一个选择器里面的样式都会生效

优先级可以以权值来计算{

*          0；

标签选择器     1；

类选择器       10；

id选择器        100；

style行间样式   1000；

！important      10000；

后代选择器   会先去查找后代选择器里面权值最高的选择器，然后看个数来比较

}

边框

边框颜色 border-color；默认和字体颜色一样

边框粗细 border-width；默认3px；

边框形状 border-style；没有默认值，是边框的必要属性 solid 实线    dashed 虚线    dotted  点状线

给元素添加边框之后，整个元素大小会发生变化

边框的属性都可以分为四个方向来写border-（方向）-（属性）

圆角效果

外边距（margin）

可以设置负数

left.top一般会让自身位置发生变化，bottom和right一般会让下方和右侧的元素位置发生变化

在使用margin-top的时候，如果父级没有边框，会把父级带下来

解决方法：给带有margin-top的元素的父级添加边框

margin的复合写法