【前端】CSS3学习笔记(二)——美化网页元素

✨课程链接

【狂神说Java】CSS3最新教程快速入门通俗易懂_哔哩哔哩_bilibili


✨学习笔记

span标签

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

    <style>
        #title1{
            font-size: 30px;
            color: red;
        }
    </style>

<body>

    普通内容<span id="title1">被凸显的内容</span>

</body>
</html>

字体样式

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

    <!-- font-family 字体
        font-size 字体大小
        font-weight 字体粗细
        color 字体颜色

     -->

    <style>
        body{
            font-family: "Arial Black","楷体";
            color: gray;
        }
        h1{
            font-size: 50px;
            font-size: 2em;
        }
        .p1{
            font-weight: bolder;
            /* font-weight: lighter; */
        }
    </style>

</head>
<body>
<h1>CSS</h1>
<p class="p1">层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。</p>
<p>CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。</p>

<p>Stray birds of summer come to my window to sing and fly away. And yellow leaves of autumn, which have no songs, flutter and fall there with a sigh.</p>

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

    <!-- 字体风格 -->
    <style>
        p{
            font:oblique lighter 30px "楷体";
        }
    </style>
</head>
<body>
    <p>CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。</p>

</body>
</html>

文本样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>


    <!-- 颜色:
        单词
        RGB 0~F 
            #000000
            #FF0000 红
            #00FF00 绿
            #0000FF 蓝
            #FFFFFF
            rgb(0,255,255)
        RGBA
            a 0~1

    text-align: center 排版(文本居中)

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

    行高 和 块 高度一致 单行文字上下居中
    height: 100px;
    line-height: 100px;
    -->

    <style>
        h1{
            /* color:#0000FF; */
            color: rgba(0,255,255,0.5);
            text-align: center;
        }
        .p1{
            text-indent: 2em;
        }
        .p3{
            background: cornsilk;
            height: 100px;
            line-height: 100px;
        }
        /* 下划线 */
        .l1{
            text-decoration: underline;
        }
        /* 中划线 */
        .l2{
            text-decoration: line-through;
        }
        /* 上划线 */
        .l3{
            text-decoration: overline;
        }
        /* 超链接去下划线 */
        a{
            text-decoration: none;
        }
        /* 文本图片水平对齐 */
        img,span{
            vertical-align: middle;
        }
    </style>

</head>
<body>
    <a href="">去掉下划线</a>

    <p class="l1">111</p>
    <p class="l2">111</p>
    <p class="l3">111</p>

    <h1>CSS</h1>
    <p class="p1">层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。</p>
    <p>CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。</p>
    <p class="p3">Stray birds of summer come to my window to sing and fly away. And yellow leaves of autumn, which have no songs, flutter and fall there with a sigh.</p>
    <br>
    <hr>
    <br>
    <p>
        <img src="images/demo.png" alt="">
        <span>被居中的字体</span>
    </p>

</body>
</html>

超链接伪类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>

        /* 默认颜色 */
        a{
            text-decoration: none;
            color: black;
        }
        
        /* 选择所有未被访问的链接 */
        a:link{
            color: brown;
        }
        /* 选择所有已访问的链接 */
        a:visited{
            color: red;
        }
        /* 选择鼠标悬停其上的链接 (需要记住)*/
        a:hover{
            color: orange;
            font-size: 20px;
        }
        /* 选择活动的链接 */
        a:active{
            color: green;
        }
        /* 水平阴影 垂直阴影 模糊的距离 阴影的颜色 */
        #price{
            text-shadow: 10px -5px 2px blue;
        }
    </style>

</head>
<body>
    <a href="#">
        <img src="images/demo.jpg" alt="">
    </a>
    <p>
        <a href="#">码出高效:Java开发手册</a>
    </p>
    <p>
        <a href="">作者:孤尽</a>
    </p>
    <p id="price">
        ¥99.00
    </p>
</body>
</html>

列表

#nav{
    width: 300px;
    background: gray;
}

.title{
    font-size: 20px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    /*颜色 图片 图片位置 平铺方式*/
    background: red url("../images/箭头-向下.png") 260px no-repeat;
}

/* list-style
none 去掉原点
circle 空心圆
decimal 数字
square 正方形 */

ul{
    background: gray;
}

ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
    background-image: url("../images/箭头-向右.png");
    background-repeat: no-repeat;
    background-position: 220px 2px;
}

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">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link href="css/style.css" rel="stylesheet" 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></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>&nbsp;&nbsp;<a href="#">票务</a></li>
        </ul>
    </div>

</body>
</html>

背景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div{
            width: 1000px;
            height: 700px;
            border: 1px solid red;
            /* 默认全部平铺 */
            background-image: url("images/demo.png");
        }
        .div1{
            background-repeat: repeat-x;
        }
        .div2{
            background-repeat: repeat-y;
        }
        .div3{
            background-repeat: no-repeat;
        }
    </style>

</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
</body>
</html>

渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 径向渐变 圆形渐变 -->
    <!-- https://www.grabient.com/ -->
    <style>
        body{
            /*background-color: #4158D0;*/
            /*background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);*/

            background-color: #0093E9;
            background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);

        }
    </style>

</head>
<body>
    
</body>
</html>

⭐转载请注明出处

本文作者:双份浓缩馥芮白

原文链接:https://www.cnblogs.com/Flat-White/p/14966632.html

版权所有,如需转载请注明出处。

posted @ 2021-07-03 16:17  双份浓缩馥芮白  阅读(115)  评论(0编辑  收藏  举报