Các khóa học
Viết code HTML

Tin học 12 – Bài 14. Định dạng văn bản bằng CSS

Mục tiêu bài học

  • Sử dụng thành thạo CSS để định dạng văn bản: phông chữ, màu sắc, căn chỉnh dòng.
  • Hiểu và vận dụng được tính kế thừa của các mẫu định dạng CSS.
  • Nắm vững quy tắc lựa chọn theo thứ tự ưu tiên của các mẫu định dạng (Cascading).
  • Hình thành ý thức trách nhiệm, tính cẩn thận và thẩm mỹ khi thiết kế giao diện web.

Mức độ kiến thức và kĩ năng cần đạt

  • Nhận biết:
    • Liệt kê được các thuộc tính định dạng phông chữ (font-family, font-size, font-style, font-weight).
    • Nhận biết được các đơn vị đo trong CSS (cm, mm, px, pt, %, em, rem).
    • Nhận biết được ý nghĩa của tính kế thừa và ký hiệu !important.
  • Thông hiểu:
    • Giải thích được sự khác nhau giữa các loại phông chữ (serif, sans-serif, monospace…).
    • Hiểu quy tắc ưu tiên khi có nhiều mẫu định dạng cùng áp dụng cho một phần tử.
  • Vận dụng:
    • Viết được mã CSS để định dạng một đoạn văn bản cụ thể theo yêu cầu (màu sắc, cỡ chữ, căn lề, kiểu chữ).
    • Xử lý được các tình huống xung đột định dạng bằng cách sử dụng thứ tự ưu tiên.

Hoạt động khởi động

Quan sát đoạn văn bản “Lịch sử CSS” được thể hiện trên một trang web (Hình 14.1 SGK).

Tin học 12 - Bài 14
Em có nhận xét gì về các định dạng liên quan đến phông chữ của văn bản trong Hình 14.1?

Trong đoạn văn bản “Lịch sử CSS”, chúng ta có thể nhận thấy các định dạng khác nhau:

– Tiêu đề “Lịch sử CSS” có màu đỏ, chữ đậm, phông chữ có chân.
– Nội dung đoạn văn sử dụng phông chữ khác (có thể là không chân hoặc có chân tùy trình duyệt), cỡ chữ nhỏ hơn tiêu đề.
– Các tên riêng như “Håkon Wium Lie” hay “Tim Berners-Lee” được in nghiêng và có màu đỏ để nhấn mạnh.

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

Các thuộc tính CSS dùng để định dạng văn bản được chia thành 3 nhóm chính: phông chữ, màu chữ và dòng văn bản.

a) CSS định dạng phông chữ

CSS hỗ trợ thiết lập các thuộc tính:

  • font-family: Chọn phông chữ.
    • Các nhóm phông cơ bản: serif (có chân), sans-serif (không chân), monospace (độ rộng đều), cursive (viết tay), fantasy (trừu tượng).
    • Cú pháp ưu tiên: font-family: “Times New Roman”, Times, serif; (Nếu không có phông đầu tiên, trình duyệt sẽ tìm phông tiếp theo).
Tin học 12 - Bài 14
  • font-size: Chọn cỡ chữ.
    • Đơn vị tuyệt đối: cm, mm, in, px (pixel), pt (points). Thường dùng: px, pt.
    • Đơn vị tương đối: %, em, rem.
      • em: So với cỡ chữ của phần tử hiện thời.
      • rem: So với cỡ chữ của phần tử gốc (html).
      • %: Tỉ lệ phần trăm so với cỡ chữ phần tử cha.
    • Các mức định sẵn: xx-small, small, medium (mặc định), large, xx-large…
  • font-style: Kiểu chữ.
    • normal: Bình thường.
    • italic: In nghiêng.
  • font-weight: Độ dày nét chữ.
    • normal: Bình thường.
    • bold: In đậm.
    • Giá trị số: 100 đến 900 (400 là normal, 700 là bold).
Giải thích ý nghĩa của mẫu CSS sau:
p {font-size: 1.2em;}
html {font-size: 100%;}

p {font-size: 1.2em;}: Thiết lập cho toàn bộ các phần tử p có cỡ chữ bằng 1,2 lần cỡ chữ hiện thời của trình duyệt (hoặc của phần tử cha trực tiếp nếu có thiết lập font-size).

html {font-size: 100%;}: Thiết lập cỡ chữ mặc định cho toàn bộ trang web theo chế độ mặc định của trình duyệt (thường là 16px).

