• CSS : color and unit


    Color:

     CSS中定义颜色使用十六进制(hex)表示法为红,绿,蓝的颜色值结合。可以是最低值是0(十六进制00)到最高值是

    255(十六进制FF)。3个双位数字的十六进制值写法,以#符号开始部分颜色表示。甚至还可以用颜色名称来直接表示一些

    常见的颜色(yellow,pink,blue...)。

      

      部分颜色表示示例:

           

    eg:

    <html>
    <head>
    <meta charset="utf-8"> 
    <title>color</title> 
    </head>
    
    <body>
    
    <p style="background-color:#FFFF00">
    16进制表示
    </p>
    
    <p style="background-color:rgb(255,255,0)">
    RGB表示
    </p>
    
    <p style="background-color:yellow">
    颜色名称表示
    </p>

    结果显示:

      


    Unit: 

      CSS有几个不同的单位用于表示长度,其中较为常见的便是px和fr:

    Px:

      px 像素(Pixel)。相对长度单位。像素 px 是相对于显示器屏幕分辨率而言的。

    eg:

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4 <meta charset="utf-8">
     5 <title>px</title>
     6 <style>
     7     h1 {font-size: 50px;}
     8     h2 {font-size: 30px;}
     9 </style>
    10 </head>
    11 <body>
    12     <h1>标题1</h1>
    13     <h2>标题2</h2>
    14 </body>
    15 </html>

    结果显示:

      

    fr:

      fr 单位是一个自适应单位,fr单位被用于在一系列长度值中分配剩余空间,如果多个已指定了多个部分,则剩下的空间根据各自的数字按比例分配。

      (通常用在布局上)

     eg:

    1 <div id="grid">
    2     <div id="title">Site Logo</div>
    3     <div id="score">Slogan</div>
    4     <div id="stats">User Zone</div>
    5     <div id="message">Message</div>
    6 </div>
     1 #grid {
     2     display: grid;
     3     width: 100%;
     4     grid-template-columns: 100px 1fr max-content minmax(min-content, 1fr);
     5 }
     6 #title {
     7     background-color: lime;
     8 }
     9 #score {
    10     background-color: yellow;
    11 }
    12 #stats {
    13     background-color: lime;
    14 }
    15 #message {
    16     background-color: orange;
    17 }
    18 div {
    19     height: 80px;
    20     line-height: 80px;
    21     text-align: center;
    22 }

    结果显示:

      

        

  • 相关阅读:
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    白盒,单元测试
    向数据库添加100W 条数据 性能测试
    软件测试
    软件需求工程-产品经理该如何更好地记录反馈、捕捉需求?
    Spring,Spring MVC,MyBatis,Hibernate总结
    Java基础总结
    Java8新特性_四大内置核心函数式接口
    Lambda表达式及相关练习
    Java 8新特性(Lambda,Stream API)
  • 原文地址:https://www.cnblogs.com/chenzhihong294/p/10014898.html
Copyright © 2020-2023  润新知