Nguon: Tin Hoc 12 KHMT (trang 90 – 91)

⚠️ Hai ảnh em gửi thực tế là trang 88 và 89 (cuối Bài 15 và đầu Bài 16), không phải trang 90 – 91. Thầy sẽ giải đúng theo nội dung trong ảnh nhé.

🔍 Kiến thức cần nhớ

Lợi ích của CSS:

• Trình bày chính xác (cả trên màn hình và khi in).
• Tiết kiệm công sức: sửa một tệp CSS có thể thay đổi cả website.
• Điều khiển hiển thị đa dạng trên nhiều thiết bị.
• Trình bày theo ngữ nghĩa nội dung văn bản.

Một số bộ chọn kết hợp (combinator) trong CSS:

Phần tử khối và nội tuyến (Bài 16):

• Khối (block): bắt đầu từ đầu hàng, kéo dài hết chiều rộng trang. Ví dụ: h1–h6, p, div, ul, li, table…
• Nội tuyến (inline): nhúng bên trong phần tử khác, chỉ chiếm đúng độ rộng nội dung. Ví dụ: span, a, em, strong, img…
• Thay đổi loại bằng thuộc tính display với giá trị block, inline, none.

⚙️ Bài tập

🔧 THỰC HÀNH — Tạo trang HTML và định dạng CSS

