wayground logo

Free Printable Worksheets

NEW

Font size

S
M
L
XL
Worksheets

HTML3

Total questions: 50

Worksheet time: 25mins

Name
Class
Date
1.

Có bao nhiêu loại đơn vị trong CSS ?

a)

1

b)

2

c)

vô số

d)

3

2.

Class nào biểu thị hành động thành công hoặc tích cực?

a)

bg-info

b)

bg-success

c)

bg-primary

d)

bg-warning

3.

Class nào được sử dụng để tạo một nhóm nút?

a)

group-btn

b)

button-group

c)

group-button

d)

btn-group

4.

Để tạo 1 tab ẩn trong tab navigation, ta chọn:

a)

nav, nav-tabs

b)

nav, nav-pills

c)

nav, nav-tabs, disabled

d)

nav, nav-pills, nav-disabled

5.

Class "container-fluid" trong Bootstrap có đặc điểm:

a)

Tạo vùng chứa có độ rộng cố định

b)

Tạo vùng chứa có kích thước max-width tại mỗi breakpoint

c)

Tạo vùng chứa có độ rộng tràn hết màn hình

d)

Tạo vùng chứa chiều rộng tùy ý

6.

Làm thế nào để hình sau có đường viền độ dày 1px? <img id="mainpic" src="cat.png">

a)

#mainpic{border 1px solid red;}

b)

mainpic{border 1px solid blue;}

c)

#mainpic{border 1px;}

d)

mainpic{border 1px solid blue;}

7.

Làm sao để tạo chữ đậm?

a)

Tất cả các chọn lựa đều đúng

b)

font-weight: bold

c)

font:bold

d)

style:bold

8.

Class nào được sử dụng để tạo phân trang cơ bản?

a)

pagination

b)

page

c)

navigation

d)

pages

9.

Câu lệnh nào thường dùng khi ta muốn đặt các khối div nằm kế bên nhau khi dàn trang?

a)

Display: left;

b)

Float: clear;

c)

Float: left;

d)

Display: next;

10.

Để có kết quả như hình bên dưới ta chọn đáp án nào sau đây?

a)

<img src="hinh1.jpg" alt="hinh1"><img src="hinh2.jpg" alt="hinh2">

b)

<div><img src="hinh1.jpg" alt="hinh1"></div><div><img src="hinh2.jpg" alt="hinh2"></div>

c)

<span><img src="hinh1.jpg" alt="hinh1"></span><span><img src="hinh2.jpg" alt="hinh2"></span>

d)

<div><img src="hinh1.jpg" alt="hinh1"><img> src="hinh2.jpg" alt="hinh2"></div>

11.

Dòng nào tuân theo đúng cú pháp của CSS?

a)

body;color=black

b)

body{color: black}

c)

{body;color=black{body}

d)

{body;color:black}

12.

Câu lệnh sau đây tạo margin cho đối tượng div như thế nào?

a)

top margin = 5px; left margin = 5px; bottom margin = 10px; right margin = 10px;

b)

top margin = 10px; left margin = 5px; bottom margin = 5px; right margin = 10px;

c)

Câu lệnh viết sai

d)

top margin = 5px; left margin = 10px; bottom margin = 5px; right margin = 10px;

13.

Làm thế nào để tag div nằm giữa trang web hay cha của nó theo chiều ngang?

a)

Margin:0;

b)

Text-align:center;

c)

Margin:0 auto;

d)

Margin:0 0;

14.

Câu nào sau đây sai:

a)

Các đối tượng có position:absolute có thể xếp chồng lên nhau

b)

Khi ta không khai báo position, có nghĩa là position:absolute

c)

Thuộc tính z-index có tác dụng khi đi kèm với position:absolute.

d)

Position:relative sử dụng khi ta muốn dời đối tượng so với vị trí mặc định của nó

15.

Làm cách nào để tạo kết quả như hình

a)

Tất cả các chọn lựa đều đúng

b)

div p:nth-child(1) { background #00ff00; }

c)

div p { background #00ff00; }

d)

div p:only-child( { background #00ff00; }

16.

Làm thế nào để chữ của tất cả các tag <a> đổi sang màu trắng khi đưa con trỏ ngang qua.

a)

a:over{color:white;}

b)

a:onmouseover{color:white;}

c)

a:onHover{color:white;}

d)

a:hover{color:white;}

17.

Làm thế nào để chữ "Xin chao" và "Toi den tu TP HCM" lớn gấp đôi?

a)

#cau1,#cau3{font-size:2em}

b)

p.warning{font-size:2em;}

c)

.warning{font-size:2em;}

d)

Tất cả các chọn lựa đều đúng

18.

Làm cách nào để tạo kết quả như hìnhx

a)

div{background #00ff00;}

b)

div p+p {background #00ff00;}

c)

div p{background #00ff00;} hoặc div>p{background #00ff00;}

d)

p.div{background #00ff00;}

19.

Làm cách nào để tạo kết quả như hình

a)

div p:last-child, p:last-of-type{ background #00ff00;}

b)

p:last-of-type{background #00ff00;}

c)

Tất cả các chọn lựa đều đúng

d)

p:last-child{background #00ff00;}

20.

Làm cách nào để tạo kết quả như hình?

a)
  • input:disabled { background: #ff0000; }

b)
  • form:disabled { background: #ff0000; }

c)
  • form input:checked { background: #ff0000; }

d)
  • form:first-child { background: #ff0000; }

21.

Làm cách nào để tạo kết quả như hình?

a)

input:last-child{background:#00ff00;}

b)

input:enabled{background:#00ff00;}

c)

input:checked{background:#00ff00;}

d)

