CSS là một ngôn ngữ được sử dụng để tìm và định dạng lại các phần tử được tạo ra bởi các ngôn ngữ đánh dấu (ví dụ như HTML). Bạn có thể hiểu đơn giản rằng, nếu HTML đóng vai trò định dạng các phần tử trên trang web như việc tạo ra các đoạn văn bản, các tiêu đề, hình ảnh,… thì CSS sẽ giúp chúng ta trang điểm lại các phần tử HTML đó như đổi màu sắc trang, đổi màu chữ, thay đổi cấu trúc,…
px và em và rem và %
px
không responsive.em
linh hoạt + có thể mở rộng + được dịch sangpx
.- Liên quan đến phần tử mà nó được sử dụng.
- 1em = 16px (kích thước phông chữ mặc định của Google Chrome).
- Thường được sử dụng cho headings, paragraphs, texts, các yếu tố liên quan đến (padding, margin).
rem
linh hoạt + có thể mở rộng + được dịch sangpx
.- Liên quan đến kích thước phông chữ của HTML gốc.
- Thay đổi kích thước phông chữ gốc -> thay đổi dự án giữ.
%
liên quan với thành phần khác.- Thường được sử dụng cho các thuộc tính height, width.
- Hãy sử dụng công cụ chuyển đổi Đơn vị CSS dưới đây nếu cần.
CSS Units converter
Công cụ chuyển đổi Đơn vị CSS
EM (Relative to the font-size of the element)
REM (Relative to font-size of the root element)
Pixel (1px = 1/96th of 1in)
Percent (Relative to the parent element)
Point (1pt = 1/72nd of 1in)
CSS Property
text-transform
Ví dụ | Mô tả |
---|---|
text-transform: none; | Trả văn bản về dạng mặc định ban đầu. |
text-transform: capitalize; | Chữ cái đầu tiên của mỗi từ là chữ in hoa. |
text-transform: uppercase; | Tất cả chữ trong văn bản thành chữ in hoa. |
text-transform: lowercase; | Tất cả chữ trong văn bản thành chữ thường. |
text-transform: inherit; | Thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài). |
display flex
Ví dụ | Mô tả |
---|---|
display: flex; | Giúp các thành phần linh hoạt. |
display: inline-flex; | Giúp các thành phần linh hoạt dưới dạng các inline. |
Tham khảo thêm cách sử dụng flexbox trong css.
Bootstrap
FontAwesome 5
Tham khảo thêm tại đây.
.login:before {
content: "\f007";
font-family: "Font Awesome 5 Free";
font-weight: 900;
}
SCSS/SASS
Xem tài liệu tham khảo chính thức. Bạn cũng có thể xem cách biên dịch scss sang css.
Mixin trong SASS
@mixin column-count($ncol) {
column-count: $ncol;
-webkit-column-count: $ncol;
-moz-column-count: $ncol;
-moz-column-count: $ncol;
}
/* usage */
.custom{
@include column-count(3);
}
Loop - Vòng lặp
$imgage-sizes: 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100;
@each $size in $imgage-sizes{
.img-full-#{$size}{
width: $size/100*100%;
}
}
Đánh số Heading
/* don't count h1, from h2 only */
body {counter-reset: h2counter;}
.post-content{
h1 {counter-reset: h2counter;}
h2 {counter-reset: h3counter;}
h3 {counter-reset: h4counter;}
h2:before {
content: counter(h2counter) ".\0000a0\0000a0";
counter-increment: h2counter;
}
h3:before {
content: counter(h2counter) "." counter(h3counter) ".\0000a0\0000a0";
counter-increment: h3counter;
}
h4:before {
content: counter(h2counter) "." counter(h3counter) "." counter(h4counter) ".\0000a0\0000a0";
counter-increment: h4counter;
}
}
Đánh số Table of Content
.post-content{
counter-reset: item;
list-style-type: none;
ol {
counter-reset: item;
list-style-type: none;
}
li {
&::before {
content: counters(item, ".") ". ";
counter-increment: item;
}
}
}