Getting to Know CSS - Common CSS Property Values

genedna 發(fā)布于2019-08-28 18:25 / 670人閱讀

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 */
}

云服務(wù)器 GPU云服務(wù)器 css引入css css _CSS css88

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111224.html

相關(guān)文章

css 單位簡單介紹

摘要：本來在寫介紹逐漸發(fā)現(xiàn)單位需要好好介紹下本文不是翻譯保留原文的基礎(chǔ)上做出自己的理解為主參考摘要這個(gè)模塊描述了屬性的常用值和單位和在屬性定義時(shí)使用它們的語法。 CSS Values and Units Module Level 3 本來在寫css3 attr介紹逐漸發(fā)現(xiàn)css單位需要好好介紹下本文不是w3c翻譯保留原文的基礎(chǔ)上做出自己的理解為主參考 http://www....

leone 2019-08-28 18:11 評論0 收藏0
【譯】Vertical-Align: All You Need To Know

摘要：用于對齊行內(nèi)水平元素，即那些屬性為或本文不考慮的元素。元素的基線取決于元素是否具有內(nèi)容有內(nèi)容，元素的基線是普通流中最后一個(gè)內(nèi)容元素的基線例如左邊那個(gè)。原文地址：Vertical-Align: All You Need To Know Often I need to vertically align elements side by side. 我經(jīng)常需要并排地垂直對齊元素。 CSS ...

niuxiaowei111 2019-08-30 15:53 評論0 收藏0
【譯】Vertical-Align: All You Need To Know

摘要：用于對齊行內(nèi)水平元素，即那些屬性為或本文不考慮的元素。元素的基線取決于元素是否具有內(nèi)容有內(nèi)容，元素的基線是普通流中最后一個(gè)內(nèi)容元素的基線例如左邊那個(gè)。原文地址：Vertical-Align: All You Need To Know Often I need to vertically align elements side by side. 我經(jīng)常需要并排地垂直對齊元素。 CSS ...

LiuRhoRamen 2019-08-01 16:26 評論0 收藏0
underscore.js 源碼學(xué)習(xí) collection

摘要：為情況下，直接返回執(zhí)行過程，對右側(cè)表達(dá)式求值。包裝執(zhí)行函數(shù)上下文創(chuàng)建迭代函數(shù)，可選遍歷方向是的簡寫。遍歷整個(gè)，返回匹配參數(shù)所列出的所有鍵值對的第一個(gè)值。傳遞一個(gè)數(shù)字表示從中返回個(gè)隨機(jī)元素。對集合每個(gè)元素調(diào)用函數(shù)后，得到。 // Internal function that returns an efficient (for current engines) version// of t...

zhangke3016 2019-08-23 17:04 評論0 收藏0
Licia：最全最實(shí)用的 JavaScript 工具庫

摘要：為了避免不同項(xiàng)目之間進(jìn)行復(fù)制粘貼，可以將這些常用的函數(shù)封裝到一起并發(fā)布包。目前所包含模塊已達(dá)三百個(gè)，基本可以滿足前端的日常工發(fā)需求。二使用打包工具該項(xiàng)目自帶打包工具，可以通過配置文件或命令行掃描源碼自動(dòng)生成項(xiàng)目專用的工具庫。前言在業(yè)務(wù)開發(fā)過程中，我們經(jīng)常會(huì)重復(fù)使用日期格式化、cookie 操作、模板、瀏覽器判斷、類型判斷等功能。為了避免不同項(xiàng)目之間進(jìn)行復(fù)制粘貼，可以將這些常用的函數(shù)...

luxixing 2019-08-22 17:00 評論0 收藏0