CSS(2)
2022-03-06 18:03:18

1.美化网页元素

  1.1 为什么要美化网页

    • 有效的传递页面信息

    • 美化页面,页面漂亮,才能吸引用户

    • 凸显页面的主题

    • 提高用户的体验

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>span</title>
    <style>
        #one{
            font-family: 华文楷体;
            font-size: 50px;
            color: aqua;
        }
    </style>
</head>
<body>
    <h1>努力学习<span id="one">Java</span></h1>
</body>
</html>

  1.2 字体样式

    • font-family:   字体

    • font-size:     字体大小

    • font-weight:   字体粗细

    • color:         字体颜色

  1.3 文本样式

    • 颜色       color  单词 RGB 0~F  RGBA A:0~1

    • 文本对齐的方式   text-align:center 排版,居中 

    • 首行缩进     text-indent:2em 段落首行缩进

    • 行高   line-height:300px  行高,和块的高度一致,就可以上下居中

    • 装饰   text-decoration:none 去掉下划线

    • 文本图片水平对齐: vertical:align:middle

  1.4超链接伪类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a{
            text-decoration: none;
            color: black;
            font-size: 20px;
        }
        /*鼠标悬浮的状态*/
        a:hover{
            color: orange;
        }
        /*鼠标按住未释放的状态*/
        a:active{
            color: green;
        }
        p{
            text-align: center;
        }
    </style>
</head>
<body>
    <p>
        <a href="#">
            <img src="img/R-C.jpg" alt="">
        </a>
    </p>
    <p>
        <a href="#">穷民饱食</a>
    </p>
    <p>
        <a href="#">斋藤茂男</a>
    </p>
    <p>
        ¥25
    </p>
</body>
</html>

  1.6列表

/*
    ul li
    none:去掉原点
    circle 空心圆
    decimal 数字
*/
ul{
    background: #a0a0a0;
}
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
}

  1.7 背景

    背景颜色

    背景图片

       div{
            width: 1000px;
            height: 700px;
            border: 1px solid red;
            /*默认是全铺的*/
            background-image: url("imgs/OIP-C.jpg");
            background-repeat: no-repeat;
        }

    背景图片位置

/* 颜色 ,图片,图片位置,平铺方式 */
background: red url("../images/d.gif") 270px 10px no-repeat
background-position:236px 2px

 1.8渐变  Grabient

    body{
            background-color: #FBDA61;
            background-image: linear-gradient(45deg, #FBDA61 0%, #FF5ACD 100%);
        }

 

本文摘自 :https://www.cnblogs.com/lj888/p/15972657.html


更多科技新闻 ......