HTML引用CSS
阿新 • • 發佈：2018-08-12
復用 代碼 doctype ont ini sheet initial name pat
外部樣式表
css代碼在一個獨立文件中，HTML通過link標簽引用css
h1 { color:red; }
這是css代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="Test.css"> </head> <body> <h1>Hello</h1> </body> </html>
href="" 具體的css文件路徑
使用外部樣式表能使css代碼和html代碼分離，方便維護和復用
內部樣式表
將css代碼寫到html的style標簽中
<!DOCTYPE html> <html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="Text/css"> h1 { color:red; }</style> </head> <body> <h1>Hello</h1> </body> </html>
沒有了樣式表文件，在某些時候可以提升效率
行內樣式表
css代碼寫在標簽的style屬性中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <h1 style="color:red">Hello</h1> </body> </html>
行內樣式不寫選擇器
HTML引用CSS