三、Applied visual design（应用视觉设计）

一、文本属性整理

 

<style>
    h2 {
        /* 文字对齐属性 text-align */
        /* center:居中,left,right:居左居右,justify:文字拉伸铺满一行 */
        text-align: center;
        /* 文字大小写属性 text-transform: uppercase:大写，lowercase:小写，capitalize：首字母大写 */
        text-transform: capitalize;
        font-size: 60px;
        /* 文字厚度 font-weight */
        font-weight: 400;
        /* 文字的行高 line-height */
        line-height: 100px;
        /* 透明度 */
        opacity: 0.5;
    }
</style>

<h2>Test title</h2>
<!-- 验证文本其他tag属性 em:斜体， u: 下划线， strong:加粗强调，s:删除 -->
<p><s>删除</s> <u>下划线</u> <strong>强调</strong></p>
<p><em>字体倾斜</p>
<!-- hr表示下划线 -->
<hr>

 

 

 

二、颜色属性总结

<style>
    /* 使用单词表示颜色 */
    .word-color {
        color: red;
    }
    
    /* 使用hex16进制表示颜色 */
    .hex-color {
        color: #FFFFFF;
    }
    
    /* 使用rgb表示颜色 */
    .rgb-color {
        color: rgb(0,0,0);
    }
    
    /* 使用rgba表示颜色+透明度 */
    .rgba-background-color {
        background-color: rgb(255,0,0,0.5)
    }
    
    /* 渐变色 linear-gradient,颜色数量自定义 */
    .yellow-white-blue {
        background: linear-gradient(30deg, yellow, rgb(255,255,255), #0000ff);
    }
    
    /* 重复渐变 repeating-linear-gradient*/
    .repeat-color{
        border-radius: 20px;
        width: 70%;
        height: 400px;
        margin:  50 auto;
        background: repeating-linear-gradient(
            90deg,
            yellow 0px,
            blue 40px,
            green 40px,
            red 80px
        );
    }
    
    div {
        width: 200px;
        height: 200px;
    }

</style>

<div class="rgba-background-color">
    <p class="rgb-color">颜色测试</p>
</div>
<div class="yellow-white-blue"></div>
<div class="repeat-color"></div>