No Comments Các khái niệm về website

CSS (Cascading Style Sheets) là ngôn ngữ dùng để định kiểu và trình bày cho các tài liệu web được viết bằng HTML. CSS giúp điều chỉnh cách mà các phần tử HTML như văn bản, hình ảnh, bảng biểu, v.v., hiển thị trên trang web, bao gồm các thuộc tính như màu sắc, phông chữ, kích thước, khoảng cách, bố cục, và nhiều yếu tố khác.

Các thành phần cơ bản của CSS:

  1. Cấu trúc cú pháp của CSS: CSS được tổ chức thành các quy tắc (rules), trong đó mỗi quy tắc bao gồm bộ chọn (selector) và khối khai báo (declaration block):
    css
    selector {
    property: value;
    }
    • Selector (Bộ chọn): Xác định phần tử HTML nào sẽ áp dụng các thuộc tính CSS.
    • Property (Thuộc tính): Xác định thuộc tính cụ thể cần thay đổi (như màu sắc, kích thước, v.v.).
    • Value (Giá trị): Giá trị được áp dụng cho thuộc tính.

    Ví dụ:

    css
    p {
    color: blue;
    font-size: 16px;
    }

    Quy tắc này sẽ thay đổi màu chữ của tất cả các đoạn văn (<p>) thành màu xanh và kích thước chữ thành 16px.

  2. Cách thêm CSS vào trang HTML: Có ba cách chính để thêm CSS vào trang HTML:
    • Inline CSS: CSS được thêm trực tiếp vào thẻ HTML bằng thuộc tính style.
      html
      <p style="color: red;">This is a red paragraph.</p>
    • Internal CSS: CSS được viết trong thẻ <style> nằm trong phần <head> của tài liệu HTML.
      html
      <head>
      <style>
      p {
      color: green;
      }
      </style>
      </head>
    • External CSS: CSS được viết trong một tệp riêng biệt và liên kết với HTML bằng thẻ <link>.
      html
      <head>
      <link rel="stylesheet" href="styles.css">
      </head>
  3. Selectors (Bộ chọn): Bộ chọn là cách để nhắm mục tiêu và áp dụng kiểu cho các phần tử cụ thể trên trang web. Một số bộ chọn phổ biến:
    • Bộ chọn thẻ: Áp dụng kiểu cho tất cả các thẻ cụ thể (ví dụ <p>, <h1>).
      css
      p {
      color: blue;
      }
    • Bộ chọn lớp (Class): Áp dụng kiểu cho các phần tử có thuộc tính class. Bắt đầu với dấu chấm (.).
      css
      .my-class {
      color: green;
      }

      Sử dụng trong HTML:

      html
      <p class="my-class">This is a paragraph.</p>
    • Bộ chọn ID: Áp dụng kiểu cho phần tử có thuộc tính id. Bắt đầu với dấu thăng (#).
      css
      #my-id {
      color: red;
      }

      Sử dụng trong HTML:

      html
      <p id="my-id">This is a paragraph.</p>
    • Bộ chọn thuộc tính: Áp dụng kiểu cho các phần tử có thuộc tính cụ thể.
      css
      input[type="text"] {
      border: 1px solid black;
      }
  4. Cascading (Tính phân tầng): CSS có tính phân tầng, nghĩa là khi có nhiều quy tắc xung đột nhau, trình duyệt sẽ áp dụng quy tắc theo thứ tự ưu tiên:
    • Inline CSS có độ ưu tiên cao nhất.
    • Internal CSS và External CSS xếp sau.
    • Các thuộc tính có thể bị ghi đè dựa trên độ chi tiết của bộ chọn.
  5. Box Model (Mô hình hộp): Mỗi phần tử trong HTML đều được coi là một "hộp" và có thể được định dạng với các thuộc tính CSS sau:
    • Content: Nội dung bên trong phần tử (văn bản, hình ảnh).
    • Padding: Khoảng cách giữa nội dung và đường viền.
    • Border: Đường viền xung quanh phần tử.
    • Margin: Khoảng cách giữa phần tử và các phần tử khác.

    Ví dụ:

    css
    div {
    width: 300px;
    padding: 20px;
    border: 5px solid black;
    margin: 10px;
    }
  6. Bố cục (Layout): CSS cung cấp nhiều công cụ để quản lý bố cục trang web:
    • Flexbox: Được sử dụng để bố trí các phần tử trong một dòng hoặc một cột, và dễ dàng căn chỉnh, phân phối không gian giữa chúng.
      css
      .container {
      display: flex;
      justify-content: center;
      align-items: center;
      }
    • Grid: Một công cụ mạnh mẽ hơn để tạo bố cục phức tạp với lưới hàng và cột.
      css
      .container {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      }
  7. Responsive Design (Thiết kế đáp ứng): CSS hỗ trợ tạo trang web có thể tự điều chỉnh hiển thị theo kích thước màn hình. Các media queries được sử dụng để thay đổi kiểu dựa trên thiết bị:
    css
    @media (max-width: 600px) {
    body {
    background-color: lightblue;
    }
    }
  8. Các thuộc tính CSS thường dùng:
    • Color: Đặt màu chữ.
      css
      color: blue;
    • Background: Đặt màu nền hoặc hình ảnh nền.
      css
      background-color: yellow;
      background-image: url('image.jpg');
    • Font: Kiểm soát kiểu chữ.
      css
      font-family: Arial, sans-serif;
      font-size: 16px;
      font-weight: bold;
    • Width, Height: Điều chỉnh kích thước phần tử.
      css
      width: 100px;
      height: 200px;

Vai trò của CSS trong Web:

  • Tạo giao diện đẹp mắt: CSS giúp tạo các trang web với giao diện người dùng hấp dẫn và dễ sử dụng.
  • Phân tách nội dung và kiểu: HTML cung cấp cấu trúc, trong khi CSS tạo kiểu cho trang web. Điều này giúp dễ dàng quản lý và duy trì trang web.
  • Thiết kế đáp ứng: CSS giúp trang web hiển thị tốt trên nhiều loại thiết bị, từ máy tính để bàn đến điện thoại di động.
Đánh giá post