12_Lesson16.kntt

​ĐỊNH DẠNG KHUNG

​1. Phân loại phần tử khối và nội tuyến
a) Phân loại

​ĐỊNH DẠNG KHUNG

​1. Phân loại phần tử khối và nội tuyến
b) Thay đổi loại phần tử bằng CSS

​ĐỊNH DẠNG KHUNG

​1. Phân loại phần tử khối và nội tuyến
b) Thay đổi loại phần tử bằng CSS

​Ví dụ CSS sau sẽ đổi loại phần tử span từ dạng mặc định là inline sang block.

​Mẫu CSS

​Mã html

Hiển thị trên trình duyệt

​ĐỊNH DẠNG KHUNG

2. Thiết lập định dạng khung bằng CSS (Box Model)

​Mọi phần tử HTML đều có thể được coi là một “chiếc hộp” hình chữ nhật. CSS sử dụng mô hình hộp (Box Model) để định dạng.

​ĐỊNH DẠNG KHUNG

2. Thiết lập định dạng khung bằng CSS (Box Model)

​ĐỊNH DẠNG KHUNG

2. Thiết lập định dạng khung bằng CSS (Box Model)

​ĐỊNH DẠNG KHUNG

​3. Một số bộ chọn đặc biệt của CSS

​ĐỊNH DẠNG KHUNG

​3. Một số bộ chọn đặc biệt của CSS

​ĐỊNH DẠNG KHUNG

​Luyện tập

​Câu 1: Phần tử html có thể ẩn đi trên trang web được không? Nếu có thì dùng lệnh CSS gì?

​Câu 2: Hãy giải thích ý nghĩa định dạng sau: .test .test_more { background-color: red; }

​Có thể ẩn một phần tử HTML trên trang web. Để làm điều này, ta thiết lập định dạng CSS với thuộc tính display có giá trị là none. Cú pháp: display: none;

​Ý nghĩa: Mẫu định dạng này sẽ áp dụng màu nền đỏ cho các phần tử thuộc lớp test_more với điều kiện các phần tử này phải nằm bên trong (là con hoặc cháu) của một phần tử khác thuộc lớp test.

Multiple Choice

Phương án nào dưới đây là bộ chọn (vùng chọn) CSS có mô tả: "Màu nền xanh dương, vùng lề 10px, văn bản căn giữa đối tượng và vùng/phần viền độ dày 2px màu đỏ"?

• background-color: blue; margin: 10px; text-align: center; border: 2px solid red;

• background-color: green; padding: 10px; text-align: justify; border: 3px solid red;

• color: blue; margin: 10px; text-align: center; border: 2px solid black;

• background-color: red; padding: 10px; text-align: left; border: 2px dashed green;

Multiple Choice

Phương án nào dưới đây mô tả đúng kết quả hiển thị của bộ chọn (vùng chọn): #mark {background-color: blue; border: 2px solid red;}?

• Nền màu xanh dương, độ dày viền 2px màu đỏ.

• Nền màu đỏ, độ dày viền 2px màu xanh dương.

• Nền màu đỏ, độ dày viền 2px màu xanh dương.

• Nền màu xanh lá nhạt, độ dày viền 2px màu đỏ.

Multiple Choice

Phương án nào dưới đây mô tả đúng kết quả khi áp dụng của bộ chọn (vùng chọn): #content{font-size: 18px; color: purple; padding: 15px;} cho thẻ văn bản?

• Kích thước chữ 18px, màu tím, khoảng trống bao quanh văn bản là 15px.

• Kích thước chữ 15px, màu tím, khoảng cách giữa văn bản và viền là 18px.

• Kích thước chữ 18px, màu tím, khoảng cách giữa văn bản và viền là 15px.

• Kích thước chữ 18px, màu chữ xanh lá, khoảng trống xung quanh là 15px.

Multiple Choice

Phương án nào sau đây là chức năng của thuộc tính text-align: center?

• Căn giữa toàn bộ đoạn văn bản.

• Tạo khoảng cách giữa các dòng văn bản.

