CSS - Cheatsheet

Tổng hợp Cheatsheet CSS - Liệt kê cú pháp bộ chọn, thuộc tính, đơn vị và các thông tin hữu ích khác...

🔖 Gợi ý từ Admin

📝 Tài liệu phỏng vấn kiến thức lập trình: Xem tại đây!!!

📌 Tìm hiểu về thuật toán: Xem tại đây!!!

📌 Roadmaps - Lộ trình trở thành một lập trình viên: Xem tại đây!!!

⚡️ Cheatsheet các ngôn ngữ lập trình: Xem tại đây!!!

⚡️ Handbook lập trình: Xem tại đây!!!

Mẹo

Bạn có thể tìm tất cả thông tin (tài liệu, công cụ...) thông qua núttìm kiếm 🔍ở góc trên bên phải màn hình.

I. Tổng hợp Cheatsheet CSS

1. Cơ bản

Có 3 cách để nhúng CSS vào trang web

• CSS External
• CSS Internal
• CSS Inline

External stylesheet

<link href="./path/to/stylesheet/style.css" rel="stylesheet" type="text/css" />

Internal stylesheet

<style>
  body {
    background-color: red;
  }
</style>

Inline styles

<h2 style="text-align: center;">Centered text</h2>

<p style="color: blue; font-size: 18px;">Blue, 18-point text</p>

⚡️ Thêm class: Bạn có thể điền 1 hoặc nhiều class vào trong 1 thẻ html

Thêm class

<div class="classname"></div>
<div class="class1 classn ..."></div>

⚡️ Thuộc tính !important: Ghi đè lại các style trước đó

!important

.post-title {
  color: blue !important;
}

⚡️ Bộ chọn (selector)

Selector

h1 {
  /* style here */
}

#job-title {
  /* style here */
}

div.hero {
  /* style here */
}

div > p {
  /* style here */
}

⚡️ Màu sắc văn bản (text color)

Text color

color: #2a2aff;
color: green;
color: rgb(34, 12, 64, 0.6);
color: hsla(30 100% 50% / 0.6);

⚡️ Màu nền (background)

Background

background-color: blue;
background-image: url('nyan-cat.gif');
background-image: url('../image.png');

⚡️ Font

Font

.page-title {
  font-weight: bold;
  font-size: 30px;
  font-family: 'Courier New';
}

⚡️ Vị trí (position)

Position

.box {
  position: relative;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
}

.box {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
}

⚡️ Hiệu ứng (animation)

Animation

p {
  animation: 300ms linear 0s infinite;
  animation: bounce 300ms linear infinite;
}

⚡️ Bình luận (comment)

Comment

/* Comment 1 dòng */

/* 
    Comment
    nhiều
    dòng 
*/

⚡️ Flex layout

Flex layout

div {
  display: flex;
  justify-content: center;
}

div {
  display: flex;
  justify-content: flex-start;
}

⚡️ Grid layout

Grid layout

#container {
  display: grid;
  grid: repeat(2, 60px) / auto-flow 80px;
}

#container > div {
  background-color: #8ca0ff;
  width: 50px;
  height: 50px;
}

⚡️ Biến (variable) và Counter

CSS Counter giống như "biến". Các giá trị biến có thể được tăng lên theo quy tắc CSS (sẽ theo dõi số lần chúng được sử dụng).

Để làm việc với CSS Counter, chúng ta sẽ sử dụng các thuộc tính sau:

• counter-reset - Tạo hoặc đặt lại bộ đếm
• counter-increment - Tăng giá trị bộ đếm
• nội dung - Chèn nội dung được tạo

Variable & Counter

counter-set: subsection;
counter-increment: subsection;
counter-reset: subsection 0;

:root {
  --bg-color: brown;
}

element {
  background-color: var(--bg-color);
}

2. CSS Selector

⚡️ Ví dụ:

Groups Selector

h1,
h2 {
  color: red;
}

Chaining Selector

h3.section-heading {
  color: blue;
}

Attribute Selector

div[attribute='SomeValue'] {
  background-color: red;
}

First Child Selector

p:first-child {
  font-weight: bold;
}

No Children Selector

.box:empty {
  background: lime;
  height: 80px;
  width: 80px;
}

⚡️ Các selector thường gặp

