Các Thẻ HTML Thông Dụng

- H1 => H6 (Heading)
- P (paragraph)
- Img (image)
o Src (file nguồn), alt(khắc phục khi bị lỗi)
- a (anchor) (liên kết)
o href (gắn link muốn liên kết)
- ul, li (unordered list, list item)
- ol, li (biến dấu chấm thành stt)
- Table (dùng kẻ bảng)
o Thead(phần đầu của bảng)
 Th(table heading - tiêu đề)
o Tbody (phần thân của bảng)
 Tr(table row – dòng)
 Td (tương ứng với số thẻ “th”)
- Input
o Type (loại)
 Text
 Checkbox (chọn nhiều)
 Radio (chọn 1) (Require: đặt chung 1 cái name)
- Button
o Nút để nhấn
- Div (Tạo khối bao quanh)
CSS In HTML
- Internal (Bên trong – viết bất cứ đâu trong HTML = style)
o Style
 h1 {
color: red;
font-size: 14px;
}
- External
o Viết trong file css
 Link rel=”stylesheet” href= “đưa link file css vào”
- Inline
o Viết luôn vào trong dòng (còn gọi là attribute)
 Style= “color: red; font-size:16px”
 CSS Selector
- ID: Select (#)
- Class: Select (.)
CSS Variable
- ::root { --text-color: red;} // global
o h1 {color: var(--text-color); }

CSS Units
1. Absolute units (Tuyệt đối – trình duyệt thay đổi nó cũng không thay đổi)
a. Px
b. Pt
c. Cm
d. Mm
e. Inch
f. Pc
2. Relative Unites (Tương đối – Phụ thuộc vào thẻ chứa nó)
a. % (100% = 16px)
b. Rem (Phụ thuộc vào thẻ HTML) vd: HTML { font-size: 20px} =>
1rem = 20px => 2rem = 40px
c. Em (Phụ thuộc vào thẻ gần nhất chứa nó có css)
d. Vw (viewport – width: Chiều ngang của trình duyệt) vd: 50vw =>
50% của trình duyệt
e. Vh (viewport – hight: Chiều dọc của trình duyệt)
f. Vmin
g. Vmax
h. ex
i. ch
CSS Functions
- var()
- linear-gradient()
- rgba() vd: rgb(0,0,0) = color black / rgb(255,255,255) = color white;
- rbg()
- calc() – Tính toán Vd: calc(120px – 50px) / calc(120% / 2 * 2)
- attr() – Attribute (Thường kết hợp với lớp giả)
o <a href=https://fulstack.edu.vn> Hoc Lap Trinh </a>
o Style { a::after { content: “ (“ attr(href) ”)”; }
o => Hoc Lap Trinh (http://fulstack.edu.vn)
 CSS Pseudo-Class
- :root
- :hover
o Vd: h1:hover { color: red; }
o (Chỉ được kích hoạt khi di chuột vào)
- :active
o Vd: h1:active { color: red; }
o (Chỉ được kích hoạt khi bấm vào)
- :first-child
o Vd: li:first-child { color: red; }
- :last-child
o Vd: li:last-child { color: red; }

CSS Pesudo-Elements
- ::before
o Vd: .box::before {
content: “”; (Không thể thiếu)
display: block;
width: 50px;
height: 50px;
background-color: #fff;
}
o Vd: .box::before {
Content: “hello”;
display: block;
width: 50px;
height: 50px;
background-color: #fff;
}
- ::after
- ::first-letter (Kí tự đầu tiên – Ex: Viết to kí tự đầu tiên)
o Vd: h1::first-letter { font-size: 50px; }
- ::first-line
o Vd: <h1> CSS pseudo-elements <br /> Dong thu 2 </h1> // br:
xuống dòng
o h1::first-line { color: red; }
- ::selection (Bôi đen vào đổi màu chữ và background)
o Vd: ::selection { background-color: red; color: green;} (Toàn bộ)
 o Vd: h1:: selection {background-color: red; color: green;} (Chỉ mỗi
h1)
CSS Padding
- Lớp đệm
CSS Border
- Border-width: 10px; (Độ dày)
- Border-style: dashed (nét đứt) / solid (nét liền – mặc định là 2px);
- Border-color: #333; (Xét màu cho đường viền)
- Shorthand
o Border: 10px solid #333;

CSS Margin
Box-Sizing
<div class= “box”> Day La Noi Dung Bai Viet </div>
Css:
.box {
Width: 100px;
Height: 100px;
Color: #fff;
Background-color: #red;
Padding: 16px;
Border: 2px solid #333;
Box-sizing: border-box; ( giúp cho tổng content, padding,
border = width, height)
}
Background-Image
- Background-image: url(dán link vào);
- Background-size:
o 100px(xét cho chiều ngang: 100px – chiều dọc: auto-đúng tỉ lệ của
ảnh) // thuộc tính mặc định của nó sẽ là repeat
 o contain(cố gắng lấy chiều bức ảnh dài nhất có thể - đảm bảo không
bị che khuất mất bức ảnh)
o cover(cũng vậy – nhưng chấp nhận che mất 1 phần của bức ảnh)
- Background-repeat: no-repeat/repeat-x(chiều ngang)/repeat-y(chiều dọc);
- Có thể thêm nhiều image
o Background-image: url(dán link vào), url(dán link vào); (ảnh nào
viết trước thì nằm ở trên)
- Màu chuyển
o Background-image: linear-gradient(0deg “hướng xoay”, #333,
#ccc); (1 dài màu chuyển đều đặn)
o Background-image: linear-gradient(0def, rgba(255,255,0,0.5),
rgbc(0,0,255,0.5); (nhìn xuyên – trong suốt)
- Background-origin: (đi kèm background-image)
o Padding-box (mặc định)
o Border-box (đổ từ border vào )
o Contentn-box (đổ tử content vào)
- Background-position: (tùy chỉnh vị trí của hình ảnh)
o Top right (dính lên trên và bên phải)
o Bottom right (dưới và phải)
o Bottom center (dưới và giữa)
o Top (trên và giữa)
o 50px (chạy sang ngang 50px – center)
o Top 20px right 20px (cách trên 20px – cách phải 20px)
o Top -20px right -20px (top chạy ngược lên trên – right chạy ngược
sang phải)
o 30px 50px (cách trục y 30px – cách trục x 50px)
- Shorthand (image-repeat-position-size)
o Background : url(dán link vào) no-repeat center / contain;

CSS Position
- Relative (Tương đối): Lấy chình mình làm gốc tọa độ và không phụ thuộc
vào bất cứ gì cả.
- Absolute (Tuyệt đối): Phụ thuộc vào thẻ cha gần nhất nào có position
(Không phân biệt thẻ cha đó có position đó là gì), lấy thẻ cha làm gốc tọa
độ.
- Fixed (Phụ thuộc vào khung trình duyệt)
- Sticky (Phụ thuộc vào khung trình duyệt): Không khuyến cáo dùng bởi vì
nhiều trình duyệt không có.
 Các Cách Căn Giữa Trong CSS
- Căn giữa 1 item nằm trong 1 cái box
o Text-align: center; (nằm trong thẻ chứa nó cũng được vì nó có tính
kế thừa /mà trong chính nó cũng được) – Chiều ngang
o C1: thay đổi line-height: 100px (=chiều cao của cái box) – Chiều
dọc
o C2: display: flex; (thẻ cha) + Margin: auto; (thẻ con) + align-items:
center (thẻ con) + justify-content: center (thẻ con)
o C3: position: relative; (Thẻ cha) + position: absolute; (thẻ con) +
top: 50% (thẻ con) (50% của thẻ chứa nó) + transform: translateY(-
50%) (thẻ con) + left: 50% (thẻ con) + transform: translate X(-
50%);
Fix Ảnh Bị Lỗi => Ảnh Dự Phòng
- <img onerror=”this.src=’url dự phòng’” src =”url chính“ …>
- Background-image: url(‘link chính’), url(‘link dự phòng’);