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. swiper内容滚动

    <html> <head> <meta charset="UTF-8"> <meta name="viewport" ...

  2. wireless

    思科的AP分为胖AP和瘦AP,但其实只是AP中的Image不一样而已,硬件都是一样的,胖AP和瘦AP之间可以互相转换.即使你下单的时候下的是胖AP,拿到货要当瘦AP用,转换一下即可. [相互转换] 详 ...

  3. httpd2.4.6配置文件解释说明

    本文httpd版本为:2.4.6 ServerRoot 先来看一下httpd.conf配置文件中的ServerRoot默认定义: # cat /etc/httpd/conf/httpd.conf |e ...

  4. jQuery: 判断from表单是否修改

    <script> $(function() { $("#myform :input").change(function(){ $("#myform" ...

  5. 关于微信小程序获取二维码的踩坑记录

    1.踩坑需求:获取小程序的二维码 2.踩坑接口: https://api.weixin.qq.com/wxa/getwxacode?access_token=ACCESS_TOKEN3 踩坑代码 pu ...

  6. 路径规划(1)--连接GPS接收端

    从淘宝上入手的GPS接收端U-BLOX M8N,带UART串口连接线. 一.打开树莓派上的UART串口通信 1.下载pi3-miniuart-bt-overlay.dtb,并将dtb文件拷贝到/boo ...

  7. MyBatis DTD文件下载地址

    下载链接: http://mybatis.org/dtd/mybatis-3-config.dtdhttp://mybatis.org/dtd/mybatis-3-mapper.dtd

  8. CAST()函数可以进行数据类型的转换。

    CAST()函数可以进行数据类型的转换. CAST()函数的参数有两部分,源值和目标数据类型,中间用AS关键字分隔. 以下例子均通过本人测试. 一.转换列或值 语法:cast( 列名/值 as 数据类 ...

  9. DS-1

    一.作业题目 仿照三元组或复数的抽象数据类型写出有理数抽象数据类型的描述 (有理数是其分子.分母均为整数且分母不为零的分数). 有理数基本运算: 构造有理数T,元素e1,e2分别被赋以分子.分母值 销 ...

  10. 工控随笔_10_西门子_WinCC的VBS脚本_01_基础入门

    很多人都认为VB语言或者VBS脚本语言是一种很low的语言,从心里看不起VB或者VBS, 但是其实VBS不仅可以做为系统管理员的利器,同样在工控领域VBS语言大有用武之地. 西门子的WinCC提供了两 ...