前端学习day02--CSS选择器01

最新推荐文章于 2024-06-15 11:46:27 发布

王壮_

最新推荐文章于 2024-06-15 11:46:27 发布

阅读量39

点赞数

分类专栏：前端文章标签：前端学习 css

本文链接：https://blog.csdn.net/qq_50833617/article/details/131354586

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.选择器01

<!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>
        /* CSS内嵌式 */
        /* 标签选择器 */
        body{
            text-align: center;
        }
        p{
            text-align: center;
            color: brown;
            /* 复合属性 */
            font: italic 700 20px/1.5 宋体;
            font-style: normal;

            background-color: orange;
            width: 400px;
            height: 400px;
            text-indent: 2em;
            line-height: 1.5;
            margin: 0 auto;
           
        }
        h1{
            text-align: center;
        }
        div{
            text-align: center;
            text-decoration: underline;
            text-decoration: line-through;
            text-decoration: overline;
            text-decoration: none;
            margin: 0 auto;
        }
        /* 类选择器 */
        .red{
            /* 层叠性-后面的覆盖前面的 */
            color: rgba(180, 160, 160,0.5);
            color: #d6b81e;
        }
        .size{
            
            font-size: 40px;
            font-weight: 700;
            font-style: italic;
            font-family: 微软雅黑,黑体,sans-serif;
        }
        /* id选择器 不常用*/
        #blackground{
            background-color: brown;
            width: 250px;
            height: 400px;
            /* （文字是单行的）垂直居中-设置行高=自身高度属性值 */
            line-height: 400px;
            
        }
        /* 通配符选择器 */
        *{
            margin: 0;
            padding: 0;
        }


        /* 属性选择器 */
        [class]{
            color: rgba(180, 160, 160,0.5);
            color: #d6b81e;
        }

    </style>
     <!-- CSS外联式 -->
    <link rel="stylesheet" href="./day01.css">
</head>
<body>
    <h1>标题</h1>
    <!-- CSS行内式 -->
    <p style="color: white;">从人类走出地球之后，人类就在不断的探索世界的奥秘，根据科学家的研究我们能够知道，我们的宇宙是一个无边无际的星际空间，在宇宙中存在非常多的天体，我们所看到的恒星、行星、彗星、小行星、中子星等等都是宇宙大爆炸之后产生的天体，现代科学认为我们的宇宙诞生于138亿年前，是奇点大爆炸之后形成的，从宇宙大爆炸之后，我们的宇宙就在不断的膨胀当中，到现在宇宙已经膨胀了138亿年的时间，不过宇宙并没有停止膨胀，它还在加速膨胀，虽然现在人类已经对宇宙有了大概的了解和认知，但是在宇宙中还存在很多我们无法解释的奥秘，下面我们就一起来看看宇宙的5个终极问题，或许人类永远都无法解开！</p>
    <br>
    <div class="red size" id="blackground">哈哈哈哈哈</div>
    <img src="./素材/公告.jpeg" alt="123"      width="400" height="200">
</body>
</html>

2.案例——歌词

<!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>歌词</title>
    <style>
        div{
            width: 400px;
            height: 600px;
            margin: 0 auto;
        }
        h1{
            text-align: center;
        }
        .center{
            text-align: center;
        }
        .color1{
            color: #808080;
        }
        .color2{
            font-weight: 700;
            color: red;
        }
        a{
            text-decoration: none;
        }
        .suojin{
            text-align: center;
            font-family: 黑体;
        }
    </style>
</head>
<body>
    <div>
        <h1>画</h1>
        <p class="center">
            <span class="color1">词：赵雷 曲：赵雷</span>
             <span class="color2">收藏</span>
             <a href="#">分享</a>
        </p>
        <hr>
        <p class="suojin">
            再画个花边的被窝<br>
            画上灶炉与柴火<br>
            我们一起生来一起活<br>
            画一群鸟儿围着我<br>
            再画上绿岭和青坡<br>
            画上宁静与祥和<br>
            雨点儿在稻田上飘落<br>
            画上有你能用手触到的彩虹<br>
            画中有我决定不灭的星空<br>
            画上弯曲无尽平坦的小路<br>
            尽头的人家梦已入<br>
            画上母亲安详的姿势<br>
            还有橡皮能擦去的争执<br>
            画上四季都不愁的粮食<br>
            悠闲的人从没心事<br>
            我没有擦去争吵的橡皮<br>
            只有一支画着孤独的笔<br>
            那夜空的月也不再亮<br>
            只有个忧郁的孩子在唱<br>
            为寂寞的夜空画上一个月亮<br>
        </p>
            
    </div>
</body>
</html>

3.案例_专辑卡片

<!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>专辑</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        body{
            background-color: #f5f5f5;
        }
        .card{
            width: 234px;
            height: 300px;
            background-color: #fff;
            margin: 50px auto;
            padding: 5px;
            text-align: center;
            border-radius: 10px;
            box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.2);
        }
        img{
            width: 160px;
        }
        .title{
            font-size: 14px;
            line-height: 25px;
            font-weight: 700;
        }
        .author{
            color: #ccc;
            font-size: 12px;
            line-height: 30px;
        }
        .time{
            font-size: 14px;
            color:#ffa500;

        }
    </style>
</head>
<body>
    <div class="card"><br>
        <img src="./素材/专辑.jpg" alt="吉姆餐厅"><br><b>
        </b>
        <div class="title">吉姆餐厅</div>
        <div class="author">歌手：赵雷</div>
        <div class="time">发行时间：2014-10-19</div>
    </div>
</body>
</html>