CSS的前景色和背景色，高度和宽度，字体属性，文本阴影，抖音字体

最新推荐文章于 2023-01-12 13:34:04 发布

just_花生

最新推荐文章于 2023-01-12 13:34:04 发布

阅读量5.1k

点赞数 2

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/zhiyinweini3/article/details/104382484

版权

前端专栏收录该内容

14 篇文章 1 订阅

订阅专栏

背景：学习前端知识，自己做页面
目的：学习前端知识
组网图：不涉及
工具：vscode1.41.0
简介：CSS的前景色和背景色，高度和宽度，字体属性，文本阴影：
CSS的前景色：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>huahau</title>
</head>
<body>
    <h1 style="color: #c9394a">爱你呦</h1>    
</body>
</html>

在这里插入图片描述
CSS的背景色：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>huahau</title>
    <style>
        body{
            background-color: pink;
        }
    </style>
</head>
<body>
    <h1 style="color: #c9394a">爱你呦</h1>    
</body>
</html>

在这里插入图片描述
CSS的高度和宽度：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>huahau</title>
    <style>
        h1{
            background-color: pink;
            width: 500px;
            height: 300px;
        }
    </style>
</head>
<body>
    <h1>爱你呦</h1>    
</body>
</html>

在这里插入图片描述

字体属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>huahau</title>
    <style>
        h1{
            background-color: pink;
            width: 500px;
            height: 300px;

            font-family: 'Times New Roman', Times, serif;
            font-size: 200px;
            font-weight: 1200;
        }
    </style>
</head>
<body>
    <h1>爱你呦</h1>    
</body>
</html>

在这里插入图片描述
文本阴影：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>huahau</title>
    <style>
        h1{
            background-color: pink;
            width: 500px;
            height: 300px;
            text-shadow: blueviolet -1px -3px;
        }
    </style>
</head>
<body>
    <h1>爱你呦</h1>    
</body>
</html>

在这里插入图片描述
抖音字体：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>抖音风格字体效果</title>
    <style>
        body {
            background-color: gray;       
    }

    h1 {
        font-size: 48px;
        color: white;
        text-shadow: #f03740 -1px -3px, #2addfd 3px 0px;
    }
    </style>
    
</head>
<body>
    <h1>爱你呦</h1>
</body>
</html>

在这里插入图片描述

just_花生

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
CSS的前景色和背景色，高度和宽度，字体属性，文本阴影，抖音字体

背景：学习前端知识，自己做页面目的：学习前端知识组网图：不涉及工具：vscode1.41.0简介：CSS的前景色和背景色，高度和宽度，字体属性，文本阴影：CSS的前景色：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>h...
复制链接

扫一扫