Wikipedia

Khang1701

Tham gia ngày 30 tháng 6 năm 2021

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

CÁCH CĂN GIỮA

sửa
  1. margin-left: auto && margin-right: auto
  2. width: 100%
  3. position: absolute && left: 0 && right: 0
  4. position: absolute && left: 50% && transform: translateX(-50%);
  5. Căn giữa text bằng 2 đầu: text-align: justify;
  6. Căn giữa trên xuống dưới thì đặt line-height = height; khi thêm float:right thì thành block
  7. display:flex & margin: auto
sửa

- Để 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

- 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

- 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

- 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

- Đô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

  1. Header (đầu trang)
  2. Banner
  3. Navigation (điều hướng) : có thể nằm trong header
  4. Breadcrumb
  5. Sidebar (thanh 1 phía) : trái or phải màn hình
  6. Slider
  7. Content (nội dung chính)
  8. Footer (chân trang)

Phân tích

https://www.w3schools.com/w3css/tryw3css_templates_band.htm

  1. Header
  2. Slider
  3. Content
  4. 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

@media not|only mediatypes and (mediafeature and|or|not mediafeature){

CSS-Code;

}

1. Keywords

- not

- only

- and

- or

2. Mediatypes

- print

- screen

- speech

- all -default

3. Mediafeatures

- min-width

- max-width

- ...

4. Polyfill?

===============================================================================================================
sửa

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
 


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

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

- 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

https://codepen.io/ng-ngc-sn-the-bashful/pen/VwKXNyK

Lấy từ “https://vi.wikipedia.org/w/index.php?title=Thành_viên:Khang1701&oldid=65177488”