Đề bài: Thiết lập trang HTML và định dạng CSS để thể hiện văn bản "Lợi ích của CSS" chính xác và đẹp theo yêu cầu (4 ý chính dùng

• , câu in đậm dùng , cụm in nghiêng dùng ).

  Cách 1 — Theo đúng hướng dẫn của SGK

  
  
  
    
    
    
  
  
    
  LỢI ÍCH CỦA CSS
    
  Sử dụng CSS mang lại rất nhiều tiện ích và hiệu quả trong công việc.
       Sau đây là một vài nguyên nhân chính khi sử dụng mẫu định dạng CSS
       để trình bày trang web:
    
  
      
  Trình bày chính xác. Có thể điều khiển
          chính xác cách trang web hiển thị cũng như khi in ra
          máy in.
      
  Tiết kiệm công sức đáng kể. Bạn có thể thay đổi
          lại hoàn toàn cách trang trí, định dạng, trình bày một trang hoặc
          cả một website chỉ bằng việc chỉnh sửa và thay đổi
          một tệp CSS duy nhất.
      
  Điều khiển hiển thị đa dạng. CSS cho phép điều
          khiển định dạng trên các phương tiện máy tính khác nhau, từ
          máy tính màn hình lớn cho đến các thiết bị di động nhỏ.
      
  Tiếp cận trình bày theo ngữ nghĩa văn bản. CSS cho
          phép trình bày nội dung không theo cú pháp logic giống như các ngôn
          ngữ lập trình bình thường mà cho phép thay đổi, điều khiển việc trang
          trí, trình bày theo ngữ nghĩa ngôn ngữ của nội dung văn bản.
    
  
  

  Giải thích từng quy tắc CSS:

  • h1 {color: red;} → tiêu đề chữ màu đỏ.
  • li {line-height: 1.5;} → mỗi dòng danh sách có chiều cao bằng 1,5 lần bình thường.
  • strong {color: blue;} → dòng chữ nhấn mạnh đầu dòng () màu xanh đậm.
  • strong ~ em {color: red;} → các cụm đứng sau (cùng cấp) có màu đỏ.

  💡 Mẹo nhớ: Bộ chọn strong ~ em chọn mọi em là anh em đứng sau strong trong cùng một phần tử cha (ở đây là li). Vì vậy các cụm nghiêng bên trong câu sẽ tự động chuyển sang màu đỏ.

  ---

  LUYỆN TẬP — Câu 1

  Đề bài: Thiết lập hệ màu cơ bản (17 màu của CSS2.1) theo bộ ba tham số R, G, B.

  Cách 1 — Lập bảng tên màu và giá trị RGB

  CSS2.1 quy định 17 tên màu cơ bản. Mỗi tham số R, G, B nhận giá trị từ 0 đến 255:

  Tên màu	R	G	B	Mã hex
  black	0	0	0	#000000
  white	255	255	255	#FFFFFF
  gray	128	128	128	#808080
  silver	192	192	192	#C0C0C0
  red	255	0	0	#FF0000
  maroon	128	0	0	#800000
  lime	0	255	0	#00FF00
  green	0	128	0	#008000
  blue	0	0	255	#0000FF
  navy	0	0	128	#000080
  yellow	255	255	0	#FFFF00
  olive	128	128	0	#808000
  aqua	0	255	255	#00FFFF
  teal	0	128	128	#008080
  fuchsia	255	0	255	#FF00FF
  purple	128	0	128	#800080
  orange	255	165	0	#FFA500

  Cách 2 — Viết dạng hàm rgb() trong CSS

  Có thể khai báo trực tiếp bằng hàm rgb(R, G, B), ví dụ:

  h1   {color: rgb(255, 0, 0);}    /* red */
  p    {color: rgb(0, 128, 0);}    /* green */
  span {color: rgb(0, 0, 255);}    /* blue */

  💡 Mẹo nhớ: 6 màu "đậm/tối" có thành phần 128 (maroon, green, navy, olive, teal, purple), còn 6 màu "sáng/rực" tương ứng có thành phần 255 (red, lime, blue, yellow, aqua, fuchsia). Cộng thêm black, white, gray, silver, orange là đủ 17.

  ---

  LUYỆN TẬP — Câu 2

  Đề bài: Khi nào thì các mẫu định dạng E F và E > F có tác dụng như nhau?

  Cách 1 — Phân tích định nghĩa

  • E F (hậu duệ): chọn mọi phần tử F nằm bên trong E, dù lồng sâu bao nhiêu cấp.
  • E > F (con trực tiếp): chỉ chọn F là con trực tiếp (cấp ngay dưới) của E.

  Tập hợp do E > F chọn luôn là tập con của tập hợp do E F chọn. Hai bộ chọn cho kết quả giống nhau khi và chỉ khi:

  Mọi phần tử F nằm trong E đều là con trực tiếp của E, tức là không có phần tử F nào bị lồng sâu hơn một cấp bên trong E.

  Ví dụ minh họa: Nếu cấu trúc HTML là

  
    
  ...
    
  ...
  

  thì div p và div > p chọn cùng hai thẻ

  . Nhưng nếu có một

  lồng trong

  bên trong

  thì div p sẽ chọn thêm

  đó, còn div > p thì không.

  ⚠️ Lưu ý thi: E > F luôn "hẹp hơn hoặc bằng" E F. Đề thường hỏi trường hợp chúng trùng nhau → trả lời: khi tất cả F đều là con trực tiếp của E.

  ---

  VẬN DỤNG — Câu 1

  Đề bài: Tìm ví dụ và giải thích ý nghĩa cho các mẫu định dạng CSS tổng quát: a) E1 E2 E3; b) E1 > E2 > E3.

  a) E1 E2 E3 — chuỗi bộ chọn hậu duệ

  Ý nghĩa: Chọn phần tử E3 nằm bên trong E2, và E2 lại nằm bên trong E1 (ở bất kỳ cấp lồng nào).

  Ví dụ:

             
    
                        
      
  Mục 1
            
      
  Mục 2
    
  

  div ul li {color: blue;}

  → Mọi thẻ li nằm trong ul nằm trong div sẽ có chữ màu xanh.

  b) E1 > E2 > E3 — chuỗi bộ chọn con trực tiếp

  Ý nghĩa: Chọn E3 là con trực tiếp của E2, và E2 là con trực tiếp của E1. Yêu cầu quan hệ cha–con liên tiếp, không được lồng cách cấp.

  Ví dụ:

  div > ul > li {color: red;}

  → Chỉ áp dụng khi li là con trực tiếp của ul, và ul là con trực tiếp của div. Nếu giữa div và ul còn chèn thêm một thẻ khác thì quy tắc không có hiệu lực.

  ---

  VẬN DỤNG — Câu 2

  Đề bài: Tìm ví dụ và giải thích ý nghĩa cho các mẫu định dạng CSS tổng quát: a) E + F + G; b) E > F + G.

  a) E + F + G — chuỗi anh em liền kề

  Ý nghĩa: Chọn G đứng ngay sau F, và F đứng ngay sau E, cả ba là anh em cùng cấp (cùng một phần tử cha), xếp liên tiếp.

  Ví dụ:

  Tiêu đề
         
  Đoạn 1
            
  Đoạn 2
            

  h1 + p + p {color: green;}

  → Đoạn

  thứ hai (G) đổi màu xanh, vì nó nằm liền sau

  (F) mà

  này lại liền sau

  (E).

  b) E > F + G — kết hợp con trực tiếp và anh em liền kề

  Ý nghĩa: Chọn G đứng ngay sau F, trong đó F phải là con trực tiếp của E (và G cũng nằm cùng cấp với F).

  Ví dụ:

                    
    
  Mục
           
    
  Nội dung
        
  

  div > h2 + p {color: purple;}

  → Thẻ

  đổi màu tím vì nó đứng ngay sau

  , mà

  là con trực tiếp của

  .

  💡 Mẹo nhớ: Đọc bộ chọn từ phải sang trái để xác định phần tử được chọn. Trong E > F + G, phần tử bị tác động là G, các bộ chọn còn lại là điều kiện ràng buộc về vị trí.

  ---

  HOẠT ĐỘNG 1 (trang 89) — Phân biệt phần tử khối và nội tuyến

  Đề bài: Quan sát cách tô màu nền của hai phần tử trên trang web ở Hình 16.1, em có nhận xét gì?

  Nhận xét

  Trong Hình 16.1 có hai phần tử được tô nền khác nhau:

  • Dòng "Thư Bác Hồ gửi học sinh" được tô nền xanh lá kéo dài suốt chiều rộng của trang (kể cả phần không có chữ). Đây là đặc trưng của phần tử khối (block): luôn bắt đầu từ đầu hàng và chiếm hết chiều ngang vùng chứa.

  • Cụm từ "Việt Nam" trong đoạn văn được tô nền vàng chỉ bao đúng phần chữ, nằm xen giữa dòng văn bản. Đây là đặc trưng của phần tử nội tuyến (inline): chỉ chiếm đúng độ rộng nội dung, được nhúng bên trong một phần tử khác (ở đây là thẻ

    ).

  Kết luận: Phần tử khối chiếm trọn chiều rộng và xuống dòng riêng; phần tử nội tuyến chỉ chiếm phần nội dung của nó và nằm chung dòng với văn bản xung quanh.

  ---

  🎯 Ghi nhớ: - CSS giúp trình bày chính xác, tiết kiệm công sức và tách nội dung khỏi hình thức. - E F chọn mọi hậu duệ; E > F chỉ chọn con trực tiếp; E + F chọn anh em liền kề ngay sau. - E > F và E F trùng nhau khi mọi F đều là con trực tiếp của E. - Phần tử khối chiếm hết chiều rộng và xuống dòng; phần tử nội tuyến chỉ chiếm đúng nội dung, nằm chung dòng. Có thể đổi loại bằng display.

  Chế độ đọc sách →