CSS入门（CSS常用属性设置--背景、文本）

最新推荐文章于 2023-03-10 17:06:36 发布

Brittany____

最新推荐文章于 2023-03-10 17:06:36 发布

阅读量270

点赞数

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

本文链接：https://blog.csdn.net/Brittany____/article/details/127773455

版权

前端专栏收录该内容

19 篇文章 1 订阅

订阅专栏

CSS常用属性设置

1.背景

设置元素的背景颜色
background-color: antiquewhite;
设置元素的背景图片，默认背景重复显示
background-image: url(../0.img/img-1.jpeg);
设置背景图片是否重复 no-repeat:不重复；repeat-x：横向重复；repeat-y：纵向重复；repeat：横向纵向重复（平铺）
background-repeat: repeat;
设置背景图片大小
background-size: 200px 200px;
代码块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景</title>
    <style>
        /* 通过元素选择器获取元素 */
        body {
            /* 设置元素的背景颜色 */
            background-color: antiquewhite;
            /* 设置元素的背景图片，默认背景重复显示 */
            background-image: url(../0.img/img-1.jpeg);
            /* 设置背景图片是否重复  no-repeat:不重复；repeat-x：横向重复；repeat-y：纵向重复；repeat：横向纵向重复（平铺）*/
            background-repeat: repeat;
            /* 设置背景图片大小 */
            background-size: 200px 200px;
        }
    </style>
</head>
<body>
    
</body>
</html>

2.文本

color 文本颜色
color: blueviolet;
对齐方式 (左对齐是默认)
text-align: center;
文本修饰 text-decoration
设置上划线
text-decoration: overline;
设置下划线
text-decoration: underline;
设置中划线
text-decoration: line-through;
同时设置上中下划线
text-decoration: overline underline line-through;
去除文本修饰
text-decoration: none;
设置首行缩进 em：一个文字的高度
text-indent: 4em;
代码块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本</title>
    <style>
        /* 文本 */
        /* id选择器 */
        #div1 {
            /* color 文本颜色 */
            color: blueviolet;
        }

        #div2 {
            /* 对齐方式  左对齐是默认*/
            text-align: center;
        }

        #div3 {
            /* 文本修饰  text-decoration*/
            /* 设置上划线 */
            text-decoration: overline;
            /* 设置下划线 */
            text-decoration: underline;
            /* 设置中划线 */
            text-decoration: line-through;
        }

        #div4 {
            /* 同时设置上中下划线 */
            text-decoration: overline underline line-through;
        }

        a {
            /* 去除文本修饰 */
            text-decoration: none;
        }

        #p1 {
            /* 设置首行缩进  em：一个文字的高度*/
            text-indent: 4em;
        }



    </style>
</head>
<body>
    <div id="div1">文本1</div>
    <div id="div2">文本2</div>
    <div id="div3">文本3</div>
    <p><div id="div4">文本4</div></p>

    <a href="">超链接</a>

    <p id="p1">这是一段文字，需要进行首行缩进</p>
</body>
</html>