CSS——美化网页元素(字体样式,文本样式,阴影,超链接伪类,列表,背景,渐变)

  1. 为什么要美化网页
    1.1有效的传递页面信息
    1.2美化网页,页面漂亮,才能吸引用户
    1.3凸显页面主题
    1.4提高用户体验

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">css</span>


</body>
</html>

在这里插入图片描述

  1. 字体样式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            font-family: Algerian,幼圆;
            color: #be5959;
            }
        h1{
        font-size: 50px; /*除了还可以写em*/
          }
        .p1{
        font-weight: bold;
           }


    </style>



    </head>
<body>
<h1>简介</h1>
<p class="p1">亚洲较大的网上交易平台,提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品,</p>
<p>同时提供担保交易(先收货后付款)等安全交易保障服务,并由商家提供退货承诺、破损补寄等消费</p>
<p>My name is pipi</p>

</body>
</html>

在这里插入图片描述





<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            font-family: Algerian,幼圆;
            color: #be5959;
            }
        h1{
        font-size: 50px; /*除了还可以写em*/
          }
        .p1{
        font-weight: bold;
           }


    </style>



    </head>
<body>
<h1>简介</h1>
<p class="p1">亚洲较大的网上交易平台,提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品,</p>
<p>同时提供担保交易(先收货后付款)等安全交易保障服务,并由商家提供退货承诺、破损补寄等消费</p>
<p>My name is pipi</p>

</body>
</html>

在这里插入图片描述

  1. 文本样式
    3.1颜色
    3.2文本对齐方式
    3.3首行缩进
    3.4行高
    3.5装饰
    3.6文本图片水平对齐
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--截图
CTRL alt a
或者
win shift s
-->

<!--    颜色:
        单词表示
        RGB表示
        a表示透明度
        text-align:
        居中居左居右
        text-indent:首行缩进
        line-height:行高
-->
    <style>
        h1{
            color: rgba(0,255,255,0.8);
            text-align: center;
        }

        .p1{
            text-indent: 2em;
        }

        .p3{
            background: #a789be;
            height: 300px;
            line-height: 300px;/*行高和高度一样的话就可以上下居中*/
        }
        .pp2{
            text-decoration:underline ;/*下划线*/
        }
        .pp3{
            text-decoration: overline;/*上划线*/
        }
        .pp4{
            text-decoration: line-through;/*中划线*/
        }

        a{
            text-decoration: none;    /*a标签默认有下划线,去掉用none*/
        }
        
    </style>

</head>
<body>

<a href="">12321</a>

<p class="pp1">123314254</p>  <!-- class 命名不要用数字开头-->
<p class="pp2">123314254</p>
<p class="pp3">123314254</p>
<p class="pp4">123314254</p>

<h1>简介</h1>
<p class="p1">亚洲较大的网上交易平台,提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品,</p>
<p>同时提供担保交易(先收货后付款)等安全交易保障服务,并由商家提供退货承诺、破损补寄等消费</p>
<p class="p3">My name is pipi</p>


</body>
</html>

在这里插入图片描述

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


<!--    水平对齐应该有参照物:a,b-->
    <style>
        img,span{
            vertical-align: middle;/*center是水平概念,middle是上中下概念*/
        }
    </style>

</head>
<body>


<p>
    <img src="image/dog.jpg" alt="">
    <span>随便整点文字活</span>
</p>

</body>
</html>

在这里插入图片描述

  1. 阴影与超链接伪类
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*默认的颜色*/
        a{
            text-decoration: none;
            color: black;
        }
        /*鼠标悬浮颜色*/
        a:hover{
            color: orange;
        }
        /*鼠标单击没有释放时*/
        a:active{
            color: green;
            font-size: 20px;
        }
        /*访问后的颜色*/
        a:visited{
            color: #871aa5;
        }
        /*未访问的链接*/
        a:link{
            color: yellow;
        }
        /*阴影:
        第一个length表示的是阴影离开文字的横向距离;

        第二个length表示的是阴影离开文字的纵向的距离;

        第三个length表示的是阴影模糊半径;

        color表示的是阴影的颜色。
        */
        #price{
            text-shadow: 10px 10px 2px blue ;
        }
    </style>


</head>
<body>

<a href="">
    <img src="images/book.png" alt="">
</a>
<p>
    <a href="https://book.douban.com/subject/30333948/">码出高效:Java开发手册</a>
</p>
<p>
    <a href="">作者:孤尽老师</a>
</p>
<p id="price">
    ¥99
</p>

</body>
</html>

在这里插入图片描述

  1. 列表
#nav{
    width: 300px;
    /* height: 300px; */
    background: #a789be;
}




.title1{
    font-size: 20px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 38px;
    background: red;
}
/*ul li*/
ul{
    /*background: #a789be;*/
}
ul li{
    line-height: 30px;
    list-style: none; /*circle空心圆,none什么都没有,square正方形,decimal有序列表*/
    text-indent: 1em;
}

