CSS美化网页元素

最新推荐文章于 2024-10-29 14:54:04 发布

Echo.....

最新推荐文章于 2024-10-29 14:54:04 发布

阅读量166

点赞数

分类专栏： CSS 文章标签： html css3

本文链接：https://blog.csdn.net/m0_61810345/article/details/126344403

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.为什么要美化网页

（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>

2.字体样式

font-family 字体

font-size 大小

font-weight 粗细

color 颜色

<!--
    font-family  字体
    font-size  大小
    font-weight  粗细
    color  颜色

    -->

    <style>
        body{
            font-family: "Arial Black",新宋体;
            color: #82b3ff;
        }
        h1{
            font-size: 50px;
        }
        .p1{
           font-weight: bold;
        }
    </style>

3.文本样式

颜色 color

文本对齐的样式 text-align

首行缩进 text-indent:2em

行高 line-height

文本装饰 text-decoration

文本图片水平对齐 vertical-align: middle

阴影 text-shadow:阴影颜色，水平偏移，垂直偏移，阴影半径

<!--    color颜色：
             单词
             RGB  0~F （红#FF0000绿#00FF00蓝#0000FF）
             RGBA  (A透明度0~1)
        text-align 排版 （居中 左 右）
         text-indent: 2em   段落首行缩进
         行高和块的高度，就可以上下居中   height: 300px;  line-height: 300px;
        下划线    text-decoration: underline
        中划线    text-decoration: line-through
        上划线    text-decoration: overline
                       -->
    <style>
        h1{
            color: rgba(0,255,255,0.5);
            text-align: center;
        }
        .p1{
            text-indent: 2em;
        }
        .p3{
            background: #42bcff;
            height: 300px;
            line-height: 300px;
        }

        .l1{
            text-decoration: underline;
        }
        .l2{
            text-decoration: line-through;
        }
        .l3{
            text-decoration: overline;
        }
        /*超链接去下划线*/
        a{
            text-decoration: none;
        }
    </style>

<!--    水平对齐   要有参照物
-->
    <style>
        img,span{
            vertical-align: middle;
        }
    </style>

/*text-shadow:阴影颜色，水平偏移，垂直偏移，阴影半径*/
        #price{
            text-shadow: #82b3ff 10px 0px 2px;
        }

4.超链接伪类

正常情况下：a,a:hover

        /*默认的颜色*/
        a{
            text-decoration: none;
            color: black;

        }
        /*鼠标悬浮的颜色*/
        a:hover{
            color: #42bcff;
            font-size: 50px;
        }
        /*鼠标按住未释放*/
        a:active{
            color: #d7ffbf;
        }

5.列表

/*ul li*/

/*
list-style:
    none  去圆点
    circle 空心圆
    decimol  数字
    square   正方形
*/
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
}
a{
    text-decoration: none;
    color: black;
    font-size: 14px;

}
a:hover{
    color: orange;
    text-decoration: underline;
}

6.背景

背景颜色 background

背景图片 background-image

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

7.渐变

<!--    径向渐变,圆形渐变-->
    <style>
        body{
            background-color: #FFFFFF;
            background-image: linear-gradient(82deg, #FFFFFF 0%, #6284FF 50%, #ff0000 100%);

        }