前端-CSS（基础）

1.CSS的引入方式
    ①行内式(在属性处编辑)：<h1 style="font-size:30px; color: reg;">茉莉花</h1> 

    ②嵌入式（写在<style></style>之间）：
        <style>
            h1 {
                color:red;            
                font-size:14px;       
                }
        </style>

    ③链接式：ⅰ（写在.css文件中）：
            <link  href=”test.css” rel=”stylesheet”type=”text/css”>

            ⅱ（写在.css文件中，引用）：
            <style> @import “test.css”</style>

2.css基本选择器
    ①标签名：
        <style>
            div{
                color: blue;
                font-size: 20px;
                }
        </style>

    ②id
        <style>
             #first{
                color: yellow;
                font-size: 30px;
            }
        </style>

    <div id="first">div</div>

    ③class
        <style>
             .two{
                    color: hotpink;
                    font-size: 40px;
                }
        </style>

        <div class="two">div</div>

    *注：{}表示对全局设置
    注：css中  
       color: blue;字体颜色
       font-size: 20px;字体大小设置
       border: 1px solid gold;显示出边框的颜色
       width: 40px;设置框的形状
       height: 30px;设置框的形状*

3.图片背景设置
    background: url("307650.jpg");   
    background-image: url("1.gif");设置背景图片
    background-repeat: no-repeat;设置背景不重叠
    background-color: orangered;设置背景（里层）的颜色

4.盒子属性(div)
    margin:80px;(所有边)与其他边框的距离
    margin-left：80px;（左边）与其他边框的距离
    .....
    *注:margin: auto;自动居中*

    border:设置所有（边）框的（宽）
    border-bottom-width: 20px;设置（下边）框的（宽）
    .....
    *注：border-left: hidden;左边框影藏*
    text-align: center;文字居中
    border-radius: 15px;边框的圆化程度

    padding: 20px；设置框内的距离，即文字/图片与边框的距离
    padding-left: 30px;设置框内（左边）的距离
    ......

5.去锚点
    <a href="cssTest.html#mao">锚点</a>

。。。。。。 <a name="mao">我在这里藏着</a>


6.浮动(float)
    float: left;左浮动与之相邻的元素，依次左边会紧挨着其排列
    ...
    注：同时有左和右的浮动，其余元素，自动填充之间

7.overflow属性（默认visible无影藏）
    overflow:hidden;超出边界自动影藏，会修剪内容
    overflow: scroll;超出边界自动影藏，会修剪内容，有滚动条（同auto）

8.display属性，配合js来使用
 <script>
    Function aa()
    {          
        document.getElementById("ol").style.display="block"
    }
 </script>

  <span onclick="aa()">兴趣爱好</span>
    <ol id="ol">
        <li>权利</li>
        <li>美女</li>
        <li>金钱</li>
    </ol>
注：对ol display none时ol内容不显示，只有点span标签内容才显示
display  inline时，默认。元素会被显示为行内元素，该元素前后没有换行符
block时显示


9.位置（position）
绝对位置：position: absolute
相对位置：position: relative

注：暂时不会用