元素內聯、頁面嵌入和外部引入。比較三種方式的優缺點。
文法：style='key1:value;key2:value2;'
在標籤中使用style='xx:xxx;'
在頁面中嵌入：<style type='text/css'> </style>塊
引入外部css檔案
必要性：美工會對頁面的色彩搭配和圖片的美化負責，開發人員必須知道是如何?的。
分別看下上面三種方式怎麼使用：
1、在標籤中使用<style type='text/css'> </style>塊
<!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、在頁面中嵌入 <style type='text/css'> </style>塊
<!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>
即在代碼中添加一個<style></style>代碼塊，自訂一個樣式，然後在後面的代碼中可以反覆調用
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選取器
#logo表示id='logo'時，引用該樣式
3、組合選取器選取器
a,div表示所有的a標籤和div標籤引用該樣式
4、關聯選取器
a div展示層級關係，即所有a標籤下面的div標籤應用該樣式。
5、屬性選取器
input[type='text']，屬性標籤，表示所有的type為'text'的標籤引用該樣式
6、.logo a,.logo p表示class='logo'時，下面的所有a標籤和class='logo'時下面所有的p標籤，引用該樣式
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
