CHỦ ĐỀ 5. PHẦN MỀM CSS

CSS (Cascading Style Sheets):

Là ngôn ngữ định dạng dùng để thiết lập cách hiển thị của các phần tử HTML.

Vai trò:

Tách biệt nội dung (HTML) và hình thức (CSS). Giúp định dạng trang web thống nhất, tiết kiệm công sức (viết một lần dùng nhiều lần) và dễ bảo trì.

Cấu trúc gồm 2 phần chính: Bộ chọn (Selector) và Vùng mô tả (Declaration block).

Cú pháp:

 Bộ_chọn {
  thuộc_tính: giá_trị;
  thuộc_tính: giá_trị;
 }

Ví dụ:

Giả sử em muốn tất cả các thẻ tiêu đề <h1> đều có màu đỏ và cỡ chữ lớn.

• Bộ chọn (Selector): h1 (Chọn tất cả thẻ h1).
• Thuộc tính (Property): color (Màu sắc) và font-size (Cỡ chữ).
• Giá trị (Value): red (Đỏ) và 50px.
• Đoạn mã css sẽ viết là:

CSS nội tuyến (Inline):

Dùng thuộc tính style ngay trong thẻ HTML. Ví dụ:

<h1 style="color: blue;">Xin chào các em</h1>

CSS trong (Internal):

Viết trong cặp thẻ <style>...</style> đặt trong phần <head> của trang HTML. Ví dụ:

CSS ngoài (External):

Viết trong tệp riêng (.css) và liên kết qua thẻ <link> trong phần <head>. Cách này tối ưu nhất cho website lớn. Ví dụ:

 + Tệp 1: style.css (Chỉ chứa mã CSS)
  h1 {
   color: blue;
  }

 Lưu ý quan trọng:

Trong file .css riêng biệt, em tuyệt đối không được viết cặp thẻ <style>...</style>. Cặp thẻ đó chỉ dùng khi viết CSS nằm trong file HTML.

 + Tệp 2: index.html (Chứa mã web và đường dẫn liên kết).

Nên chọn loại css nào?

• Nếu chỉ muốn sửa nhanh 1 dòng: Dùng Inline.
• Nếu làm bài tập nhỏ gói gọn 1 file: Dùng Internal.
• Nếu làm website thật sự: Dùng External (tối ưu nhất cho website lớn).

Phông chữ (Font):

• font-family: Loại phông (VD: Arial, Times New Roman, serif).
• font-size: Cỡ chữ (đơn vị: px, %, em, pt).
• font-style: Kiểu chữ (normal, italic - nghiêng).
• font-weight: Độ đậm (normal, bold - đậm).
• Ví dụ:

Màu sắc:

color (định dạng màu chữ). Ví dụ:

Đoạn văn bản:

• line-height: Chiều cao dòng.
• text-align: Căn lề (left, right, center, justify).
• text-decoration: Trang trí (underline - gạch chân, line-through - gạch ngang, none - bỏ gạch chân liên kết).
• text-indent: Thụt lề dòng đầu tiên.

Ví dụ 1: Căn chỉnh và khoảng cách dòng.

Ví dụ 2: Trang trí (Gạch chân/Gạch ngang) thường dùng cho link hoặc hiển thị giá cũ (gạch bỏ).

Ví dụ 3: Thụt đầu dòng, giống như khi viết văn trong vở, dòng đầu tiên thụt vào một chút.

Ví dụ tổng quát:

Các thẻ con sẽ thừa hưởng định dạng của thẻ cha (màu chữ, font chữ,...).

Ví dụ:

Kế thừa:

• Thuộc tính chữ: color, text-align, text-indent, text-decoration, text-transform, text-shadow, line-height, letter-spacing, word-spacing.
• Danh sách: list-style, list-style-type, list-style-position, list-style-image.
• Thuộc tính font: font-size, font-family, font-style, font-weight, font-variant.
• Cursor: cursor.
• Visibility: visibility (khác với display, display không kế thừa).

Không kế thừa:

• Kích thước và bố cục: width, height, max-width, max-height, min-width, min-height.
• Màu nền: background, background-color, background-image.
• Viền: border, border-radius, outline.
• Vị trí: position, top, bottom, left, right, z-index.
• Hiệu ứng: box-shadow, filter.
• Hiển thị - bố cục: display, float, clear, overflow.
• Margin & padding: margin, padding
• Transform & opacity: transform, opacity.

