- I. Document
- II. Content
- 1. LÀM QUEN CSS
- 2. CSS FUNCTION
- 3. css Pseudo classes
- 4. Đệm, viền và khoảng lề
- 5. Thuộc tính vị trí (position)
- 6. Responsive
- 7. Quy ước đặt tên biến (clas bem)
- Internal: nội bộ
- Inline: nội tuyến
- External: bên ngoài
-
CSS selectors là các cách chúng ta sử dụng để chọn ra các phần tử (elements) mà chúng ta muốn “style” cho chúng.
-
ID & Class
-
ID: là duy nhất -> không được được đặt trùng tên -> chỉ 1 phần tử
-
Cú pháp:
# <tên id>
- VD:
#first-heading
-
Class: khi cần css cho nhiêu thẻ html cùng 1 lúc
-
Cú pháp:
. <tên class> vd:
- VD:
.other-heading
- Internal, External
- Inline - 1000
- #id - 100
- .class - 10
- tag - 1
- Equal specificity: dành cho các elements giống nhau nhưng điểm thuộc về elements mới nhất đc cập nhật
- Universal selection and inherited? - 0
-
Tác dụng: bảo trì, sửa đổi code dễ dàng hơn
-
Phải tạo ra 1 class phụ
-
Cú pháp
.root{
-- <tên biến>: <giá trị>;
}
<elements>{
<thuộc tính>: var(-- <tên biến);
}
- VD:
:root {
--text-color: red;
}
.text {
color: var(--text-color);
}
-
Đơn vị tuyệt đối (absolute): px...
-
Đơn vị tương đối (relative): %, rem, em, vw, vh...(thay đổi kích thước theo đối tượng nó phụ thuộc)
-
Mặc định 100% = 16px
-
%: phụ thuộc vào thẻ chứa nó -rem: phụ thuộc vào thẻ html (thường dùng)
-
em: phụ thuộc vào thẻ gần nhất chứa nó và cùng
-
vw: viewport width (chiều ngang trình duyệt)
-
vh: viewport height (chiều dài trình duyệt)
- var()
- linear-gradient()
- rgba(): trong suốT
- rgb():
- calc(): tính toán
- atr(): thuộc tính
- url();
- css Pseudo classes
- syntax:
- selector:pseudo-class {
- property: value; }
:root: tham chiếu tới ptu gốc
:hover: kích hoạt css khi đưa chuột đến
:active: bấm chuột
:first-child: select ptu đầu
:last-child: select ptu cuối
- Phần tử giả:
- Cú pháp:
selector::pseudo-element {
property: value;
}
- padding: tăng kích thước element (theo chiều đồng hồ)
- border: tăng kích thước element (theo chiều đồng hồ)
- Margin: giống như căn lề trong word (theo chiều đồng hồ)
- box-sizing: auto tính toán để cho giống kích thước mong muốn, nhưng nếu quá lớn thì thằng này cũng bó tay :))
- background-clip: chọn vùng đổ background;
- background-image:
- background-size:
- background-origin:
- background-position:
- relative: tương đối, lấy chính mình làm gốc toạ độ và không phụ thuộc vào cái gì khác
- absolute: tuyệt đối,
- fixed: phụ thuộc vào khung trình duyệt
- sticky: không khuyến cáo
pixel nên chia hết cho 4 để tạo khoảng cách cho đẹp hơn
- PC:
>= 1024px
- TABLET:
>= 740px && < 1024px
- MOBILE:
< 740px
Tối thiểu 42 - 48px thì ngón tay mới dễ dàng tương tác
- Là tiêu chuẩn đặt tên class khi viết CSS
- Viết tắt của: Block Element Modifier
- Block: Khối
- Element: Phần tử
- Modifier: Bổ sung ý nghĩa cho
Block
hoặcElement
- Mỗi người đặt một kiểu
- Members đặt class trùng nhau, CSS đè lên nhau
-
.block
-
.block__element
-
.block--modifier
-
.block__element--modifier
-
Vd:
- .card // block
- .card__heading // element
- .card--error // block--modifier
- Xây dựng layout web ( bố cục)
- Xây dựng thành phần web
- Tái xử dụng dễ dàng
- Tính rõ dàng
- Giúp cả team làm việc với nhau ổn hơn
- Tính modul, không lo css class này ảnh hưởng đến class khác
- Tên class dài
- Nhiều bố cho rằng là xấu
- Dự án nhiều members
- Dự án lớn, số lượng page nhiều hoặc số thành phần trên giao diện nhiều
- Làm button
- Làm message