12_lesson14.kntt

Định dạng văn bản bằng CSS

​1. CSS định dạng phông chữ

​✔ Thuộc tính font-family

​✔ 5 nhóm phông chữ trong CSS

​Định dạng văn bản bằng CSS

​1. CSS định dạng phông chữ

​✔ Thuộc tính font-family

​h1{font-family: Time, "Time New Roman", Tahoma, serif}

​Định dạng văn bản bằng CSS

​1. CSS định dạng phông chữ

​✔ Thuộc tính font-size:

​Thuộc tính này sẽ thiết lập cỡ chữ cho nội dung của thẻ.
selector{font-size: cỡ chữ;}

​Định dạng văn bản bằng CSS

​1. CSS định dạng phông chữ

​✔ Thuộc tính font-style: Thuộc tính này thiết lập kiểu chữ thường hay kiểu chữ nghiêng của văn bản. Thuộc tính này có hai giá trị là normal (thường) và italics (nghiêng).

​✔ Thuộc tính font-weight: Thuộc tính này thiết lập kiểu chữ đậm. Giá trị của thuộc tính này có thể đặt bằng chữ là normal (bình thường), bold (đậm) hoặc đặt bằng các giá trị từ 100, 200,..., 900, trong đó các mức độ viết đậm từ 500 trở lên.

​em {font-style: italic;}

Multiple Choice

Thuộc tính nào dùng để thiết lập phông chữ cho văn bản trong CSS?

• font-style

• font-family

• font-weight

• text-font

Multiple Choice

Trong đoạn mã sau, trình duyệt sẽ ưu tiên chọn phông nào?

p { font-family: Arial, "Times New Roman", serif; }.

• Times New Roman

• Arial

• serif

• Phông chữ bất kỳ

Multiple Choice

Đơn vị đo nào dưới đây là đơn vị tương đối trong CSS?

• px

• cm

• pt

• em

Multiple Choice

Giá trị nào của font-style dùng để thiết lập chữ nghiêng?

• oblique

• slanted

• italic

• tilt

Multiple Choice

Trong CSS, thuộc tính font-weight: 900; nghĩa là:

• Chữ rất mảnh

• Chữ bình thường

• Chữ hơi đậm

• Chữ rất đậm

​Bài 14: Định dạng văn bản bằng CSS

​2. CSS định dạng màu chữ

​✔ Thuộc tính Thuộc tính color sẽ thiết lập màu chữ, một số giá trị màu cơ bản viết bằng tiếng Anh.

​Bộ chọn với kí tự * là tất cả các phần tử HTML của trang web. Khi áp dụng CSS trên thì các phần tử h1 có chữ màu đỏ, các phần tử em có chữ màu xanh lá cây, còn toàn bộ các phần tử còn lại có chữ màu đen.

Multiple Choice

Thuộc tính nào dùng để thay đổi màu chữ trong CSS?

• font-color

• text-color

• color

• background-color

Multiple Choice

Đoạn CSS nào đặt màu chữ của đoạn văn <p> thành đỏ?

• p { background: red; }

