2 - CSS

1. CSS Tutorial

1.1. Default

1.1.1. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;

1.2. Selector CSS Selectors Cheatsheet ref: github

1.2.1. id

1.2.1.1. #id-name

1.2.2. class

1.2.2.1. .class-name

1.2.3. ref: dev.to

1.3. Color

1.3.1. rbga(255, 255, 255, 0.9);

1.3.2. #FF00FF

1.4. Import in css file or html file example:

1.4.1. @import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

1.4.2. <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">

1.5. Live-server with vscode

1.5.1. cmd> npm install -g live-server

1.5.2. cmd> live-server

1.6. Padding

1.6.1. 4 param: top right bottom left - theo chiều kim đồng hồ

1.6.2. 3 param: top left-rigth bottom

1.6.3. 2 param: top-bottom left-right

1.7. Margin

1.7.1. tương tự quy tắc của padding

1.7.2. Avoid Collapsing Margins

1.7.2.1. là cách mà trình duyệt hành xử với layout khi có 2 component liền kề nhau

1.7.2.2. component A (margin-bottom lớn hơn margin-top của component B thì khoảng cách giữa 2 component sẽ bằng giá trị của margin-bottom của component A

1.7.2.2.1. Lưu ý không áp dụng cho margin-left và right

1.7.2.3. Hãy áp dụng Single-direction margin declarations, nghĩa là khai báo margin theo 1 hướng là top hoặc là bottom cho các component trên trang

1.8. Boder

1.8.1. width, style, color

1.8.1.1. quy tắc chọn nhanh tương tự như trên với boder-with

1.8.1.2. quy tắc 1 lần: boder: <width> <style> <color>

1.8.1.3. boder: 1px solid red

1.8.2. radius

1.8.2.1. percent; x/y and pixel

1.9. Background

1.9.1. color

1.9.1.1. fill: background-color: <color>

1.9.1.2. transparent

1.9.1.3. https://cssgradient.io/

1.9.1.3.1. background: linear-gradient(90deg, rgba(255,0,255,1) 0%, rgba(0,255,0,1) 100%);

1.9.2. image

1.9.2.1. url(...)

1.9.2.2. repeat*

1.9.2.2.1. no repeat, x, y,...

1.9.2.3. size

1.9.2.3.1. %

1.9.2.3.2. contain

1.9.2.3.3. cover

1.9.2.3.4. auto*

1.9.2.4. position

1.9.2.4.1. x, y, center

1.9.2.5. attachment

1.9.2.5.1. scroll*

1.9.2.5.2. fixed

1.9.2.6. LoremFlickr.com

1.9.2.7. background-image: (response)

1.9.2.8. response

1.9.2.8.1. max-width: 100%; height: auto;

1.10. Icon

1.10.1. Font Awesome

1.11. Style link

1.11.1. :link, :visit, :active, :hover

1.12. List and Table

1.13. Display

1.13.1. Inline vs .block element

1.13.1.1. block - chiếm hẳn 1 hàng

1.13.1.2. inline - kích thước luôn bằng kích thước của nó - can not set width and height

1.13.1.3. inline - margin trên và dưới không có hiệu lực. Not margin-top and bottom

1.13.2. flex

1.13.2.1. flex-direction: column | row

1.13.2.1.1. flex theo hàng hay cột

1.13.2.1.2. flex theo hàng hay cột

1.13.3. block:

1.13.3.1. Thẻ a khi làm menu phải là display: block

1.13.4. Grid

1.13.4.1. CSS Grid Container

1.13.4.2. CSS Grid Item

1.14. Combinators

1.14.1. descendant selector (space)

1.14.1.1. div p {}

1.14.1.1.1. các p trong div - con cháu chít đều được

1.14.2. child selector (>)

1.14.2.1. div > p {}

1.14.2.1.1. Tất cả thẻ p là con của div

1.14.3. adjacent sibling selector (+)

1.14.3.1. div + p {}

1.14.3.1.1. thẻ p là ae tiếp theo của div

1.14.4. general sibling selector (~)

1.14.4.1. div ~ p {}

1.14.4.1.1. Tất cả thẻ p tiếp theo là ae của div

1.15. Pseudo

1.15.1. Class

1.15.1.1. example: :hover, :focus, :active,..... CSS Pseudo-classes

1.15.1.2. :not selector with layout navigation

1.15.2. Element

1.15.2.1. ::after / ::before | CSS-Tricks

1.16. FlexBox

1.16.1. flex-direction: row | column

1.16.2. justify-content:

1.16.2.1. đi theo giá trị của flex-direction:

1.16.2.1.1. row thì sắp xếp theo chiều từ trái sang phải

1.16.2.1.2. column thì từ trên xuống dưới

1.16.2.2. flex-end | flex-start* | center

1.16.2.3. space-between

1.16.2.3.1. canh đều các thành phần không có cách 2 bên mép

1.16.2.4. space-around

1.16.2.4.1. Canh đều các thành phần con và khoản cách giữa các thành phần con gấp đôi khoản cách giữa mép trái hoặc phải

1.16.2.5. space-evenly

1.16.2.5.1. Khoản cách giữa các thành phần con bằng với khoản cách giữa thành phần con và 2 bên mép( đối với 2 thành phần sát mép)

1.16.3. align-items:

1.16.3.1. canh chỉnh theo chiều vuông gốc với chiều hiện tại

1.16.3.2. flex-start | flex-end | center | baseline

1.16.3.3. stretch* : chiều cao/rộng của các thành phần con sẽ bằng với chiều cao/rộng của mẹ. tùy thuộc vào flex-direction: row/column

1.16.4. phần tử con { flex-basics:

1.16.4.1. áp dụng cho các con, giãn ra theo chiều của flex-direction

1.16.4.2. truyền vào giá trị mong muốn của kích thước phần tử con

1.16.4.2.1. Nhưng các trường hợp không được như ý có thể là

1.16.5. phần tử con { flex-grow:

1.16.5.1. có hiệu lực khi còn chỗ trống: default là giá trị = 0

1.16.5.2. Example: ví dụ mẹ còn trống >300px và có 3 phần tử con và giá trị flex-grow lần lượt là: 1, 2, 3

1.16.5.2.1. thành phần con có flex-grow: 1; sẽ chiếm 1 / (1+2+3) để lấp đầy khoản trống

1.16.5.2.2. ....

1.16.5.2.3. thành phần con có flex-grow: 3; sẽ chiếm 3 / (1+2+3) để lấp đầy khoản trống

1.16.6. phần tử con { flex-shrink:

1.16.6.1. flex-shrink: 0

1.16.6.1.1. thì phần tử này sẽ không bị cắt

1.16.6.2. giá trị mặt định là 1*

1.16.6.2.1. các phần tử sẽ tự động được chia lại khi độ rộng hoặc chiều cao không đủ, cụ thể công thức tính ở url stackoverflow

1.16.7. phần tử con { order:

1.16.8. Flexbox với margin-left: auto

1.16.8.1. parent

1.16.8.2. child: top - left

1.16.8.3. child: top - right

1.16.8.4. child: center, center

1.16.8.5. child: bottom - right

1.16.8.6. child: bottom - left

1.17. Position

1.17.1. static*,

1.17.1.1. giữ nguên sắp xếp có sẵn

1.17.2. relative

1.17.2.1. sắp xếp tương đối và không làm thay đổi các thành phần xung quanh

1.17.2.2. top, left, bottom, right

1.17.3. fixed

1.17.3.1. Fixed một phần tử ở vị trí tương đối với khung của sổ trình duyệt

1.17.4. absolute

1.17.4.1. Di chuyển tương đối

1.17.4.1.1. So với thằng cha gần nhất của nó là position: relative, nếu không có thì nó sẽ là body

1.17.4.2. Canh giữa so với phần tử relative gần nhất

1.17.4.2.1. position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);

1.17.4.3. Làm menu sổ xuống các kiểu

1.17.4.3.1. Thẻ a khi làm menu phải là display: block

1.17.5. sticky

1.17.5.1. A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed).

1.18. Đơn vị: px hay rem em

1.18.1. Khi người dùng tùy chọn kích cỡ chữ do trình duyệt hoặc thiết bị setting thì với.....:

1.18.1.1. px: kích cỡ sẽ không thay đổi: nên ta sẽ áp dụng cho các phần tử không cần phải bị phóng lên hoặc thu nhỏ lại như attribute boder

1.18.1.2. em, rem: kích cỡ sẽ thay đổi theo setting của trình duyệt hoặc thiết bị, nên áp dụng cho attributes: font-size, image-size, icon-size,...

1.19. Selector

1.19.1. Select Items Using Negative nth-child

1.19.1.1. :nth-child(2): Chọn phần tử thứ 2

1.19.1.2. :nth-child(2n): Chọn phần tử thứ 2, 4, 6, 8....

1.19.1.3. :nth-child(2n + 1): Chọn phần tử thứ 1, 3, 5, 7...

1.20. Table

1.20.1. Equal-Width Table Cells

1.21. Image

1.21.1. Remove khoảng cách thừa ở dưới image

1.21.1.1. luôn luôn set thuộc tính vertical-align: middle

1.22. Pointer Events to Control Mouse Events

1.22.1. pointer-events

1.22.1.1. selector parent

1.22.1.2. selector previous

1.23. Enable Show user agent shadow DOM trong DevTools của trình duyệt để debug CSS dễ dàng hơn

1.23.1. setting - element - "check"

1.24. Value Initial

1.24.1. width là auto

1.24.2. min-width là 0

1.24.3. max-width là none

1.24.4. set mặc định chỉ cần width: inittial

1.25. Input

1.25.1. Style CSS cho input placeholder với :placeholder-shown

1.25.1.1. Với ::placeholder ta chỉ có thể tác động style vào phần text của input như font-size, color

1.25.1.2. nhưng với :placeholder-shown ta còn có thể tác động style vào toàn bộ input khi mà placeholder đang được show như border chẳng hạn

1.25.1.3. placeholder là pseudo element nên sẽ viết 2 dấu hai chấm => ::placeholder

1.25.1.4. placeholder-shown là pseudo class nên sẽ viết 1 dấu hai chấm => :placeholder-shown

1.25.1.5. Edge không hỗ trợ

2. CSS Reference

2.1. Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết

3. CSS methodologies

3.1. BEM

4. CSS Responsive

4.1. Media query

4.2. Animation

4.2.1. https://wowjs.uk/

4.2.1.1. cdn amination.css and cdn wow.min.js

4.2.2. wow.js — Reveal Animations When Scrolling

5. CSS Advanced

5.1. 2D Transform Caption Hover Effects - Demo 3

5.1.1. translate

5.1.2. rotate

5.1.3. scale

5.1.4. skew

5.1.5. matrix

5.1.6. Caption Hover Effects - Demo 3

5.2. Easing Functions Cheat Sheet

6. Next steps:

6.1. Switch Button

6.2. Login form

6.2.1. <div class="input-group"> <input type="text" name="" id="username" required> <label for="username">Username</label> </div>

6.2.1.1. lable này giúp khi ta chỏ chuột vào label thì sẽ focus tới for="id của một phần tử nào đó"

6.3. Another login

6.3.1. position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);