a{
    text-decoration: none;
    font-size: 14px;
    color: black;
}

a:hover{
    color: orange;
    text-decoration: underline;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<div id="nav">
    <h2 class="title1">全部商品分类</h2>
    <ul>
        <li >
            <a href="#">男装</a>&nbsp;&nbsp;<a href="#">男装</a>&nbsp;&nbsp;<a href="#">男装</a>
        </li>
        <li >
            <a href="#">男装</a>&nbsp;&nbsp;<a href="#">男装</a>&nbsp;&nbsp;<a href="#">男装</a>
        </li>
        <li >
            <a href="#">男装</a>&nbsp;&nbsp;<a href="#">男装</a>&nbsp;&nbsp;<a href="#">男装</a>
        </li>
        <li >
            <a href="#">男装</a>&nbsp;&nbsp;<a href="#">男装</a>&nbsp;&nbsp;<a href="#">男装</a>
        </li>
        <li >
            <a href="#">男装</a>&nbsp;&nbsp;<a href="#">男装</a>&nbsp;&nbsp;<a href="#">男装</a>
        </li>
        <li >
            <a href="#">男装</a>&nbsp;&nbsp;<a href="#">男装</a>&nbsp;&nbsp;<a href="#">男装</a>
        </li>
        <li >
            <a href="#">男装</a>&nbsp;&nbsp;<a href="#">男装</a>&nbsp;&nbsp;<a href="#">男装</a>
        </li>
        <li >
            <a href="#">男装</a>&nbsp;&nbsp;<a href="#">男装</a>&nbsp;&nbsp;<a href="#">男装</a>
        </li>
    </ul>
</div>


</body>
</html>

在这里插入图片描述

  1. 背景
    背景颜色
    背景图片
    <style>
        div{
            width: 1000px;
            height: 700px;
            border: 1px solid red;/*宽度,实线,颜色*/
            background-image: url("image/dog.jpg");/*默认全部是平铺的,即repeat*/
        }
        .div1{
            background-repeat: repeat-x;/*水平平铺*/
        }
        .div2{
            background-repeat: repeat-y;/*垂直平铺*/
        }
        .div3{
            background-repeat: no-repeat;/*不平铺*/
        }
    </style>

在这里插入图片描述

#nav{
    width: 300px;
    /* height: 300px; */
    background: #a789be;
}




.title1{
    font-size: 20px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 38px;
    /*颜色 图片 图片位置 平铺方式*/
    background: red url("../images/down.png") 270px 8px no-repeat;
}
/*ul li*/
ul{
    /*background: #a789be;*/
}
ul li{
    line-height: 30px;
    list-style: none; /*circle空心圆,none什么都没有,square正方形,decimal有序列表*/
    text-indent: 1em;
    background: #a789be url("../images/right.png") 230px 0px no-repeat;
}

a{
    text-decoration: none;
    font-size: 14px;
    color: black;
}

a:hover{
    color: orange;
    text-decoration: underline;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<div id="nav">
    <h2 class="title1">全部商品分类</h2>
    <ul>
        <li >
            <a href="#">男装</a>&nbsp;&nbsp;<a href="#">男装</a>&nbsp;&nbsp;<a href="#">男装</a>
        </li>
        <li >
            <a href="#">男装</a>&nbsp;&nbsp;<a href="#">男装</a>&nbsp;&nbsp;<a href="#">男装</a>
        </li>
        <li >
            <a href="#">男装</a>&nbsp;&nbsp;<a href="#">男装</a>&nbsp;&nbsp;<a href="#">男装</a>
        </li>
        <li >
            <a href="#">男装</a>&nbsp;&nbsp;<a href="#">男装</a>&nbsp;&nbsp;<a href="#">男装</a>
        </li>
        <li >
            <a href="#">男装</a>&nbsp;&nbsp;<a href="#">男装</a>&nbsp;&nbsp;<a href="#">男装</a>
        </li>
        <li >
            <a href="#">男装</a>&nbsp;&nbsp;<a href="#">男装</a>&nbsp;&nbsp;<a href="#">男装</a>
        </li>
        <li >
            <a href="#">男装</a>&nbsp;&nbsp;<a href="#">男装</a>&nbsp;&nbsp;<a href="#">男装</a>
        </li>
        <li >
            <a href="#">男装</a>&nbsp;&nbsp;<a href="#">男装</a>&nbsp;&nbsp;<a href="#">男装</a>
        </li>
    </ul>
</div>


</body>
</html>

在这里插入图片描述

  1. 渐变
    渐变css代码网址
    <style>
        body{
            /*background-color: #4158D0;*/
            background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
        }
    </style>

在这里插入图片描述

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值