Thành viên:Khang1701
Phím tắt VSC
Crl+ shift + l: chọn tất cả giống bôi đen
Alt + shift + -> : chọn tất cả class
Nguyên tắc thiết kế
/*
1. Từ ngoài vào trong
2. Từ trên xuống dưới
3. Tổng quan đến chi tiết
*/
/*
1. Vị trí
2. Kích thước (width, heigth)
3. Màu săc
4. Kiểu dáng (kiểu chữ, hình tròn, vuông,...)
*/
TIPS
[sửa | sửa mã nguồn]CÁCH CĂN GIỮA
[sửa | sửa mã nguồn]- margin-left: auto && margin-right: auto
- width: 100%
- position: absolute && left: 0 && right: 0
- position: absolute && left: 50% && transform: translateX(-50%);
- Căn giữa text bằng 2 đầu: text-align: justify;
- Căn giữa trên xuống dưới thì đặt line-height = height; khi thêm float:right thì thành block
- display:flex & margin: auto
HEADER
[sửa | sửa mã nguồn]- Để căn giữa chữ giữa chiều cao chính nó thì đặt line-height
- Bóng đổ: box-shadow
- Đặt min-width để sau này content dài ra thì nó cũng dài ra
- Top: 100% cách đúng bằng chiều cao của cha nó
- Line-height: 1.4 (en) , 1.6(vn)
SLIDER
[sửa | sửa mã nguồn]- Kỹ thuật gắn slider k bị lệch
+ padding-top: 50%; 50% chiều ngang của chính nó
BAND
[sửa | sửa mã nguồn]- Khi dùng float thì thẻ cha nên chứa overflow:hidden
- Thêm thẻ div.clear vào cuối thẻ con có float
TOUR
[sửa | sửa mã nguồn]- Mặc định thẻ img k tự điều chỉnh kích thước vừa với thẻ cha, nên phải set width thẻ img = 100%
- Thêm margin right left âm để điều chỉnh khoảng cách ảnh 2 bên
CONTACT
[sửa | sửa mã nguồn]- Đôi khi trong thực tế các icon k có kích thước bằng nhau nên đặt magin-left sẽ k chuẩn. Vì vậy nên đặt width && display: inline-block bằng nhau là đc
- .contact-info i[class*="ti-"]
- Thẻ div kế thừa 100% width màn hình nên sửa width img = 100%
- scroll-behavior: smooth; để trượt mượt hơn
VIII. Xây dựng web The Band
Những thành phần trong website
- Header (đầu trang)
- Banner
- Navigation (điều hướng) : có thể nằm trong header
- Breadcrumb
- Sidebar (thanh 1 phía) : trái or phải màn hình
- Slider
- Content (nội dung chính)
- Footer (chân trang)
Phân tích
https://www.w3schools.com/w3css/tryw3css_templates_band.htm
- Header
- Slider
- Content
- Footer
Dựng base (xây móng)
Xây dựng từng phần theo phân tích
Hoàn thiện
14. Biến
--name-variable: value
VD: color: var(--name-variable);
15. Đơn vị trong css
- Absolute units (đơn vị tuyệt đối)
+ px, pt, cm, mm, inch, pc
- Relative units (đơn vị tương đối)
+ %, rem, em, vw, vh, vmin, vmax, ex, ch
rem: font-size = 1rem (40px) phụ thuộc vào px định nghĩa trong thẻ html font-size: 40px (recommend)
em: phụ thuộc vào kích thước của thẻ cha gần nhất có thuộc tính font-size
vh: width: 1vh (chiếm 1% trình duyệt) (không quan tâm width thẻ cha)
15. CSS Function
- var()
- linear-gradient()
- rgba()
- rgb()
- calc()
- attr(): lấy được giá trị attribute
15. Pseudo elements
Nhất định phải có content: "" và display: block
- ::befort : luôn đứng đầu
- ::after: luôn đứng cuối dù có bao nhiêu elements ở giữa
- ::first-letter
- ::first-line
- ::selection : khi bôi đen
22. CSS Box-sizing
- box-sizing: border-box: Tự động tính: content = Tổng kích thước khai báo - border - padding. Nhưng nếu quá lớn thì sẽ bị đẩy ra, phải trong ngưỡng cho phép.
- content-box (default)
- unset: hủy box-sizing trở về default
VI. THUỘC TÍNH TẠO NỀN
23. Background-clip: muốn đổ màu cho 1 trong 3 thứ
- background-clip: border-box : đổ background từ border vào
- background-clip: padding-box : đổ background từ padding vào
- background-clip: content-box : đổ background từ content vào
24. Background-image
- background-image: url(), url()
- background-size: 100px; (width=100px, height: auto)
25. CSS Background-size keywords
- background- size: cover : bao phủ hoàn toàn, k lộ khoảng trắng
26. CSS Background-origin
Tương tự như background-clip nhưng áp dụng cho hình ảnh
28. CSS Background shorthand
- background: url() no-repeat center / contain;
VII. THUỘC TÍNH VỊ TRÍ
29. CSS Position: Relative : lấy gốc tọa độ tại nơi nó đứng
30. CSS Position: Absolute : dùng khi 1 đối tượng phụ thuộc 1 đối tượng khác. Có 1 đối tượng là con đối tượng khác, cần di chuyển đối tượng con xung quanh đối tượng cha. Tìm lần lượt các thẻ cha để xem có thuộc tính position thì sẽ dùng làm gốc tọa độ
31. CSS Position: Fixed: dùng khi 1 đối tượng phụ thuộc vào cửa sổ trình duyệt
Xây dựng web responsive
[sửa | sửa mã nguồn]@media not|only mediatypes and (mediafeature and|or|not mediafeature){
CSS-Code;
}
1. Keywords
- not
- only
- and
- or
2. Mediatypes
- screen
- speech
- all -default
3. Mediafeatures
- min-width
- max-width
- ...
4. Polyfill?
===============================================================================================================
[sửa | sửa mã nguồn]Query: em, rem, px? => em :1 em = 16px https://www.w3schools.com/tags/ref_pxtoemconversion.asp
PC: @media (min-width: 1024px => 64em)
Tablet & Mobile: @media (max-width: 1023px => 63.9375em)
Tablet: @media (min-width: 740px => 46.25em) and (max-width: 1023px => 63.9375em)
Mobile: @media (max-width: 739px => 46.1875em)
FLEXBOX
[sửa | sửa mã nguồn]
CSS Flexbox
display: flex | inline-flex : có sử dụng flexbox hay không
flex-direction: row | column : có thể thay đổi hướng main-axis (default:row ngang) rơ-reverse: đảo chiều
flex-wrap: nowrap | wrap | wrap-reserve : xuống dòng (default:nowrap) (container)
flex-basis: <length> : set kích thước cho main-size
justify-content: flex-start | flex-end | center | space-between | space-around : canh hướng flex-item (trái, phải, giữa) trường hợp main-axis nằm ngang, giành cho cha (nếu set cho cha thì k cần set cho con)
+ space-between: đẩy hai item ở bìa ra 2 bên nhưng k có khoảng trắng ở 2 lề
+ space-around: đẩy hai item ở bìa ra 2 bên nhưng có khoảng trắng ở 2 lề (khoảng cách giữa lớn gấp đôi bìa)
+ space-evenly: đẩy hai item ở bìa ra 2 bên nhưng có khoảng trắng ở 2 lề (khoảng cách giữa = khoảng cách bìa)
justify-self: flex-start | flex-end | center : khi set justify-content cho cha thì = việc set justify-self cho các flex-item
align-content: flex-start | flex-end | center : canh hướng flex-item (trên, dưới, giữa) trường hợp cross-axis nằm dọc, giành cho cha (nếu set cho cha thì k cần set cho con)
align-self: flex-start | flex-end | center : khi set align-content cho cha thì = việc set align-self cho các flex-item (item)
align-items: flex-start (cross start ở trên) | flex-end (cross-start ở dưới) : dùng để đổi chiều trục cross axis (container)
flex-grow: <number> : thay đổi kích thước flex-item (main-size) theo hướng main-axis
flex-srink: <number>: ngược lại flex-grow > co lại
flex: <number> : shorthand : flex-grow flex-baxis flex-shrink
flex-flow: shorthand : flex-wrap flex-direction
flex: auto;
flex: initial;
flex: none;
/* One value, unitless number: flex-grow
flex-basis is then equal to 0. */
flex: 2;
/* One value, width/height: flex-basis */
flex: 10em;
flex: 30%;
flex: min-content;
/* Two values: flex-grow | flex-basis */
flex: 1 30px;
/* Two values: flex-grow | flex-shrink */
flex: 2 2;
/* Three values: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;
order: <number>: thứ tự flex-item nào trước sau
@keyframe growth {
from {
opacity: 0;
height: 50%
}
to {
opacity: 1;
height: 100%
}
}
Use: animation: growth ease 0.5s;
dùng để chuyển động cột lớn lên
SỔ TAY: https://codepen.io/enxaneta/full/adLPwv/
BEM
[sửa | sửa mã nguồn]Block - Element - Modifier
- Cú pháp: .block--modifier | .block__element--modifier
.btn {
display: inline-block; (div)
text-decoration: none; (a)
background-color: transparent; (button)
border: none; (button)
outline: none; (button)
}
Toast
animation: fadeOut ease 0.3s 3s forward => 0.3 thời gian chuyển, 3s là sau 3 giây thì biến mất (delay), forward: biến mất luôn k hiện lại
Lưu ý tạo button
[sửa | sửa mã nguồn]- Khi tạo button người không đặt width, vì khi chữ dài ra thì rút dài ra và ngược lại => đặt min-width ( chữ ngắn quá thì có width tối thiểu)
- Tăng độ dày dùng padding
- .btn + .btn : css cho btn nào đứng cạnh btn
- Button có 2 trạng thấi
+ Enable: Pointer, hover effect
+ Disable: Arrow, no effect