Nếu một phần tử có nhiều mẫu định dạng mâu thuẫn nhau, trình duyệt sẽ chọn mẫu "mạnh nhất" hoặc mẫu viết sau cùng.

Ví dụ:

• Ai đến sau thì thắng: Nếu cách gọi giống hệt nhau, dòng code nào nằm dưới cùng sẽ được áp dụng (ghi đè lên cái cũ).
• Ai gần hơn thì thắng: Lệnh viết bên trong thẻ HTML (Inline) sẽ thắng lệnh viết ở nơi khác.

Cách dùng: Gọi thẳng tên Tiếng anh của màu.

Ví dụ:

 h1 {
  color: red; /* Màu đỏ */
 }
 p {
  color: skyblue; /* Màu xanh da trời */
 }

• Ưu điểm: Dễ nhớ, dễ đọc.
• Nhược điểm: Số lượng màu hạn chế, không chỉnh được độ đậm nhạt chi tiết.

Cách dùng: rgb(đỏ, xanh lá, xanh dương)

Giá trị: Chạy từ 0 (tắt đèn) đến 255 (bật sáng hết cỡ).

Ví dụ: Để có màu đỏ thuần khiết, bật đèn Đỏ max (255) và tắt 2 đèn kia (0).

 h1 {
  color: rgb(255, 0, 0); /* Màu đỏ */
 }

Mẹo: Nếu cả 3 số bằng nhau rgb(100, 100, 100), nó sẽ ra màu Xám.

Cách dùng: #RRGGBB

Quy tắc: Thay vì dùng số 0-255, nó dùng mã từ 00 đến FF. (Trong đó FF tương đương với 255).

Ví dụ:

+ Đỏ (R) = 255 = FF

+ Xanh lá (G) = 0 = 00

+ Xanh dương (B) = 0 = 00

+ Gộp lại ta có:

 h1 {
  color: #FF0000; /* Màu đỏ */
 }

Ứng dụng: Đây là mã màu phổ biến nhất mà các designer thường gửi cho lập trình viên.

Hue (Sắc thái): Là vòng tròn màu từ 0 đến 360 độ. (0 là đỏ, 120 là xanh lá, 240 là xanh dương).

Saturation (Độ bão hòa): Độ tươi của màu. 0% là xám xịt, 100% là màu tươi rói.

Lightness (Độ sáng): 0% là đen thui, 100% là trắng toát, 50% là màu chuẩn.

Ví dụ:

 h1 {
  color: hsl(0, 100%, 50%); /* Màu đỏ */
 }

Tại sao nên dùng HSL? Nếu sếp bảo: "Em ơi, màu đỏ này chói quá, làm nó nhạt đi một chút", em chỉ cần giảm Lightness hoặc Saturation xuống (ví dụ: hsl(0, 100%, 40%)) mà không cần phải tính toán lại 3 con số rắc rối như RGB.

Chọn F là con cháu của E (bên trong E ở bất kỳ cấp nào).

Ví dụ:

Chọn F là con trực tiếp của E.

Ví dụ:

Chọn F là em liền kề ngay sau E (cùng cha).

Ví dụ:

Chọn F là em của E (nằm sau E, cùng cha, không cần liền kề).

Ví dụ:

• E F: Con cháu (Gia phả) - Tất cả bên trong (con, cháu...)
• E > F: Con trực tiếp (Ruột thịt) - Chỉ cấp con đầu tiên
• E + F: Em liền kề (Sát vách) - Duy nhất 1 phần tử ngay sau
• E ~ F: Em cùng cấp (Các em) - Tất cả các phần tử phía sau

Chiếm toàn bộ chiều rộng, bắt đầu dòng mới.

• Các phần tử khối thường dùng: <div> (phổ biến nhất), <p> (đoạn văn), <h1> đến <h6> (tiêu đề), <ul> (danh sách không thứ tự), <ol> (danh sách có thứ tự), <li> (mục danh sách), <form>, <table>, <header>, <footer>,...

Ví dụ:

Chỉ chiếm chiều rộng nội dung, không xuống dòng.

• Các phần tử nội tuyến thường dùng: <span> (phổ biến nhất), <a> (liên kết), <strong> (in đậm quan trọng), <em> (in nghiêng nhấn mạnh), <b> (in đậm), <i> (in nghiêng), <br> (ngắt dòng), <img>, <input>, <button>, <label>, <textarea>, <select>,...