Selector	Mô tả
*	Chọn tất cả element
div	Chọn tất cả thẻ div
.classname	Chọn tất cả các element có classname
#idname	Chọn element có ID là idname
div,p	Chọn tất cả element là thẻ div và thẻ p
#idname *	Chọn tất cả các element nằm trong ID idname

⚡️ Các cách kết hợp selector thường gặp

Selector	Mô tả
div.classname	Chọn tất cả element là thẻ div có class là classname
div#idname	Chọn element là thẻ div có id là idname
div p	Chọn tất cả các element là thẻ p nằm trong thẻ div
div > p	Chọn tất cả element là thẻ p là con trực tiếp của thẻ div
div + p	Chọn element đầu tiên là thẻ p nằm sau thẻ div
div ~ p	Chọn tất cả các element là thẻ p nằm trước thẻ div

⚡️ Các selector thuộc tính (attribute) thường gặp

Selector	Mô tả
a[target]	Chọn tất cả các element có thuộc tính là target
a[target="_blank"]	Chọn tất cả các element có thuộc tính là tab mới
a[href^="/index"]	Chọn tất cả các element bắt đầu bằng /index
[class|="chair"]	Chọn tất cả các element class bắt đầu bằng chair
[class*="chair"]	Chọn tất cả các element chứa class chair
[title~="chair"]	Chọn tất cả các element có thuộc tính title chứa chair
a[href$=".doc"]	Chọn tất cả các element có thuộc tính là href kết thúc bằng .doc
[type="button"]	Chọn tất cả các element có thuộc tính type là button

⚡️ Các lớp giả (pseudo) hành vi của user

Selector	Mô tả
a:link	Chọn các element thẻ a ở trạng thái bình thường
a:active	Chọn các element thẻ a ở trạng thái khi click
a:hover	Chọn các element thẻ a ở trạng thái di chuyển chuột qua phần tử
a:visited	Chọn các element thẻ a ở trạng thái đã click vào link trước đó

⚡️ Các lớp giả (pseudo class)

Selector	Mô tả
p::after	Thêm nội dung sau phần tử <p>.
p::before	Thêm nội dung trước phần tử <p>.
p::first-letter	Chọn ký tự đầu tiên trong phần tử <p>.
p::first-line	Chọn dòng đầu tiên trong phần tử <p>.
::selection	Chọn phần được người dùng chọn trên trang web.
::placeholder	Chọn phần tử input hoặc textarea có thuộc tính placeholder.
:root	Chọn phần tử gốc của tài liệu (thường là <html>).
:target	Chọn phần tử được đánh dấu làm mục tiêu (thường là anchor được kích hoạt).
div:empty	Chọn phần tử <div> không có phần tử con.
p:lang(en)	Chọn phần tử <p> với thuộc tính ngôn ngữ là "en" (tiếng Anh).
:not(span)	Chọn các phần tử không phải là phần tử <span>.

⚡️ Các lớp giả của thẻ input

Selector	Mô tả
input:checked	Chọn các input đã được chọn (checked).
input:disabled	Chọn các input đã bị vô hiệu hóa (disabled).
input:enabled	Chọn các input được kích hoạt (enabled).
input:focus	Chọn input đang được tập trung (focused).
input:in-range	Chọn input với giá trị nằm trong khoảng.
input:out-of-range	Chọn input với giá trị nằm ngoài khoảng.
input:valid	Chọn input có giá trị hợp lệ.
input:invalid	Chọn input có giá trị không hợp lệ.
input:optional	Chọn input không yêu cầu thuộc tính required.
input:required	Chọn input yêu cầu có thuộc tính required.
input:read-only	Chọn input có thuộc tính readonly.
input:read-write	Chọn input không có thuộc tính readonly.
input:indeterminate	Chọn input ở trạng thái không xác định.

⚡️ Các lớp giả của thẻ p

