Blogger Information
Blog 16
fans 1
comment 0
visits 14169
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
2019年7月3日作业(一) - CSS的内联样式,内部样式,外部样式的应用场景,理解style属性, style标签, 以及外部样式表的使用方式
杜强_上海_315106编程学习
Original
1535 people have browsed it

以下代码为CSS内部样式的运用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS内部样式</title>
    <style>
        p {
            color: red;
        }
    </style>
</head>
<body>
<p>我们都是中国人</p>
</body>
</html>

以上代码执行结果截图:

0703-1.png

以下代码为CSS内联样式的运用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css内联样式运用</title>
</head>
<body>
<p style="color: blue">作为中国人,我很骄傲!</p>
</body>
</html>

以上代码执行结果截图:

0703-2.png

总结:内联样式的优先级高于内部样式


以下代码为独立样式表的运用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="static/css/style1.css">
    <title>外部CSS的导入使用</title>
</head>
<body>
<p>我爱你中国</p>
<p>中国万岁</p>
<p>我是一个中国人</p>
</body>
</html>
p {color: red;
}

以上代码执行结果截图如下

0703-3.png


Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post