🪴ttuan's garden

Sep 04, 20242 min read

Learning CSS

Box Model

Summary

  • Mọi thứ trong CSS đều được hiển thị dưới dạng box.
  • Có 2 cách để control size của box: extrinsic sizing (control dựa vào thuộc tính width/heigh của box) vs intrinsic sizing (control dựa vào size của content bên trong)
  • Order: Content box ⇒ Padding ⇒ Border ⇒ Margin
  • Key properties: box-sizing, display, position, grid/flex layout
Link to original

Selectors

Help to apply CSS to an element.

  • Normal selector: .my-css-rule
  • Universal selector: *
  • Type selector: eg: section - HTML element directly
  • Class/ ID
  • Attribute selector: eg: [data-type='primary']
  • Grouping selectors: strong, em, .my-class, [lang] { color: red }
  • Pseudo-classes: a:hover, p:nth-child(even)
  • Pseudo-elements: .my-element::before/after - decorate purpose, ::mark, ::selection
  • Combinators:
    • Descendant combinator: p > strong
    • Next sibling combinator: + , eg: .top * + *
  • Compound: a.my-class

The cascade

Summary

  • Sau khi trình duyệt load HTML và CSS, nó sẽ phải Parse CSS. Quá trình này gồm 2 bước quan trọng:
    • (1) Resolve conflicting CSS declarations (cascade)
    • (2) Process final CSS Values
  • Resolve conflicting theo thứ tự: Important > Specificity > Source Order
    • Important: Mức độ quan trọng (declarations của User/Author/Browser, có !important hay không, …)
    • Specificity: Mức độ rõ ràng: inline style > ids > classes > element - Tính điểm (eg: (0, 0, 1, 2) ) để so sánh.
    • Source Order: Thứ tự xuất hiện của các declarations.
Link to original

Specificity is a key part of cascade.

Inheritance

Summary

  • Inheritance trong CSS tương tự các ngôn ngữ khác. Nếu parent elements không set properties, nó sẽ lấy initial value (được set trong CSS trình duyệt)
  • Inheritable properties: color, font-size, font-familty, ..... Non-inheritable properties: padding, margin, border, width, height, animation, ...
  • Main related keywords: inherit, initial, unset
Link to original

Color

Summary

  • Trong CSS có 2 cách sử dụng color: Numeric colors (Hex, RGB, HSL) và Color keywords (red, green, …).
  • Có thể add thêm độ transparency (alpha) vào trong các color trên.
  • Được sử dụng với 1 số properties như: border, background, …
Link to original

Sizing Units

Summary

  • Các đơn vị sizing trong CSS.
  • Numbers & Percentages: Đôi khi là số cụ thể (vd: 24px), đôi khi là tỷ lệ (%), tính dựa trên phần tử cha hoặc giá trị trước đó, như opacity: 0.5 là 50% độ trong suốt.
  • Absolute & Relative Lengths: Đơn vị tuyệt đối (cm, mm, px) và đơn vị tương đối (em, rem) thường dùng trong thiết kế responsive, với relative lengths linh hoạt hơn.
  • Viewport & Angle Units: Đơn vị theo kích thước viewport (vw, vh) dùng để điều chỉnh theo chiều rộng/chiều cao màn hình; đơn vị góc (vd: rotate(60deg)).
Link to original

Layout

Summary

  • display - Xác định cách mà các phần tử bên trong sẽ hiển thị.
    • inline - Các phần tử được hiển thị/ show cạnh nhau
    • block - Mỗi phần tử nằm trên 1 dòng (block)
    • flex - Linh hoạt. Nó sẽ hiển thị các phần tử con theo trục. Các elements bên trong sẽ thành flex items, có thể config custom hiển thị. ⇒ One-dimension layouts
    • grid - Các elements bên trong được bố trí dưới dạng lưới ⇒ Two-dimension layouts
  • position - Xác định vị trí cụ thể của 1 elements.
    • static - Mặc định, hiển thị theo document flow.
    • relative - Hiển thị ở vị trí tương đối so với vị trí ban đầu. (control qua top, right, left, bottom)
    • absolute - Hiển thị ở vị trí tuyệt đối so với phần tử cha, hoặc viewport.
    • fixed - Hiển thị cố định ở 1 vị trí so với viewport.
    • sticky - Bình thường sẽ hiển thị như relative, nhưng nếu scroll qua thì sẽ hiển thị như fixed.
Link to original

Flexbox

Flexbox là kỹ thuật thiết kế layout, group items trên 1 chiều.

Summary

  • Main axis và Cross axis
  • wrap items - Cho phép items trong flex container xuống dòng nếu thiếu space.
  • flex-direction - column/row - Chiều hiển thị của items trong flex container.
  • flex - alias cho flex-grow, flex-shrink, flex-basis - Control về mức độ giãn nở/ co hẹp/ size ban đầu của items trong flex container.
  • flex: 1, 2, 3 - Chia flex containers thành các “unit”, mỗi items sẽ chiếm 1 phần trong đó.
  • order - Order lại thứ tự xuất hiện của các items
  • Flexbox alignment:
    • justify-content - phân bổ space theo main axis
    • align-content - phân bổ space theo cross axis
Link to original

Grid

2 dimensional layout. Control layout in rows and columns

CSS Grid

Logical Properties

Summary

  • Bình thường, ta hay dùng left, right, bottom, top để định hướng các phần tử. Tuy nhiên điều này sẽ dễ gây sai sót nếu văn bản của ta có direction dị (vd từ phải qua trái, hoặc từ trên xuống dưới). Logical Properties cho phép ta linh hoạt hơn trong việc hiển thị.
  • Thay vì dùng margin-top, thì có thể sử dụng margin-block-start, margin-left thì thay bằng margin-inline-start, … như thế thì direction của văn bản có như thế nào, các thuộc tính margin này vẫn hoạt động.
  • Key vẫn là nhớ cái ảnh bên dưới =))
