[Thực hành] Tạo bố cục cơ bản

Mục tiêu Luyện tập việc thiết kế bố cục cho trang web. Mô tả Trong phần hướng dẫn này, bạn sẽ sử dụng thẻ div và các thuộc tính css để tạo bố cục (layout) cho một trang web với nguyên mẫu như sau: Hướng dẫn Trước hết chúng ta cần tạo mới một trang

[Thực hành] Sử dụng box model

Dùng border, background, padding, margin để định dạng kết quả như hình dưới đây: Lần lượt tiến hành theo các bước hướng dẫn sau đây:  Bước 1: Tạo tài liệu mới html gồm đầy đủ các phần head, body. Trong body có sử dụng các thẻ div, p như sau:  Kết quả hiển thị:  Bước

[Bài đọc] RWD Media Queries

Media Queries hoạt động như thế nào? Media Queries sử dụng @media để áp dụng một khối thuộc tính css chỉ khi thoả mãn một điều kiện nào đó. Ví dụ: Trong ví dụ trên, thuộc tính background-color chỉ được áp dụng cho thẻ body trong trường hợp độ rộng của màn hình nhỏ hơn

[Bài đọc] Grid View

Grid-view là gì? Hiện nay, nhiều trang web phân bố nội dung theo dạng một grid-view (lưới), có nghĩa là trang được chia các thành cột: Nhờ sử dụng grid-view mà việc thiết kế trở nên dễ dàng hơn, giúp cho chúng ta dễ đặt các nội dung lên các vùng phù hợp của trang

[Bài đọc] Responsive Web Design

Responsive Web Design (RWD) là gì? RWD (Thiết kế Web Thích ứng) là kỹ thuật được sử dụng để trang web có thể hiển thị tốt trên nhiều loại thiết bị với kích thước của trình duyệt khác nhau. RWD sử dụng CSS và HTML để thay đổi kích thước, ẩn hoặc thêm các thành

Nhúng CSS vào trong tài liệu HTML

Có 3 cách để nhúng mã CSS vào trong một tài liệu HTML, bao gồm: Khai báo trực tiếp ở thẻ HTML (Inline style sheet) Khai báo trong thẻ <style> của tài liệu HTML (Internal style sheet) Khai báo trong file .css riêng biệt (External style sheet) 1. Khai báo trực tiếp ở thẻ HTML

[Thực hành] Tạo layout trong Bootstrap

Mục tiêu Sử dụng các thành phần của Bootstrap để tạo bố cục cơ bản cho một trang web. Mô tả  Hãy sử dụng các thành phần có sẵn của bootstrap để tạo bố cục và nội dung trang web như sau: Các bước thực hiện Bước 1: Tạo file layout.html Phân chia phần body trang

[Bài đọc] Bootstrap Cards

Cards là một thùng chứa nội dung linh hoạt và có thể mở rộng. Nó bao gồm các tùy chọn cho các tiêu đề và chân trang, nội dung, màu nền theo ngữ cảnh và các tùy chọn hiển thị mạnh mẽ. Nếu bạn quen thuộc với Bootstrap 3, Cards sẽ thay thế cho Panel với chức

Cú pháp của CSSPage

Cấu trúc của một Bộ quy tắc trong CSS Một Bộ Quy tắc (rule) CSS bao gồm một bộ chọn (selector) và một khối khai báo các thuộc tính: Bộ chọn (Selector) chỉ tới các phần tử HTML mà chúng ta muốn áp dụng kiểu. Khối khai báo (Declaration) bao gồm một hoặc nhiều khai

[Bài đọc] Thanh điều hướng (navbar)

Thanh điều hướng là thành phần responsive thường được sử dụng trong phần header trong website của bạn. Thông thường, ban đầu chúng được thu gọn lại (và mở ra khi kích hoạt) trên khung nhìn của điện thoại di động và sẽ được mở rộng ra khi chiều rộng của khung nhìn tăng lên.