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. tomcat使用自签名证书实现https加密访问

    部署好java环境和tomcat之后 执行以下语句 #生成证书,keytool是java工具命令,-genkey生成证书,-alias证书名称,-keyalg应该是指算法,-keystore是证书存储 ...

  2. jumpserver+Keepalived中一些配置

    haproxy的配置 这里只代理了luna coco的2222端口暂时没代理.后期有需求再改造 (py3) [root@dawn-jump-2 /app]# cat /etc/haproxy/hapr ...

  3. ffmpeg-4.1.1-win64-dev在vs2017的搭建

    没得话讲,先在官网下载对应的源码,下载dev/文件夹下的源码和静态链接库  ,下载/shared文件夹下的动态链接库 官网地址:https://ffmpeg.zeranoe.com/builds/wi ...

  4. 第5章 Hyperledger Fabric功能

    Hyperledger Fabric is a unique implementation of distributed ledger technology (DLT) that delivers e ...

  5. angularjs 学习小结

    1.过滤器的使用 <!DOCTYPE html> <html> <head> <meta charset="{CHARSET}"> ...

  6. 4.认识Angular组件之2

    11. 变化监测:Angular提供了数据绑定的功能.所谓的数据绑定就是将组件类的数据和页面的DOM元素关联起来.当数据发生变化时,Angular能够监测到这些变化,并对其所绑定的DOM元素 进行相应 ...

  7. 解决C#程序只允许运行一个实例的几种方法详解

    解决C#程序只允许运行一个实例的几种方法详解 本篇文章是对C#中程序只允许运行一个实例的几种方法进行了详细的分析介绍,需要的朋友参考下 本文和大家讲一下如何使用C#来创建系统中只能有该程序的一个实例运 ...

  8. mysql导入sql文件出错的一种解决方法

    转:https://blog.csdn.net/u011806486/article/details/60147358 本人在本地使用navicat for mysql可以连接到服务器数据库,但是从服 ...

  9. python各种类型日期转换大全

    最近写python做各种日期转换比较多,顺便总结一下,先上张图: # 根据字符串类型转日期 返回值类型<class 'time.struct_time'> st_time = time.s ...

  10. Jquery Mobile 让错误提示可在后台控制显示内容

    在jquery.mobile-1.4.5.min.js的5254行找到下面代码 return $.proxy(function( xhr, textStatus, errorThrown ) { 然后 ...