b) CSS định dạng màu chữ

  • Thuộc tính: color.
  • Giá trị:
    • Tên màu tiếng Anh: black, white, red, blue, green, yellow…
    • Mã Hex, RGB, HSL (sẽ học kỹ hơn ở bài sau).
  • Ví dụ: h1 { color: red; }

Chú ý: Kí tự * là bộ chọn đại diện cho tất cả các phần tử HTML của trang web.

Ví dụ: * {color: black;} sẽ thiết lập màu chữ đen cho toàn bộ các phần tử trên trang web, trừ khi có một phần tử nào đó được định dạng riêng (ví dụ h1 màu đỏ) thì định dạng riêng đó sẽ được ưu tiên hơn.

c) CSS định dạng dòng văn bản

  • line-height: Chiều cao dòng.
    • Có thể dùng số (tỉ lệ), đơn vị đo (px, em) hoặc %.
    • Ví dụ: line-height: 1.5; hoặc line-height: 200%;.
  • text-align: Căn lề văn bản.
    • Giá trị: left (trái), right (phải), center (giữa), justify (căn đều hai bên).
  • text-decoration: Trang trí dòng văn bản.
    • none: Mặc định, không trang trí.
    • underline: Gạch dưới.
    • overline: Gạch trên đầu.
    • line-through: Gạch ngang giữa chữ.
  • text-indent: Thụt lề dòng đầu tiên.
    • Giá trị dương: Thụt vào.
    • Giá trị âm: Thụt lùi ra ngoài (treo).
Tin học 12 - Bài 14
Giải thích mẫu định dạng CSS sau:
h1 {color: red; text-align: center;}
p {text-align: justify;}

h1 {color: red; text-align: center;}: Tất cả các tiêu đề thẻ <h1> sẽ có chữ màu đỏ và được căn vào giữa dòng.

p {text-align: justify;}: Tất cả các đoạn văn bản thẻ <p> đều được căn thẳng đều hai bên lề (trái và phải).

2. 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

  • Khái niệm: Một mẫu CSS áp dụng cho một phần tử cha thì sẽ tự động được áp dụng cho tất cả các phần tử con, cháu bên trong nó.
  • Ví dụ: Nếu thẻ body được thiết lập color: blue;, thì các thẻ p, h1, div bên trong body cũng sẽ có chữ màu xanh (trừ khi chúng được định dạng riêng).
  • Ngoại lệ: Một số thuộc tính không được kế thừa mặc định hoặc có hành vi riêng (ví dụ thẻ a thường không kế thừa màu sắc và gạch chân từ cha).
Tin học 12 - Bài 14
Tin học 12 - Bài 14

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

Khi có nhiều mẫu định dạng cùng áp dụng cho một phần tử, trình duyệt sẽ chọn mẫu nào?

  1. Tính chất “Cascading” (Xếp chồng): Mẫu định dạng được viết cuối cùng (trong mã nguồn hoặc file CSS) sẽ được ưu tiên áp dụng nếu các điều kiện khác (như độ ưu tiên của bộ chọn) ngang nhau.
    • Ví dụ: Nếu dòng 1 viết h1 {color: red;} nhưng dòng 10 viết h1 {color: blue;},
      → kết quả h1 sẽ có màu xanh.

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

  • Kí hiệu * (Universal selector): Có mức độ ưu tiên thấp nhất. Bất cứ định dạng cụ thể nào (như h1, p, .class) đều sẽ ghi đè lên định dạng của *.
  • Kí hiệu !important: Có mức độ ưu tiên cao nhất. Nếu một thuộc tính có !important, nó sẽ ghi đè tất cả các quy tắc khác, bất kể vị trí hay độ đặc hiệu của bộ chọn.
    • Cú pháp: thuộc-tính: giá-trị !important;
Tin học 12 - Bài 14
Xét mẫu CSS sau, h1 sẽ có màu gì và căn lề như thế nào?
h1 {color: blue; text-align: center !important;}
h1 {text-align: left; color: red;}

Kết quả áp dụng cho thẻ h1:
– Màu sắc: Màu đỏ (red). Vì quy tắc color: red được viết sau (ở dòng dưới) nên nó ghi đè quy tắc color: blue ở trên.
– Căn lề: Căn giữa (center). Mặc dù text-align: left viết sau, nhưng text-align: center ở trên có từ khóa !important nên nó có độ ưu tiên cao nhất tuyệt đối.

