Định kiểu CSS bằng cách khai báo vùng chọn mang lại lợi ích về tái sử dụng, kiểm soát, quy tắc ưu tiên, linh hoạt và dễ đọc mã.

Khi định kiểu CSS bằng cách khai báo vùng chọn (selector), ta có các lợi ích sau:

- Tái sử dụng mã CSS: Sử dụng vùng chọn cho phép ta áp dụng cùng một quy tắc CSS cho nhiều thành phần có cùng đặc điểm. Thay vì viết mã CSS cho từng thành phần riêng lẻ, ta chỉ cần khai báo một vùng chọn và áp dụng nó cho những thành phần tương ứng. Điều này giúp tiết kiệm thời gian và làm cho mã CSS dễ quản lý hơn.

- Kiểm soát dễ dàng: Khi sử dụng vùng chọn, ta có thể áp dụng quy tắc CSS cho một nhóm các thành phần cụ thể hoặc toàn bộ trang web. Điều này giúp ta dễ dàng kiểm soát và thay đổi giao diện của các thành phần một cách tập trung. Bằng cách chỉnh sửa một vùng chọn duy nhất, ta có thể thay đổi toàn bộ giao diện liên quan mà không cần sửa đổi từng thành phần riêng lẻ.

- Quy tắc ưu tiên: Sử dụng vùng chọn cho phép ta xác định quy tắc ưu tiên trong trường hợp có xung đột giữa các quy tắc CSS. Với việc sử dụng các vùng chọn cụ thể, ta có thể xác định rõ thứ tự ưu tiên của các quy tắc và đảm bảo rằng quy tắc được áp dụng đúng theo ý định của mình.

- Tính linh hoạt: Với việc sử dụng các vùng chọn, ta có thể áp dụng CSS cho các thành phần cụ thể hoặc nhóm thành phần dựa trên các thuộc tính, lớp, ID, hoặc cấu trúc HTML. Điều này giúp ta tạo ra giao diện linh hoạt và tùy chỉnh theo nhu cầu cụ thể của từng thành phần hoặc nhóm thành phần.

- Độ ưu nhìn: Khi sử dụng vùng chọn, mã CSS trở nên dễ đọc và dễ hiểu hơn. Bằng cách sử dụng các tên vùng chọn mô tả chính xác đối tượng và mục đích áp dụng CSS, ta giúp cho việc bảo trì và cập nhật mã dễ dàng hơn trong tương lai.

- Không thể tái sử dụng: Khi viết mã CSS trong thuộc tính style của mỗi thẻ <h1>, mã đó chỉ áp dụng cho thẻ đó cụ thể. Điều này làm cho việc tái sử dụng mã CSS trở nên khó khăn. Nếu có nhiều thẻ <h1> trong trang, bạn phải viết mã CSS tương tự cho mỗi thẻ.

- Phức tạp và khó quản lý: Nếu bạn cần áp dụng nhiều thuộc tính CSS cho mỗi thẻ <h1>, việc viết mã trong thuộc tính style có thể trở nên phức tạp và khó quản lý. Mã CSS sẽ phải được viết trực tiếp trong từng thẻ, làm cho mã HTML trở nên lộn xộn và khó đọc.

- Ghi đè ưu tiên: Khi viết mã CSS trong thuộc tính style, nó sẽ ghi đè lên bất kỳ quy tắc CSS nào được áp dụng từ các tệp CSS bên ngoài hoặc trong thẻ <style>. Điều này có thể gây ra xung đột và khó kiểm soát ưu tiên của các quy tắc CSS.

- Không thể sử dụng các lớp và ID: Khi viết mã CSS trong thuộc tính style, bạn không thể sử dụng các lớp (class) và ID để xác định đối tượng cần áp dụng mã CSS. Điều này giới hạn khả năng chọn và áp dụng mã CSS theo cách linh hoạt và tái sử dụng.

Dưới đây là một số thuộc tính và giá trị phổ biến khác mà em có thể sử dụng để định kiểu cho các thành phần web trong bài học:

- width: Định kiểu chiều rộng của thành phần. Bạn có thể sử dụng các giá trị đơn vị như px, %, em, rem.

- height: Định kiểu chiều cao của thành phần. Bạn cũng có thể sử dụng các giá trị đơn vị như px, %, em, rem.

- display: Định kiểu hiển thị của thành phần. Các giá trị thông thường là "block" (khối), "inline" (trên cùng một dòng), "inline-block" (trên cùng một dòng nhưng có thể định kiểu kích thước), và "none" (ẩn).

