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：
<!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的更多相关文章
- jQuery .css color 重写 :hover样式没了
$("#quickSqlDiv a").css({"color":"red"}); $("#course a").css ...
- jquery获取css color 值返回RGB
css代码如下: a, a:link, a:visited { color:#4188FB; } a:active, a:focus, a:hover { color:#FFCC00; } js代码如 ...
- CSS COLOR
CSS COLOR Color Review We've completed our extensive tour of the colors in CSS! Let's review the key ...
- jquery获取元素颜色css('color')的值返回RGB
css代码如下: a, a:link, a:visited { color:#4188FB; } a:active, a:focus, a:hover { color:#FFCC00; } js代码如 ...
- CSS 文本字体颜色设置方法(CSS color)
CSS 文本字体颜色设置方法(CSS color) 一.认识CSS 颜色(CSS color) 这里要介绍的是网页设置颜色包含有哪些:网页颜色规定规范. 1.常用颜色地方包含:字体颜色.超链接颜色.网 ...
- CSS Color Adjustment Module Level 1
CSS Color Adjustment Module Level 1 https://drafts.csswg.org/css-color-adjust-1/ DarkMode 适配指南 | 微信开 ...
- css简单的一些基础知识
css层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可 ...
- jquery源码09 (6058 , 6620) css() : 样式的操作
var curCSS, iframe, // swappable if display is none or starts with table except "table", & ...
- CSS笔记
初级篇===========================选择器============================元素选择器css:h1{color: red}html:<h1> ...
随机推荐
- JavaScript自定义事件 - createEvent()、initEvent()和dispachEvent()
在学习目标事件的方法的时候,接触到了dispatchEvent()方法.度娘查一查,这是一个事件触发器,事件触发器其实就是触发事件的东西. 通常情况下,我们触发事件都是在交互中触发的事件,例如点击按钮 ...
- VirtualBox虚拟机禁止时间同步
某机器为客户提供,宿主机时间快了20分钟,导致虚拟机时间也跟着快20分钟,每次更改完虚拟机时间,不到1分钟时间又变回去了 在一些情况下必须让VirtualBox虚拟客户机的时间和主机不同步,百度了一番 ...
- delphi 多线程之System.TMonitor
三天不写代码就手生! 把测试代码记录下来. unit Unit1; interface uses Winapi.Windows, Winapi.Messages, System.SysUtils, S ...
- 基于scrapy源码实现的自定义微型异步爬虫框架
一.scrapy原理 Scrapy 使用了 Twisted异步网络库来处理网络通讯.整体架构大致如下 Scrapy主要包括了以下组件: 引擎(Scrapy)用来处理整个系统的数据流处理, 触发事务(框 ...
- redhat 开课啦
今天是三八女神节. 终于开课啦,为考取RHCE准备.
- Log4j配置发邮件功能
# 发送日志到指定邮件log4j.appender.mail=org.apache.log4j.net.SMTPAppenderlog4j.appender.mail.Threshold=DEBUGl ...
- window7 修改docker安装的machine 位置
win7下安装docker ,默认的machine location 是在C:\users\xx\.docker\machine\machines 下面,为了不占用系统盘,想修改盘符位置 google ...
- @RequestParam、@ReqeustBody、@ReponseBody认识
简介: @RequestParam和@RequestBody均是处理request body部分的注解,都用于获取请求部分的参数. @ResponseBody是用于响应部分的注解 1. @Reques ...
- [UE4]抓取准备
一.引擎的VR实例工程是使用手柄进行抓取的.我们需要加上可以使用鼠标进行抓取操作. 二.将左右手保存到全局变量. 三.左右手分别调用抓取和扔方法
- MySQL Group Replication-MGR集群
简介 MySQL Group Replication(简称MGR)字面意思是mysql组复制的意思,但其实他是一个高可用的集群架构,暂时只支持mysql5.7和mysql8.0版本. 是MySQL官方 ...