Tự Học HTML & CSS - Bài 10 Hướng dẫn đồ họa UI và mô hình Box CSS

Bài 10 Hướng dẫn đồ họa UI và mô hình Box CSS

Chào mọi người hôm nay chúng ta sẽ tiếp tục đi tìm hiểu về CSS

Bữa trước chúng ta đã tìm hiểu về định dạng của CSS hay typography
Và hôm nay chúng ta sẽ tìm hiểu Thành phần đồ họa ul và mô hình box CSS
Chúng ta chuyển đổi một cái mô hình người ta ứng dụng rất hiệu quả trong điểm thể hiện lại các văn bản theo hình dạng đồ họa và cách chúng ta tư duy khi chúng ta chuyển đổi, chúng ta chuyển đổi thiết kế các thành phần.

Mục tiêu bài học
1. Hiểu về mô hình đồ họa cho thành phần HTML - Box Model
2. Cách thể hiện kích thước thành phần HTML của trình duyệt- Box Sizing
3. Định dạng đồ họa HTML bằng các thuộc tính Box Model
4. Cách tư duy đúng HTML CSS so với Design thuần
5. Đơn vị sử dụng trong CSS

Tìm hiểu về Box Model( mô hình Box)
- Content
- Padding
- Border
- Margin
Box sizing là gì? Các kiểu box sizing
- Box sizing là thuộc tính quy định cách tính width, height của 1 Box
- Mặc định các thành phần có box sizing : content-box nen cách tính theo cách là khi ta đặt width và height thì độ rộng và cao thực tế sẽ lớn hơn vì bị cộng thêm padding và border ra bên ngoài Box
- Nếu ta đặt thành phần thành Box-sizing :Border book thì cách tính khi ta đặt width và height độ rộng và cao thực sẽ không tăng , mà độ rộng cao nội dung sẽ bị giảm đi để đưa padding và border vào bên trong Box.
CSS Box Model Size Demo
- Width
- Height
- Resize
- Max Height
- Min Width
- Min Height
- Padding
- Margin
- Box Shadow
- Border
Các thuộc tính Box( định dạng đồ họa )
- Màu sắc
- Màu chuyển sắc
- Nền và hình ảnh
- Viền
- Bóng đổ( border-shadow)
CSS Background Demo
- BG color
- BG Position
- BG Repeat
- BG Origin
- BG Clip
- BG Size
- Opacity
- Backface Visibility
Cách tư duy khi HTML CSS so với Design- Nội dung
Tư duy động dữ liệu
- Các thành phần Frontend Web xây dựng từ HTML và gốc văn bản, sẽ phải cần thay đổi linh hoạt theo nội dung văn bản chứ không cứng như bản thiết kế
- Tức là nội dung văn bản khác nhau to nhỏ, nhiều ít thì thành phần liên quan( bọc xung quanh, bên cạnh thành phần,..) sẽ phải thay đổi theo
- Các thành phần hạn chế định vị cứng tọa độ và kích thước trừ một số thành phần đặc biệt theo thiết kế VD như sticky Menu, Sticky Button
- Hơn nữa một website khi thiết kế nó cần linh hoạt theo nhiều kích thước màn hình khác nhau, nhiều thiết bị khác nhau( PC, Tablet, Mobile,..) cho nên
- Đơn vị sử dụng ưu tiên linh hoạt theo tỉ lệ phần trăm
- Áp dụng Responsive để thay đổi tùy theo thiết bị
Cách tư duy khi HTML CSS so với Design- Tương tác
- Tư duy động tương tác
- Các thành phần Frontend Web xây dựng để người sử dụng, sẽ cần phản hồi khi người dùng tương tác chứ không cứng như bản thiết kế
- Tức là một số thành phần có trạng thái thay đổi VD( hover button, click,..) sử dụng các trạng thái của CSS Selector
- Ngoài ra còn thể hiện chuyển động nhỏ( micro interaction) khi tác động vào thành phần tạo sự ngạc nhiên, dễ hiểu và trải nghiệm tốt - Sử dụng khả năng CSS Transition, CSS Animation
- Do đó khi thực hiện chuyển đổi Ul sang HTML CSS cần
- Tư duy đồ họa chứ không phải tư duy lập trình
- Và hiểu hoạt động của các thành phần đó được thiết kế tương tác như thế nào
Đối chiếu thành phần đồ họa và thuộc tính CSS
- Quan sát phân tích thành phần đồ họa( VD Layout, Button, Menu,..) đang cần chuyển sang HTML CSS về 2 khía cạnh
- Thiết kế của thành phần về các thuộc tính đồ họa( màu sắc, font chữ, kích thước)
- Hoạt động của thành phần khi tương tác
- Tìm kiếm thẻ hoặc nhóm thẻ HTML phù hợp để tạo nội dung thành phần đồ họa đó( văn bản, liên kết, khối, nhóm,..) phần HTML
- Chọn lựa thành phần bằng CSS Selector và tìm các thuộc tính CSS thể hiện được thuộc tính đồ họa - Kiểm tra chỉnh sửa- Phần CSS
- Chọn lựa thành phần bằng CSS Selector và tìm các thuộc tính CSS thể hiện được tính đồ họa - Kiểm tra chỉnh sửa- Phần CSS
- Chọn lựa trạng thái thành phần bằng CSS Selector và tìm các thuộc tính CSS thể hiện được thuộc tính đồ họa trạng thái tương tác hoặcv animation - Kiểm tra chỉnh sửa phù hợp- Phần CSS tương tác và animation
Đơn vị trong CSS( CSS Unit)
-Đơn vị tuyệt đối
-px(pixels)- 1 pixels trên thiết bị duyệt web( phụ thuộc độ phân giải thiết bị)
-pt(points)- 1 point=1/72 inch
- một vài đơn vị khác
Đơn vị tương đối
- em- tính theo font-size hiện tại của thành phần, vd hiện tại font-size 14px thì 2em=28px
- rem-tính theo font-size của thành phần gốc body, vd body=12px; thì 2rem=24px
- phần trăm- tính tương đối theo phần trăng của thành phần cha( bọc đối tượng)
- Một số đơn vị khác ít sử dụng, ...

ĐỂ THEO DÕI CÁC BÀI HỌC TIẾP THEO BẠN LIKE VÀ ĐĂNG KÝ KÊNH ĐỂ NHẬN THÔNG BÁO NHÉ

----------------------------------------------
TRUNG TÂM ĐÀO TẠO THIẾT KẾ VNSKILLS
👉 Số điện thoại: [phone]

#hochtmlcss #tuhochtmlcss #huongdanhochtmlcss