CSS nội tuyến
Thuộc phần Tạo kiểu với CSS trong hành trình HTML của Coddy. Bài học 6 trên 76.
CSS nội tuyến là cách thêm kiểu CSS trực tiếp vào một phần tử HTML bằng thuộc tính style. Cách này cho phép bạn áp dụng kiểu riêng cho từng phần tử mà không cần bảng định kiểu bên ngoài hoặc bên trong. Kiểu nội tuyến hữu ích khi bạn muốn nhanh chóng thay đổi một kiểu cụ thể cho một phần tử.
Đây là cú pháp cơ bản để sử dụng CSS nội tuyến:
<element style="property: value;"></element><element>: Phần tử HTML mà bạn muốn định dạng.style: Thuộc tính chứa các khai báo CSS.
property: Thuộc tính CSS bạn muốn thiết lập (ví dụ: color, font-size).value: Giá trị bạn muốn đặt cho thuộc tính (ví dụ: blue, 16px).
Ví dụ:
<p style="color: blue; font-size: 16px;">This is a paragraph with inline styles.</p>Trong ví dụ này, phần tử đoạn văn có kiểu nội tuyến đặt màu chữ thành màu xanh dương và cỡ chữ thành 16 pixel. Các kiểu này chỉ áp dụng cho phần tử đoạn văn cụ thể này.
Thử thách
DễBạn được cung cấp một tài liệu HTML có phần tử đoạn văn. Dùng CSS nội tuyến để tạo kiểu cho đoạn văn với các thuộc tính sau:
- Đặt màu chữ thành đỏ.
- Đặt cỡ chữ thành 18 pixel.
Xem ví dụ trong bài học để biết cách thực hiện!
Tự làm thử
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>
Tự kiểm traBài học này có một bài trắc nghiệm ngắn. Bắt đầu bài học để trả lời và theo dõi tiến độ.
Tất cả bài học trong Tạo kiểu với CSS
3Bộ chọn cơ bản
Giới thiệu về bộ chọnBộ chọn kiểuBộ chọn lớpBộ chọn IDBộ chọn nhómBộ chọn phổ quátThử thách về bộ chọn9Flexbox
Flexbox là gì?Hướng flexCăn chỉnh nội dungCăn chỉnh các phần tửCăn giữa hoàn hảoThử thách Flexbox12Kiến thức cơ bản về thiết kế đáp ứng
Thiết kế đáp ứng là gì?Thẻ meta viewportBố cục linh hoạtĐơn vị viewportKiến thức cơ bản về media queryHình ảnh linh hoạtTự luyện tập: Playground Web