10–Dec-2021
What I have included:
Import vs Link
Box model
Box-sizing
Outline
Text-transform
Transition
Font-size — rem for measurement on padding/ margin/ border?
Overflow
Scroll-padding-top
Scroll-behavior
:root{}
declare global variables
box-shadow
Trying to practice on how to do the web page by simply copying the way ppl do.
Reference: https://www.youtube.com/watch?v=MJUssi2c6Ls
https://cdnjs.com/ ← website used to get the font icon for free
What is cdn and what is it for → https://developers.cloudflare.com/fundamentals/get-started/cdn
Why link should be chosen instead of import though they give the same effects on outlook → link indeed gives a better performance (import using CSS mechanism while link using html mechanism) https://stackoverflow.com/questions/1022695/difference-between-import-and-link-in-css
Box-sizing:
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
First you need to know box model:
Default Width = width of only content box (the blue one)
(NOT including border, content, padding)
The visual width of the whole box should be:
Visual width (including border) = border-left + border-right +padding-left + padding-right + width (NOT including margin) https://developer.mozilla.org/en-US/docs/Web/CSS/width
Box-sizing:
1. content-box (default)
take reference of parent content width as width
2. border-box
take reference of parent border width as width
Outline
What is outline?
Similar with border, but
a. without taking up spaces and
b. outlines no need to be rectangular
And it is outside border (like putting on margin)
https://developer.mozilla.org/en-US/docs/Web/CSS/outline
Text-transform
https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform
text-transform: none;
text-transform: capitalize; <-- first letter toupper
text-transform: uppercase; <-- all letter toupper
text-transform: lowercase; <-- all letter tolower
text-transform: full-width; <-- all letter to full
text-transform: full-size-kana; <-- all kana char to full size Transition
https://developer.mozilla.org/en-US/docs/Web/CSS/transition
Explain how it works:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
Shorthand notation of:transition-property, transition-duration, transition-timing-function, and transition-delay
property: the CSS property that the transition will apply to (list) ← in this webpage, all is applied ← when screen size changes, the font size/ img size will change gradually
duration: How long the effect will take to reaches the end (seconds /milliseconds)
timing-function: How does the speed curve of transition effect (see function)
transition-delay: How long to wait til the transition begins
Font-size
https://developer.mozilla.org/en-US/docs/Web/CSS/font-size
So many ways to tune the font-size
1. Pre-set absolute value (depends on users’ default font size)
/* <absolute-size> values */
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;
font-size: xxx-large;2. Relative size comparing with parent element font size
font-size: smaller;
font-size: larger;3. Length values (reference to https://developer.mozilla.org/en-US/docs/Web/CSS/length)
/* <length> values */
font-size: 12px;
font-size: 0.8em;
font-size: 1rem;https://www.oxxostudio.tw/articles/201809/css-font-size.html← explain well what is DOM(in traditional Chinese)
px: refer to pixel
em: represent the calculated font-size of the element ← relative to parent element font size * the number before em [0.8 * parent element size]
desired element pixel value = parent element font-size in pixels*em
rem: represent the calculated font-size ← base on root element (usually the html tag and browser usually default as 16px)
rem is base on font size of the root, no matter where does it apply on, it just follow the font size px
%: the % of parent element font size ←62.5% most comfortable size
Overflow
Appear when content >>>>> content-box width
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
Two properties included:
overflow-x ← if x axis overflow
overflow-y ← if y axis overflow
overflow: visible; Visible: ignore the padding, border
Hidden: content that overflow will be hidden, allow program to scroll
Clip: same effect with hidden, forbidden program to scroll
Scroll: div will be added will scroll
Auto: if the content width is big enough to show all content ← visible
if content width is not enough ← scroll
Overlay: same as auto but scrollbars is on top of content without taking up space (only supported in supported in WebKit-based (e.g., Safari) and Blink-based (e.g., Chrome or Opera) browsers)
Scroll-padding-top
source:
https://css-tricks.com/almanac/properties/s/scroll-padding/
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-top
offsets the top of the optimal viewing region of the scrollport ← mainly used to exclude the area for scrollbar (the scroll will automatically tune to the ratio.
Selector * vs html selector
Selector * ← select all the element
Html selector ← only selecting html element ← but due to the inheritance, properties to html node will pass to the children elements
Wildcard selector * could be used in different situation too, like p < *{}
Scroll behavior
Only auto and smooth ← even jumping from A to C could be super smooth
Control the scroll of the scrolling box
See: https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior
:root{}
https://developer.mozilla.org/en-US/docs/Web/CSS/:root
pseudo-class: :root ← the root element of a tree representing the document
:root is indeed equal to html selector (but :root specificity is higher)
For specificity:
type selector and psedo-element << class selector, attribute selector and pseudo-classes << ID selector
Useful for declaring global css variables
box-shadow
Apply to the frame and element
offset-x: from element original position, shadow move to +x by x axis
offset-y: from element original position, shadow move to -y by y axis
blur-radius: larger the value, more blur
spread-radius: larger the value, larger the shadow from the center of the shadow
color