Selector	Mô tả
p:first-child	Chọn phần tử <p> là phần tử con đầu tiên.
p:last-child	Chọn phần tử <p> là phần tử con cuối cùng.
p:first-of-type	Chọn phần tử <p> là phần tử đầu tiên của loại của nó.
p:last-of-type	Chọn phần tử <p> là phần tử cuối cùng của loại của nó.
p:nth-child(2)	Chọn phần tử <p> là phần tử con thứ hai của cha nó.
p:nth-child(3n+42)	Chọn các phần tử <p> theo công thức an + b.
p:nth-last-child(2)	Chọn phần tử <p> là phần tử con thứ hai từ cuối cùng.
p:nth-of-type(2)	Chọn phần tử <p> là phần tử thứ hai của loại của nó.
p:nth-last-of-type(2)	Chọn phần tử <p> là phần tử thứ hai từ cuối cùng của loại của nó.
p:only-of-type	Chọn phần tử <p> là phần tử duy nhất của loại của nó.
p:only-child	Chọn phần tử <p> là phần tử duy nhất con của cha nó.

3. CSS Fonts

⚡️ Thuộc tính

Selector	Mô tả
font-family:	<font>
font-size:	<size>
letter-spacing:	<size>
line-height:	<number>
font-weight:	<number> / bold / normal
font-style:	italic / normal
text-decoration:	underline / none
text-align:	left / right / center / justify
text-transform:	capitalize / uppercase / lowercase

⚡️ Cú pháp viết gọn

CSS font shorthand

p {
  font: style weight size(required) line-height family(required);
  font: italic 400 14px / 1.5 sans-serif;
}

Ví dụ

p {
  font-family: Arial, sans-serif;
  font-size: 12pt;
  letter-spacing: 0.02em;
}

⚡️ @font-face

@font-face

@font-face {
  font-family: 'Glegoo';
  src: url('../Glegoo.woff');
}

⚡️ Định dạng văn bản

Format text

p {
  /* Hello */
  text-transform: capitalize;

  /* HELLO */
  text-transform: uppercase;

  /* hello */
  text-transform: lowercase;
}

4. CSS Colors

⚡️ Tên màu

Name color

p {
  color: red;
  color: orange;
  color: tan;
  color: rebeccapurple;
}

⚡️ Tên màu (theo mã hex)

Hexadecimal color

p {
  color: #090;
  color: #009900;
  color: #090a;
  color: #009900aa;
}

⚡️ Tên màu (theo mã rgb())

rgb() Colors

p {
  color: rgb(34, 12, 64, 0.6);
  color: rgba(34, 12, 64, 0.6);
  color: rgb(34 12 64 / 0.6);
  color: rgba(34 12 64 / 0.3);
  color: rgb(34 12 64 / 60%);
  color: rgba(34.6 12 64 / 30%);
}

⚡️ Tên màu (theo mã HSL Colors)

HSL Colors

p {
  color: hsl(30, 100%, 50%, 0.6);
  color: hsla(30, 100%, 50%, 0.6);
  color: hsl(30 100% 50% / 0.6);
  color: hsla(30 100% 50% / 0.6);
  color: hsl(30 100% 50% / 60%);
  color: hsla(30.2 100% 50% / 60%);
}

⚡️ Các thuộc tính khác

Other

p {
  color: inherit;
  color: initial;
  color: unset;
  color: transparent;
  color: currentcolor; /* keyword */
}

5. CSS Backgrounds

⚡️ Thuộc tính

Selector	Mô tả
background:	cú pháp viết gọn
background-color:	mã màu/ tên màu
background-image:	url(...)
background-position:	left / center / right / top / center / bottom
background-size:	cover X Y
background-clip:	border-box | padding-box | content-box
background-repeat:	no-repeat | repeat-x | repeat-y
background-attachment:	scroll / fixed / local

⚡️ Cú pháp viết gọn

CSS background shorthand

p {
  background: #ff0 url(a.jpg) left top / 100px auto no-repeat fixed;
  background: #abc url(b.png) center center / cover repeat-x local;
  background: color image posX posY size repeat attach;
}

Ví dụ

p {
  background: url(img_man.jpg) no-repeat center;

  background:
    url(img_flwr.gif) right bottom no-repeat,
    url(paper.gif) left top repeat;

  background: rgb(2, 0, 36);
  background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(13, 232, 230, 1) 35%, rgba(0, 212, 255, 1) 100%);
}

6. CSS The Box Model

⚡️ Maximums / Minimums

• Minimums: Thuộc tính này để xác định giá trị tối thiểu.
• Maximums: Thuộc tính này để xác định giá trị tối đa.

Maximums / Minimums

.column {
  max-width: 200px;
  width: 500px;
}

⚡️ Margin / Padding