Ví dụ:

Lưu ý:

Có thể đổi loại bằng thuộc tính display: block; hoặc display: inline;.

• Content: Nội dung.
• Padding: Vùng đệm (khoảng cách từ nội dung đến viền).
• Border: Đường viền.
• Margin: Lề (khoảng cách từ viền đến các phần tử khác).

Ví dụ:

- Mục đích: Dùng khi muốn áp dụng cùng một kiểu hiển thị (màu sắc, phông chữ...) cho nhiều phần tử khác nhau (có ý nghĩa tương đồng) trên cùng một trang web.

- Cú pháp trong CSS: .ten-class { thuộc tính: giá-trị; }

- Cách dùng trong HTML: Thêm thuộc tính class="ten-class" vào thẻ HTML.

- Một số định dạng thường gặp:

 .test: Chọn tất cả thẻ có class là "test".

 .test.warning: Chọn thẻ có đồng thời cả 2 class "test" và "warning".

 p.test: Chỉ chọn thẻ <p> có class là "test" (thẻ <div> hay <span> có class "test" sẽ không bị ảnh hưởng).

Ví dụ:

- Giải thích chi tiết:

 + Tại sao dùng .hop-tin? Cả 3 hộp đều cần bo góc và phông chữ giống nhau. Thay vì viết lại 3 lần, ta gom vào class .hop-tin.

 + Tại sao HTML lại viết class="hop-tin thanh-cong"? Đây là cách dùng đa lớp (multi-class). Thẻ div này sẽ nhận tất cả tính chất của .hop-tin (để bo góc) và nhận thêm tính chất của thanh-cong (để có màu xanh).

 + Tính linh hoạt: Nếu ngày mai chúng ta muốn tất cả các thông báo chữ to hơn, ta chỉ cần sửa trong CSS của .hop-tin một lần duy nhất, tất cả 3 hộp sẽ tự động to lên.

- ID là gì? Là một cái tên định danh duy nhất trên một trang web, một id chỉ được xuất hiện đúng một lần.

- Ký hiệu trong CSS: Để chọn một ID, chúng ta bắt buộc phải dùng dấu thăng (#) đặt trước tên ID.

- Cú pháp: #tên_id { thuộc tính: giá-trị; }

Ví dụ:

Lưu ý sự khác biệt của hai cách viết:

#home: Chọn bất kỳ cái gì có id là home.

p#home: Chỉ chọn thẻ p có id là home (nếu lỡ đặt id home cho thẻ div, nó sẽ không nhận style này).

- Cách hoạt động:

 + thẻ [tên-thuộc tính]: Chọn tất cả các thẻ có chứa thuộc tính này.

 + thẻ [tên-thuộc-tính="giá-trị"]: Chọn chính xác thẻ có thuộc tính mang giá trị cụ thể.

Ví dụ: Giả sử chúng ta có các đường link trên trang web:

- Giải thích:

 + Link Google: Vì có href nên trình duyệt sẽ vẽ khung màu xanh quanh nó.

 + Link Facebook: Có href => Nhận khung màu xanh và có target="_blank" => Chữ chuyển sang màu đỏ và in đậm.

 + Link chưa có đích đến: Không có thuộc tính nào được CSS gọi tên, nên nó hiển thị như văn bản bình thường.

 + a:hover: Khi di chuột vào liên kết.

 + a:link: Liên kết chưa xem.

 + a:visited: Liên kết đã xem.

 + Ví dụ:

Giải thích:

• Link bình thường sẽ có màu Xanh dương.
• Khi di chuột vào, nó sẽ chuyển sang màu Cam và In đậm (hiệu ứng hover).
• Link nào đã bấm rồi, nó sẽ chuyển sang màu Xám để đánh dấu là "đã đọc".

• p::first-line: Dòng đầu tiên.
• p::first-letter: Chữ cái đầu tiên.

Ví dụ:

- Thứ tự từ mạnh nhất xuống yếu nhất như sau:

• 1. !important (Mạnh nhất)
• 2. Inline style (Rất mạnh)
• 3. ID (100)
• 4. Class, pseudo-class, attribute (.class, :hover, :active, :focus..., [type="text"]) (10)
• 5. Thẻ, pseudo-element (p, div, span..., ::before, ::after, ::selection ...) (1)
• 6. Kế thừa (yếu)
• 7. Mặc định trình duyệt (yếu nhất)

- Ví dụ: