Please enable JavaScript.
Coggle requires JavaScript to display documents.
Cascading Style Sheets(CSS) - Coggle Diagram
Cascading Style Sheets(CSS)
Là ngôn ngữ sử dụng để tìm và định dạng lại các phần tử HTML
Cách nhúng:
Inline Style: Khai báo trực tiếp vào thẻ HTML
Internall Style: Sử dụng thẻ Style ở trong thẻ <head>
External Style Sheet: Sử dụng thẻ <Link> để nhúng 1 file CSS khac vào
CSS Selectors
Tag seletors: chọn phần tử HTML
ID selector( #ID)
Class Selector (.ClassName)
Độ ưu tiên: ID--> Class-->tag
Box Model
Mỗi phần tử HTML được xem như 1 hộp
Box Model là khai niệm dùng để nói về việc design layout
4 thành phần
Content: Nội dung thẻ HTML
Padding: Khoảng cách từ nội dung đến border
Border: Viền của thẻ HTML
Margin: Khoảng cách từ Box Model này đến Box Model khác
Display Style
Thuộc tính Display trong CSS cho phép chúng ta xác định kiểu hiển thị của thẻ HTML
Inline:
Chiều rộng phụ thuộc vào nội dung
Không thể sử dụng thuộc tính width. height
GIá trị mặc định của nhóm thẻ <span><strong><a>
Block
Chiều rộng của thẻ chiếm 100% độ rộng của web
DÙng các thuộc tính width, height
Giá trị mặc định thẻ<DIV><P>
Inline-Block
Kết hợp 2 đặc tính trên
Display position
Dùng để dịnh vị vị trí của 1 phần tử HTML
Static: Giá trị mặc định
Relative: Căn chỉnh so với static, có thể kết hợp top, right
Absolute: Căn chỉnh so với thẻ cha chứa nó ( chú ý thẻ chả cần có position khác static)
Fixed: Căn chỉnh so với khung của trình duyệt, không ảnh hưởng với scroll
Sticky: Khi scroll tới vị trí nào đó thì phần tử được sticky sẽ được cố định
Bootstrap
Library
Là công cụ tiện ích tập hợp các chức năng được viết để sử dụng
Framework
Là 1 tập hợp các library được đóng gói để phát triển theo FrameWork nào đó.Nó cung cấp các tài nguyên, nguyên tắc, cấu trúc ứng dụng mà LTV phải tuân thủ nó
Bootstrap
Là 1 front end Framework miễn phí, gồm các mẫu thiết kế trên hình HTML, CSS, JS. Cung cấp các khả năng tạo các thiết kế reponsive
Grid của Bootstrap
Chia 1 trang web thành 12 cột
5 Class Css
Col --> Extra Small
Col- sm --> Small
Col -md --> medium
Col - lg ---> large
Col - xl ---> extra large
Compoment
Layout
Bố cục của websit rất quan trọng, nó quyết dịnh việc bố trí các thành phần trang có hợp lý, chuyên nghiệp hay không
Hiện nay thường có các thành phần:
Header
Navigation
Content
Sidebar
Footer
Reponsive Web Design (RWD)
Là kỹ thuật được sử dụng để hiển thị tốt trên nhiều loại thiết bị với kích thước của các trình duyệt khác nhau
Các trang web sẽ không bỏ bớt các thông tin để phù hợp với các thiết bị nhỏ hơn
RWD media queries
Là một kỹ thuật của Css cho phép kết xuất nội dụng để thích ứng với các điều kiện như kích thước và độ phân giải màn hình