CSS樣式選擇器
- 高洛峰原創
- 2017-02-14 15:04:321725瀏覽
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='logo'>123456</div>
<div class='logo'>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='text']{
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'的標籤引用該樣式
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn