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><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>
<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> a:hover{color:red;}ID選擇器與類選擇器的比較
相同點：可以應用於任何元素不同點：1、ID選擇器只能在文件中使用一次。與類選擇器不同，在一個HTML文件中，ID選擇器只能使用一次，而且僅一次。而類選擇器可以使用多次。