Luyện tập

Câu 1: Mỗi phông chữ sau đây thuộc loại nào (serif, sans-serif, monospace, cursive, fantasy)?
a) Times New Roman;
b) Courier New;
c) Abadi;
d) Bradley Hand ITC;
e) Berlin Sans FB;
f) ALGERIAN;
g) Consolas;
h) Cascadia.

a) Times New Roman: Serif (Có chân)
b) Courier New: Monospace (Độ rộng đều)
c) Abadi: Sans-serif (Không chân)
d) Bradley Hand ITC: Cursive (Viết tay)
e) Berlin Sans FB: Sans-serif (Không chân)
f) ALGERIAN: Fantasy (Trang trí/Trừu tượng)
g) Consolas: Monospace (Độ rộng đều)
h) Cascadia: Monospace (Độ rộng đều)

Tin học 12 - Bài 14
Câu 2: Hãy liệt kê các thuộc tính CSS cần thiết để định dạng đoạn văn bản "Trời Hà Nội xanh" (Hình minh họa trên - SGK trang 82) với các yêu cầu: tiêu đề căn giữa, màu cam; nội dung căn phải; chữ in nghiêng.

Để định dạng như mô tả, cần sử dụng các thuộc tính sau:
– Tiêu đề: text-align: center;, color: orange;
– Tác giả/Nội dung thơ: text-align: right; font-style: italic;

Vận dụng

Tìm hiểu thêm các thuộc tính phông chữ như font-variant và thuộc tính dòng văn bản như letter-spacing, word-spacing, text-shadow.

font-variant: Thường dùng để chuyển chữ thường thành chữ in hoa nhỏ (small-caps).
Ví dụ: font-variant: small-caps;.

letter-spacing: Điều chỉnh khoảng cách giữa các kí tự trong văn bản.
Ví dụ: letter-spacing: 2px;.

word-spacing: Điều chỉnh khoảng cách giữa các từ.
Ví dụ: word-spacing: 5px;.

text-shadow: Tạo bóng đổ cho chữ. Cú pháp: text-shadow: [ngang] [dọc] [độ mờ] [màu];.
Ví dụ: text-shadow: 2px 2px 5px grey;.

Nhiệm vụ thiết kế: Với bài đọc "Lịch sử CSS" (Bài 13), hãy thiết lập hai tập CSS khác nhau để định dạng cho trang web mô tả bài đọc đó. Hai kiểu định dạng cần khác nhau về phông chữ, cỡ chữ và màu chữ.

Gợi ý:

