CSS学习笔记02颜色的表达方式文本属性 line-height行高一个练习

53 阅读 0 评论 35 点赞

我是靠谱客的博主迷你抽屉，最近开发中收集的这篇文章主要介绍CSS学习笔记02颜色的表达方式文本属性 line-height行高一个练习，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

颜色的表达方式

英文

十六进制

rgb

设置透明度

文本属性

缩进

水平对齐方式

文本装饰

line-height行高

一个练习

颜色的表达方式

英文

十六进制

rgb

设置透明度

<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{
        /* 1.英文 */
        color:green;

     }

     .b{
         /* 2.十六进制表示 0-9 a-f #+六位数 是实际开发中用的 */
        color:#ed34af;
     }

     .c{
         /* 3.rgb表示，取值范围是0-255 rgb(red,green,blue) */
         /* 注意有括号的时候用逗号隔开，没有的时候用空格 */
         /* color:rgb(180%, 84%, 204%); 注意，要么都加百分号，要么都不加百分号*/
         color:rgb(180, 84, 204);
     }

     .d{

        /* 1.完全透明 */
        /* color:transparent; */

        /* 2.rgba 表示颜色透明（文字） 最后一个值表示透明度，取值范围0-1  0.5=.5 */
        /* color:rgba(0, 0, 0, 0.5); */
    
        /* 3.opacity 设置整体的透明度，包括了字和背景，取值范围0-1 */
        opacity: 0.5;
        background-color: aqua;
     }

    </style>
</head>
<body>
    <p class="a">我是一个有颜色的字(英文)</p>
    <p class="b">我是一个有颜色的字(十六进制)</p>
    <p class="c">我是一个有颜色的字(rgb)</p>
    <p class="d">透明</p>
</body>

文本属性

缩进

水平对齐方式

文本装饰

<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>
</head>
<style>
    p{
        /* 首行缩进：单位em(一个字的宽度) */
        text-indent:2em;
    }

    table{
        border:1px solid black;
        /* width: 300px; */
    }

    td{
        /* text-align 文本水平对齐方式 left center right */
        border:1px solid black;
        text-align:center;
    }

    a{ 

        /* text-decoration: none 去掉文本的装饰 */
        /* text-decoration: none; */

        text-decoration: line-through;
        /* text-decoration: overline;
        text-decoration: underline; */
    }
</style>
<body>
    
    <p>
        能够破碎的人，必定真正活过。林黛玉的破碎，在于她有刻骨铭心的爱情;
        三毛的破碎，源于她历经沧桑后一刹那的明彻与超脱;凡高的破碎，是太阳用黄金的刀子让他在光明中不断剧痛，
        贝多芬的破碎，则是灵性至极的黑白键撞击生命的悲壮乐章。如果说那些平凡者的破碎泄漏的是人性最纯最美的光点，
        那么这些优秀的灵魂的破碎则如银色的梨花开满了我们头顶的天空。
    </p>

    <table>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
    </table>
    <br>

    <a href="#">文本的装饰</a>
</body>

line-height行高

<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>
     p{
        background-color: plum;
        /* 让文本垂直方向上居中对齐，让行高等于盒子高度 */

        /* height: 盒子高度; */
        height:50px;
        /* line-height:行高 */
        line-height: 50px;

        /* text-align: center 文字在中间 */
        text-align: center;
     }

    </style>
</head>
<body>

    <p>
        纵有疾风起，人生不言弃
    </p>
</body>

一个练习

<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{
            color:gray;
            text-decoration: none;
        }
    

        .b{
            text-decoration: none;
        }
         
        /* 段与段之间距离较大用line-height（行高）设置 */
        .c{
            text-indent: 2em;
            line-height: 24px;
        }

        /* .d{
            height: 56px;
            line-height: 56px;
        } */


        /* 文字在图片中间位置 */
        img{
            vertical-align: middle;
        }

        .table1{
            /* border: 1px solid;看下表格具体位置 */
            /* border: 1px solid; */
            width:100%;
        }

        .e{

          /* border: 1px solid;看下表格具体位置 */
            /* border: 1px solid; */
            text-align: right;
        }

        /* 注意标签选择器前面不用加点 */
         span{
            color:grey
         }

    </style>
</head>
<body>
    <!-- 或者 <a class="a b" href="#"></a> 选择两个class -->
    <a class="a" href="#">网易首页</a>&lt;<a class="b" href="#">网易科技</a>&lt;<a class="b" href="#">网易科技</a>&lt;<a class="a" href="#">正文</a>
    <h2>追随马斯克脚步？甲骨文将总部从加州搬至得州</h2>

    <table class="table1">
        <tr>
            <td><span>2020-12-12 09:55:05 来源：网易科技报道</span></td>
            <td class="e"><span>举报</span></td>
        </tr>
    </table>
   
   <hr>

    <!-- 将他们装进table中一同居于右侧 -->
    <table align="right">
       <tr>
        <td class="d">
            <img src="../樱花雪山.jpg" width="60px" alt="">微信 
        </td>
        <td class="d">
            <img src="../微信图片_20220416172523.png" width="60">微博
        </td>

        <td class="d">
            <img src="../微信图片_20220419200310.png" width="60">更多
        </td>
       </tr>

    </table>
    
    <br>
    <br>
    <p class="c">
        12月12日，<a href="#">美国</a>当地时间周五，<a href="#">甲骨文</a>公司宣布，
        该公司已将总部从美国加州硅谷迁至<a href="#">得克萨斯州</a>奥斯汀，
        以便让员工在工作地点选择方面获得更大灵活性。

    </p>

    <p class="c">
        在监管申报文件中，甲骨文表示：“从红木城搬到奥斯汀意味着，我们的员工可以更灵活的选择办公地点，
        他们可以继续在家兼职或全职工作。此外，甲骨文将继续支持其在加州圣莫尼卡、华盛顿州西雅图、科罗拉多州丹佛、
        佛罗里达州奥兰多和马萨诸塞州伯灵顿等其他美国办公地点。通过支持更现代化的工作方式，我们希望进一步提高员工的生活质
        量和工作效率。”
    </p>

    <p class="c">
        新冠肺炎疫情暴发促使许多公司为员工提供灵活的工作安排，包括允许在家工作。
        甲骨文表示，截至5月底，该公司拥有13.5万名员工。由于担心加州的税率和高生活成本，
        以及某些地区的通勤问题，许多公司、高管和员工正在离开加州。
    </p>
</body>