CSS——美化网页

为什么要美化网页?
1、有小的传递页面信息
2、美化网页、页面漂亮、才能吸引用户
3、突显页面的主题
4、提高用户的体验

  • span标签(重点要突出的字,使用span套起来)
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>

        <style>
            #title1{
                font-size: 50px;
            }
        </style>

    </head>
    <body>
    欢迎学习<span id="title1">Java</span>

    </body>
</html>

在这里插入图片描述

1、字体样式

  1. font-family 字体
  2. font-size 字体大小
  3. font-weight 字体的粗细
  4. color 字体的颜色
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>

        <!--
        font-family 字体
        font-size   字体大小
        font-weight 字体的粗细
        color       字体的颜色
        -->
        <style>
            body{
                font-family: 楷体;
                color: #de07f5;
            }

            h1{
                font-size: 50px;
            }

            .p1{
                font-weight: bold;
            }


        </style>

    </head>
    <body>
        <h1>Java(计算机编程语言)</h1>
        <p class="p1">
            Java是一门面向对象的编程语言,不仅吸收了C++语言的各种优点,还摒弃了C++里难以理解的多继承、指针等概念,因此Java语言具有功能强大和简单易用两个特征。Java语言作为静态面向对象编程语言的代表,极好地实现了面向对象理论,允许程序员以优雅的思维方式进行复杂的编程
        </p>

        <p>
        Java具有简单性、面向对象、分布式、健壮性、安全性、平台独立与可移植性、多线程、动态性等特点 [2] 。Java可以编写桌面应用程序、Web应用程序、分布式系统和嵌入式系统应用程序等 [3] 。
        </p>
    </body>
</html>

在这里插入图片描述

2、文本样式

  1. 颜色
    单词
    RGB 0 ~ F
    RGBA A:0 ~ 1

  2. 文本对齐的方式
    text-align: center;(水平居中)

  3. 首行缩进
    text-indent: 2em;

  4. 行高
    line-height: 300px;
    垂直居中:line-height = height

  5. 装饰
    /下划线/
    text-decoration: underline;
    /中划线/
    text-decoration: line-through;
    /上划线/
    text-decoration: overline;

  6. 文本水平对齐
    vertical-align: middle;

  7. 阴影

			/*text-shadow: 阴影颜色 水平偏移 垂直偏移 阴影半径*/
            #price{
                text-shadow: #389ba8 10px 10px 10px;
            }
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>

        <!--
            颜色:
                单词
                RGB 0 ~ F
                RGBA A:0 ~ 1

            text-align: 排版,居中
            text-indent: 2em;   段络首行缩进
            行高和快的高度一致 就可以上下居中:
                height: 300px;
                line-height: 300px;
        -->
        <style>

            h1{
                color: rgba(0,255,0,0.8);
                text-align: center;
            }

            .p1{
                text-indent: 2em;
            }

            .p3{
                background: red;
                height: 300px;
                line-height: 300px;
            }
            /*下划线*/
            .l1{
                text-decoration: underline;
            }
            /*中划线*/
            .l2{
                text-decoration: line-through;
            }
            /*上划线*/
            .l3{
                text-decoration: overline;
            }

            /*
            水平对其 参照物 a,b
            */
            img,span{
                vertical-align: middle;
            }

        </style>

    </head>
    <body>

        <p class="l1">2929054</p>
        <p class="l2">2929054</p>
        <p class="l3">2929054</p>
        <h1>Java(计算机编程语言)</h1>
        <p class="p1">
            Java是一门面向对象的编程语言,不仅吸收了C++语言的各种优点,还摒弃了C++里难以理解的多继承、指针等概念,因此Java语言具有功能强大和简单易用两个特征。Java语言作为静态面向对象编程语言的代表,极好地实现了面向对象理论,允许程序员以优雅的思维方式进行复杂的编程
        </p>

        <p class="p3">
            Java具有简单性、面向对象、分布式、健壮性、安全性、平台独立与可移植性、多线程、动态性等特点 [2] 。Java可以编写桌面应用程序、Web应用程序、分布式系统和嵌入式系统应用程序等 [3] 。
        </p>

        <p>
            <img src="./images/1.png" alt="" width="200px" height="200px">
            <span>123456789</span>
        </p>
    </body>
</html>

在这里插入图片描述