- position: Định kiểu vị trí của thành phần. Các giá trị thông thường là "static" (mặc định), "relative" (tương đối), "absolute" (tuyệt đối), và "fixed" (cố định).

- float: Định kiểu độ lệch của thành phần so với các thành phần khác. Các giá trị thông thường là "left" (trôi về bên trái), "right" (trôi về bên phải), và "none" (không trôi).

- text-decoration: Định kiểu trang trí văn bản bên trong thành phần. Các giá trị thông thường là "none" (không có trang trí), "underline" (gạch chân), "overline" (gạch trên), "line-through" (gạch ngang), và "blink" (nhấp nháy).

- box-shadow: Định kiểu hiệu ứng bóng đổ cho thành phần. Bạn có thể thiết lập độ mờ, màu sắc và kích thước của bóng đổ.

- text-transform: Định kiểu chuyển đổi chữ hoa chữ thường của văn bản. Các giá trị thông thường là "none" (không chuyển đổi), "uppercase" (chữ hoa), và "lowercase" (chữ thường).

Để định kiểu bo tròn 4 góc của mỗi ảnh trong mục Nội dung yêu thích, em có thể sử dụng thuộc tính CSS border-radius. Bằng cách thiết lập giá trị border-radius là 50%, các góc của ảnh sẽ được bo tròn.

Dưới đây là một ví dụ về cách định kiểu bo tròn 4 góc của ảnh:

Hướng dẫn:

Để thay đổi độ trong suốt của ảnh nền trong mục Giới thiệu chung, bạn có thể sử dụng thuộc tính CSS opacity. Giá trị của thuộc tính này có thể từ 0 đến 1, với 0 là hoàn toàn trong suốt và 1 là không trong suốt.

Dưới đây là một ví dụ về cách tăng hoặc giảm độ trong suốt của ảnh nền:

Để định kiểu các thông tin cá nhân với phông chữ Georgia và các kích thước khác nhau, bạn có thể sử dụng CSS để áp dụng các thuộc tính phù hợp. Dưới đây là một ví dụ về cách định kiểu thông tin cá nhân theo yêu cầu:

Hiển thị:

Để định kiểu cho màu sắc trong mã lệnh CSS, chúng ta có một số cách mô tả khác nhau:

- Tên màu (Color Names): Sử dụng từ khoá là tên màu. Ví dụ: red, blue, green, yellow, và nhiều tên màu khác.

- Mã màu (Hexadecimal Color Codes): Sử dụng mã màu hex (hex code) để chỉ định màu sắc. Ví dụ: #ff0000 tương ứng với màu đỏ.

- Hàm mô tả màu (RGBA): Sử dụng hàm rgba() để chỉ định màu sắc dựa trên các thành phần RGB (đỏ, xanh lá cây, xanh dương) và độ trong suốt (alpha). Cú pháp: rgba(red, green, blue, alpha). Ví dụ: rgba(255, 0, 0, 0.3) là màu đỏ với độ trong suốt 30%.

- Pixels (px): Đây là đơn vị tuyệt đối và thường được sử dụng để định kích thước cụ thể cho các phần tử trên trang web. Một pixel tương đương với 1/96 inch.

- Em (em): Đơn vị tương đối dựa vào kích thước font hiện tại của phần tử mẹ. Nó thường được sử dụng để thiết lập kích thước chữ hoặc khoảng cách.

- Rem (root em): Tương tự như em, nhưng không phụ thuộc vào phần tử mẹ. Rem dựa vào kích thước font của phần tử gốc (root element), thường là phần tử <html>.

- % (percentages): Đơn vị tương đối về kích thước của phần tử con so với phần tử mẹ. Ví dụ, width: 50% có nghĩa là chiều rộng của phần tử con bằng 50% chiều rộng của phần tử mẹ.

- Viewport Width (vw) và Viewport Height (vh): Đây là đơn vị tương đối dựa vào kích thước của viewport (không gian hiển thị trên màn hình). 1vw tương đương 1% chiều rộng của viewport, và 1vh tương đương 1% chiều cao của viewport.

Một số thuộc tính dùng để định kiểu phông chữ, văn bản, nền, đường viền, lễ và vùng đệm trong CSS bao gồm:

- font-family: Để thiết lập tên phông chữ.

- font-size: Để thiết lập cỡ chữ.

- font-style: Để thiết lập kiểu in nghiêng cho văn bản.

- font-weight: Để thiết lập độ đậm nhạt của văn bản.