5-18-CSS(1):CSS的三種使用方法及實際寫法
CSS:用於控制網頁樣式和佈局
三種使用方法:
直接使用:標籤內/body內
內部:head內定義標籤
外部:head內使用link讀取CSS檔案
---------------------------------------------------------------------------------------------------------
直接使用1:在body內用style屬性直接定義此body內的標籤樣式;
<html>
<head>
<meta charset="utf-8">
<title>1.在body內定義此body內標籤的樣式</title>
</head>
<body style="color: blue;">
<p>我被上面的屬性定義的顏色是blue</p>
</body>
</html>
直接使用2:在標籤使用style屬性定義標籤內容的樣式;
<html>
<head>
<title>2.直接在標籤內定義此標籤樣式</title>
</head>
<body>
<p style="font-weight: 900;">我定義了P標籤的所有內容都是粗體<span style="color: blueviolet;">我把span內字型顏色變成了藍紫</span></p>
</body>
</html>
---------------------------------------------------------------------------------------------------------
內部:在head內新建style並自定義樣式,來讓本文件內的標籤呼叫;【新建樣式格式 .名稱{樣式}】;標籤內class直接呼叫;
<html>
<head>
<title>內部</title>
<style type="text/css">
.css1{color: aqua;font-weight: bold;font-size: 20pt;}
.css2{color: blue;font-weight: 400;font-family: "仿宋";font-size: 30pt;}
</style>
</head>
<body>
<p class="css1">我是被ceshi1影響的內容</p>
<p class="css2">我是被ceshi2影響的內容</p>
</body>
</html>
---------------------------------------------------------------------------------------------------------
外部:使用link鏈入外部CSS檔案來影響本檔案的縮影樣式;同時還可自定義標籤樣式;互不衝突;
此CSS檔案必須在同網站目錄下;
<html>
<head>
<title>1.使用link鏈入外部CSS檔案</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css1.css" />
</head>
<p>我是被匯入的CSS1影響的內容</p>
</html>
---------------------------------------------------------------------------------------------------------
CSS的實際寫法:
*{font-family:"仿宋";} *代表此css檔案所有樣式
body{color: darkmagenta;} bady內的樣式
p,span{color: red;font-size:20pt;} p和span的樣式
pspan{color: blue;font-style:italic;} p標籤內span段落的樣式
p#t{color:yellow;} p標籤id為t的樣式
p#t1span{color:crimson;}p標籤id為t1的span的樣式
.css1{color: darkred;} 可在標籤內通過class呼叫
---------------------------------------------------------------------------------------------------------