内容样式

最新推荐文章于 2022-04-08 10:21:14 发布

weixin_30737363

最新推荐文章于 2022-04-08 10:21:14 发布

阅读量117

点赞数

原文链接：http://www.cnblogs.com/zhangcheng001/p/10948270.html

版权

　　关于给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添加了相同的样式，网页显示效果：

转载于:https://www.cnblogs.com/zhangcheng001/p/10948270.html

weixin_30737363

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
内容样式

　　关于给HTML页面内容添加样式的几个方法：　　下面拿一个div为例：　　简单设定宽度高度，设置字体颜色，背景颜色，居中，之间用分号隔开。　　1.直接在div标签加style样式：　　<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">...
复制链接

扫一扫