• margin là khoảng cách bên ngoài của một phần tử và các phần tử xung quanh nó. Nó xác định khoảng trắng giữa phần tử hiện tại và các phần tử khác.
• padding là khoảng cách bên trong của một phần tử, xác định khoảng cách giữa nội dung của phần tử và mép của nó.

Margin / Padding

.block-one {
  margin: 20px;
  padding: 10px;
}

⚡️ Box-sizing: là một thuộc tính trong CSS được sử dụng để xác định cách kích thước của một phần tử được tính toán, đặc biệt là cách nó xử lý giá trị của width và height.

• content-box (giá trị mặc định): Kích thước của phần tử chỉ bao gồm phần nội dung thực sự (content), không tính cả padding và border. Khi bạn đặt width: 100px cho một phần tử, nó sẽ có chiều rộng chính xác là 100px, và padding và border sẽ tăng chiều rộng thêm.
• border-box: Kích thước của phần tử bao gồm cả phần nội dung, padding và border. Khi bạn đặt width: 100px cho một phần tử với box-sizing: border-box, tổng chiều rộng thực sự của phần tử sẽ là 100px, và kích thước padding và border sẽ được tính vào.

Box-sizing

.container {
  box-sizing: border-box;
}

⚡️ Visibility: được sử dụng để xác định khả năng nhìn thấy của một phần tử trên trang web.

Visibility

.invisible-elements {
  visibility: hidden;
}

⚡️ Auto keyword: được sử dụng để chỉ định giá trị mặc định hoặc tự động của một thuộc tính.

Auto keyword

div {
  margin: auto;
}

⚡️ Overflow: trong CSS được sử dụng để xác định cách xử lý nội dung khi nó vượt quá kích thước của phần tử cha.

Overflow

.small-block {
  overflow: scroll;
}

7. CSS Animation

⚡️ Cú pháp rút gọn

p {
  animation: name duration timing-function delay count direction fill-mode play-state;
  animation: bounce 300ms linear 100ms infinite alternate-reverse both reverse;
}

⚡️ Thuộc tính

Selector	Mô tả
animation:	(shorthand)
animation-name:	<name>
animation-duration:	<time>ms
animation-timing-function:	ease / linear / ease-in / ease-out / ease-in-out
animation-delay:	<time>ms
animation-iteration-count:	infinite / <number>
animation-direction:	normal / reverse / alternate / alternate-reverse
animation-fill-mode:	none / forwards / backwards / both / initial / inherit
animation-play-state:	normal / reverse / alternate / alternate-reverse

👉 Xem thêm tại: animation

Ví dụ

p {
  /* @keyframes duration | timing-function | delay |
   iteration-count | direction | fill-mode | play-state | name */
  animation: 3s ease-in 1s 2 reverse both paused slidein;

  /* @keyframes duration | timing-function | delay | name */
  animation: 3s linear 1s slidein;

  /* @keyframes duration | name */
  animation: 3s slidein;

  animation: 4s linear 0s infinite alternate move_eye;
  animation: bounce 300ms linear 0s infinite normal;
  animation: bounce 300ms linear infinite;
  animation: bounce 300ms linear infinite alternate-reverse;
  animation: bounce 300ms linear 2s infinite alternate-reverse forwards normal;
}

⚡️ Javascript Event

Javascript Event

.one('webkitAnimationEnd oanimationend msAnimationEnd animationend')

8. CSS Flexbox

Ví dụ

.container {
  display: flex;
}

.container > div {
  flex: 1 1 auto;
}

⚡️ Container: là một phần tử cha (hoặc một phần tử được xác định là container flex) được sử dụng để chứa các phần tử con và áp dụng các thuộc tính Flexbox để kiểm soát bố cục của chúng.

Container

.container {
  display: flex;
  display: inline-flex;

  flex-direction: row; /* ltr - default */
  flex-direction: row-reverse; /* rtl */
  flex-direction: column; /* top-bottom */
  flex-direction: column-reverse; /* bottom-top */

  flex-wrap: nowrap; /* one-line */
  flex-wrap: wrap; /* multi-line */

  align-items: flex-start; /* vertical-align to top */
  align-items: flex-end; /* vertical-align to bottom */
  align-items: center; /* vertical-align to center */
  align-items: stretch; /* same height on all (default) */

  justify-content: flex-start; /* [xxx        ] */
  justify-content: center; /* [    xxx    ] */
  justify-content: flex-end; /* [        xxx] */
  justify-content: space-between; /* [x    x    x] */
  justify-content: space-around; /* [ x   x   x ] */
  justify-content: space-evenly; /* [  x  x  x  ] */
}

