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. 自己实现一个jQuery插件

    <script src="https://cdn.staticfile.org/jquery/2.0.3/jquery.min.js"></script> ...

  2. Hanlp自然语言处理工具之词法分析器

    本章是接前两篇<分词工具Hanlp基于感知机的中文分词框架>和<基于结构化感知机的词性标注与命名实体识别框架>的.本系统将同时进行中文分词.词性标注与命名实体识别3个任务的子系 ...

  3. docker-solr 使用host模式修改默认的8983端口号

    1.使用root账号进入docker-solr docker exec -it 127627ab6247 -u root /bin/bash 2.安装vim apt-get update apt-ge ...

  4. pandas第一课

    pandas第一课 首先是数据的准备 movies.dat user.dat ratings.dat 注意,这些数据都是通过::来隔开每一列的,每一列有各自的含义 现在通过pandas来读入数据 首先 ...

  5. C# .NET newtonsoft.json 多版本冲突解决

    A.DLL 引用了6.0 的 newtonsoft.json  (V2 运行时),B.DLL 引用了10.0 的 newtonsoft.json (V4 运行时). 可以在.CONFIG RUNTIM ...

  6. Read The Docs搭建

    #!/bin/sh ########################### base ###################### yum -y update yum -y install yum-u ...

  7. vscode "find all references" 提示: no result found.

        vscode(visual studio code) 是微软推出的一款编辑器.免费,跨平台,最主要是轻便,消耗资源少, 成为码农阅读code的利器. vscode可以安装第三方的一些插件,满足 ...

  8. MFC 单文档调用对话框

    1.插入新的Dialog,如下图: 2.修改ID位 IDD_XMB 3.在单文件的Menu 中选中需要链接的按键,右键添加处理程序,如下图所示,添加完成后,在项目的xxxview.cpp中会生成如下函 ...

  9. 表单数据转javabean对象

  10. Python 网站后台扫描脚本

    Python  网站后台扫描脚本 #!/usr/bin/python #coding=utf-8 import sys import urllib import time url = "ht ...