CSS Cơ bản và Ứng dụng

Trong CSS, việc sử dụng sprite ảnh có thể tối ưu hóa hiệu suất tải trang. Dưới đây là một ví dụ về cách áp dụng sprite ảnh:

    .icon {
      width: 30px;
      height: 30px;
      background: url('./images/icons.png') -10px -50px no-repeat;
      display: inline-block;
    }

Điều chỉnh kích thước nền với background-size

  .box {
      width: 400px;
      height: 300px;
      border: 2px solid #ccc;
      background: url('./images/bg.jpg') no-repeat;
      margin: 50px auto;
  }

  .box:nth-child(1) {
      /* Kích thước cố định */
      background-size: 400px 300px;
  }

  .box:nth-child(2) {
      /* Tỷ lệ phần trăm */
      background-size: 100% 100%;
  }

  .box:nth-child(3) {
      /* Contain - Giữ tỷ lệ và vừa khít hộp */
      background-size: contain;
  }

  .box:nth-child(4) {
      /* Cover - Bao phủ toàn bộ hộp */
      background-size: cover;
  }

Tối ưu viết gọn thuộc tính background

  .container {
      width: 600px;
      height: 600px;
      border: 2px solid #000;
      background: #fff url('./images/sample.jpg') no-repeat center center / 100% 100%;
  }

Tạo hiệu ứng đổ bóng chữ

  .text-effect-1 {
      text-shadow: 10px 10px 5px rgba(255, 0, 0, 0.7);
  }

  .text-effect-2 {
      text-shadow: 
          5px 5px 3px green,
          10px 10px 5px blue,
          15px 15px 7px red;
  }

  .text-effect-3 {
      color: #fff;
      background-color: #000;
      text-shadow: 
          0 0 5px #fff,
          0 0 20px #ffcc00,
          10px -10px 30px #feec85,
          -20px -20px 40px #ffae34;
  }

Hiệu ứng đổ bóng hộp

  .shadow-box {
      width: 250px;
      height: 250px;
      background-color: lightblue;
      box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.5);
  }

Sử dụng chuyển tiếp (transition)

  .transition-box {
      width: 150px;
      height: 150px;
      background-color: orange;
      transition: all 0.5s ease;
  }

  .transition-box:hover {
      width: 300px;
      height: 300px;
      background-color: green;
  }

Cấu trúc HTML cơ bản

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Trang Web Mẫu</title>
</head>
<body>
  <p>Xin chào, tôi là một đoạn văn bản bằng tiếng Việt.</p>
</body>
</html>

SEO với thẻ meta

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Quả Rau Sạch - An Toàn, Tươi Ngon</title>
  <meta name="description" content="Quả Rau Sạch cung cấp thực phẩm sạch, an toàn cho gia đình bạn." />
  <meta name="keywords" content="rau củ, thực phẩm sạch, nông sản, mua sắm trực tuyến" />
</head>
<body>
  
</body>
</html>

Thiết lập biểu tượng trang web

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Biểu Tượng Trang Web</title>
  <link rel="icon" href="favicon.ico" type="image/x-icon"/>
</head>
<body>
  
</body>
</html>

Thẻ: css HTML seo

Đăng vào ngày 1 tháng 7 lúc 03:55

Thành phố Cuồng loạn

CSS Cơ bản và Ứng dụng

Thẻ Phổ Biến