2.css三大特性 元素显示方式

一.  三种样式的使用范围

样式名称	存放位置	作用范围	应用
嵌套样式	head中的title下面	当前样式所处的页面	存放一些当前页面会用到的样式
行内样式	标签中通过style来设置	只能作用在当前标签之中，出了这个标签就没有作用	一般情况下用的少（特定场合，整个页面只有这个标签出现了这个样式）
外联样式	在其它文本中要使用要通过link标签	所有的页面都可以使用	存放一些所有页面都会用到的公共样式

二.  新的属性：

text-indent:

作用：设置首行缩进。

用法：text-indent: 2em;

em:一个文本的距离。

text-align:

作用：设置文本的位置

取值：

center:设置内容在容器的水平方向上居中。

left:设置内容在窗口的水平方向上靠左

right:设置内容在容器的水平方向上靠右

text-decoration:

作用：设置文本的装饰

取值：

none:没有任何装饰

underline:下划线

margin: 0 auto;

作用：设置容器自身水平居中。

三.  css三大特性

１   继承性

作用：子元素可以继承父元素的样式。

什么样的属性才可以继承：

text-,font-,line-开头的属性都是可以继承的

color.

具体应用：

在写页面之前我们会通过给body设置一个字体，来将页面上所有的标签都能够继承这个属性。

特殊性：

1.0a标签的颜色不能继承，如果一定要修改a标签的颜色直接作用在a标签上面。

2.0h标签的大小不能继承，如果一定要修改h标签的大小直接作用在h标签上面。

3.0div的高度如果不设置由内容来决定（没有内容那么高度为0），宽度默认由父元素继承过来。

２   层叠性  

是浏览器处理冲突的一个特性。

作用：如果一个属性通过两个选择器设置到同一个元素上面，那么这个时候一个属性就会将另一个属性层叠掉。

如果多个不两只的属性通过两个选择器设置到一个元素上面，那么不会发生层叠。

３   优先级

！important>行内样式>id选择器>类选择器>标签选择器>通配符>继承

３.1  变数：!important

注意：虽然important是一个变数，但是不能作用在继承上。!important属性无法继承。

３.2  权重：

作用：多个选择器组合以后的优先级。

算法：

（0，0，0，0）==》第一个0对应的是important的个数，第二个0对应的是id选择器的个数，第三个0对应的类选择器的个数，第四个0对应的是标签选择器的个数，就是当前选择器的权重。

比较：

先从第一个0开始比较，如果第一个0大，那么说明这个选择器的权重高，如果第一个相同，比较第二个，依次类推。

总结：权重其它是优先级的算法

优先级是层叠表现。

３.3  选择器工作的一个原理：

选择器在查找元素的时候不是从左往右找，而是从右往左找。

 

四.  背景：background

１   背景相关的属性：

background-color:设置背景颜色

background-image:设置背景图片

写法：background-image:url(图片的路径);//默认情况下图片如果比容器要小，它会平铺。

background-repeat:设置背景是否平铺：

取值：

no-repeat:不平铺

repeat-x：在水平方向上平铺

repeat-y:在垂直方向上平铺

repeat:平铺

background-position:设置背景图片的位置

用法：

background-postion: x y;

注意：x,y可以是具体的数值

x,y又可以是一些英文单词。

x: left 左  center 中 right 右

y: top 上  center 中 bottom下

２   背景的连写方式：

background: background-color background-image background-repeatbackground-position;

３   英雄联盟官网背景

五.  元素的显示方式：

行内元素：

a,span,b,u,i,s,strong,em,ins,del

属性：display: inline

特点：

1.0一行里面可以显示多个

2.0无法设置宽高

3.0大小由内容来决定

缺点：

不能设置宽高

块级元素：

p,h1-h6,div,ul,li,ol,li,dl,dt,dd

属性： display:block

特点：

1.0独占一行

2.0可以设置宽高

3.0默认宽度一整行

缺点：

独占一行。

行内块级元素：

img,input

属性：display:inline-block

特点：

1.0可以设置宽高

2.0一行内可显示多个