zoukankan      html  css  js  c++  java
  • 样式与长度颜色

    样式与长度颜色

    1、基本样式

    <head>
       <style>
           div {
                100px;
               height: 100px;
               background-color: red;
          }
       </style>
    </head>

    2、长度

    • px:像素(pixel),屏幕上显示的最小单位,用于网页设计,直观方便

    • mm:毫米

    • cm:厘米

    • in:英寸

    • pt:点(point),一个标准的长度单位,1pt=1/72in,用于印刷业,非常简单易用;

    • em:相当长度,通常1em=16px,应用于流式布局

    3、颜色

    • rgb():三个值可为[0-255]数值或百分比,以,相隔(r:Red g:Green b:Blue)

    • rgba():前三个值可为像素或是百分比,最后一个为[0, 1]数值,以,相隔(r:Red g:Green b:Blue a:Alpha)

    • hsl():第一个值为[0,360]数值,后二个值可为百分比,以,相隔(h:Hue s:Saturation l:Lightness)

    • hsla():第一个值为[0,360]数值,中间二个值可为百分比,最后一个为[0, 1]数值,以,相隔(h:Hue s:Saturation l:Lightness a:Alpha)

    • #AABBCC:六个十六进制位,每两位一整体,分别代表Red、Green、Blue,可以简写#abc

    ==============================================================================================================================================================

    笔记

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>长度及颜色单位</title>
      <style type="text/css">
      body {
      background-color: yellowgreen;
      }
      div {
      /*长度单位*/
      /*px in pt mm cm em rem vw vh*/
       100px;
      /* 720pt; 10in*/
      /* 100mm; 10cm*/
      /* 10em; 通常160px 10rem*/
      /* 50vw; 50% view width*/
      height: 100px;
      /*颜色单位*/
      /*单词 rgb() rgba() #六个十六进制位 hsl()*/
      /*background-color: cyan;*/
      /*background-color: rgb(255, 0, 0);*/
      /*background-color: rgba(255, 0, 0, 0);*/
      /*满足AABBCC形式可以简写为abc*/
      background-color: #a0c
      }
      </style>
      </head>
    <body>
      <div></div>
    </body>
    </html>

  • 相关阅读:
    论文摘记 2017.4.6-4.9
    P4 PI库安装
    Markdown中的表格
    Easy install ryu
    《重构网络-SDN架构与实现》阅读随笔
    解决Github Desktop Repo publish 失败问题
    解决 "OperationalError: (sqlite3.OperationalError) no such table: ..."问题
    初始化 Flask 虚拟环境 命令
    Flask: socket.error: [Errno 48] Address already in use 问题
    【转】TCP端口号记录
  • 原文地址:https://www.cnblogs.com/zhangpang/p/9720336.html
Copyright © 2011-2022 走看看