内容样式

　　关于给HTML页面内容添加样式的几个方法：

　　下面拿一个div为例：

　　简单设定宽度高度，设置字体颜色，背景颜色，居中，之间用分号隔开。

　　1.直接在div标签加style样式：

　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式</title>
</head>
<body>
    <div style="width: 200px;height: 200px;background-color: #0395e1;color: red;text-align: center;line-height: 200px">
        内容样式
    </div>
</body>
</html>

　　2.样式放在<head></head>标签里：

　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式</title>
    <style>
        div
        {
            width: 200px;
            height: 200px;
            background-color: #0395e1;
            color: red;
            text-align: center;
            line-height: 200px
        }
    </style>
</head>
<body>
    <div>
        内容样式
    </div>
</body>
</html>

　　3.用CSS添加样式：

　　HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式</title>
    <link rel="stylesheet" href="yangshi.css">
</head>
<body>
    <div>
        内容样式
    </div>
</body>
</html>

　　CSS样式：

　　

div
{
    width: 200px;
    height: 200px;
    background-color: #0395e1;
    color: red;
    text-align: center;
    line-height: 200px
}

上面三种方法，都给div添加了相同的样式，网页显示效果：

　　

posted @ 2019-05-30 10:47  一颗糊涂淡  阅读(235)  评论(0)  编辑  收藏  举报