天天看点

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)行内,内部,外部样式