css總結

1.優勢:使表現層和結構層分離

2.樣式:

    行內樣式:
        <h2 style="color:#0F0">Hello World</h2>
    內部樣式:
        <style type="text/css">
            a{
                color: red;
            }
        </style>
    外部樣式:
        在head放置<link href=“a.css”  type=“text/cssrel=“stylesheet”/> 
    優先級:
        行內樣式  > 內部樣式 > 外部樣式   就近原則

3.選擇器

    格式:選擇器{屬性:屬性值;}
    舉例:h2{color : #0F0; }

常用選擇器:
這裏寫圖片描述

4.盒模型:

這裏寫圖片描述

5.定位:
相對定位、絕對定位
寫個demo看看就知道了:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            /*float: left;*/
        }

        .box2{
            /*position: absolute;*/
            position: relative;
            top: 20px;
            left: 20px;
            background-color: blue;
        }
    </style>
    <title>Document</title>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章