部分摘抄自極客學院PPT
HTML樣式
- 標簽:
- <style>:樣式定義
- <link>:資源的引用
- 屬性
- rel="stylesheet"外部樣式表
- type="text/css":引入文檔的類型
- margin-left:邊距,其中l(wèi)eft表示與左邊框的邊距,如果為right,就是與右邊框的邊距
- 三種樣式表插入方法
ps.關于樣式的操作盡量都放在頭文件中,方便以后維護
-
外部樣式表,連接獨立的css文件
<link rel="stylesheet" type="text/css" href="mystyle.css" />
eg:
css代碼為:
@charset "utf-8";
/* CSS Document */h1{ color:#F00; } html代碼為: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>html</title> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> <body> <h1>標題h1</h1> </body> </html> -
內部樣式表:
<style type= "text/css" >
body {background-color:red}
p {margin-left:20px}
</style>
eg:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html</title>
<style type="text/css">
p{
color:#C00;
}
h1{
color:#0F0;
}
</style>
</head><body> <h1>標題h1</h1> <p> 歡迎來帶極客學院 </p> </body> </html> 內聯(lián)樣式表:要注意格式,不要少寫=,"等標點符號,加入網址記得加http,
<p style= "color:red>
eg:
body中加入:
<a style="color:#00F">極客學院</a>
