首頁 > web前端 > css教學 > 主體

CSS樣式選擇器

高洛峰
發布: 2017-02-14 15:04:32
原創
1718 人瀏覽過

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>
登入後複製

1、class選擇器

.logo表示class='logo'時,引用此樣式


2、id選擇器時表示


2、id選擇器

,引用該樣式


3、組合選擇器選擇器

a,div表示所有的a標籤和div標籤引用該樣式


4、關聯選擇器號即所有a標籤下面的div標籤套用該樣式。


5、屬性選擇器

input[type='text'],屬性標籤,表示所有的type為'text'的標籤引用該樣式

6、logo a. logo p表示class='logo'時,下面的所有a標籤和class='logo'時下面所有​​的p標籤,引用該樣式🎜🎜更多CSS樣式選擇器 相關文章請關注PHP中文網! 🎜
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板