Kiến thức về thiết kế web

Một nhóm học sinh đang phát triển một trang web để giới thiệu về khóa học thiết kế đồ họa dành cho người mới bắt đầu. Trang web này cung cấp các thông tin chi tiết như sau: Ngoài ra, trang web sẽ bao gồm các thành phần như hình ảnh của các dự án đồ họa, video giới thiệu về khóa học, tài liệu học thử và một số thông tin liên hệ bổ sung. Trong quá trình tạo trang web, nhóm có một số thảo luận như sau:

•      a) Để hiển thị tiêu đề "KHÓA HỌC THIẾT KẾ ĐỒ HỌA CƠ BẢN" với màu nền vàng, ta sử dụng mã lệnh:

  <h2 style="background-color: yellow;">KHÓA HỌC THIẾT KẾ ĐỒ HỌA CƠ BẢN</h2>

• b) Dùng cặp thẻ <ol> <li> </li> </ol> để tạo danh sách các nội dung Địa điểm, lịch học…

• c) Để tạo chữ đậm bạn có thể sử dụng 1 trong 2 thẻ sau: … hoặc <strong> … </strong>

      

• d) Để tạo liên kết "Xem chi tiết" với màu đỏ (#FF0000), sử dụng mã lệnh CSS:

Khi có nhiều mẫu định dạng có thể áp dụng cho một phần tử HTML nào đó trên trang web, CSS sẽ áp dụng định dạng theo thứ tự ưu tiên. a) Các bộ chọn có kí tự * sẽ có mức ưu tiên cao nhất. b) Nếu có nhiều mẫu định dạng với cùng trọng số thì định dạng ở vị trí cuối cùng sẽ được áp dụng. c) Bộ chọn kiểu thuộc tính có trọng số bằng 100. d) Bộ chọn a:link ~ p#info có trọng số bằng 112.

• Các bộ chọn có kí tự * sẽ có mức ưu tiên cao nhất.

• Nếu có nhiều mẫu định dạng với cùng trọng số thì định dạng ở vị trí cuối cùng sẽ được áp dụng.

• Bộ chọn kiểu thuộc tính có trọng số bằng 100.

• Bộ chọn a:link ~ p#info có trọng số bằng 112.

Pseudo-element (phần tử giả) là khái niệm chỉ một phần (hoặc một thành phần) của các phần tử bình thường. Các phần này có thể coi là một phần tử giả và có thể thiết lập mẫu định dạng CSS riêng. a) Pseudo-element được viết sau dấu :: theo cú pháp chuẩn trong CSS3. b) Phần tử giả có thể định dạng toàn bộ nội dung của phần tử HTML thay vì chỉ một phần. c) ::first-line là một pseudo-element giúp định dạng dòng đầu tiên của một

• Pseudo-element được viết sau dấu :: theo cú pháp chuẩn trong CSS3.

• Phần tử giả có thể định dạng toàn bộ nội dung của phần tử HTML thay vì chỉ một phần.

• ::first-line là một pseudo-element giúp định dạng dòng đầu tiên của một

• d) Pseudo-element không thể kết hợp với pseudo-class để tạo hiệu ứng CSS nâng cao.

Khi thiết lập kiểu dáng cho trang web, thứ tự ưu tiên của CSS có thể bị ảnh hưởng bởi các yếu tố khác nhau, bao gồm kiểu khai báo, vị trí khai báo và trọng số của bộ chọn.

• CSS trong thẻ <style> có ưu tiên cao hơn CSS nội tuyến

• @media cho phép điều chỉnh kiểu dáng dựa trên kích thước màn hình thiết bị.

• Nếu một thuộc tính CSS được áp dụng từ nhiều nguồn khác nhau, trình duyệt sẽ ưu tiên sử dụng thuộc tính có trọng số cao nhất.

• Trọng số của bộ chọn class (.class) và bộ chọn phần tử (p, h1, div) luôn bằng nhau.

Các thẻ (hay phần tử) HTML được chia làm hai loại, khối (block level) và nội tuyến (inline level).

• Các phần tử khối là các phần tử nhúng bên trong một phần tử khác.

• Một số phần tử nội tuyến là h1 - h6, p, div, b, a, label, input, table,…

• Chiều rộng của phần tử nội tuyến không phụ thuộc vào độ rộng của phần văn bản của phần tử này mà chỉ phụ thuộc vào chiều rộng của cửa sổ trình duyệt.

• d) Có thể thay đổi loại phần tử HTML bằng thuộc tính display.

Có thể thiết lập các mẫu định dạng với bộ chọn là class, ID hoặc thuộc tính.

• Cấu trúc chung của định dạng CSS liên quan đến lớp là .class {thuộc tính: giá trị;}.

• Tên của id và class không phân biệt chữ in hoa, in thường.

• Mỗi mã định danh (id) chỉ được gán duy nhất cho một phần tử HTML.

• Mẫu định danh này áp dụng cho các phần tử p là phần tử con của một phần tử div có mã định danh #price là div#price ~ p.

Các phần tử HTML đều thuộc một trong hai loại khối (block) hoặc nội tuyến (inline).

• Phần tử label là phần tử loại khối.

• Để làm ẩn một phần tử HTML trên trang web bằng CSS, ta sử dụng thuộc tính display với giá trị là hide.

• Khi thiết lập khung cho phần tử HTML bằng CSS, thuộc tính height chỉ áp dụng được cho phần tử dạng khối.

• Trong CSS, để thiết lập khoảng cách từ đường viền ngoài của khung đến văn bản xung quanh, ta sử dụng thuộc tính margin.

Trong CSS, bộ chọn lớp (class) được sử dụng để nhóm các phần tử có chung thuộc tính định dạng. Người dùng có thể khai báo nhiều lớp cho một phần tử bằng cách cách nhau bằng dấu cách. Bộ chọn ID (#id-name) chỉ áp dụng cho một phần tử duy nhất trên trang web, trong khi bộ chọn class (.class-name) có thể áp dụng cho nhiều phần tử.

• Bộ chọn class (.class-name) có thể được sử dụng cho nhiều phần tử khác nhau.

• Mỗi phần tử trong HTML chỉ có thể có một class duy nhất.

• Bộ chọn ID có thể áp dụng cho nhiều phần tử khác nhau trên cù

• d) Trong một phần tử, có thể sử dụng đồng thời nhiều class khác nhau.

Chọn class (.class-name) có thể được sử dụng cho nhiều phần tử khác nhau.

• Đúng

• Sai

Mỗi phần tử trong HTML chỉ có thể có một class duy nhất.

• Đúng

• Sai