• Căn chỉnh đoạn văn bản theo chiều dọc.

• Căn giữa dòng cuối đoạn văn bản.

Multiple Choice

Bộ chọn (vùng chọn) nào dưới đây tạo phần/vùng viền cho tất cả các ô trong bảng?

• table { border: 1px solid black; }

• th, td { border: 1px solid black; }

• td { border: 1px solid black; }

• table, th { border: 1px solid black; }

Multiple Choice

Phương án nào dưới đây là thuộc tính dùng để ẩn phần/vùng viền của bảng?

• border: no-border;

• border-style: hidden;

• border: none;

• table-border: none;

Multiple Choice

Phương án nào dưới đây định dạng thẻ div có màu nền xanh dương, đường viền nét đứt và màu đỏ?

• div {background-color: yellow; border: 5px dotted green;}

• div {background-color: red; border: 2px solid blue;}

• div {background-color: blue; border: 1px dashed red;}

• div {background-color: yellow; border: 5px dotted green;}

Multiple Choice

Phương án nào dưới đây là bộ chọn (vùng chọn) căn giữa nội dung trong thẻ div?

• div { text-align: center; }

• div { text-align: left; }

• div { vertical-align: middle; }

• div { text-align: right; }

Multiple Choice

Bộ chọn (vùng chọn) nào dưới đây sẽ tạo ra một thẻ div có viền dày 2px, màu viền đỏ và kiểu viền nét đứt thẳng?

• div { border: 1px solid blue; }

• div { border: 2px dashed red; }

• div { border: 2px dotted red; }

• div { border: 5px dotted green; }

Multiple Choice

Phương án nào sau là thuộc tính thay đổi kiểu chữ của một phần tử thành in nghiêng?

• text-transform

• font-style

• font-weight

• font-variant

Multiple Choice

Phương án nào sau đây là giá trị điền phù hợp vào thuộc tính text-align?

• bottom

• under

• justify

• 0000FF

Multiple Choice

Bộ chọn (vùng chọn) nào sau đây dùng để đặt màu chữ cho thẻ văn bản thành màu chữ đỏ?

• p { font-size: red; }

• p { font-color: red; }

• p { color: red; }

• p { text-color: red; }

Multiple Choice

Phương án nào sau đây là chức năng của bộ chọn (vùng chọn):

#section { margin: 5px; padding: 2px; color: #3474eb; } ?

• Bổ sung vào bộ chọn của phần tử HTML có tên là section.

• Thay đổi màu chữ của phần tử HTML có tên là section.

• Tạo khoảng trống cho phần tử HTML có id="section".

• Bộ chọn áp dụng cho phần tử HTML có class="#section".

Multiple Choice

Cho đoạn CSS sau:

.test .test_more { background-color: red; }

Đoạn code trên có tác dụng gì?

• Đặt màu nền đỏ cho các phần tử có class "test" và "test_more".

• Đặt màu nền đỏ cho tất cả các phần tử có class là "test".

• Đặt màu nền đỏ cho tất cả các phần tử có class là "test_more".

• Đặt màu nền đỏ cho các phần tử có class "test_more" nằm trong phần tử có class "test".

Multiple Choice

Thuộc tính CSS border: 2px solid red; tương đương với việc thiết lập các thuộc tính nào?

• border-width, border-style, border-color

• border-style, padding, width

• border-width, border-style, margin

• border-color, padding, margin

Multiple Choice

Cho đoạn CSS sau:

[href] { border: 1px solid blue; }

Đoạn code trên có tác dụng gì?

• Tạo viền xanh cho tất cả các phần tử có thuộc tính href.

• Tạo viền đỏ cho tất cả các phần tử có thuộc tính href.

• Tạo viền xanh cho tất cả các phần tử.

• Tạo viền xanh cho tất cả các thẻ <a>.

Multiple Choice

Đâu là ý nghĩa của thuộc tính padding trong CSS?

• Khoảng cách từ vùng text đến đường viền ngoài của khung.

• Độ dày của đường viền khung.