Link to original

Spacing

How to select the best method of spacing elements for the layout method you’re using and the component you’re building.

Summary

  • Cách sử dụng padding/margin/gap/ để tạo space trong/ngoài/giữa các phần tử với nhau.
  • Ảnh hưởng của chúng khi dùng kèm với position
Link to original

Pseudo-classes

Summary

  • Apply styles vào elements, với điều kiện (functions) hoặc interacted bởi user.
  • Các pseudo-class hay dùng: :nth-child, :hover, :active, :focus, :checked, :enabled, :visited
Link to original

Pseudo-elements

Summary

  • Pseudo elements: Extra elements mà không cần phải thêm code HTML
  • Một số pseudo-elements thường dùng: before/after/marker/selection
Link to original

Borders

A frame for your boxes. Find out how to change the size, style, and color of borders using CSS.

Summary

  • border: 1px solid red - border width - border style - border color
  • border-radius: 1em - Bo góc cho border
  • border-image-* - Làm đẹp border với image
Link to original

Shadows

Add shadows to text and elements in CSS

Summary

  • box-shadow: 5px 5px 20px 5px #000; - Horizontal/Vertical offset/ Blur radius/ Spread radius/ Color
  • text-shadow: 3px 3px 3px hotpink - Giống box shadow nhưng không có spread.
  • Có thể set multiple box shadow 
Link to original

Focus

Focus

  • Focus chỉ xuất hiện khi element được <Tab> hoặc <Click> vào. Không phải hover
  • outline vs border:
    • outline bao quanh phần tử, nhưng không được tính vào kích thước của phần tử. Dù nó có dày tới đâu cũng không ảnh hưởng gì tới kích thước phần tử.
    • border được tính vào kích thước của phần tử, nó là 1 phần của element luôn
  • Set css focus bằng cách sử dụng pseudo-class, eg: a:focus
Link to original

Z-index and stacking contexts

Order in which elements layer on top z-index

Summary

  • Nếu không set z-index trình duyệt sẽ tự động set, phần tử sau đè lên phần tử trước.
  • Khi define z-index, ta đã tạo ra 1 stacking context. z-index sẽ chỉ có hiệu quả với các phần tử cùng cấp, chứ không vượt ra ngoài, ảnh hưởng tới stacking context khác được.
Link to original

Functions

CSS có sẵn nhiều functions. Learn about some of the key functions and how to use them.

  • calc, min, max, var, attr, url, clamp...
  • clip-path, offset-path, shape-outside, circle, ellipse, inset, polyon
  • transform: rotate(), rotateX,Y,Z, rotate3d(), scaleX(), scaleY(), translatex(), translatey(), skew()
  • perspective

Gradients

Type of gradients in CSS →tạo effects.

Summary

  • Có 3 cách chính để tạo ra gradient: linear-gradient, radial-gradient, conic-gradient
  • Để lặp lại các gradient, ta có thể sử dụng repeating-linear-gradient, ... functions.
Link to original

Animations

Highlight interactive elements, and add interest and fun to your designs

Summary

  • Define @keyframes animation-name xong set animation: animation-name 1000ms ...
  • @keyframes và animation
Link to original

Filters

Filter

  • blur
    • Làm mờ
    • filter: blur(0.2em)
  • brightness
    • Tăng/ Giảm độ sáng của 1 phần tử
    • filter: brightness(80%)
  • contrast
    • Set độ tương phản của element, tăng - giảm
    • filter: contrast(160%);
  • grayscale
    • Tăng độ xám
    • filter: grayscale(80%)
  • invert
    • Đảo ngược màu sắc của phần tử. Từ bảng màu sáng sang tối và ngược lại.
    • filter: invert(1);
  • opacity
    • Độ trong suốt
    • filter: opacity(0.3)
  • saturate
    • Độ bão hòa của màu sắc
    • filter: saturate(155%);
  • sepia
    • Tông màu nâu đỏ
  • hue rotate
    • Shift hue colors
    • filter: hue-rotate(120deg)
  • drop-shadow
  • url
    • apply an SVG filter from a linked SVG element or file.
    • filter: url(#pink-filter)
  • backdrop-filter
    • Giống như filter, nhưng chỉ apply cho background
Link to original

Blend Modes

Summary

  • mix-blend-mode and background-blend-mode
  • separable blend mode - considers each color component, such as RGB, individually. non-separable blend mode considers all color components equally
Link to original

Lists

Summary

  • Control list style
Link to original

Transitions

Summary

  • transition-property, duration, timing-function, delay
  • Chỉ những property có middle state mới có thể apply transition.
  • Không nên apply transition for all property, vì có thể ảnh hưởng tới performance.
Link to original

Overflow

Cách để control content mà không fit với parent size.

Summary

  • overflow - Control behavior khi phần tử con chiếm nhiều space hơn phần tử ch.
  • Một số value chính: auto, clip, scroll, hidden, visible
Link to original

Backgrounds

Style boxes’ background.

Summary

/* Shorthand */
background:
  <background-image>
  <background-position> / <background-size>?
  <background-repeat>
  <background-attachment>
  <background-origin>
  <background-clip>
  <background-color>?
Link to original

Text and typography

Style text.

Summary

  • @font-face, font-family, font-style, font-weight, font-size, line-height, letter-spacing, ...
  • text-transform, text-decoration
Link to original

Resources

Graph View

Backlinks