CSS基礎知識，學前準備

時間 2019-11-30

標籤 css 基礎知識學前準備欄目 CSS 简体版

原文原文鏈接

1.引入層疊樣式表：css

　　A.行內引入html

<bodystyle="background-color:#cccccc">;
      在標籤內使用style屬性
</body>

　B.內聯樣式表web

<html>
    <head>
        <title>內聯樣式表</title>
        <style type="text/css">
            body{
                background-color:#ccc;
            }
        </style>
    </head>
    <body>

    </body>
</html>

　　C.外部樣式表chrome

<html>
    <head>
        <title>外部樣式表</title>
        <link rel="stylesheet" href="index.css" type="text/css">
    </head>
    <body>

    </body>
</html>

2.三種樣式表的優先級對比（就近原則）瀏覽器

　　行內引入 > 內聯樣式表 > 外部樣式表spa

3.代碼註釋：firefox

　　/* 代碼段 */code

CSS:
　　/* background-color:#ccc; */

4.各瀏覽器前綴htm

前綴	瀏覽器
-webkit-	chrome和safari
-moz-	firefox
-ms-	IE
-o-	opera

5.CSS選擇符：blog

　　A. 通配選擇符

CSS：
    *{
        代碼塊；
    }

　　B. 元素選擇符，路body、h一、p

CSS:
    body{
        代碼塊；
    }
    h1{
        代碼塊；
    }

　　C. 羣組選擇符

CSS:
    h1,h2,p{
        代碼塊；
    }

　　D. 關係選擇符

HTML: (包含選擇符 E F)
    <div>
        <a>我是div的子元素a標籤</a>
    </div>
　　<p>
　　　　<a>我是p的子元素a標籤</a>
　　</p>
CSS:
    div p{
        代碼塊；
    }

HTML:(子選擇符 E>F)
  　 <div>
          <a>我是div的子元素a標籤</a>
     </div>
　　<p>
　　　　<a>我是p的子元素a標籤</a>
　　</p>
CSS:
　　div>p{
　　　　代碼塊；
　　}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。