Css标签显示分类及属性（二）

2015-01-17

标签显示方式分类

1 块级元素
代表：h1,h2,..h6,div,p,ul,ol,dl,li,dd....
特点：
    1）一个块级元素没有设置宽度的情况下，该块级元素的默认宽度是其父元素的宽度，高度是其内容的高度（大小）.
    2）块级元素可以直接设置宽度和高度。
    3）块级元素独占一行显示。

2 行内元素
代表： span, a，b,s,strong,u,font.....
    特点：
    1） 行内元素都在一行上显示
    2） 行内元素没有宽度和高度 
    3） 行内元素不能设置宽度和高度。 
3 行内块元素
代表： img ，input
特点：
    1）元素在一行上显示。
    2）元素可以设置宽度和高度

元素模式转化

  ◆display      显示方式
     转块级元素：
             display: block;
     转化为行内块元素：
            display: inline-block;
     转换为行内元素：
            display: inline;
注意：
     如果需要让行内元素设置宽度和高度，那么需要进行模式转换。

CSS特性

层叠性：  同一个标签，权重一样，样式发生冲突，最后定义的样式会将前面定义的样式覆盖掉。                
◇继承性： 给父元素设置样式的时候，子元素在默认没有样式的情况下会受父元素的样式影响。
注意：
    1）CSS继承性，只能发生在标签的嵌套关系中。
     2）宽度和高度不能继承

可继承的属性

◇文字颜色可以被继承  color
◇与文字相关的属性都可以被继承
◆行高（line-height） 可以被继承
◆text-align
 继承的特殊性：
 1）a标签默认情况下不会受父元素的文字颜色影响
 2）标题标签默认情况下，不会受父元素的文字大小影响，要与父元素的文字大小要进行乘积运算。

优先级

    标签选择器 <类选择器 <ID选择器 < 行内样式 <! Important
         10        100       1000      10000    10000以上
◆  继承的权重（优先级）为0
◆  权重可以叠加（优先级）

伪类（以a标签为例）

a:link  {属性: 值；}  或者  a { color: red;}
          设置a标签的默认样式
            推荐使用 标签选择器设置样式。
  a:visited {属性: 值;}    访问过后的样式
   注意：  :visited 伪类中只能设与颜色相关的属性。
  a:hover {属性: 值;}   鼠标悬停到超链接上的样式
  a:active {属性: 值;}   激活状态下的样式
注意：1 如果伪类都设置，按照顺序设置L  V   H  A
    2 伪类中可以单独设置hover

背景

◇ background-color      背景颜色
◇background-img        设置背景图片
默认值： none 
◇background-repeat      设置背景平铺方式
 默认值：  repeat      背景平铺
       no-repeat         背景不平铺
       repeat-x     横向平铺
       repeat-y     纵向平铺

◇background-position     设置背景图片的位置
1）给元素设置背景颜色或背景图片的时候，必须保证当前元素有宽度和高度
 2）当使用具体方位名称设置背景图片位置的时候，没有顺序的限制
3）当使用具体数字设置背景位置的时候，那么第一个参数代表水平方向，第二个参数代表垂直方向。
4）如果设置背景位置的时候，设置一个值，第二个默认值为center.

背景属性联写

特点： 1 没有属性个数的限制
       2 没有属性顺序的限制
 例：.box{
     width:300px;
     height:300px;
     background: red url(2.png) no-repeat 50px 30px;
 }

补充易忘点

1 list-style:none  去掉列表浅的小圆点
2 text-decoration:none/underline 下划线去掉/显示
3 text-align:center 文字图片居中
4 margin: 0 auto; 让盒子整体居中
5 text-indent:2em 移动2格，孔两格
6 cursor: pointer 小手