• Màu của viền khung.

• Khoảng cách từ đường viền ngoài của khung đến văn bản xung quanh.

Multiple Choice

Cấu trúc chung của định dạng CSS liên quan đến class là gì?

• element {thuộc tính : giá trị;}

• #idname {thuộc tính : giá trị;}

• .class {thuộc tính : giá trị;}

• [href] {border: 1px solid blue;}

Multiple Choice

Cho đoạn CSS sau:

h1 { border: 5px ridge blue;

margin: 20px; }

Đoạn code trên có tác dụng gì?

• Tạo đường viền 20px, màu xanh dương dạng ridge, và lề 5px cho tất cả các thẻ <h1>.

• Tạo đường viền 5px, màu xanh dương dạng ridge, và lề 20px cho tất cả các thẻ <h1>.

• Tạo đường viền 5px, màu xanh lá cây dạng ridge, và lề 20px cho tất cả các thẻ <h1>.

• Tạo đường viền 5px, màu xanh dương dạng solid, và lề 20px cho tất cả các thẻ <h1>.

Multiple Choice

Để định dạng một nhóm các phần tử có ý nghĩa gần giống nhau, ta sử dụng bộ chọn nào trong CSS?

• id

• attribute

• class

• tag

Multiple Choice

Phát biểu nào sau đây là đúng về tên của id và class trong CSS?

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

• Tên của id và class có thể chứa dấu cách.

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

• Tên của id và class bắt buộc phải bắt đầu bằng một chữ số.

Multiple Choice

Cấu trúc chung của định dạng CSS với bộ chọn ID là?

• [href] {border: 1px solid blue;}

• #idname {thuộc tính : giá trị;}

• .class {thuộc tính : giá trị;}

• element {thuộc tính : giá trị;}

Multiple Choice

Cấu trúc chung của định dạng CSS với bộ chọn lớp là?

• [href] {border: 1px solid blue;}

• #idname {thuộc tính : giá trị;}

• .class {thuộc tính : giá trị;}

• element {thuộc tính : giá trị;}

Multiple Choice

Thuộc tính CSS nào được dùng để thay đổi loại phần tử HTML?

• text-align

• display

• font-size

• color

Multiple Choice

Cho đoạn HTML sau:

<p class="test more once">Đoạn chương trình cần kiểm tra.</p>

Đoạn văn bản trên thuộc bao nhiêu lớp (class)?

• 1

• 2

• 3

• 4

Multiple Choice

Cho đoạn CSS sau:

span {display: block;}

Đoạn code trên có tác dụng gì?

• Chuyển đổi tất cả các thẻ span thành phần tử khối.

• Làm cho tất cả các thẻ span hiển thị trên một dòng.

• Ẩn tất cả các thẻ span trên trang web.

• Thay đổi màu chữ của tất cả các thẻ span.

Multiple Choice

Cho đoạn CSS sau:

#home {color: red;}

Đoạn code trên có tác dụng gì?

• Đặt màu đỏ cho tất cả các phần tử có id là "home".

• Đặt màu đỏ cho tất cả các thẻ <p>.

• Đặt màu đỏ cho tất cả các thẻ <h1>.

• Đặt màu đỏ cho tất cả các phần tử có class là "home".

Multiple Choice

Thuộc tính CSS nào dùng để thiết lập màu của viền khung?

• border

• border-width

• border-color

• border-style

Multiple Choice

Giá trị nào của thuộc tính display sẽ làm ẩn hoàn toàn phần tử trên trang web?

• none

• hidden

• inline

• block

Multiple Choice

Phần tử khối trong HTML thường có đặc điểm gì?

• Bắt đầu từ đầu hàng và kéo dài suốt chiều rộng của trang web

• Luôn nằm trong một phần tử khác

• Không có chiều rộng cố định

• Luôn là phần tử inline

Multiple Choice

Các thuộc tính khung trong CSS không áp dụng được cho loại phần tử nào?

• Phần tử khối

• Phần tử nội tuyến

• Phần tử block

• Phần tử với ID cụ thể