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：

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>px</title>

 <style>

     h1 {font-size: 50px;}

     h2 {font-size: 30px;}

 </style>

 </head>

 <body>

     <h1>标题1</h1>

     <h2>标题2</h2>

 </body>

 </html>

结果显示：

　　

fr：

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

　　(通常用在布局上)

eg：

 <div id="grid">

     <div id="title">Site Logo</div>

     <div id="score">Slogan</div>

     <div id="stats">User Zone</div>

     <div id="message">Message</div>

 </div>
 #grid {

     display: grid;

     width: 100%;

     grid-template-columns: 100px 1fr max-content minmax(min-content, 1fr);

 }

 #title {

     background-color: lime;

 }

 #score {

     background-color: yellow;

 }

 #stats {

     background-color: lime;

 }

 #message {

     background-color: orange;

 }

 div {

     height: 80px;

     line-height: 80px;

     text-align: center;

 }

结果显示：

　　

　　　　

CSS : color and unit的更多相关文章

  1. jQuery .css color 重写 :hover样式没了

    $("#quickSqlDiv a").css({"color":"red"}); $("#course a").css ...

  2. jquery获取css color 值返回RGB

    css代码如下: a, a:link, a:visited { color:#4188FB; } a:active, a:focus, a:hover { color:#FFCC00; } js代码如 ...

  3. CSS COLOR

    CSS COLOR Color Review We've completed our extensive tour of the colors in CSS! Let's review the key ...

  4. jquery获取元素颜色css('color')的值返回RGB

    css代码如下: a, a:link, a:visited { color:#4188FB; } a:active, a:focus, a:hover { color:#FFCC00; } js代码如 ...

  5. CSS 文本字体颜色设置方法(CSS color)

    CSS 文本字体颜色设置方法(CSS color) 一.认识CSS 颜色(CSS color) 这里要介绍的是网页设置颜色包含有哪些:网页颜色规定规范. 1.常用颜色地方包含:字体颜色.超链接颜色.网 ...

  6. CSS Color Adjustment Module Level 1

    CSS Color Adjustment Module Level 1 https://drafts.csswg.org/css-color-adjust-1/ DarkMode 适配指南 | 微信开 ...

  7. css简单的一些基础知识

    css层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可 ...

  8. jquery源码09 (6058 , 6620) css() : 样式的操作

    var curCSS, iframe, // swappable if display is none or starts with table except "table", & ...

  9. CSS笔记

    初级篇===========================选择器============================元素选择器css:h1{color: red}html:<h1> ...

随机推荐

  1. Eclipse从GitHub下载代码

    转载自:http://blog.csdn.net/u014785687/article/details/73473769 打开git视图(window->show view),搜索git,选择G ...

  2. tensorflow报cudnn错误

    E tensorflow/stream_executor/cuda/cuda_dnn.cc:363] Loaded runtime CuDNN library: 7.0.5 but source wa ...

  3. linux: 用户组, 文件权限详解

    一.用户组 linux中每个用户必须属于一个组,不能独立于组外. 每个文件有所有者.所在组.其他组的概念 --所有者 一般为文件的创建者,谁创建了该文件,就天然的成为该文件的所有者 用ls ‐ahl命 ...

  4. [UE4]虚幻引擎的C++环境安装

    一.一般使用VS2017开发 二.需要勾选“使用C++的游戏开发”

  5. 理解inode如何指向block

    一个inode编号如何实现,指向n多个block块的呢? 本质: 第一步:在CentOS系统中目录/tmp下 touch {01..12} 个文件: 然后mkdir block目录 第二步:cd切换到 ...

  6. 使用yum安装 gdb/g++等软件包

    报错: Cannot find a valid baseurl for repo: base/7/x86_6 解决方法: 方法一. 1.打开 vi /etc/sysconfig/network-scr ...

  7. FastSocket客户端/服务端通讯示例 客户端被动接收

    示例代码参见  http://www.cnblogs.com/T-MAC/p/fastsocket-asyncbinary-usage.html 我这里只写一份客户端如何被动接收的代码.   先从As ...

  8. php的运行模式

    1.php最常见的五种运行模式. CGI 通用网关接口 FastCGI 常驻内存的CGI CLI 命令行 Web模块  Apache等Web服务器 模块的形式加载php进程 ISAPI 已经不用了

  9. vue+vuex+axios实现登录、注册页权限拦截

    1.修改config文件夹里的dev.env.js里的BASE_API,把地址改成请求后端的公共部分 1 BASE_API: '"http://192.168.xx.xx"', 2 ...

  10. golang 统计uint64 数字二进制存储中1的数量

    package main import (    "fmt") // pc[i] is the population count of i.var pc [256]byte fun ...