css单位分析、颜色设置与调色板
CSS单位分析
px:单位代表像素,1px代表一个像素点。
%:设置子元素为父容器的占比。
em:代表该元素中一个字体所占字符,常用在文字首行缩进。其具有继承性。
rem:始终代表html中的字符所在位置。
vm:1vm代表占据视窗宽度的百分之1.
vh:1vh代表占据视窗高度的百分之1.
vmax:选取vh和vm中最大的哪一个。
vmin:选取vh和vw中最小的哪一个。
fr:并没有具体的值,代表一个均分单位,例如:在水平上只分出1fr,则1fr代表整个视窗宽度,
如分成3个1fr,则1fr代表视窗宽度的1/3.
颜色设置与调色板
1.CSS 颜色使用组合了红绿蓝颜色值 (RGB) 的十六进制 (hex) 表示法进行定义。对光源进行设置的最低值可以是 0(十六进制 00)。最高值是 255(十六进制 FF)。
2.十六进制值使用三个双位数来编写,并以 # 符号开头。
3.RGB 颜色值表示:rgb(red, green, blue)。每个参数 (red、green 以及 blue) 定义颜色的强度,可以是介于 0 与 255 之间的整数,或者是百分比值(从 0% 到 100%)。
4.RGBA 表示:RGBA颜色值是 RGB 颜色值的扩展,带有一个 alpha 通道 - 它规定了对象的不透明度。RGBA 颜色值是这样规定的:rgba(red, green, blue, alpha)。alpha 参数是介于 0.0(完全透明)与 1.0(完全不透明)的数字。
5.HSL 颜色表示:hsl(hue, saturation, lightness)。HSL 指的是 hue(色调)、saturation(饱和度)、lightness(亮度) - 表示颜色柱面坐标表示法。
6.HSLA 颜色表示:hsla(hue, saturation, lightness, alpha),其中的 alpha 参数定义不透明度。alpha 参数是介于 0.0(完全透明)与 1.0(完全不透明)的数字。HSLA 颜色值是 HSL 颜色值的扩展,带有一个 alpha 通道 - 它规定了对象的不透明度。
css单位分析、颜色设置与调色板的更多相关文章
- CSS 文本字体颜色设置方法(CSS color)
CSS 文本字体颜色设置方法(CSS color) 一.认识CSS 颜色(CSS color) 这里要介绍的是网页设置颜色包含有哪些:网页颜色规定规范. 1.常用颜色地方包含:字体颜色.超链接颜色.网 ...
- CSS单位分析
px:单位代表像素,1px代表一个像素点. %:设置子元素为父容器的占比. em:代表该元素中一个字体所占字符,常用在文字首行缩进.其具有继承性. rem:始终代表html中的字符所在位置. vm:1 ...
- CSS学习摘要-数值和单位及颜色
在CSS中,值的类型有很多种,一些很常见,一些你却几乎没怎么遇到过.我们不会在这篇文档中面面俱到地描述他们,而只是这些对于掌握CSS可能最有用处的这些.本文将会涉及如下CSS的值: 数值: 长度值,用 ...
- 超链接字体颜色设置(通过html/css的设置方法)
超链接字体颜色设置是通过css来设置,a链接的颜色设置常用的有以下两种,1.超链接a的初始状态颜色,2.超链接字体的鼠标滑过颜色,还有两种病不常用:3.超链接字体的已访问颜色,4.超链接字体在按下鼠标 ...
- 前端基础-CSS的属性相关设置
一 字体属性 二 文本属性 三 背景属性 四 盒子模型 五 盒子模型各部分详解 一. 字体属性 1.font-weight:文字粗细(表格中*为重点) 取值 描述 normal 默认值,标准粗细 ...
- CSS单位计算总结
CSS单位总结 公共部分css body { background-color: #000; color: skyblue; margin: 0; padding: 0; } body>div& ...
- 你可能没注意的CSS单位
扶今追昔 CSS中的单位我们经常用到px.pt.em.百分比,px和pt不用多说 em em是相对单位,参考物是父元素的font-size,具有继承的特点 如果字体大小是16px(浏览器的默认值),那 ...
- 你可能不知道的7个CSS单位
如果你是一名前端开发工程师,一般px和em使用频率比较高.但是今天本文的重点是介绍一些我们使用很少.甚至么有听说的单位. 一.重温em <style type="text/css&qu ...
- [转]保护眼睛的Windows和IE、Firefox、谷歌等浏览器颜色设置
保护眼睛的Windows和IE.Firefox.谷歌等浏览器颜色设置 长时间在电脑前工作,窗口和网页上的白色十分刺眼,眼睛很容易疲劳,也容易引起头痛,其实我们可以通过设置Windows窗口和软件的颜 ...
随机推荐
- 题解——Codeforces Round #507 (based on Olympiad of Metropolises) T2(模拟)
T2还是模拟 枚举一下第一个放哪里 然后贪心的反转即可 虽然我也不会证,但是这题肯定有解qwq #include <cstdio> #include <algorithm> # ...
- ZOJ 2112 Dynamic Rankings(树状数组+主席树)
题意 \(n\) 个数,\(m\) 个操作,每次操作修改某个数,或者询问某个区间的第 \(K\) 小值. \(1 \leq n \leq 50000\) \(1 \leq m \leq 10000\) ...
- HDU 5727 Necklace(全排列+二分图匹配)
http://acm.split.hdu.edu.cn/showproblem.php?pid=5727 题意:现在有n个阳珠子和n个阴珠子,现在要把它们串成项链,要求是阴阳珠子间隔串,但是有些阴阳珠 ...
- 【selenium2】【unittest】
#栗子 from selenium import webdriverfrom selenium.webdriver.common.by import Byfrom selenium.webdriver ...
- 使用MVCPager做AJAX分页所需要注意的地方
1.版本问题,推荐使用2.0以上,对ajax支持才比较的好了 2.当需要使用页索引输入或下拉框以及使用Ajax分页模式时,必须用Html.RegisterMvcPagerScriptResource方 ...
- JSON数据展示神器:react-json-view(常用于后台网站)
一.react-json-view - npm 官方定义: RJV is a React component for displaying and editing javascript arrays ...
- “AI”项目日记
前言:为了更好的以“实践”巩固“学习”,利用空余时间,打造一个属于自己的项目 项目目标: 1.将学习的知识用项目实践,在实践过程中去领悟新的知识 2.高度自由,根据不同时期的学习目标,融入项目中去用代 ...
- 【SQL Prompt】SQL Prompt7.2下载及破解教程
基本介绍 SQL Prompt能根据数据库的对象名称,语法和用户编写的代码片段自动进行检索,智能的为用户提供唯一合适的代码选择.自动脚本设置为用户提供了简单的代码易读性--这在开发者使用的是不大熟悉的 ...
- maven 引入外部jar包的几种方式
方式1:dependency 本地jar包 <dependency> <groupId>com.hope.cloud</groupId> <!--自定义--& ...
- 力扣(LeetCode)453. 最小移动次数使数组元素相等
给定一个长度为 n 的非空整数数组,找到让数组所有元素相等的最小移动次数.每次移动可以使 n - 1 个元素增加 1. 示例: 输入: [1,2,3] 输出: 3 解释: 只需要3次移动(注意每次移动 ...