⚡️ Child: là các phần tử con của một container.

Child

.container > div {
  /* This: */
  flex: 1 0 auto;

  /* Is equivalent to this: */
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;

  order: 1;

  align-self: flex-start; /* left */
  margin-left: auto; /* right */
}

9. CSS Flexbox Tricks

⚡️ Vertical center: dùng để căn giữa một phần tử theo chiều dọc.

Vertical center

.container {
  display: flex;
}

.container > div {
  width: 100px;
  height: 100px;
  margin: auto;
}

⚡️ Vertical center (2)

Vertical center (2)

.container {
  display: flex;

  /* vertical */
  align-items: center;

  /* horizontal */
  justify-content: center;
}

⚡️ Reordering: điều chỉnh thứ tự hiển thị của các phần tử con trong một container flex bằng cách sử dụng thuộc tính order.

Reordering

.container > .top {
  order: 1;
}

.container > .bottom {
  order: 2;
}

⚡️ Mobile layout: người ta thường sử dụng layout dạng cột (column) ở giao diện mobile.

Mobile layout

.container {
  display: flex;
  flex-direction: column;
}

.container > .top {
  flex: 0 0 100px;
}

.container > .content {
  flex: 1 0 auto;
}

⚡️ Table-like

Table-like

.container {
  display: flex;
}

/* giá trị 'px' là tỷ lệ phần trăm được đề xuất */
.container > .checkbox {
  flex: 1 0 20px;
}

.container > .subject {
  flex: 1 0 400px;
}

.container > .date {
  flex: 1 0 120px;
}

⚡️ Vertical

Vertical

.container {
  align-items: center;
}

⚡️ Left and right

Left and right

.menu > .left {
  align-self: flex-start;
}

.menu > .right {
  align-self: flex-end;
}

10. CSS Grid Layout

⚡️ Grid Template Columns: được sử dụng để xác định kích thước và số lượng cột trong grid container.

Grid Template Columns

#grid-container {
  display: grid;
  width: 100px;
  grid-template-columns: 20px 20% 60%;
}

⚡️ fr Relative Unit: là một đơn vị tương đối (relative unit) mới được giới thiệu để định nghĩa kích thước của cột hoặc hàng dựa trên tỷ lệ phần trăm của không gian còn lại trong container.

fr Relative Unit

.grid {
  display: grid;
  width: 100px;
  grid-template-columns: 1fr 60px 1fr;
}

⚡️ Grid Gap: được sử dụng để xác định khoảng cách giữa các dòng và cột trong grid container.

Grid Gap

/*The distance between rows is 20px*/
/*The distance between columns is 10px*/
#grid-container {
  display: grid;
  grid-gap: 20px 10px;
}

⚡️ CSS Block Level Grid

CSS Block Level Grid

#grid-container {
  display: block;
}

⚡️ CSS grid-row: được sử dụng để xác định vị trí dòng của một phần tử trong grid container.

Trong đó:

• <grid-row-start> xác định dòng bắt đầu của phần tử.
• <grid-row-end> xác định dòng kết thúc của phần tử.

CSS grid-row

/* Cú pháp CSS:
  grid-row: grid-row-start / grid-row-end;
*/
.item {
  grid-row: 1 / span 2;
}

⚡️ CSS Inline Level Grid: cho phép bạn biến một phần tử cấp độ inline thành một container grid.

CSS Inline Level Grid

#grid-container {
  display: inline-grid;
}

⚡️ minmax() Function: trong CSS Grid Layout được sử dụng để đặt giới hạn cho kích thước của một cột hoặc hàng trong grid.

Trong đó:

• min là giá trị tối thiểu cho kích thước của cột hoặc hàng.
• max là giá trị tối đa cho kích thước của cột hoặc hàng.

minmax() Function

.grid {
  display: grid;
  grid-template-columns: 100px minmax(100px, 500px) 100px;
}

⚡️ grid-row-start & grid-row-end

• grid-row-start: Đặt dòng bắt đầu cho phần tử trong grid.
• grid-row-end: Đặt dòng kết thúc cho phần tử trong grid.

