Tạo ghi chú (Notes) với CSS như thế nào?

Để tạo các ghi chú (notes) với CSS, bạn có thể sử dụng các class CSS để định kiểu cho các thông báo khác nhau như danger (nguy hiểm), success (thành công), info (thông tin). Dưới đây là ví dụ hoàn chỉnh:

Ví dụ mã nguồn

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }
  div {
    margin-bottom: 15px;
    padding: 4px 12px;
    font-size: 18px;
  }
  .danger {
    background-color: #ffdddd;
    border-left: 6px solid #f44336;
  }
  .success {
    background-color: #ddffdd;
    border-left: 6px solid #4CAF50;
  }
  .info {
    background-color: #e7f3fe;
    border-left: 6px solid #2196F3;
  }
</style>
</head>
<body>
<h1 style="text-align: center;">Ví dụ ghi chú</h1>
<div class="danger">
  <p><strong>Nguy hiểm!</strong> Thao tác có thể làm hỏng máy tính của bạn</p>
</div>
<div class="success">
  <p><strong>Thành công!</strong> Thao tác đã được thực hiện thành công</p>
</div>
<div class="info">
  <p><strong>Thông tin!</strong> Cần thêm tài nguyên để thực hiện thao tác này</p>
</div>
</body>
</html>

Kết quả

Mã trên sẽ tạo ra ba loại ghi chú với màu sắc và viền trái khác nhau:

• Danger (Đỏ): Dùng cho cảnh báo nghiêm trọng
• Success (Xanh lá): Dùng cho thông báo thành công
• Info (Xanh dương): Dùng cho thông tin chung

Kỹ thuật cốt lõi là sử dụng border-left với độ dày 6px để tạo thanh màu đặc trưng ở bên trái, kết hợp với màu nền nhẹ (pastel) tương ứng.