您现在的位置:首页 >> 前端 >> 内容

css的三种使用方式详解(代码实例)

时间:2018/1/31 13:51:40 点击:

  核心提示:一、内联样式在元素的style属性中直接书写的样式!DOCTYPE htmlhtmlheadmeta charset=utf-8titleHTML/title/headbody!--内联样式--h1 ...

一、内联样式

在元素的style属性中直接书写的样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML</title>
</head>
<body>
    <!--内联样式-->
    <h1 style="color:red">内联样式</h1>
</body>
</html>

二、内部样式

在style标签内书写的样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML</title>
    <style>
        <!--内部样式-->
        h2 {
            color: blue;
        }
    </style>
</head>
<body>
    <h2>内部样式</h2>
</body>
</html>

三、外部样式

写在单独的css文件当中

my.css

p {
    color: yellow;
}

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML</title>
    <!--外部样式-->
    <link rel="stylesheet" href="my.css"/>
</head>
<body>
    <p>外部样式</p>
</body>
</html>

Tags:CS SS S的 的三 
作者:网络 来源:YIMT_F的博客