Getting to Know CSS - Common CSS Property Values

genedna 发布于2019-08-28 18:25 / 473人阅读

Colors

Keywords

Hexadecimal

RGB

HSL

Keywords

Like red,black

The keywords notation provide limited options and thus are not the most practice

.task {
  background: maroon;
}

.count {
  background: yellow;
}

Hexadecimal

Start with #, followed by three or six character

.task {
    background: #800000;
 }
 
 .count {
     background: #ff0;
 }

RGB

RGB color values are stated using the rgb() function, r means red, g means green, b means blue.

The integer from 0 to 255.

The RGB values also include an alpha, change by using the rgba().

The fourth value between 0 and 1.

.task {
  background: rgb(128, 0, 0);
}

.count {
  background: rgb(255, 255, 0);
}

.task {
 background: rgba(128, 0, 0, .25);
}

.count {
 background: rgb(255, 255, 0, 1);
}

HSL & HSLa Colors

.task {
  background: hsl(0, 100%, 25%);
}

.count {
  background: hsl(60, 100%, 50%);
}

The first value represent the color wheel

The second and third values, the saturation(饱和度) and lightness(亮度)

Length

Absolute Lengths

Relative Lengths

Absolute Lengths

Pixels

The pixel is equal to 1/96 of an inch, thus there are 96 pixels in an inch

p {
    font-size: 14px;
}

Relative Lengths

.col {
    width: 50%; /* Base your parent element width */
}

.banner {
    font-size: 14px;
    width: 5em;  /* The em unit relative to the font size of the closest parent elment with a stated font size */
}

云服务器超融合服务器 css引入css css _CSS css88

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111224.html

css 单位简单介绍

摘要：本来在写介绍逐渐发现单位需要好好介绍下本文不是翻译保留原文的基础上做出自己的理解为主参考摘要这个模块描述了属性的常用值和单位和在属性定义时使用它们的语法。 CSS Values and Units Module Level 3 本来在写css3 attr介绍逐渐发现css单位需要好好介绍下本文不是w3c翻译保留原文的基础上做出自己的理解为主参考 http://www....

leone 2019-08-28 18:11 评论0 收藏0
【译】Vertical-Align: All You Need To Know

摘要：用于对齐行内水平元素，即那些属性为或本文不考虑的元素。元素的基线取决于元素是否具有内容有内容，元素的基线是普通流中最后一个内容元素的基线例如左边那个。原文地址：Vertical-Align: All You Need To Know Often I need to vertically align elements side by side. 我经常需要并排地垂直对齐元素。 CSS ...

niuxiaowei111 2019-08-30 15:53 评论0 收藏0
【译】Vertical-Align: All You Need To Know

摘要：用于对齐行内水平元素，即那些属性为或本文不考虑的元素。元素的基线取决于元素是否具有内容有内容，元素的基线是普通流中最后一个内容元素的基线例如左边那个。原文地址：Vertical-Align: All You Need To Know Often I need to vertically align elements side by side. 我经常需要并排地垂直对齐元素。 CSS ...

LiuRhoRamen 2019-08-01 16:26 评论0 收藏0
underscore.js 源码学习 collection

摘要：为情况下，直接返回执行过程，对右侧表达式求值。包装执行函数上下文创建迭代函数，可选遍历方向是的简写。遍历整个，返回匹配参数所列出的所有键值对的第一个值。传递一个数字表示从中返回个随机元素。对集合每个元素调用函数后，得到。 // Internal function that returns an efficient (for current engines) version// of t...

zhangke3016 2019-08-23 17:04 评论0 收藏0
Licia：最全最实用的 JavaScript 工具库

摘要：为了避免不同项目之间进行复制粘贴，可以将这些常用的函数封装到一起并发布包。目前所包含模块已达三百个，基本可以满足前端的日常工发需求。二使用打包工具该项目自带打包工具，可以通过配置文件或命令行扫描源码自动生成项目专用的工具库。前言在业务开发过程中，我们经常会重复使用日期格式化、cookie 操作、模板、浏览器判断、类型判断等功能。为了避免不同项目之间进行复制粘贴，可以将这些常用的函数...

luxixing 2019-08-22 17:00 评论0 收藏0