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> ...
随机推荐
- 在windows上编译apr库
环境: win7_x64旗舰版.VS2015企业版.CMake3.8 一.下载apr相关库 1.1)expat下载地址:https://github.com/libexpat/libexpat/rel ...
- remove-weknow-ac from mac chrome
refer:https://macreports.com/how-to-remove-weknow-ac-malware-macos/ 1-Remove the weknow.ac profile. ...
- 1-Two Sum @LeetCode
1-Two Sum 题目 思路 题目中得到的信息有: 都是整数,并且可正可负,也可一个值包含多个: 只有一个正确的结果. 方法一: 最直接的思路就是两重循环遍历,时间复杂度是O(n^2),这样肯定不行 ...
- 20165308『网络对抗技术』Exp5 MSF基础应用
20165308『网络对抗技术』Exp5 MSF基础应用 一.原理与实践说明 实践内容 本实践目标是掌握metasploit的基本应用方式,重点常用的三种攻击方式的思路.具体需要完成: 一个主动攻击实 ...
- android 位置记录软件
行者 用的百度高德的方案,没有偏移问题endomondo,咕咚,行者.endomondo是国外软件,运行稳定,但GPS记录漂移比较严重:咕咚的GPS位置记录比较准确,缺点是容易崩溃,譬如记录过程中来个 ...
- Windows和Office激活工具Kmsauto Net
对于微软操作系统和OFFICE的激活,以前笔者用过 ”HEU_KMS_Activator_v11.2.0” ,不过这个工具速度相对比较慢.今天给大家推荐一个新的激活工具:KmsautoNet . 很简 ...
- 如何快速开发html5跨平台K12/幼儿交互课件、动画课件、交互游戏
flash交互课件能生动表达教学内容,也深受广大教育工作者的喜爱,但是目前flash课件只能在pc电脑平台上进行展示,随着移动网络的发展,越来越多的课件产品需要移殖到各种移动平台(手机,pad,智能电 ...
- 关于java的动态代理
给目标对象提供一个代理对象.有代理对象控制目标对象的引用. 1.间接的访问目标对象: 2.对原有的业务增强: 比如:Spring的注解: Mybatis同过mapper接口访问数据库 静态代理: 遵循 ...
- 系统右键菜单（级联菜单）资料--cascading menus
通过RegistryKey 简单的实现单级菜单 http://www.cnblogs.com/sjcatsoft/archive/2009/02/25/1398203.html 通过subcomman ...
- About Gnu Linker1
1 OverView ld combines a number of object and archive files, relocates their data and ties up symbol ...