CSS語法及HTML結合
二、CSS語法
p{color:red;}
選擇器{屬性名:屬性值 ;}
選擇器後一定是大括號.屬性名後必須用冒號隔開.屬性值後用分號
屬性名和冒號之間最好不要有空格。
CSS註釋/* */
使用選擇器p{ }和<p>標籤的區別:
p{
font-weight:bold;
font-style:italic;
}
</style>
</head>
<body>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p style = "color:red">你好</p>
三、CSS和HTML的結合方式
CSS代碼理論上位置是任意的,但通常寫在style標籤裏
CSS和HTML的結合方式有3種:
a. 行級樣式表:採用style屬性,範圍只針對此標籤適用
<div style = "border:1px solid red ;">大家好</div>
b. 內嵌樣式表:採用<style>標籤完成。範圍針對此頁面
<style type="text/css">
c. 外部樣式表: 採用建立樣式表文件。針對多個頁面.
引入樣式表文件的方式:
1):採用<link>標籤
eg:<link rel = "stylesheet" type = "text/css" href = "a.css"></link>
<link rel = "stylesheet" type = "text/css" href = "a.css"></link>
2):採用import,必須寫在<style>標籤中,並且必須是第一句
eg: @import url(a.css) ;
兩種引入方式的區別:
外部樣式表中不能寫<link>標籤,但是可以寫import語句
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<link rel = "stylesheet" type = "text/css" href = "a.css"></link>
<title>Document</title>
<style type="text/css">
/*
CSS和HTML的結合方式:
1. 行級樣式表: 採用style屬性完成
2. 內部樣式表: 採用style標籤完成
3. 外部樣式表: 採用外部css文件完成
*/
p{
font-weight:bold;
font-style:italic;
}
</style>
</head>
<body>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p style = "color:red">你好</p>
</body>
</html>