Getting to Know CSS - Common CSS Property Values

genedna 發布于2019-08-28 18:25 / 634人閱讀

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

云服務器 GPU云服務器 css引入css css _CSS css88

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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