đsai tin

Một trang web được xây dựng để hiển thị thông tin vềtrường học, sử dụng HTML và CSS để định dạng khung cho cácphần tử. Một số học sinh đã đưa ra các nhận xét sau:

• Phần tử khối (block element) luôn bắt đầu từ đầu hàng và chiếmtoàn bộ chiều rộng của trang web.

• Phần tử nội tuyến (inline element) tự động xuống dòng khi hiểnthị trên trang web

• Thuộc tính display: block có thể được sử dụng để biến mộtphần tử nội tuyến thành phần tử khối.

• Nếu một phần tử <span> được định dạng với thuộc tính border: 2px solid black; nhưng không thay đổi giá trị display, thì nó sẽchiếm toàn bộ chiều rộng của phần tử cha

Một học sinh đang thiết kế trang web và sử dụng CSS đểđịnh dạng khung cho các phần tử. Dựa trên bài học “Định dạngkhung”, các bạn trong lớp đã đưa ra các nhận xét sau:

• Thuộc tính border trong CSS được sử dụng để tạo viền bao quanh phần tử.

• Thuộc tính margin xác định khoảng cách giữa nội dung và viềncủa phần tử

• Khung của một phần tử nội tuyến không hỗ trợ thuộc tính width và height nếu không thay đổi giá trị của thuộc tính display

• Nếu một phần tử <div> có margin: 10px; và padding: 20px;, thìkhoảng cách từ nội dung đến viền là 10px và từ viền đến phần tửbên ngoài là 20px

Một nhóm học sinh thảo luận về cách sử dụng bộ chọntrong CSS để định dạng khung cho các phần tử. Dựa trên bài học, các em đưa ra các nhận xét sau:

• Bộ chọn lớp (class selector) được khai báo bằng dấu chấm (.) trước tên lớp trong CSS

• Bộ chọn mã định danh (id selector) được khai báo bằng dấuchấm (.) trước tên id trong CSS

• Một phần tử HTML có thể được gán nhiều lớp (class), nhưngchỉ được gán một mã định danh (id) duy nhất trong trang web

• Nếu một phần tử <div> có class="highlight" và CSS khai báo.highlight { background-color: yellow; border: 1px solid black; }, thì phần tử này sẽ có màu nền xanh và viền đen dày 1px

Một học sinh sử dụng CSS để định dạng khung và bộ chọncho trang web giới thiệu sách. Dựa trên bài học “Định dạngkhung”, các bạn trong lớp đưa ra các nhận xét sau:

• Thuộc tính padding xác định khoảng cách giữa nội dung vàviền của phần tử

• Một phần tử nội tuyến như <span> không thể chứa các phần tửkhối như <div> bên trong nó

• Thuộc tính display: inline sẽ khiến một phần tử khối hiển thịtrên cùng một dòng với các phần tử khác mà không xuống dòng.

• Nếu một phần tử <h1> có id="title" và CSS khai báo #title { border: 2px dashed red; padding: 5px; }, thì khoảng cách từ nộidung đến viền là 2px và viền sẽ có dạng nét đứt màu đỏ

Một học sinh thực hành định dạng khung và bộ chọn trênmột trang web thử nghiệm. Dựa trên bài học, các bạn trong lớpđưa ra các nhận xét sau:

• Thuộc tính display: none khiến phần tử không hiển thị trêntrang web.

• Bộ chọn thuộc tính trong CSS có thể chọn các phần tử dựa trêngiá trị của thuộc tính, ví dụ: a[target]

• Nếu một phần tử có class="note" và class="warning" cùng lúc, thì nó chỉ áp dụng định dạng từ bộ chọn .note và bỏ qua .warning.

• Nếu một phần tử <p> có CSS khai báo p { margin: 15px; border: 1px solid blue; display: block; }, thì phần tử này sẽ hiểnthị trên một dòng mới và có viền xanh bao quanh với khoảng cáchbên ngoài là 15px.