– Tệp CSS 1 (Phong cách cổ điển):
– Font: Times New Roman, serif.
– Color: Tiêu đề màu nâu đậm (#8B4513), nội dung màu đen.
– Background: Màu kem nhạt (beige).

– Tệp CSS 2 (Phong cách hiện đại):
– Font: Arial hoặc Roboto, sans-serif.
– Color: Tiêu đề màu xanh dương (#007BFF), nội dung màu xám đậm (#333).
– Line-height: 1.6 để tạo cảm giác thoáng đãng.

Trắc nghiệm Tin học 12 Bài 14: Định dạng văn bản bằng CSS (có đáp án)

Thời gian làm bài: 30 phút
Đáp án hiển thị sau khi nộp bài
Câu hỏi sẽ được hiển thị ngẫu nhiên
Vui lòng nhập họ và tên để bắt đầu làm bài

NB

Phương án nào sau đây chỉ ra thuộc tính CSS dùng để thiết lập loại phông chữ (như Arial, Times New Roman) cho văn bản?

NB

Trong các nhóm phông chữ sau, nhóm nào bao gồm các phông chữ "có chân" (như Times New Roman)?

TH

Đơn vị đo em trong thuộc tính font-size có ý nghĩa gì?

NB

Để thiết lập kiểu chữ in đậm cho một đoạn văn bản, ta sử dụng thuộc tính và giá trị nào sau đây?

NB

Phương án nào sau đây là cú pháp đúng để thiết lập màu chữ đỏ cho thẻ <h1>?

NB

Thuộc tính text-align với giá trị justify có tác dụng gì đối với đoạn văn bản?

TH

Khi muốn tạo một đường gạch ngang đi qua giữa dòng chữ (như hình thức xóa bỏ), ta sử dụng khai báo CSS nào?

TH

Thuộc tính text-indent nhận giá trị âm (ví dụ: -20px) sẽ tạo ra hiệu ứng gì cho dòng đầu tiên của đoạn văn?

TH

Phát biểu nào sau đây đúng về tính kế thừa trong CSS?

VD

Cho đoạn mã CSS sau:
p { color: blue; }
p { color: red; }
Đoạn văn bản trong thẻ <p> sẽ hiển thị màu gì và tại sao?

VD

Cho đoạn mã CSS sau:
h1 { text-align: left !important; }
h1 { text-align: center; }
Tiêu đề <h1> sẽ được căn lề như thế nào?

NB

Kí hiệu nào sau đây trong CSS là bộ chọn đại diện cho tất cả các phần tử?

Một học sinh đang thiết kế trang web cá nhân và viết đoạn mã CSS sau để định dạng phông chữ cho toàn bộ trang web:
body {
    font-family: Arial, sans-serif;
    font-size: 16px;
}
h2 {
    font-size: 1.5em;
}
Dưới đây là một số nhận định về tình huống trên:

NB Thuộc tính font-family yêu cầu trình duyệt ưu tiên sử dụng phông Arial; nếu không có, sẽ dùng một phông không chân bất kì.

TH Đơn vị px (pixel) được sử dụng cho thẻ body là đơn vị đo tương đối, phụ thuộc vào kích thước màn hình.

VD Với khai báo trên, cỡ chữ của thẻ h2 sẽ tương đương với 24px (gấp 1.5 lần cỡ chữ của phần tử cha là body).

NB Nhóm phông sans-serif là nhóm phông chữ có các nét gạch nhỏ ở đầu và cuối các nét chữ (có chân).

Để trình bày một bài thơ trên trang web, bạn Nam sử dụng các thuộc tính CSS liên quan đến dòng văn bản và căn lề như sau:
.tho {
    text-align: center;
    line-height: 2.0;
    text-decoration: underline;
}
Dưới đây là một số nhận định về tình huống trên:

NB Thuộc tính text-align: center sẽ làm cho các dòng thơ được căn vào giữa trang.

TH Thuộc tính line-height: 2.0 thiết lập khoảng cách giữa các dòng bằng 2 lần cỡ chữ hiện thời.

NB Thuộc tính text-decoration: underline được dùng để tạo đường gạch ngang qua giữa các chữ (như hình thức gạch bỏ).

TH Nếu thêm thuộc tính text-indent: 30px, dòng đầu tiên của đoạn thơ sẽ bị thụt lùi ra ngoài lề trái.

Xét cấu trúc HTML gồm một thẻ <div> chứa một thẻ <p>, và trong thẻ <p> có chứa một thẻ <span>. Người lập trình viết CSS như sau:
div { color: blue; }
Dưới đây là một số nhận định về tình huống trên:

NB Văn bản nằm trực tiếp trong thẻ <div> sẽ có màu xanh dương.

TH Văn bản trong thẻ <p> sẽ có màu đen mặc định vì thẻ <p> không được thiết lập màu sắc trực tiếp.

TH Do tính chất kế thừa, cả thẻ <p> và thẻ <span> bên trong đều sẽ hiển thị văn bản màu xanh dương (nếu không có định dạng riêng).

VD Thuộc tính text-decoration (nếu được thêm vào div) cũng sẽ tự động được kế thừa cho thẻ <p> giống như thuộc tính color.

Một lập trình viên viết các đoạn mã CSS để định dạng cho thẻ <h1> như sau (theo thứ tự từ trên xuống dưới trong tệp CSS):
/* Đoạn 1 */
h1 { color: green; } /* Đoạn 2 */
* { color: black; } /* Đoạn 3 */
h1 { color: red; }
Dưới đây là một số nhận định về tình huống trên:

NB Kí hiệu * trong Đoạn 2 là bộ chọn toàn năng, áp dụng cho mọi phần tử trên trang web.

TH Thẻ <h1> sẽ có màu đen vì bộ chọn * bao quát tất cả các trường hợp.

VD Thẻ <h1> sẽ hiển thị màu đỏ vì quy tắc ở Đoạn 3 được viết sau cùng trong các quy tắc có cùng độ ưu tiên bộ chọn thẻ.

VD Nếu thêm !important vào Đoạn 1 (color: green !important;), thẻ <h1> sẽ chuyển sang màu xanh lá cây bất chấp các quy tắc sau.

Bảng xếp hạng

Chưa có kết quả nào.

admin
admin
Bài viết: 151

Bài viết liên quan

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *