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'的標籤引用該樣式