Viết Tắt HTML
Phím Tắt Phần Tử
| div | Tạo |
| p | Tạo |
| h1 | Tạo |
| a | Tạo |
| img | Tạo |
| input | Tạo |
| btn | Tạo |
| link:css | Thẻ link cho CSS stylesheet |
HTML Boilerplate
! → HTML5 boilerplate đầy đủ
doc → chỉ doctype HTML5
Thẻ Ngầm Định
| .class | Tạo |
| ul>.item | Con tạo thành |
| table>.row | Con tạo thành |
| select>.opt | Con tạo thành |
Lồng Nhau
Toán Tử Lồng
| > | Phần tử con |
| + | Phần tử anh em |
| ^ | Leo lên một cấp |
| ^^ | Leo lên hai cấp |
Ví Dụ Lồng
div>ul>li → phần tử con lồng nhau
div+p+footer → phần tử anh em
div>p>span^h2 → leo lên: h2 là anh em của p
div>p>span^^h2 → leo lên hai: h2 anh em của div
Nhóm
Nhóm Ngoặc Đơn
div>(header>nav)+main+footer
→ nhóm header>nav thành một đơn vị
(div>h2+p)*3
→ lặp lại cấu trúc đã nhóm 3 lần
Layout Phức Tạp
.container>(header>h1+nav>ul>li*3)+main+footer
→ khung trang đầy đủ
Nhân
Toán Tử Lặp
| li*5 | Tạo 5 phần tử |
| div>p*3 | Div với 3 đoạn con |
| ul>li*4>a | Danh sách với 4 mục, mỗi mục chứa link |
| tr>td*4 | Hàng bảng với 4 ô |
Ví Dụ Nhân
ul>li.item*5 → 5 mục danh sách có class
table>tr*3>td*4 → bảng 3x4
.row>.col*3>p{Content} → hàng 3 cột có văn bản
Đánh Số
Đánh Số Mục ($)
| $ | Số tuần tự (1, 2, 3...) |
| $$ | Hai chữ số có đệm 0 (01, 02...) |
| $$$ | Ba chữ số có đệm 0 (001, 002...) |
| $@3 | Bắt đầu đánh số từ 3 |
| $@- | Đánh số ngược (giảm dần) |
| $@-3 | Đánh số ngược bắt đầu từ 3 |
Ví Dụ Đánh Số
li.item$*3 → item1, item2, item3
li.item$$*3 → item01, item02, item03
li.item$@3*3 → item3, item4, item5
Thuộc Tính
ID và Class
| #id | Thêm id: |
| .class | Thêm class: |
| .c1.c2 | Nhiều class: class="c1 c2" |
| #main.container | Kết hợp ID + class |
Thuộc Tính Tùy Chỉnh
td[colspan=2] →
a[href=#]{Click} → Click
input[type=email placeholder=Email]
div[data-id=$]*3 → data-id="1", "2", "3"
Văn Bản
Nội Dung Văn Bản ({})
| p{Hello} | Hello |
| a{Click me} | Click me |
| p{Item $}*3 | Item 1, Item 2, Item 3 |
Văn Bản Có Lồng
p>{Click }+a{here}+{ to continue}
→
Click here to continue
ul>li{Item $}*4 → danh sách với các mục có số thứ tựViết Tắt CSS
Box Model
| m10 | margin: 10px; |
| m10-20 | margin: 10px 20px; |
| p10 | padding: 10px; |
| w100 | width: 100px; |
| w100p | width: 100%; |
| h50 | height: 50px; |
Display & Position
| d:f | display: flex; |
| d:g | display: grid; |
| d:n | display: none; |
| d:b | display: block; |
| pos:r | position: relative; |
| pos:a | position: absolute; |
Flexbox
| jc:c | justify-content: center; |
| jc:sb | justify-content: space-between; |
| ai:c | align-items: center; |
| fxd:c | flex-direction: column; |
| fw:w | flex-wrap: wrap; |
Typography & Màu Sắc
| fz14 | font-size: 14px; |
| fw:b | font-weight: bold; |
| ta:c | text-align: center; |
| c:#333 | color: #333; |
| bgc:#fff | background-color: #fff; |