HTML加入CSS

twc829發表於2016-05-05
原文網址 : https://blog.csdn.net/twc829/article/details/51325237
HTMLCSS

  • 三種在HTML中新增CSS方法

1 使用行內樣式，即直接在標籤內使用樣式屬性

2 在檔案頭部使用樣式標籤<style>

3 在頭部連結樣式表stylesheet

  • 舉例

1 使用行內樣式

要求：修改連結樣式

				<li><a style="color: green;" href="contact.html">Contact Us</a></li>
				<!...行內樣式，對所有連結進行顏色設定，該方法不推薦，很麻煩！但可使用行內樣式覆蓋不同樣式...>
				<li><a href="prices/freshwater-fish-prices.html">Price List</a></li>
				<li><a href="http://www.163.com" target="_blank">Link to Netease Web</a></li>
				<li><a href="downloads/all-prices.pdf">Download C++ book</a></li>


缺點：若網頁上有一百多個連結，想要所有連結都顯示紅色，則需要在網頁中每個a標籤中新增style屬性，工作量大；

偶爾情況下，可使用行內樣式覆蓋不同樣式；

2 在head標籤中新增style標籤

要求：修改導航部分的連結顯示顏色為紅色

步驟：先找到導航部分對應ID，即navigation，在head標籤內新增"#navigation"，再加上標籤a表示對navigation ID中的a標籤進行樣式修改；然後以花括號將樣式修改括起來；

	<head>
		<meta charset="utf-8" />          
		<meta name="keywords" content="fish, smelly, trout, shark">
		<meta name="description" content="We shell the smelliest fish online, guranteed!">
		<title>my first web page</title>  
		<style>
			#navigation a{
				color: red;
			}
		</style>
	</head>


缺點：假設有50多個網頁，每個網頁的每個連結都想變成紅色，則需要在每個網頁的head標籤內新增style標籤，工作量大；

3 在head標籤內新增link標籤

link標籤中，屬性rel表示該網頁與stylesheet關聯，屬性style表示連結檔案的型別是text/css檔案，屬性href指定連結地址；

	<head>
		<meta charset="utf-8" />          
		<meta name="keywords" content="fish, smelly, trout, shark">
		<meta name="description" content="We shell the smelliest fish online, guranteed!">
		<title>my first web page</title>  
		<link rel="stylesheet" type="text/css" href="css/main.css"> 
		<!...CSS連結標籤,瀏覽器會根據CSS引用去開發者或使用者指定的地址得到CSS檔案來設計網頁...>
		<!...連結標籤與該HTML檔案關聯，是樣式表，以CSS文字型別，尋找CSS檔案的地址...>
	</head>

每個網頁都含有該語句，則在main.css中有所變化，這些網頁都會相應變化；

h1{
	color: blue;
	text-decoration: underline;  /*h1標籤有下劃線*/
	text-transform: uppercase;   /*h1標籤以大寫字母顯示*/
}



相關文章