css中四種頁面編寫樣式

說明

1、行內樣式，編寫css程式碼。

即直接在 html中的style屬性裡編寫css程式碼。

2、內嵌樣式，編寫class。

即在 html h中的style標籤內編寫class，提供給當前頁面使用。

3、匯入樣式，在內聯樣式中透過@import方法匯入。

提供給當前頁面使用。

4、外部樣式，使用html中的link標籤載入樣式，提供給當前頁面使用。

例項

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>案例</title>
<style type="text/css">
/* p{
font-size:24px;
} */
</style>
<link rel="stylesheet" type="text/css" href="案例.css" />
<style type="text/css">
p{
font-size:24px;
}
</style>
</head>
<body>
<div>
<h1 style="font-size:24px;font-family: 楷體;text-align: center">望月懷遠</h1>
<p id="text1">海上升明月，天涯共此時.</p>
<p>情人怨遙夜,竟夕起相思.</p>
<p>滅燭憐光滿,披衣覺露.</p>
<p>不堪盈手贈,還寢夢佳期.</p>
<p style="text-decoration: underline;">123456</p>
<p style="text-decoration: line-through;">123456</p>
<p style="text-decoration: overline;">123456</p>
<p style="text-direction: rtl;">6 7 8 9</p>
<p style="text-direction: ltr;">9 8 7 6</p>
<p style="text=transform: none;">Welcome To Jiaxing</p>
<p style="text=transform: capitaliza;">Welcome To Jiaxing</p>
<p style="text=transform: uppercase;">welcome to jiaxings</p>
<p style="text=transform: lowercase;">Welcome To Jiaxing</p>
<p style="line-height: normal;">
正常行高<br>
正常行高<br>
正常行高
</p>
 
<p style="line-height: 42px">
42行高<br>
42行高<br>
42行高
</p>
<p stype="letter-spacing: normal;">welcome</p>
<p stype="letter-spacing: 10px">welcome</p>
<p stype="letter-spacing: 10px">66666</p>
<p stype="word-spacing: 500px">行 高</p>
<p stype="word-spacing: normal">行 高</p>
</div>
</body>
</html>

以上就是css中四種頁面編寫樣式的介紹，希望對大家有所幫助。更多css學習指路：

本文教程操作環境：windows7系統、css3版，DELL G3電腦。

css中四種頁面編寫樣式

相關文章