CSS入门(3)

Saltyswordfish

已于 2022-05-20 14:33:27 修改

阅读量140

点赞数

文章标签： html css

于 2022-05-20 14:28:39 首次发布

本文链接：https://blog.csdn.net/Salttswordfish/article/details/124882697

版权

3、美化网页

3.1为什么要美化网页

    1、有效传递页面信息
    2、美化网页、页面漂亮，才能吸引用户
    3、凸显页面的主题
    4、提高用户的1体验

Span标签，重点突出的字，使用Span套起来

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>

欢迎学习<span class="" id="title1">CSS</span>
</body>
</html>

3.2字体样式

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>

<style>
        body{
            font-family: 楷体;
        }
        h1{
            font-size: 50px;
        }
        .p1{
            font-weight: bold;
        }
        #last{
            color: chartreuse;
        }
    </style>
</head>
<body>
<h1>故事介绍</h1>

<p class="p1">
平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。
</p>

<p id="last">
在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。
</p>

</body>
</html>

3.3 文本样式

    1、颜色 color rgb rgba
    2、文本对齐方式 text-align=center
    3、首行缩进 text-index:2em
    4、行高 line-height
    5、装饰 text-decoration

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>

<style>
        /*h1{*/
        /*    color: red;*/
        /*}*/

        /*h1{*/
        /*    color: rgba(0,255,255,0.2);*/
        /*}*/

        /*文本居中，text-align排版居中*/
        /*h1{*/
        /*    text-align: center;*/
        /*}*/

        /*段落首行缩进*/
        /*.p1{*/
        /*    text-indent: 2em;*/
        /*}*/

        /*行高*/
        /*.p2{*/
        /*    background: #7b62ff;*/
        /*    height: 50px;*/
        /*    !*line-height: 50px;*!*/
        /*}*/

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

</style>
</head>
<body>
<p class="l1">123123</p>
<p class="l2">123123</p>
<p class="l3">123123</p>

<p class="p1">
平静安详的元泱境界，每隔333年，各地热血勇士的终极目标。。。。
</p>

<p class="p2" id="last">
在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼。。。。
</p>

</body>
</html>

3.4阴影

3.5超链接伪类

正常情况下: a,a:hover

3.6列表

#nav{
    width: 280px;
    background: #a0a0a0;
}
.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 34px;
    background: red;
    text-align: center;
    background: red url("d.png") 200px no-repeat;

}
/*
    ul li
    list-style:
    none 去掉
    circle 空心圆
    decimol数字
    square 正方形
*/
ul{
    background: #a0a0a0;
}

ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
    background-image: url("r.png");
    background-repeat: no-repeat;
    background-position: 150px 2px;
}
a{
    text-decoration: none;
    font-size: 14px;
    color: #000000;
}
a:hover{
    color: orange;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="nav">
    <h2 class="title">全部商品分类</h2>
    <ul>
        <li><a href="#">图书</a> <a href="#">音像</a>  <a href="#">数字商品</a> </li>
        <li><a href="#">家用电器</a> <a href="#">手机</a>  <a href="#">数码</a> </li>
        <li><a href="#">电脑</a> <a href="#">办公</a>  <a href="#">数字商品</a> </li>
        <li><a href="#">家居</a> <a href="#">家装</a>  <a href="#">厨具</a> </li>
        <li><a href="#">服饰韩帽</a> <a href="#">个人化妆</a>  <a href="#">数字商品</a> </li>
        <li><a href="#">礼品箱包</a> <a href="#">钟表</a>  <a href="#">珠宝</a> </li>
        <li><a href="#">食品饮料</a> <a href="#">保健食品</a>  <a href="#">数字商品</a> </li>
        <li><a href="#">彩票</a> <a href="#">旅行</a>  <a href="#">充值</a> </li>
    </ul>
</div>
</body>
</html>

3.7背景

背景颜色

背景图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 1000px;
            height: 700px;
            border: 1px solid red;
            background-image: url("uu.jpg");
        }
        .div1{
            background-repeat: repeat-x;
        }
        .div2{
            background-repeat: repeat-y;
        }
        .div3{
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>