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. R实用小技巧

    输出重定向 # 文本重定向 # cat cat("hello",file="D:/test.txt", append=T) # sink("filen ...

  2. 谷歌浏览器可以google了

    做为一个开发者好多疑问点或者难点大多数时间 都在进行百度,百度也能解决问题,但是呢如果让我能够google呢?我肯定会优先google的,这里面能够搜到一些国外技术人的文章可供参考. 下面是一个能够支 ...

  3. gitlab 安装和使用

    正常 团队开发 不可能吧代码托管给 github 或者码云之类的 三方托管机构. 然后  原始的 git 没有图形用户界面. 这时候我们可以选择 gitlab . 安装环境 centos7 1 安装依 ...

  4. 针对不同.NET版本的条件编译

    原理:查找项目目录下的 csproj 文件,解析它,找到节点TargetFrameworkVersion,判断.net版本

  5. [ZZ] 深度学习三巨头之一来清华演讲了，你只需要知道这7点

    深度学习三巨头之一来清华演讲了,你只需要知道这7点 http://wemedia.ifeng.com/10939074/wemedia.shtml Yann LeCun还提到了一项FAIR开发的,用于 ...

  6. vue+nginx编译部署

    1.项目路径下vue-test输入命令npm run build编译完成后会发现在vue-test文件夹下多出一个dist文件夹这里面就是编译好的文件了.2.网上下载nginx,下载地址http:// ...

  7. 【Angular】——TypeScript之胖箭头(=>)函数

    前言:胖箭头(=>)函数是一种快速书写函数的简介语法. ES5和TypeScript比较:在ES5中,每当我们要用甘薯作为方法参数时,都必须用function关键字和紧随其后的花括号({})表示 ...

  8. IOS屏幕旋转思路和实践

    这段时间同事在做一个直播项目,项目有个需求:一个界面需要手动设置屏幕的方向,设置好之后方向不能变化.完成这个需求花了特别大的精力,归因是网上关于屏幕旋转的知识比较凌乱,解决问题花费不少时间,最后决定把 ...

  9. three.js的组合与合并，raycaster射线无法获取group

    1.组合 创建一个组非常简单,在组中添加子元素的效果是,你可以对组进行移动.缩放和变形,而所有的子对象都会受到影响.使用组的时候,你依然可以引用.修改每一个单独的几何体.但是,使用raycaster射 ...

  10. Python抓取百度汉字笔画的gif

    偶然发现百度汉语里面,有一笔一划的汉字顺序:          觉得这个动态的图片,等以后娃长大了,可以用这个教写字.然后就去找找常用汉字,现代汉语常用字表 .拿到这里面的汉字,做两个数组出来,一共是 ...