css选择器

在head标签中设置style属性：
    height:48px;<!-- 代表颜色与位置 -->
编写css样式:
    1.标签style属性
    2.写在head里面，style标签中写样式
        - id 选择器
        #i1{background-color:red;height:48px;}

        - class选择器
          .名称{background-color:red;height:48px;}
          <标签 class="名称"></标签>

        - 标签选择器
            div{background-color:red;height:48px;}
            当有此标签时，所有div上都设置此样式

        - 层级选择器(空格)
            .c1 .c2 div{background-color:red;height:48px;}
            先找到包含c1样式的标签，在该标签下找到含c2样式的标签，在该标签下找到div标签并设置为此样式

        - 组合选择器(逗号)
            #c1,.c2,div{background-color:red;height:48px;}
            c1,c2,div均为该样式

        - 属性选择器
            对选择到的属性再进行一次筛选
            .c1[n="sun"]{background-color:red;height:48px;}
            即对包含c1的标签检查其是否含有n="sun"一项，若有才设置为该属性

        ps:
           优先级，标签上style优先，其它按编写顺序，越往下越优先(就近原则)

        注:css也可以写在单独文件中
            <link rel="stylesheet" href="style.css" />
    3.注释
        /* */
    4.边框
        dotted表示虚线，solid表示实线
        - 宽度，样式，颜色 (border:4px dotted red)
        -border-left,border-right,border-top,border-bottom
    5.
        height              高度 像素
        width               宽度 像素 百分比
        text-align:center   水平方向居中
        line-height         垂直方向根据标签高度决定垂直方向的位置
        color               字体颜色
        font-size           字体大小
        font-weight         字体加粗

    6.float
        用于设置标签对象（如：<div>标签盒子、<span>标签、<a>标签、<em>标签等html标签）的浮动布局，浮动也就是我们所说标签对象浮动居左靠左（float:left）和浮动居右靠右(float:right)。
        <div style="clear:both"></div>clear:both该属性的值指出了不允许有浮动对象的边。通俗的讲：这段代码的做用是：清除同行元素，不允许其它元素与之在一行内。

    7.display
        display:none;           让标签从无到有
        display:inline;         如果是块级标签，则变为行内标签
        display:block;          如果是行内标签，则变为块级标签
        display:inline-block;   具有inline，默认自己有多少占多少;具有block属性
        注:  行内标签:无法设置高度，宽度，padding，margin

CSS补充
   position:
       a.fixed => 固定在页面的某个位置(bottom:0;right:0为固定在右下角)
       b.relative + absolute
               <div style="position: relative; 500px; height:200px;border:1px solid red;margin: 0 auto;">
                   <div style="position:absolute;left:0;bottom:0;50px;height:50px;"></div>
               </div>
   opcity:0.5(只能为0到1之间) 代表透明度
   z-index:层级顺序，谁最大谁第一个显示
   overflow:hidden(超出的部分隐藏),auto(超出的部分显示滚动条)
       <div style="height:500px;500px;overflow:hidden">
           <img src="1.jpg" />
       </div>

   hover  表示当鼠标移动到当前标签上时，以下css属性才生效
       .menu:hover{
           background-color:blue
       }

   background-image:url{1.jpg};#默认,div大，图片会重复
   background-repeat:no-repeat(repeat-x,repeat-y)决定是否重复，以及在哪个方向上重复
   background-position-x:
   background-position-y: