css

CSS
--------------------------------------------------------
级联样式表
主要用于页面的排版布局，以及页面组件的
样式渲染。


如何编写css：
1> 编写css文档，后缀名必须是 .css
2> 在html中引入该css文档。
link 标签
-------css选择器：
1> 通配符选择器
  * {}

2> 标签选择器
  选出html页面中匹配tagName的所有标签。
  tagName {}
 
3> id选择器
   可以选出相应id属性值的一个标记，优先级是最高的
   #abc {}
    
4> 类选择器  (class选择器)
    1>定义一类样式
    .className{xxxxx}
    2>设置标签class属性，应用这一类样式
    <div class="className"></div>

5> 分组选择器
p,  #id,  .class,  div {}
    
6> 派生选择器
<div>
    <p>xx</p>
</div>
<p>xx</p>

div  p {}


css样式属性：
简单样式属性：
-布局属性：
------BOX模型（回）

margin:  外边距
margin: apx;    上下左右外边距为apx
margin: apx bpx;   
    a: 上下外边距
    b: 左右外边距
margin:0px auto;居中
    
margin:apx bpx cpx dpx;
a:  上（顺时针方向）
b:  右
c:  下
d:  左

margin-left:
margin-top:
margin-bottom:
margin-right:


padding:  内边距
padding: apx;
padding: a b;
padding:a b c d;
padding-top:
padding-left:
padding-bttom:
padding-right:

背景属性： background
background-color:
    red | blue
    #ffffff
background-image:  url("xxx.jpg")

background-repeat:  背景图片的平铺方式
    repeat 横向纵向都平铺
    repeat-x  x轴平铺
    repeat-y   y轴平铺
    no-repeat   不平铺

background-position:    -apx  -bpx;



文本属性：大多text开头的，对文字的操作
color：文本颜色
--text-align：文本对齐方式
  left center right (敲入文字在左上角，所以要设置)
--text-decoration：文本装饰
     under-line：下划线
     over-line：上划线
     line-through：删除线
     none：不要任何装饰
     line-height：
--字体属性：font
   font-size:控制文字大小  10px
   font-weight:磅值（粗细）100~900
                normal
                lighter
        bold:
                bolder:
  font-family:字体
        黑体 宋体..
  font-style：字体样式
        normal：普通
        italic：斜体
--边框属性：都是以border开头
  border:1px solid black;
  border-with:1px;
       boder-left-with:
  border-style:solid;
  border-color:black;
--列表属性：针对列表标签，对其他无效
list-style:none(去掉前面的点)
------复杂样式属性：--------
display: 控制组件的显示与隐藏。
   block:
        1.把组件显示，
    2.把行级标记按照块级标记的方式来显示。
       行级标记??
        <i></i>   <a></a>   <s></s>   <span></span>
      块级标记??
       <div></div> <p></p>
 ---为什么要这样显示？
     因为只要块级标记才能设置width height
    none:把组件隐藏。
float:浮动（引入：因为块级标记横向排列需要用到浮动属性)把块级标记横向排列
   left：
   right: