CSS介绍及相关用法（上）

什么是css——层叠样式表

css能做什么？——可以修饰网页的

css的引入方式：行内样式（内联样式 嵌入式）——< 标签 style="width:200px; height=200px;>

n内部样式 先在body里面创建想要修饰的对象，在head里面创建 在style里面修饰过程

外联样式 用

其中@impor url 是css的语法 import 是先加载html结构，之后在加载css

css的引入方式分为三种，1.一种是行内样式： 在style里面修饰过程 选择器（选择符）{属性：属性值}

3.外部样式 ：

在外面创建一个css文件，然后再css文件里修饰，通过

4.当修饰样式的时候，如果对同一个标签设置了多次样式，可能会发生冲突之后的解析规则;a.权重相同的时候选择就近原则 b.权重不同的时候高权重覆盖低权重

5.权重：

行内样式权重值1000 id选择器的权重是100 class选择器权重是10 类选择器权重是1

6.选择器

a.基本选择器 类型选择器（标签选择器）语法： div{} p{} 权重是 1。 区分一般用class 或者id， 其中class的属性值是多个 class=“名字1， 名字2” 命名不能用数字开头，不建议使用中文。符号可以，其他特殊字符不可以，权重是10。

id选择器 语法#box{} id的选择器只能是一个 命名规范 跟class选择器一样 权重是100。

html文本相关属性

行高指的是字体的基线到基线的距离，或者顶线到顶线的距离，等等。行高的写法 line-height:80px 可以看到文本再行高的范围是垂直剧中。

line-heightt：3 此时的数字是font-size的几倍 line-height：200% 此时的百分之百是font-size的几倍。

1.font font：倾斜 加粗 文字大小/行高 字体 注意点：前两个顺序可以交换顺序，文字大小和行高中间用/隔开、至少2个参数，必须是字母的大小和字体、其他的参数顺序不要换

2.文本修饰 text-dercoration 去掉修饰：none 添加下划线underline 添加上划线overline 添加删除线line-through

3.首行缩进：text-indent

4.文本的字间距 leter-spacing

5.背景颜色 background-color

6.背景图 background-image：url（）； 特点一;不占位置 特点二：背景图默认是平铺的 特点三：背景图的可视范围是盒子的大小

7.背景图的平铺设置 backgroud-repeat repeat 默认值 平铺

8.简写单个背景图简写 backgroud url() no-repeat left top;

多个背景图简写 background：url no-repeat left top；url（） no-repeat red； 注意点 多个背景图的时候用逗号链接 背景的颜色一定要放在最后一组背景里面。

9.继承

给外面盒子设置相关属性，里面的盒子会执行该样式（子元素能执行父元素的样式）就说明该属性是可以继承的。2.继承过来的css属性的权重是最低的。3.知道该属性可以继承之后，在代码修饰的时候，可以随便给。4.哪些属性可以修饰a.文本想相关的都可以继承b.列表相关的可以继承

浮动、列表和盒子模型

1.列表相关属性a.去除列表符号的样式：list-style：none；b.修改列表符号的样式 list-style-type:disc/square/circle/none c.修改列表符号的位置 list-style-position：outside/inside d.定义列表符号为图片 list-style-image：url（）；

2.浮动 a.使用场景 想要竖着横着的时候用，可以实现坏绕效果 b.浮动的相关属性值 float：none默认值 float：left向左浮动 floatL：righht 向右浮动 c.特点一个盒子浮动了之后，该盒子不占据浏览器的位置，下面的盒子如果没有浮动，则会上去 e.在包含结构里卖弄，如果父元素没有设置高度，所有的子元素都浮动了，此时父元素会高度塌陷 解决方法1：给父元素添加overflow：hidden；解决方法2：给父元素添加height 解决方法3：给所有的浮动元素后面添加一个空的标签，且添加声明clear：both；

3.清除浮动 使用场景 想要改变因为浮动所引起的排列方式的时候，属性值：clear：none；clear；left；clear：right；clear;both;

4.盒子模型 a.标准盒子模型组成部分：内容+margin+padding+border

b.怪异盒子模型 组成部分：内容+margin 触发盒子模型，给该盒子添加box-sizing：border-box； 盒子变成怪异盒子之后，再次添加padding或者border不会把盒子撑大

5.外间距margin用法

1.使用场景：需要设置间距，且间距对于盒子来说是外面的时候用。

2.写法a.单独设置外上：margin-top、外下：margin-bottom、外左：margin-left、外右：margin-right。单独设置margin值如：margin：20px 50px 20px 50px;表示的是上右下左

注意：如果是单词auto作为属性值，目前只有左右效果，上下无效:,margin:0 auto;可以实现一个有宽度的盒子水平居中。

在包含结构里面，给子元素设置了margin——top应该是子元素自己下来，但是父元素也会下来，这个现象叫做margin-top传递，解决方法：解决方法1：给父元素添加overflow:hidden;解决方法2：给父元素添加border-top，解决方法3：给父元素或者子元素添加浮动。

在并列结构的时候，给上面的盒子添加了margin-bottom给下面的盒子添加了margin-top，此时听该解析的结果是2个间距之和，但是浏览器解析的是最大数值的间距。  解决放法是：给下面的添加一个子元素，且添加声明overflow：hidden。

5.内间距  padding
    使用场景:需要设置间距,且该间距对于盒子来说是里面的时候用。
    写法：单独设置，内上  padding-top、内下  padding-bottom、 内左  padding-left、 内右  padding-right。

简写：padding:20px; 表示4个方向都是20  padding:20px  50px; 表示的是上下是20 左右是50
 padding:20px 50px 80px;  表示的是上是20  左右都是50 下是80、padding:20px 50px 80px 100px; 上是20 右是50 下80 左100
    注意点： padding是添加在盒子大小之上的,会把盒子给撑大,想要不撑大 在设置的宽度或者高度上减去添加的padding值、触发为怪异盒子

6.边框属性
    写法 拆开写，边框宽度  border-width:2px 20px 30px 80px; 边框样式  border-style实线  solid 虚线  dashed  点状线  dotted 双线  double边框颜色   border-color
        简写：全边框 border:3px solid red;单边框border-top:3px solid blue;border-bottom；border-left‘ border-right
    边框书写箭头朝上的三角形
        width:0;height:0; border:30px solid transparent; border-bottom:30px solid blue;