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選擇器只能使用一次,而且僅一次。而類選擇器可以使用多次。