input:first-child{background:#00ff00;}

22.

Làm cách nào để tạo kết quả như hình:

a)

div p:last-child, div+p {background: #00ff00;}

b)

div~p {background: #00ff00;}

c)

div p+p {background: #00ff00;}

d)

Tất cả các lựa chọn đều đúng

23.

Khi cần ẩn một đối tượng, ta dùng thuộc tính CSS nào?

a)

Display:hidden

b)

Visible:hidden

c)

Visibility:hidden

d)

Hidden:yes

24.

chọn hiện thị đúng:

a)

b)

c)

d)

tất cả đều sai

25.

đáp án nào đúng:

a)

b)

c)

d)

26.

lass nào được sử dụng để tạo màu văn bản màu cam?

a)

txt-orange

b)

txt-warning

c)

bg-warning

d)

text-warning

27.

Đoạn code sau tạo trang web như thế nào?

a)

Có 3 cột bằng nhau

b)

Có 3 cột và 3 dòng bằng nhau

c)

Có 3 cột có kích thước khác nhau

d)

Có 3 dòng có độ rộng 33.33%

28.

Class nào nắn hình ảnh thành hình tròn?

a)

img-circle

b)

img-round

c)

img-rounded

d)

rounded-circle

29.

Class nào có thể được sử dụng để đẩy một phần tử sang bên phải?

a)

float-start

b)

float-r

c)

float-right

d)

float-end

30.

list-style-type: none; có tác dụng gì?

a)

Ẩn toàn bộ danh sách

b)

Loại bỏ dấu đầu dòng

c)

Làm trong suốt danh sách

d)

Thay đổi kiểu bảng

31.

 display: block; sẽ khiến phần tử có đặc điểm gì?

a)

Không xuống dòng

b)

Chiếm toàn bộ chiều ngang

c)

Không chiếm không gian

d)

Không thể chứa nội dung

32.

 z-index có hiệu lực khi nào?

a)

Mọi lúc

b)

Chỉ khi display: block

c)

Khi position là relative, absolute, fixed, sticky

d)

Khi float được thiết lập

33.

opacity: 0.5; làm gì?

a)

Ẩn phần tử

b)

Làm phần tử trong suốt một phần

c)

Tăng độ sáng

d)

Đổi vị trí phần tử

34.

Phân biệt visibility: hidden; và display: none;

a)

Không khác nhau

b)

hidden ẩn và không chiếm chỗ, none vẫn chiếm chỗ

c)

hidden chiếm chỗ, none không chiếm chỗ

d)

Cả hai đều làm trong suốt

35.

float: right; có tác dụng:

a)

Căn giữa phần tử

b)

Đẩy phần tử sang bên phải container

c)

Thêm border

d)

Tạo hiệu ứng trượt

36.

Thuộc tính nào dùng để ngăn phần tử bị lấn bởi phần tử float?

a)

overflow

b)

z-index

c)

clear

d)

visibility

37.

table-layout: fixed; có ý nghĩa gì?

a)

Cố định kích thước bảng theo nội dung

b)

Tự động điều chỉnh theo nội dung

c)

Cố định độ rộng cột

d)

Không có tác dụng

38.

caption-side: bottom; sẽ đặt tiêu đề bảng ở:

a)

Trên bảng

b)

Dưới bảng

c)

Trái bảng

d)

Giữa bảng

39.

 display: inline-block; kết hợp đặc điểm nào?

a)

float + clear

b)

inline + block

c)

flex + grid

d)

table + caption

40.

 overflow: hidden; sẽ:

a)

Ẩn phần nội dung tràn ra ngoài

b)

Tạo thanh cuộn

c)

Làm trong suốt phần tử

d)

Tăng kích thước phần tử

41.

 border-collapse: collapse; áp dụng trong:

a)

Div

b)

List

c)

Table

d)

Inline elements

42.

 overflow-wrap: break-word; giúp:

a)

Ẩn từ dài

b)

Bẻ từ quá dài xuống dòng

c)

Xoá đoạn văn

d)

Tăng độ sáng

43.

 visibility: collapse; có hiệu quả nhất với:

a)

Div

b)

Table row

c)

Li

d)

Img

44.

opacity: 1; là trạng thái:

a)

Trong suốt hoàn toàn

b)

Rõ ràng, không trong suốt

c)

Mờ nhẹ

d)

Mặc định là ẩn

45.

Thuộc tính CSS để canh khoảng cách giữa các ô trong bảng là:

a)

caption-side

b)

padding

c)

border-width

d)

border-spacing

46.

Trong CSS, thuộc tính border-spacing: 10px 5px; có nghĩa là gì?

a)

Cách đều các ô trong bảng 10px theo cả chiều ngang và chiều dọc

b)

Cách các cột 10px và cách các hàng 5px

c)

Cách hàng 10px và cột 5px

d)

Tăng độ dày viền của bảng lên 10px và 5px

47.

display: flex; thường được dùng để:

a)

Làm bảng

b)

Căn chỉnh layout linh hoạt

c)

Làm thanh cuộn

d)

Thêm border

48.

overflow-x điều khiển gì?

a)

Cuộn theo chiều dọc

b)

Cuộn theo chiều ngang

c)

Trong suốt chiều ngang

d)

Ẩn nội dung chiều ngang

49.

list-style-image dùng để:

a)

Hiển thị ảnh nền

b)

Thêm hình làm dấu đầu dòng

c)

Đổi kiểu danh sách

d)

Làm mờ hình ảnh

50.

 float và position khác nhau thế nào?

a)

float để cố định phần tử, position để cuộn

b)

float để canh trái/phải, position để định vị trí

c)

Cả hai giống nhau

d)

Không có câu đúng