Wanna see every single "box" that makes up a page? Try putting this in the stylesheet temporarily:
Display and Positioning: Z-index
圖層概念
Without explicitly using z-index the last element written to the DOM (the last element you wrote in your code) will appear on top of all the others, and so on up the chain of your elements.
If more elements were involved we could use a wider range of values and the same rules would apply-- so that an element with z-index 100 would be displayed above an element with a z-index value of 99, and below.
Absolute vs Relative Units
There’s a lot of units available, but the most common ones you’ll encounter are px (pixel) and em (pronounced like the letter m). The former is what you would intuitively call a pixel, regardless of whether the user has a retina display or not, and the latter is the current font size of the element in question.
Absolute
px
in
mm
cm
Many font sizes on the web for example, are set to somewhere between 12px-30px, A font size set to 16px will appear the same size no matter how big the screen.
Relative
% - percentage of something, such as screen width
em - A unit equivalent to the current font size - if 12px font, 2em would be 24px
vw - units of viewport width (essentially the browser’s rendering space). Each unit is 1/100th of width
The em unit is very useful for defining sizes relative to some base font. For example, if you set the font-size of body to 16px, you could then set other element’s font-size value relative to that 16px. Here’s what that could look like:
Typography
Text alignment
Other accepted values are right, center, or justify.
Underlined Text
Remove the default underline from all of our links
Deleted Text
Line-through to strike out “deleted” text. But, remember that meaning should always be conveyed through HTML—not CSS. It’s better to use the <ins> and <del> elements instead of adding a line-through style to, say, an ordinary <p> element.
ins = insert, del = delete
Line Height
行高、行間距
margin-top (or padding-top)
margin-bottom (or padding-bottom)
line-height
margin-top defines vertical space between separate paragraphs. The new line-height property determines the amount of space between lines in the same paragraph.
Fonts
Font Family
Font Weight & Style
一種定義字強弱的方式，100 至 900之間。
“Black” usually means 900, “bold” is 700, “regular” is 400, etc.
但並非每種字體都支援所有的weight。
Each letter in every face is hand-crafted to ensure it provides a uniform flow to its text.
Emphasis & Importance
For emphasized (usually italics) words, use the <em> tag.
For important words, use the <strong> tag.Don’t use <strong> only to put some text in bold, but rather to give it more importance.
External Fonts
One commonly used example is Google Fonts, which provides a great number of fonts free for use in web projects.
In CSS:
Colors
Colors in CSS can be specified by the following methods:
Hexadecimal colors
RGB colors
Predefined/Cross-browser color names
RGBA colors
HSL colors
HSLA colors
Let's talk about the first 3 since those are the most common.
Hexadecimal Colors
A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF.
RGB Colors
Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255 or a percentage value (from 0% to 100%).
Predefined/Cross-browser Color Names
There's quite a few of these - check out this list to see more.
