Please enable JavaScript.
Coggle requires JavaScript to display documents.
Design With CSS (Module 3) - Coggle Diagram
Design With CSS
(Module 3)
CSS - Cascading Style Stylesheet
Cách nhúng CSS->HTML
Cascading Style Stylesheet là 1 ngôn ngữ giúp tìm và định dạng các phần tử được tạo bởi HTML
Có 3 cách nhúng:
Inline: Sử dụng thuộc tính CSS trong thẻ HTML
Internal: Sử dụng thẻ <style> trong thẻ <head>
External: Sử dụng thẻ <link> để nhúng 1 file CSS từ bên ngoài
Lưu ý:
Nên sử dụng Internal hoặc External để việc update hoặc sữa lỗi được dễ dàng hơn
Với 2 cách Internal và External thì cách nào được sử dụng gần thẻ hơn thì ưu tiên cách đó hơn
Độ ưu tiên: Inline, (Internal~External)
Selector
Có 3 loại selector thường dùng:
Id(#): dùng lấy giá trị riêng biệt cho HTML
Class(.):
Tag(thẻ tên):
Độ ưu tiên: Id > Class > Tag
Box model
Các phần tử trong HTML được xem là những chiếc hộp(Box model).
Mô hình hộp CSS là 1 chiếc hộp bao quanh phần tử HTML.
Có 4 thành phần:
Content: Nội dung của thẻ.
Padding: Là khoảng cách từ thẻ content đến boder.
Boder: Viền của thẻ.
Margin: Là khoảng cách từ box model này đến box model khác.
Lưu ý: Margin sẽ lấy khoảng cách từ boder của thẻ này tới boder kia mà không quan tâm đến margin của phần tử kia.
Position
Có 5 loại position hay gặp nhất:
static: giá trị mặc định , đây là vị trí mặc định các thẻ được tạo ra.
Relative: Gần tương tự như Static nhưng bị ảnh hưởng bởi top left right bottom.
Absolute: Sẽ so tuyệt đối với thẻ cha
Sticky: Kết hợp của fixed và relative.
Fixed: Cố định so với màn hình không bị ảnh hưởng scroll.
Display Property
Có 4 loại chính hay gặp:
Block: Chiếm 1 khối trên trang HTML.
Inline: Hiển thị trên 1 dòng.
None: Không hiển thị.
Inline-block: Vừa nằm trên 1 dòng và vừa khoảng cách với các dòng khác.
Thiết kế bố cục trang web
Grid View
Áp dụng để thiết kế 1 trang web theo dạng lưới -> có nhiều dòng và nhiều cột.
Responsive Web
Là khái niệm thể hiện trang web trên tất cả các thiết bị với đầy đủ nội dung và không xuất hiển thị thanh scrollbar nằm ngang.
Cách thiết kế web dựa trên RWD Media Queise
Kĩ thuật áp dụng Grid View + Resposive để thiết kế Web
Bootstrap cơ bản
Sử dụng Bootstrap
Bootstrap là framework HTML, CSS và Javascript cho phép người dùng dễ dàng thiết kế website theo 1 chuẩn nhất định.
C1: DDowwload -> Nhúng vào HTML bằng external.
C2: Sử dụng CDN để nhúng (External).
Các loại thiết bị do bootstrap hỗ trợ
xs: Điện thoại loại nhỏ.
sm: Máy tính bảng điện thoại màng hình lớn.
md: Laptop màng hình loại nhỏ.
lg: Desktop, laptop.
xl: smart tivi
Lưu ý: Khi sử dụng bootstrap 3.x thì hỗ trợ 4 loại màng hình: xs, sm, md, lg.
Khi sử dụng bootstrap 4.x cũng hỗ trợ 4 loại: sm, md, lg và xl.
Một số thành phần thông dụng
Badge: Thường dùng cho hiển thị số lượng thông báo, tin nhắn,...
Card: Thường dùng cho list(sản phẩm, giáo viên, học sinh,...)
Carousel: Dùng chạy quảng cáo(Web đặc vé phim: Top 3 phim xem nhiều nhất, khuyến mãi)
Modal: hiển thị hộp thoại thông báo xác nhận.
Narbar: Điều hướng(thường thì sử dụng cho phần header)
Spinner: Loading
Hỗ trợ GridView row,col-2,col-3, cd-sm-3, col-lg-4
Thiết kế GridView phải đặt row và col trong container
Container và container-fluid: fluid sẽ giúp trang web hiển thị layout full màng hình.
Đối với narbar thì không cần đề trong Container.