CSS樣式選擇器-css教學-PHP中文網

CSS樣式選擇器

高洛峰

發布： 2017-02-14 15:04:32

原創

1819 人瀏覽過

css是英文Cascading Style Sheets的縮寫，稱為層疊樣式表，用於美化頁面。存在方式有三種：

元素內聯、頁面嵌入、外部引入。比較三種方式的優缺點。

語法：style='key1:value;key2:value2;'

在標籤中使用style='xx:xxx;'

在頁面中嵌入：塊

引入外部css文件

必要性：美工會對頁面的色彩搭配和圖片的美化負責，開發人員必須知道是如何實現的。

分別看下上面三種方式怎麼使用：

1、在標籤中使用塊

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/css"; charset="UTF-8">
    <title>页面一</title>
    <link rel="stylesheet" href="commom.css" />
</head>
<body>
    <div style="background-color:red;">123</div>
      
</body>
</html>

登入後複製

2、在頁中嵌入塊

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/css"; charset="UTF-8">
    <title>页面一</title>
    <link rel="stylesheet" href="commom.css" />
    <style>
        .logo{
            background-color:red;
        }
    </style>
</head>
<body>
    <div class=&#39;logo&#39;>123456</div>
    <div class=&#39;logo&#39;>aaa</div>
</body>
</html>

登入後複製

即在程式碼中加入一個程式碼區塊，自訂一個樣式，然後在後面的程式碼中可以重複呼叫

3.引入外部css檔案

如果有多個html檔案需要引用自訂的css樣式，那麼按照第二種方式的做法就需要在每一個html檔案中定義一個樣式，為了解決這個問題，可以定義一個文件，寫入自訂的樣式，然後從文件中呼叫這個樣式即可。

style的寫法：

<style>
    .logo{
        background-color:red;
    }
    #logo{
        background-color:red;
    }
    a,div{
        color:red;
    }
    a div{
        color:red
    }
    input[type=&#39;text&#39;]{
    color:blue
    }
    .logo a,.logo p{
        font-size:56px;
    }
</style>