grid-row-start & grid-row-end

/* Cú pháp CSS:
  grid-row-start: auto|row-line;
  grid-row-end: auto|row-line|span n; 
*/

p {
  grid-row-start: 2;
  grid-row-end: span 2;
}

⚡️ CSS grid-row-gap: là một thuộc tính trong CSS Grid Layout được sử dụng để xác định khoảng cách giữa các dòng trong grid container.

CSS grid-row-gap

p {
  grid-row-gap: <length> | <percentage> | normal;
}

⚡️ CSS grid-area: để xác định vị trí và kích thước của một phần tử trong grid container, tức là tạo ra một hộp chứa (grid area) trong grid.

Trong đó:

• <grid-row-start>: Xác định dòng bắt đầu cho phần tử.
• <grid-column-start>: Xác định cột bắt đầu cho phần tử.
• <grid-row-end>: Xác định dòng kết thúc cho phần tử.
• <grid-column-end>: Xác định cột kết thúc cho phần tử.

CSS grid-area

.item1 {
  /* grid-area: <grid-row-start> / <grid-column-start> / <grid-row-end> / <grid-column-end>; */
  grid-area: 2 / 1 / span 2 / span 3;
}

⚡️ Justify Items: để xác định cách phần tử con trong grid item được căn chỉnh theo trục ngang của grid item đó. Thuộc tính này áp dụng cho tất cả các phần tử con bên trong một grid item.

p {
  justify-items: start | end | center | stretch;
}

Các giá trị có thể là:

• start: Căn phần tử con về phía trái (đối với ngôn ngữ viết từ trái sang phải) hoặc về phía phải (đối với ngôn ngữ viết từ phải sang trái).
• end: Căn phần tử con về phía phải (đối với ngôn ngữ viết từ trái sang phải) hoặc về phía trái (đối với ngôn ngữ viết từ phải sang trái).
• center: Căn phần tử con ở giữa theo trục ngang.
• stretch: Mở rộng phần tử con để chiếm toàn bộ không gian theo trục ngang của grid item. Đây là giá trị mặc định.

Justify Items

#container {
  display: grid;
  justify-items: center;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 10px;
}

⚡️ CSS grid-template-areas: để xác định khu vực (areas) của grid container và xác định cách các grid item sẽ được đặt trong các khu vực đó.

CSS grid-template-areas

.item {
  grid-area: nav;
}

.grid-container {
  display: grid;
  grid-template-areas:
    'nav nav . .'
    'nav nav . .';
}

⚡️ Justify Self: để xác định cách một phần tử con trong grid item sẽ được căn chỉnh theo trục ngang của grid item đó.

Justify Self

#grid-container {
  display: grid;
  justify-items: start;
}

.grid-items {
  justify-self: end;
}

⚡️ Align Items: để xác định cách các phần tử con trong một grid container sẽ được căn chỉnh theo trục dọc của grid container.

Align Items

#container {
  display: grid;
  align-items: start;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 10px;
}

11. CSS Dynamic Content

⚡️ Variable

Variable

/* Định nghĩa CSS Variable */
:root {
  --first-color: #16f;
  --second-color: #ff7;
}

/* Cách sử dụng biến (Variable) */
#firstParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}

👉 Xem thêm tại: CSS variables

⚡️ Counter

Counter

p {
  /* Set "my-counter" to 0 */
  counter-set: my-counter;

  /* Increment "my-counter" by 1 */
  counter-increment: my-counter;

  /* Decrement "my-counter" by 1 */
  counter-increment: my-counter -1;

  /* Reset "my-counter" to 0 */
  counter-reset: my-counter;
}

👉 Xem thêm tại: Counter set

⚡️ Sử dụng counters

Sử dụng counters

body {
  counter-reset: section;
}

h3::before {
  counter-increment: section;
  content: 'Section.' counter(section);
}

ol {
  counter-reset: section;
  list-marker-type: none;
}

li::before {
  counter-increment: section;
  content: counters(section, '.') ' ';
}

12. Css 3 tricks

⚡️ Scrollbar smooth: làm cho hiệu ứng cuộn chuột trở nên mượt mà mà không cần đến javascript.

Scrollbar smooth

html {
  scroll-behavior: smooth;
}

II. Tài liệu tham khảo

• mdn web docs
• quickref