美化网页元素

最新推荐文章于 2024-08-31 21:18:22 发布

知友丶

最新推荐文章于 2024-08-31 21:18:22 发布

阅读量125

点赞数 2

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/weixin_47620760/article/details/112477004

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

字体样式：

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

-->
    <style>
        body{
            font-family: 宋体;
            color: brown;
        }
        h1{
            font-size: 20px;
        }
        .p1{
           font-weight: bolder;
        }
    </style>

文本样式：
1.颜色 color rgb rgba

2.文本对齐方式 text-align=center

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

4.行高 line-height：单行文字上下居中！ line-height=height）

5.装饰 text-decoration：

6.文本图片水平对齐 vertical-align

<!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,255,0.8);
            text-align: center;
        }
        .p1{
            text-indent: 2em;
        }
        .p3{
            background: purple;
            height: 300px;
            line-height: 300px;
        }

        /*下划线*/
        .l1{
            text-decoration: underline;
        }
        /*中划线*/
        .l2{
            text-decoration: line-through;
        }
        /*上划线*/
        .l3{
            text-decoration: overline;
        }


        /*超链接去下划线*/
        a{
            text-decoration: none;
        }

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

    </style>
</head>
<body>

<p class="l1">1234555</p>
<p class="l2">1234555</p>
<p class="l3">1234555</p>

<h1>人物介绍</h1>

<p class="p1">炽天殿弋痕夕的学生。火属性四象侠岚。
    开朗天真、活泼随和、充满正义感、热血单纯、冲动，做事不拘小节，爱开玩笑。直来直往的性格有时候给人感觉脑袋少根筋。姐姐墨夷被抓走的时候，辗迟暴露出了懦弱和胆小的性格。在辗迟自己看来，也是因为自己的懦弱才失去了姐姐，为此，辗迟暗自发誓，永远也不要做懦弱的人。这成为日后辗迟成长过程中的一大准则和动力。</p>

<p class="p3">辗迟从小体质就很弱，于是老板娘经常给辗迟服用三生草，来增强体质。没想到就这样，辗迟在老板娘辣妈的精心照料下，竟然没有消亡，而是和老板娘的侄女墨夷一起，健康地成长着。墨夷大辗迟三岁，辗迟称呼墨夷为姐姐。渐渐的，在活泼的墨夷影响下，辗迟变得开朗甚至调皮。进入玖宫岭后，辗迟结识了生命中最重要的朋友。虽然平时嘴上不说，甚至时不时捉弄朋友们。但就是这么一个让人头疼的捣蛋鬼辗迟，为了自己的朋友，不管面对任何困难，都敢挺身而出，因为辗迟一直认为是自己的懦弱和胆怯让他失去了姐姐，于是，为了让自己变得更强，辗迟总是在危难时刻挺身而出，越是危机的关头，辗迟越是一改平时大大咧咧的形象，表现出领袖气质，坚定不移，靠着自己乐观、积极、执着的精神将大家凝聚在一起。
    不知道其具体身份，只知道被桃源镇的辣妈所收养，5岁那年姐姐被人掳走，为救姐姐，励志成为侠岚。虽身为侠岚，但是体内却存有零力，而一身零力更无从知晓从何而来。第五季回忆中穹奇为辗迟灌输大量零力，足可将假叶打伤。</p>


<a href="">123</a>
<p>
    <img src="images/1.png" alt="">
    <span>gsdaghasdjkghjsa</span>
</p>


</body>
</html>

超链接伪类：

正常情况下，a ， a：hover

 /*默认的颜色*/
        a{
            text-decoration: none;
            color: black;
        }
        /*鼠标悬浮的颜色 (只需要记住：hover)*/
        a:hover{
            color: yellow;
            font-size: 50px;
        }

列表：

/*
ul  li
list-style: none 去掉圆点
            circle  空心圆
            decimal   有序数字
            square  正方形
 */
ul{
    background: gray;
}

ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;

}

背景：

背景颜色 ,背景图片

<style>

        div{
            width: 1000px;
            height: 700px;
            border: 1px solid red;
            background-image: url("images/1.png");
        /*    默认是全部平铺的   repeat */
        }
        .div1{
            background-repeat: repeat-x;

        }
        .div2{
            background-repeat: repeat-y;
        }
        .div3{
            background-repeat: no-repeat;
        }

知友丶

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
美化网页元素

字体样式： <style> body{ font-family: 宋体; color: brown; } h1{ font-s
复制链接

扫一扫

专栏目录