• p { color: #FF0000; }

• p { font-style: red; }

• p { text-decoration: red; }

Multiple Choice

Giá trị nào sau đây không hợp lệ để chỉ màu trong CSS?

• rgb(255, 0, 0)

• #12FG45

• blue

• #0000FF

Định dạng văn bản bằng CSS

​3. CSS định dạng dòng văn bản

​✔ Hai thành phần chính: đường cơ sở (baseline) và chiều cao dòng văn bản (line-height).

• Đường cơ sở (baseline) là đường ngang mà các chữ cái đứng thẳng trên nó.

• Chiều cao dòng văn bản là khoảng cách giữa các đường cơ sở của các dòng trong cùng một đoạn văn bản. Mặc định =2em=2em và thể hiện bằng cách bổ sung khoảng cách phía trên và dưới của văn bản. 

Định dạng văn bản bằng CSS

​3. CSS định dạng dòng văn bản

• line-height: Thiết lập chiều cao dòng cho bộ chọn của mẫu định dạng. Ngoài các đơn vị đo thông thường, còn có thể thiết lập các số đo tương đối.

• text-align: Thuộc tính này thiết lập căn lề cho các phần tử được chọn. Các kiểu căn hàng bao gồm: left, center, right, justify.

• text-decoration: Thuộc tính này có bốn giá trị thường sử dụng là none (mặc định, không trang trí), underline (đường kẻ dưới chữ), overline (đường kẻ phía trên chữ) và line-through (kẻ giữa dòng chữ).

• text-indent: Thuộc tính định dạng thụt lề dòng đầu tiên. Nếu giá trị lớn hơn 0 thì dòng đầu tiên thụt vào. Nếu giá trị nhỏ hơn 0 thì dòng đầu tiên lùi ra ngoài còn gọi là thụt lề treo (hanging indent).

​Định dạng văn bản bằng CSS

​3. CSS định dạng dòng văn bản

Multiple Choice

Thuộc tính nào dùng để điều chỉnh khoảng cách giữa các dòng văn bản?

• letter-spacing

• line-height

• word-spacing

• margin-top

Multiple Choice

Đoạn CSS nào giúp thụt đầu dòng 30px cho đoạn văn?

• text-indent: 30px;

• padding-left: 30px;

• margin-left: 30px;

• letter-spacing: 30px;

Multiple Choice

Thuộc tính nào dùng để căn lề văn bản?

• text-style

• text-indent

• text-align

• line-height

Multiple Choice

Đoạn CSS sau tạo ra hiệu ứng gì?

p { letter-spacing: 3px; }

• Tăng khoảng cách giữa các dòng

• Tăng khoảng cách giữa các từ

• Tăng khoảng cách giữa các chữ cái

• Thụt đầu dòng

Multiple Choice

Đoạn CSS nào giãn khoảng cách giữa các từ 10px?

• letter-spacing: 10px;

• line-height: 10px;

• word-spacing: 10px;

• margin: 10px;

Định dạng văn bản bằng CSS

4. Tính kế thừa và cách lựa chọn theo thứ tự của CSS

​a. Tính kế thừa của CSS

​Nếu một mẫu CSS áp dụng cho một phần tử HTML bất kì thì nó sẽ được tự động áp dụng cho tất cả các phần tử là con, cháu của phần tử đó trong mô hình cây HTML (trừ các trường hợp ngoại lệ, ví dụ các phần tử với mẫu định dạng riêng).

​Định dạng văn bản bằng CSS

4. Tính kế thừa và cách lựa chọn theo thứ tự của CSS

Khi nhiều mẫu định dạng CSS áp dụng cho một phần tử HTML, trình duyệt sẽ chọn mẫu định dạng được viết cuối cùng để áp dụng. Đây là tính chất "cascading" của CSS. Ví dụ, nếu có hai định dạng áp dụng cho thẻ `<h1>`, một quy định căn giữa và một quy định căn trái, thì định dạng căn trái (viết sau) sẽ được áp dụng.

​b) Thứ tự ưu tiên khi áp dụng mẫu CSS:

​<style>

body {color: blue;}

h1 {color: red; text-align: center;}

h1 {text-align: left;}

</style>

​Định dạng văn bản bằng CSS

4. Tính kế thừa và cách lựa chọn theo thứ tự của CSS

​c) Sử dụng kí hiệu * và !important

​Nếu có một mẫu định dạng chứa kí hiệu * thì định dạng này sẽ áp dụng cho mọi phần tử mà chưa có trong bất cứ mẫu định dạng nào khác của CSS. Mức độ ưu tiên của * là thấp nhất.

​Kí hiệu !important được sử dụng trong một mẫu định dạng thì mẫu này với thuộc tính tương ứng sẽ được ưu tiên cao nhất mà không phụ thuộc vào vị trí của mẫu trong CSS.

​Định dạng văn bản bằng CSS

4. Tính kế thừa và cách lựa chọn theo thứ tự của CSS

​c) Sử dụng kí hiệu * và !important

​Các mẫu định dạng CSS được áp dụng theo nguyên tắc kế thừa trong mô hình cây HTML. Nếu mẫu định dạng được viết cho một phần tử thì sẽ được áp dụng mặc định cho tất cả các phần tử con, cháu. Nếu có nhiều mẫu định dạng được viết cho cùng một bộ chọn thì mẫu viết sau cùng sẽ được áp dụng. Nếu bộ chọn có kí tự * thì được áp dụng cho mọi phần tử nhưng với độ ưu tiên thấp nhất. Ngược lại, mẫu định dạng với từ khoá !important có mức ưu tiên cao nhất.

Multiple Choice

Thuộc tính nào dưới đây thường được thừa kế bởi các phần tử con?

• margin

• padding

• color

• border

Multiple Choice

Thuộc tính nào không được thừa kế?

• font-size

• line-height

• text-align

• background-color

Multiple Choice

Khi hai quy tắc CSS có cùng độ ưu tiên, thuộc tính nào được áp dụng?

• Quy tắc khai báo trước

• Quy tắc khai báo sau

• Quy tắc nào dài hơn

• Quy tắc có ít selector hơn

Multiple Choice

Đoạn CSS nào dưới đây có độ ưu tiên cao nhất?

• .box { color: red; }

• div.box { color: blue; }

• #box { color: green; }

• p#box { color: pink; }

Multiple Choice

Cho đoạn CSS:

p { color: blue; } .content p { color: red; }

Đoạn văn <p> nằm trong <div class="content"> sẽ có màu gì?

• Xanh

• Đỏ

• Cả hai

• Không màu

Multiple Choice

Trong ba cách viết CSS, cách nào có độ ưu tiên cao nhất?

• External CSS

• Internal CSS

• Inline CSS

• như nhau

​Định dạng văn bản bằng CSS

Thiết lập định dạng cho trang web theo yêu cầu sau:

​Định dạng văn bản bằng CSS

Thiết lập định dạng cho trang web theo yêu cầu sau:

Multiple Choice

