1. 程式人生 > >CSS-style的三種方式(內聯、嵌入、外部)

CSS-style的三種方式(內聯、嵌入、外部)

一、內聯式

一般都寫在特定的標籤元素裡面來實現對元素的修改。例如將    人生應該奮鬥不止的字型顏色設定為紅色

<p style="color: red;">人生應該奮鬥不止</p>

並且css樣式程式碼要寫在style=""雙引號中,如果有多條css樣式程式碼設定可以寫在一起,中間用分號隔開。如下程式碼:

<p style="color:red;font-size:12px">這裡文字是紅色。</p>
二、嵌入式

嵌入式css樣式必須寫在<style></style>之間,並且一般情況下嵌入式css樣式寫在<head></head>之間。如下面的程式碼將文字設定為粉色:

<!DOCTYPE  HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
	<head>
		<meta http-equiv="content-type"content="text/html; charset=UTF-8" />
		<title>這是演示例項</title>
		<style type="text/css">
			p{
				color:pink;
			}
		</style>
	</head>
	<body>
		<p >人生應該奮鬥不止</p>
	</body>
	</htmL>

三、外部式

外部式css樣式(也可稱為外聯式)就是把css程式碼寫一個單獨的外部檔案中,這個css樣式檔案以“.css”為副檔名,在<head>內(不是在<style>標籤內)使用<link>標籤將css樣式檔案連結到HTML檔案內,如下面程式碼:
<link href="base.css" rel="stylesheet" type="text/css" />

<!DOCTYPE HTML>
		<html>
		<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>嵌入式css樣式</title>
		<link href="style.css" rel="stylesheet" type="text/css" />
		<!---
		   href後面跟的是css的檔案    rel="stylesheet" type="text/css"為固定格式
		  --->
		   
		</head>
		<body>
			 <pre>吉日兮辰良,穆將愉兮上皇。 
		     <span>撫長劍兮玉珥,璆鏘鳴兮琳琅。</span> 
		      瑤席兮玉瑱, 盍將把兮瓊芳。 
		<span>蕙餚蒸兮蘭藉, 奠桂酒兮椒漿。 </span> 
		揚枹兮拊鼓, 疏緩節兮安歌,陳竽瑟兮浩倡。 
		<span>靈偃蹇兮姣服,芳菲菲兮滿堂。 </span> 
		五音紛兮繁會, 君欣欣兮樂康。 !</pre>
		</body>
		</html>

四、選擇器(標籤選擇器,類選擇器,ID選擇器,全部選擇器,子選擇器)

定義:每一條css樣式宣告(定義)由兩部分組成,形式如下:


選擇器{
    樣式;
}


在{}之前的部分就是“選擇器”,“選擇器”指明瞭{}中的“樣式”的作用物件,也就是“樣式”作用於網頁中的哪些元素。比如右側程式碼中的“body”就是選擇器。

 1標籤選擇器(就是直接對標籤進行修改) ----權值為1

標籤選擇器其實就是html程式碼中的標籤。如程式碼中的<html>、<body>、<h1>、<p>、<img>。

  <style type="css/text">
	    p{
		  color:red;
		  }
		 </style>
   2類選擇器(.+類選擇器的名字+修改)-------權值為10
<head>
	
	   <style type="css/text">
	     .color
		 {
		 color:red;
		 
		 }
		 </style >
	<head>
	<body>
	<p class="color">人生應該奮鬥不止</P>
	</body>
	

3ID選擇器(#+ID選擇器的名字+修改)------權值為100

在很多方面,ID選擇器都類似於類選擇符,但也有一些重要的區別:

1、為標籤設定id="ID名稱",而不是class="類名稱"。

2、ID選擇符的前面是井號(#)號,而不是英文圓點(.)。

  
   <head>
         <style type="css/text">
            #color
               {
			    color:red;
				}
		</style>
	</head>
		<body>
		<p id="color">人生應該奮鬥不止</p>
		
		</body>
4全部選擇器(*+修飾)//對於全部的標籤元素進行修改
      
<head>
         <style type="css/text">
		    *{color:red;
			}
		</style >
	  </head>
	  <body>
	  <p>人生應該奮鬥不止</p>


5子選擇器(父類名字+>+子類名字 或父類名字+空格+子類名字)

<style type="text/css">
				.first span{color:red;}

				.food>li{
					border:1px solid red;/*新增邊框樣式(粗細為1px, 顏色為紅色的實線)*/	
				}
		</style>
 6偽選擇符(對於標籤的狀態的某種修飾,比如滑鼠滑過標籤)
 a:hover{color:red;}

ID選擇器與類選擇器的比較

相同點:可以應用於任何元素
不同點:1、ID選擇器只能在文件中使用一次。與類選擇器不同,在一個HTML文件中,ID選擇器只能使用一次,而且僅一次。而類選擇器可以使用多次。