CSS(二)

时间:2021-10-11
本文章向大家介绍CSS(二),主要包括CSS(二)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

美化网页元素

为什么要美化网页

1.有效传递页面信息
2.美化网页,吸引用户
3.凸显页面主题
4.提高用户体验

span标签:重点要突出的字使用span标签套起来

<head>
    <style>
        span[id="mainTitle"]{
            font-size: 50px;
        }
    </style>
</head>
<body>
欢迎学习 <span id="mainTitle">CSS</span>
</body>

文本美化

字体样式

p{
    font-family: 黑体;
    font-size: 30px;
    color: cadetblue;
    font-weight: normal;
    font: oblique bolder 12px "楷体";
}

文本样式

1.颜色
2.对齐方式
3.首行缩进
4.行高
5.下划线

/*颜色
      单词
      RGB 0~F
      RGBA A:0~1
*/
h1{
    color: rgba(0,255,255,0.5);
    text-align: center; /*文本对齐方式*/
}
span{
    text-indent: 2em; /*首行缩进两个字母*/
    height: 300px; /*撑开文本框*/
    line-height: 50px; /*设置行高,行高和文本框高度一致可以上下居中*/
}
/*下划线,中划线,上划线,去下划线*/
.l1{
    text-decoration: underline;
}
.l2{
    text-decoration: line-through;
}
.l3{
    text-decoration: overline;
}
a{
    text-decoration: none;
}

文本和图片同行居中

/*
水平对齐:参照物 a,b
*/
p,img{
    vertical-align: middle;
}
<p>
    请问
    <img src="images/1.png" alt="图片">
    是谁?
</p>

超链接和阴影

a{
    text-decoration: none;
    color: cornflowerblue;
}
/*鼠标悬浮*/
a:hover{
    color: indianred;
    font-size: 20px;
}
/*鼠标按住未释放*/
a:active{
    color: cadetblue;
}
p{
    text-indent: 8em;
    /*阴影:颜色,水平距离,垂直距离,模糊程度*/
    text-shadow: cornflowerblue 7px 0px 5px;
}

列表

CSS样式

#nav{
    width: 300px;
}
.title{
    font-size: 30px;
    font-weight: bolder;
    text-indent: 1em;
    height: 30px;
    line-height: 30px;
    color: aliceblue;
    background: blue;
}
ul{
    background: gray;
}
ul li{
    height: 30px;
    list-style: none; /*设置表头标记*/
    text-indent: 1em;
}

a{
    text-decoration: none;
    font-size: 15px;
    color: blue;
}
a:hover{
    color: orange;
    text-decoration: underline;
}

html骨骼

<body>
<div id="nav">
    <h2 class="title">全部商品分类</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></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></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></li>
        <li><a href="#">影票</a>&nbsp;&nbsp;<a href="#">旅行像</a>&nbsp;&nbsp;<a href="#">充值</a><a href="#">票务</a></li>
    </ul>
</div>
</body>

背景

<style>
    div{
        width: 1920px;
        height: 1080px;
        border: 1px solid darkred;
        background-image: url("images/1.jpg");
    }
    .div1{
        background-repeat: no-repeat;
    }
</style>

渐变

https://www.grabient.com/

<style>
body{
    background-color: #0093E9;
    background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
}
</style>

原文地址:https://www.cnblogs.com/guanyannan/p/15391403.html