Trong CSS, các bộ chọn lớp giả (pseudo-class) và phần tửgiả (pseudo-element) được sử dụng để tăng tính tương tác và địnhdạng đặc biệt cho trang web. Hãy xác định các phát biểu sau là

• Bộ chọn lớp giả (pseudo-class) dùng để định dạng các trạngthái đặc biệt của phần tử HTML, như :hover, :focus.

• Cú pháp khai báo của bộ chọn phần tử giả (pseudo-element) làtên_phần_tử:tên_phần_tử_giả { thuộc_tính: giá_trị; }.

• Bộ chọn :hover giúp thay đổi trạng thái của phần tử khi ngườidùng di chuột qua phần tử đó.

• Nếu sử dụng đoạn mã CSS: p::first-letter { font-size: 2em; }, kýtự đầu tiên của mỗi đoạn văn sẽ có kích thước lớn gấp đôi bìnhthường.

Khi thiết kế trang web, việc xác định thứ tự ưu tiên của cácmẫu định dạng CSS rất quan trọng để đảm bảo hiển thị đúng ý muốn. Hãy xác định các phát biểu sau là Đúng hay Sai:

• Trọng số của bộ chọn ID (#id) trong CSS được tính là 100.

• Bộ chọn * có trọng số cao nhất trong CSS và áp dụng cho tất cảcác phần tử.

• Nếu hai mẫu định dạng có trọng số bằng nhau, mẫu được viếtcuối cùng sẽ được áp dụng.

• Xét đoạn mã CSS: #menu { color: blue; } .item { color: red; }, nếu một phần tử có cả id="menu" và class="item", màu chữ sẽ làxanh dương vì ID có trọng số cao hơn.

Trong bài học về CSS, bạn đã được tìm hiểu về các bộchọn như :link, ::before, và cách chúng giúp định dạng trang web một cách linh hoạt hơn. Hãy xác định các phát biểu sau là Đúnghay Sai:

• Bộ chọn lớp giả :link dùng để định dạng liên kết chưa được truycập.

• Bộ chọn phần tử giả ::before dùng để định dạng trạng thái củaphần tử khi người dùng tương tác.

• Bộ chọn ::before và ::after thường được dùng để thêm nội dung trước hoặc sau phần tử HTML mà không cần thay đổi mã HTML.

• Để thêm một biểu tượng trước mỗi đoạn văn, bạn có thể dùng: p::before { content: "★ "; }.

Khi làm việc với CSS, bạn cần hiểu cách tính trọng số củacác bộ chọn để dự đoán kết quả hiển thị khi có nhiều mẫu địnhdạng áp dụng cho cùng một phần tử. Hãy xác định các phát biểusau là Đúng hay Sai:

• Trọng số của bộ chọn class (.class) trong CSS được tính là 10.

• Bộ chọn !important có trọng số thấp nhất trong CSS nên ít đượcsử dụng

• Trọng số của bộ chọn .header a span là 12, vì có 1 class (10) và2 phần tử (2).

• Xét đoạn mã CSS: div { color: blue; } div { color: red; }, nếumột phần tử <div> được áp dụng, màu chữ sẽ là xanh dương vìmẫu đầu tiên được ưu tiên.

Trong một dự án thiết kế trang web, bạn cần sử dụng cácbộ chọn lớp giả và phần tử giả để tạo hiệu ứng tương tác và địnhdạng đặc biệt, đồng thời chú ý đến thứ tự ưu tiên của CSS. Hãyxác định các phát biểu sau là Đúng hay Sai:

• Bộ chọn lớp giả :active dùng để định dạng phần tử khi ngườidùng nhấn vào phần tử đó.

• Bộ chọn phần tử giả ::first-letter dùng để định dạng dòng đầutiên của phần tử HTML.

• Sử dụng pseudo-class như :hover giúp trang web sinh động hơnbằng cách thay đổi trạng thái khi người dùng di chuột qua phần tử.

• Xét đoạn mã CSS: a { color: black; } a.special { color: yellow; }, nếu một phần tử <a class="special"> được áp dụng, màu chữ sẽlà đen vì mẫu a được viết trước.