3、超链接伪类

  1. 默认的颜色
            a{
                text-decoration: none;
                color: #000000;
            }
  1. 鼠标悬浮的状态
            a:hover{
                color: orange;
                font-size: 50px;
            }
  1. 鼠标按住未释放的状态
            /*鼠标按住未释放的状态*/
            a:active{
                color: green;
            }
  1. 已访问的状态
            /*已访问的状态*/
            a:visited{
                color: red;
            }

在这里插入图片描述

4、列表

.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    background: red;
}
/*
ul li
list-style:
    none 去掉原点
    circle  空心圆
    decimal 数字
    square  正方形
*/
ul{
    background: #adaaaa;
}
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
}
a{
    text-decoration: none;
    font-size: 14px;
    color: black;
}
a:hover{
    color: orange;
    text-decoration: underline;
}
#nav{
    width: 300px;
    background: #adaaaa;
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>列表样式</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div id="nav">
            <h2 class="title">全部商品分类</h2>
            <ul>
                <li>
                    <a href="#">图书</a>&nbsp;&nbsp;
                    <a href="#">音像</a>&nbsp;&nbsp;
                    <a href="#">数字商品</a>&nbsp;&nbsp;
                </li>
                <li>
                    <a href="#">家用电器</a>&nbsp;&nbsp;
                    <a href="#">手机</a>&nbsp;&nbsp;
                    <a href="#">数码</a>&nbsp;&nbsp;
                </li>
                <li>
                    <a href="#">电脑</a>&nbsp;&nbsp;
                    <a href="#">办公</a>&nbsp;&nbsp;
                </li>
                <li>
                    <a href="#">家居</a>&nbsp;&nbsp;
                    <a href="#">家装</a>&nbsp;&nbsp;
                    <a href="#">厨具</a>&nbsp;&nbsp;
                </li>
                <li>
                    <a href="#">服饰鞋帽</a>&nbsp;&nbsp;
                    <a href="#">个护化妆</a>&nbsp;&nbsp;
                </li>
                <li>
                    <a href="#">礼品箱包</a>&nbsp;&nbsp;
                    <a href="#">钟表</a>&nbsp;&nbsp;
                    <a href="#">珠宝</a>&nbsp;&nbsp;
                </li>
                <li>
                    <a href="#">食品饮料</a>&nbsp;&nbsp;
                    <a href="#">保健食品</a>&nbsp;&nbsp;
                </li>
                <li>
                    <a href="#">彩票</a>&nbsp;&nbsp;
                    <a href="#">旅行</a>&nbsp;&nbsp;
                    <a href="#">充值</a>&nbsp;&nbsp;
                    <a href="#">票务</a>&nbsp;&nbsp;

                </li>
            </ul>
        </div>


    </body>
</html>

在这里插入图片描述

5、背景

            div{
                width: 1000px;
                height: 700px;
                border: 1px solid red;
                background-image: url("./images/1.png");
                /*默认全部平铺*/
            }
            .div1{
                background-repeat: repeat-x;
                /*水平平铺*/
            }
            .div2{
                background-repeat: repeat-y;
                /*垂直平铺*/
            }
            .div3{
                background-repeat: no-repeat;
                /*不平铺*/
            }

在这里插入图片描述

  • 4
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
CSS(层叠样式表)是一种用于描述网页样式的标记语言,通过控制网页元素的外观和布局来美化页面。背景样式在 CSS 中扮演了重要角色,可以通过设置背景颜色、背景图片、背景大小、背景重复等属性来改变元素的背景效果。以下是一些常用的背景样式属性: 1. 背景颜色(background-color):用于设置元素的背景色,可以使用命名颜色或者十六进制颜色值。 示例: ```css div { background-color: red; } ``` 2. 背景图片(background-image):用于设置元素的背景图片,可以使用图片的 URL 来指定。 示例: ```css div { background-image: url("image.jpg"); } ``` 3. 背景大小(background-size):用于设置背景图片的尺寸大小,可以使用关键字(如 `cover`、`contain`)或具体数值(如像素、百分比)来指定。 示例: ```css div { background-size: cover; } ``` 4. 背景重复(background-repeat):用于设置背景图片的重复方式,可以是水平重复、垂直重复或者不重复。 示例: ```css div { background-repeat: repeat-x; } ``` 5. 背景定位(background-position):用于设置背景图片的起始位置,可以使用关键字(如 `top`、`center`、`bottom`)或具体数值(如像素、百分比)来指定。 示例: ```css div { background-position: center; } ``` 以上是一些常用的背景样式属性,通过灵活运用它们,可以实现丰富多样的背景效果。希望对你有所帮助!如需了解更多,请参考相关的 CSS 教程或文档。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小吴在敲Bug

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值