天天看點

CSS(01)行内,内部,外部樣式

01 行内

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css行内樣式</title>
</head>

<body>
    <!--
	    描述:什麼是 CSS?
			CSS 指層疊樣式表 (Cascading Style Sheets)
			樣式定義如何顯示 HTML 元素
			樣式通常存儲在樣式表中
			把樣式添加到 HTML 中 
			外部樣式表可以極大提高工作效率
			外部樣式表通常存儲在 CSS 檔案中
			多個樣式定義可層疊為一
			html 在一個網頁中負責的事情是一個頁面的結構
	   		css(層疊樣式表) 在一個網頁中主要負責了頁面的資料樣式。
	-->
    <h3>
        <font color="red">啦啦啦01</font>
    </h3>
    <h3>
        <font color="red">啦啦啦02</font>
    </h3>
    <h3>
        <font color="red">啦啦啦03</font>
    </h3>
    <h3 style="color: #00FF00;">啦啦啦04</h3>
    <h3 style="color: #00FF00;">啦啦啦05</h3>
    <h3 style="color: #00FF00;">啦啦啦05</h3>
</body>

</html>
           
CSS(01)行内,内部,外部樣式

02 内部

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css内部樣式</title>
    <style>
        /* 内部樣式 */
        h3 {
            color: #00FF00;
        }
    </style>
</head>

<body>
    <h3>啦啦啦01</h3>
    <h3>啦啦啦02</h3>
    <h3>啦啦啦03</h3>
</body>

</html>
           
CSS(01)行内,内部,外部樣式

03 外部

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css内部樣式</title>
    <link rel="stylesheet" href="./css/03.css">
</head>

<body>
    <h3>啦啦啦01</h3>
    <h3>啦啦啦02</h3>
    <h3>啦啦啦03</h3>
</body>

</html>
           
/* 外部樣式 */
h3 {
    color: #00FF00;
}
           
CSS(01)行内,内部,外部樣式