Mẫu định dạng có kí hiệu nào dưới đây áp dụng định dạng cho phần tử chưa có định dạng?

• .

• '

• /

• *

Multiple Choice

Bộ chọn có tính chất nào dưới đây?

• Tính kế thừa.

• Tính đa năng.

• Tính đơn trị.

• Tính đồng nhất.

Multiple Choice

Phát biểu nào sau đây về kết quả hiển thị của mẫu định dạng phía dưới là đúng?

• Phần tử h1 sẽ có chữ màu đỏ và căn giữa văn bản.

• Phần tử p sẽ có chữ màu đỏ và căn đều hai bên.

• Phần tử p sẽ căn giữa văn bản của phần tử con.

• Phần tử h1 sẽ có nền màu đỏ và thụt lùi đầu dòng.

Multiple Choice

Cần đặt tên phông chữ có chứa dấu cách trong cặp dấu nào dưới đây?

• Cặp dấu ngoặc tròn.

• Cặp dấu chấm phẩy.

• Cặp dấu nháy đơn.

• Cặp dấu ngoặc nhọn.

Multiple Choice

Cho đoạn mã sau:
<style>.temp{color: red; font-size: 35px; font-weight: bold;}</style>
<h1>This is a Heading</h1>
<p class = ".temp">This is a paragraph.</p>

Phương án nào sau đây nêu đúng về lỗi của đoạn mã trên?

• Thuộc tính font-size có giá trị lớn hơn cỡ mặc định của <p></p>.

• Thuộc tính class = ".temp" chưa viết đúng cú pháp bộ chọn.

• Thuộc tính color sử dụng sai kiểu giá trị màu theo quy định.

• Thuộc tính font-weight cần điền giá trị đi kèm là một con số.

Multiple Choice

Cho đoạn mã nguồn như sau:

Phương án nào sau đây nêu đúng thẻ KHÔNG được áp dụng bộ chọn?

• h2

• p

• div

• h1

Multiple Choice

Cho đoạn mã nguồn sau:

Phương án nào dưới đây nêu đúng nội dung có chữ đỏ (red)?

• This is a Heading 2

• This is a Heading 1

• This is a paragraph 1.2

• This is a paragraph 2.1

Multiple Choice

Tính kế thừa trong CSS có nghĩa là gì?

• Một thuộc tính chỉ áp dụng cho một phần tử cụ thể

• Không có sự kế thừa trong CSS

• CSS chỉ áp dụng cho phần tử cuối cùng trong cây DOM

• Một thuộc tính CSS áp dụng cho phần tử cha cũng được áp dụng cho các phần tử con, cháu

Multiple Choice

Bạn muốn đoạn văn <p> có cỡ chữ bằng 150% cỡ chữ của phần tử cha. Cách viết đúng là:

• p { font-size: 1.5em; }

• p { font-size: 150px; }

• p { font-size: 150em; }

• p { font-size: 1.5px; }

Multiple Choice

Một trang web cần dùng font chữ ưu tiên là "Roboto", nếu không có thì dùng "Arial", cuối cùng dùng font sans-serif. CSS đúng là:

• font-family: Roboto Arial sans-serif;

• font-family: "Roboto", Arial, sans-serif;

• font-family: "Roboto" Arial serif;

• font-family: Roboto, "Arial", serif;

Multiple Choice

Bạn muốn chữ trong thẻ <h1> đổ bóng nhẹ, dùng thuộc tính nào?

• font-style

• text-decoration

• text-shadow

• font-weight

Multiple Choice

Để đoạn văn bản dài giãn khoảng cách giữa các chữ cái 2px, bạn chọn:

• letter-spacing: 2px;

• word-spacing: 2px;

• line-height: 2px;

• spacing: 2px;

Multiple Choice

Bạn muốn đoạn văn bản có thụt đầu dòng 30px. Lựa chọn đúng:

• text-align: 30px;

• padding-left: 30px;

• text-indent: 30px;

• line-height: 30px;

Multiple Choice

Một tiêu đề cần vừa in đậm vừa nghiêng. Câu lệnh hợp lý nhất là:

• h2 { font-style: bold italic; }

• h2 { font-weight: italic; font-style: bold; }

• h2 { font-weight: bold; font-style: italic; }

• h2 { text-decoration: bold italic; }

Multiple Choice

Bạn muốn một từ khóa đặc biệt trong đoạn văn có màu đỏ và chữ đậm. Thành phần nào được dùng?

• span

• div

• section

• header

Multiple Choice

Bạn muốn xóa gạch chân của một liên kết <a> và đổi thành màu xanh. CSS đúng là:

• a { text-decoration: none; color: blue; }

• a { decoration: none; text-color: blue; }

• a { underline: off; color: blue; }

• a { font-decoration: none; blue-color; }

Multiple Choice

Muốn đoạn văn <p> có font-size bằng 2rem, nghĩa là:

• 2 lần cỡ chữ mặc định của phần tử cha

• 2 lần cỡ chữ của thẻ <p>

• 2 lần cỡ chữ gốc của tài liệu (html)

• 2 lần cỡ chữ của trình duyệt