【CSS—美化网页元素】

modest5

于 2022-07-21 15:09:03 发布

阅读量420

点赞数 1

文章标签： css 前端 html

本文链接：https://blog.csdn.net/modest5/article/details/125890355

版权

1. 字体样式

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>

几个常用的字体样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    font-family 字体
    color:字体颜色
    font-size:字体大小
    font-weight:字体粗细
    -->
    <style>
        body{
            font-family: 华文楷体;
            color: chartreuse;
        }
        h1{
            font-size: 50px;
        }
        p{
            font-weight: bold;
        }
    </style>
</head>
<body>
<h1>最伟大的作品</h1>

<p>哥穿着复古西装 <br/>
    拿着手杖弹着魔法乐章 <br/>
</p>
</body>
</html>

2. 文本样式

颜色 color rgb rfba
文本对齐的方式 text-algin =center
首行缩进 text-indent=2em
行高 hieght=line-hieght
装饰 text-decoration
文本图片水平对齐 vertical-align:middle

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    颜色： RGB  RGBA
    text-align: center   排版：居中 左右居中
    text-indent: 2em;    段落首行缩进2个字符
    行高 height 和 快高 line-height 相等时实现上下居中
    -->
    <style>
        h1{
            color: rgba(0,255,255,0.8);
            text-align: center;
        }
        .p1{
            text-indent: 2em;
            background: darkgoldenrod;
            height: 20px;
            line-height: 20px;
        }
        .l1{
            /*上划线*/
            text-decoration: underline;
        }
        .l2{
           /* 中划线*/
            text-decoration: line-through;
        }
        .l3{
            /* 下划线*/
            text-decoration: overline;
        }
        /*水平对齐 参照物 a b*/
        img span{
            vertical-align: middle;
        }
        .l1{
            /*去下划线*/
            text-decoration: none;
        }
    </style>
</head>
<body>
<h1>大山的女儿</h1>
<p class="l1">杨蓉</p>
<p class="l2">杨蓉</p>
<p class="l3">杨蓉</p>
<p class="p1">
    北师大硕士毕业的黄文秀（杨蓉饰）主动放弃大城市的工作机会，
    回到生她养她的家乡，在百色市委宣传部任职，2018年3月，
    她主动请缨到广西最贫困的一个小山村百坭村任第一书记，
    白天她走村串户遍访贫困户，分析致贫原因，晚上与“村两委”研究脱贫对策，
    制定工作方案并全力推进。黄文秀克服困难、不懈努力，在一年多时间内让88户贫困户顺利脱贫。
    然而一场暴雨，却将黄文秀年轻的生命永远定格在了扶贫路上。
    虽然黄文秀牺牲了，但是扶贫并没有结束，其他人接过黄文秀的接力棒，
    努力使百坭村实现了全村脱贫。而之后，黄文秀为百坭村设计的愿景也一一实现，一个幸福的百坭村逐渐呈现在世人眼前
</p>
<p>
    <img src="img/a.png" alt="">
    <span><名字></名字></span>
</p>
</body>
</html>

3.文本阴影和超链接伪类

正常情况下: 重要记住 a、a:hover

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a{
            text-decoration: none;
            color: darkgoldenrod;
        }
    /*    鼠标悬浮的状态（只需要记住：hover）*/
        a:hover{
            color: aqua;
            font-size: 30px;
        }
    /*    按住鼠标未释放的状态*/
        a:active{
            color: blueviolet;
        }
    /*    text-shadow:阴影的颜色 水平偏移 垂直偏移 阴影半径*/
        #price{
            text-shadow: grey 10px 10px 3px;
        }
    </style>
</head>
<body>
<a href="#">
    <img src="../img/1.jpeg" alt="" height="100px" width="80px">
</a>
<p>
    <a href="#">我们为什么摆脱不了贫穷</a>
</p>
<p>
    <a href="">作者：Ablijit V.Banejee</a>
</p>
<p id="price">
    ￥26
</p>
</body>
</html>

4. 列表样式练习

<!DOCTYPE html>
<html lang="en">
<head lang="en">
    <meta charset="UTF-8">
    <title>列表样式</title>
    <link rel="stylesheet" href="style.css" type="text/css">
</head>
<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>&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>

/*设置块的大小*/
#nav{
    width: 300px;
    background: antiquewhite;
}
.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 2em;
    line-height: 35px;
    background: red;
}
/*list-style:
    none: 无圆点
    circle：空心圆
    decimal 数字
    square 方形
*/
ul li{
    /*去列表的圆点*/
    list-style: none;
    text-indent: 1em;
    line-height: 25px;
}
a{
    color: gray;
    /*去下划线*/
    text-decoration: none;
}
a:hover{
    color: coral;
}

5. 背景图像应用及渐变

背景颜色
背景图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 500px;
            height: 400px;
            border: grey;
            /*默认重复*/
            background-image: url("../img/1.jpeg")  ;
        }
        .div1{
            /*横向重复*/
            background-repeat: repeat-x;
        }
        .div2{
            /*纵向重复*/
            background-repeat: repeat-y;
        }
        .div3{
            /*不重复*/
            background-repeat: no-repeat;
        }
        .div4{
        /*    渐变背景色  在grabient网站调出想要的颜色 复制粘贴*/
            background-color: #4158D0;
            background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
        }
    </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</body>
</html>

6. 盒子模型及边框使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h2,body{
            margin: 0;
            padding: 0;
        }
        /*border 粗细 样式 颜色*/
        #box{
            width: 270px;
            border: 2px solid grey;
            /*盒子的妙用 居中*/
            margin: 0 auto;
        }
        h2{
            font-size: 20px;
            text-align: center;
            background-color: antiquewhite;
        }
        form{
            background-color: antiquewhite;
        }
        div:nth-of-type(1)>input{
            border: 2px solid mediumslateblue;
        }
        div:nth-of-type(3)>button {
            background-color: coral;
            position: relative;
            left: 100px;
            top: 2px;
        }
    </style>
</head>
<body>
<div id="box">
    <h2>用户登录</h2>
    <form action="#">
        <div>
            <span>用户名：</span>
            <input type="text" placeholder="邮箱或者电话">
        </div>
        <div>
            <span>密&nbsp;&nbsp;&nbsp;码：</span>
            <input type="password" >
        </div>
        <div>
            <button>登录</button>
        </div>
    </form>
</div>
</body>
</html>