css是英文Cascading Style Sheets的縮寫,稱為層疊樣式表,用於美化頁面。存在方式有三種:
元素內聯、頁面嵌入、外部引入。比較三種方式的優缺點。
語法:style='key1:value;key2:value2;'
在標籤中使用style='xx:xxx;'
在頁面中嵌入:塊
引入外部css文件
必要性:美工會對頁面的色彩搭配和圖片的美化負責,開發人員必須知道是如何實現的。
分別看下上面三種方式怎麼使用:
1、在標籤中使用塊
1 2 3 4 5 6 7 8 9 10 11 12 | <!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、在頁中嵌入 塊
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!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的寫法:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <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'的標籤引用該樣式
6、logo a. logo p表示class='logo'時,下面的所有a標籤和class='logo'時下面所有的p標籤,引用該樣式🎜🎜更多CSS樣式選擇器 相關文章請關注PHP中文網! 🎜