Ghi chú kỹ thuật của zhaoJian

Khóa học IT Cơ bản CSS 019_HelloCSS

Học tập / Cơ bản CSS ~9238 từ · 24 phút đọc - lượt xem

CSS là gì?

CSS (Cascading Style Sheets - Bảng định kiểu xếp tầng), giống như HTML, CSS không phải là ngôn ngữ lập trình thực sự, thậm chí không phải là ngôn ngữ đánh dấu. CSS là ngôn ngữ stylesheet được sử dụng để thêm kiểu dáng cho các phần tử HTML, mô tả giao diện của tài liệu HTML, kiểm soát màu sắc, kích thước, phông chữ, bố cục, v.v. của các phần tử tài liệu HTML.

CSS là một phần quan trọng của phát triển Web, có thể giúp bạn tạo ra các trang web đẹp, dễ sử dụng.

Cấu trúc cơ bản của CSS

Kiểu CSS bao gồm bộ chọn và thuộc tính. Bộ chọn được sử dụng để chọn các phần tử HTML sẽ được áp dụng kiểu. Thuộc tính được sử dụng để chỉ định giá trị của kiểu.

Ví dụ:

p {
    color: red;
}

Hiệu ứng:

Hiệu ứng ví dụ

Phân tích cấu trúc:

Hiệu ứng ví dụ

[!Tóm tắt]

  • Bộ chọn (Selector) Tên của phần tử HTML nằm ở đầu bộ quy tắc. Nó chọn một hoặc nhiều phần tử cần thêm kiểu (trong ví dụ này là phần tử <p>). Để thêm kiểu cho các phần tử khác nhau, chỉ cần thay đổi bộ chọn.

  • Khai báo (Declaration) Một quy tắc đơn lẻ, như color: red; chỉ định thuộc tính của phần tử được thêm kiểu. Khai báo CSS luôn kết thúc bằng dấu chấm phẩy ; và luôn được đặt trong dấu ngoặc nhọn {}:

  • Thuộc tính (Properties) Cách thay đổi kiểu của phần tử HTML (trong ví dụ này color là thuộc tính của phần tử <p>). Trong CSS, tác giả quyết định sửa đổi thuộc tính nào để thay đổi quy tắc.

  • Giá trị thuộc tính (Property value) Bên phải của thuộc tính, sau dấu hai chấm là giá trị thuộc tính, chọn một giá trị từ nhiều giao diện có thể của thuộc tính được chỉ định (ngoài red, chúng ta còn có nhiều giá trị thuộc tính khác cho color).

Cách tham chiếu CSS?

Tham chiếu nội tuyến:

Viết mã CSS trực tiếp trong thẻ HTML bằng thuộc tính style.

Tham chiếu nội tuyến là phương pháp đơn giản và nhanh chóng để viết mã kiểu trực tiếp trong thẻ HTML. Ưu điểm của tham chiếu nội tuyến là tiện lợi và nhanh chóng, phù hợp cho lượng kiểu nhỏ. Tuy nhiên, tham chiếu nội tuyến cũng có các nhược điểm sau:

  • Không thuận lợi cho việc tái sử dụng kiểu, khó bảo trì.
  • File HTML trở nên lộn xộn, không tuân theo nguyên tắc phân tách.
  • Không thuận lợi cho bộ nhớ đệm trình duyệt, ảnh hưởng đến hiệu suất.

Ví dụ:

  <div style="color: red; font-size: 16px;">Đây là phông chữ màu đỏ</div>

Hiệu ứng:

Hiệu ứng ví dụ

Tham chiếu nội bộ:

Viết mã CSS trong thẻ <style>, đặt bên trong thẻ <head>.

Tham chiếu nội bộ là cách tiếp cận tương đối trung gian khi viết mã kiểu trong thẻ style của file HTML. Ưu điểm của tham chiếu nội bộ là kiểu và file HTML được phân tách, dễ bảo trì hơn. Ngoài ra, tham chiếu nội bộ có thể sử dụng bộ nhớ đệm trình duyệt để cải thiện tốc độ tải. Tuy nhiên, tham chiếu nội bộ cũng có các nhược điểm sau:

  • Tải trang yêu cầu yêu cầu mạng bổ sung, hiệu quả tương đối thấp.
  • Kiểu và file HTML vẫn có một số liên kết.

Ví dụ:

div {
    color: red;
    font-size: 16px;
}
  <div>Đây là phông chữ màu đỏ</div>

Hiệu ứng:

Hiệu ứng ví dụ

Tham chiếu bên ngoài:

Viết mã CSS trong file CSS riêng biệt, sau đó sử dụng thẻ link để bao gồm nó.

Tham chiếu bên ngoài là phương pháp chuẩn hơn khi viết mã kiểu trong file CSS riêng biệt. Ưu điểm của tham chiếu bên ngoài là kiểu và file HTML hoàn toàn tách biệt, dễ bảo trì hơn. Ngoài ra, tham chiếu bên ngoài có thể được tăng tốc thông qua CDN để cải thiện tốc độ tải file. Tham chiếu bên ngoài cũng hỗ trợ nén và hợp nhất để giảm kích thước file. Tuy nhiên, tham chiếu bên ngoài cũng có các nhược điểm sau:

  • Tải trang yêu cầu yêu cầu mạng bổ sung, nhưng có thể tối ưu hóa.
  • Phụ thuộc vào tài nguyên bên ngoài, có thể gây chặn hoặc tải thất bại.
  • Có thể cần nhiều yêu cầu cho file bên ngoài trong quá trình phát triển.

Ví dụ:

<head>


<!-- Trong thư mục hiện tại, tham chiếu file stylesheet trong thư mục con styles -->
<link rel="stylesheet" href="style.css" />


<!-- Trong thư mục hiện tại, tham chiếu file stylesheet trong thư mục con general bên trong thư mục con styles -->
<link rel="stylesheet" href="/style.css" />


<!-- Trong thư mục cha của thư mục hiện tại, tham chiếu file stylesheet trong thư mục con styles -->
<link rel="stylesheet" href="../styles/style.css" />


</head>
div {
    color: red;
    font-size: 16px;
}

Hiệu ứng:

Hiệu ứng ví dụ Hiệu ứng ví dụ

Thứ tự xếp tầng và Độ ưu tiên

Thứ tự xếp tầng CSS (Cascading Order) và Độ đặc hiệu (Specificity) là hai yếu tố quan trọng quyết định hiệu ứng kiểu hiển thị CSS.

Thứ tự xếp tầng: Thứ tự xếp tầng CSS định nghĩa trọng số của các quy tắc kiểu, từ cao đến thấp:

  1. Quan trọng (!important): Các quy tắc kiểu được khai báo với !important có độ ưu tiên cao nhất. Nhưng nên sử dụng cẩn thận, vì lạm dụng sẽ dẫn đến khó bảo trì.
  2. Kiểu tác giả (Author Styles): Kiểu được xác định bởi nhà phát triển web, bao gồm stylesheet bên ngoài, stylesheet nội bộ và kiểu nội tuyến. Độ ưu tiên nằm giữa kiểu người dùng và kiểu user agent.
  3. Kiểu người dùng (User Styles): Kiểu được người dùng thiết lập thông qua plugin trình duyệt hoặc cài đặt người dùng, độ ưu tiên cao hơn kiểu user agent (như plugin phông chữ).
  4. Kiểu User Agent (User Agent Styles): Kiểu mặc định của trình duyệt, có độ ưu tiên thấp nhất (như phông chữ).

Độ ưu tiên: Khi có nhiều quy tắc cùng cấp hoặc nhiều quy tắc kiểu xung đột, CSS hiển thị hiệu ứng kiểu theo độ ưu tiên.

  1. Kiểu nội tuyến (Inline Styles): Kiểu được chỉ định trong thẻ HTML có độ ưu tiên cao nhất.
  2. Bộ chọn ID (id): Kiểu được chỉ định thông qua bộ chọn ID (như: #header).
  3. Bộ chọn Class, Bộ chọn thuộc tính và Bộ chọn giả (class): Kiểu được chỉ định thông qua bộ chọn class (như: .container). Kiểu được chỉ định thông qua bộ chọn thuộc tính (như: [type="text"]). Kiểu được chỉ định thông qua bộ chọn giả (như: :hover).
  4. Bộ chọn phần tử: Bộ chọn chỉ định tên phần tử HTML (như div, p).

Khi độ ưu tiên bằng nhau, quy tắc được định nghĩa sau có độ ưu tiên cao hơn.

Ví dụ:

#header {
    color: red;
}


.container p {
    color: blue;
}


p {
    color: green;
}
Kế thừa CSS

Kế thừa CSS đề cập đến đặc tính của phần tử con kế thừa một số giá trị thuộc tính từ phần tử cha. Kế thừa là tính năng quan trọng trong CSS có thể đơn giản hóa việc viết kiểu và cải thiện khả năng bảo trì mã. Không phải tất cả các thuộc tính CSS đều có thể kế thừa; chỉ một số thuộc tính được định nghĩa là có thể kế thừa.

Các thuộc tính kế thừa CSS chủ yếu bao gồm:

  • Thuộc tính văn bản: font-family, font-size, font-weight, font-style, color, text-decoration, text-align, line-height, letter-spacing, word-spacing
  • Thuộc tính màu: background-color, border-color, color, outline-color
  • Thuộc tính viền: border-width, border-style, border-color
  • Thuộc tính box model: margin, padding, width, height, display, float, position, z-index

Các thuộc tính CSS không được kế thừa bao gồm, ví dụ, width, height, margin, padding và các thuộc tính liên quan đến box model khác, định vị (position), float (float), xóa float (clear) và các thuộc tính liên quan đến bố cục khác.

Các thuộc tính CSS phổ biến và chức năng của chúng:

Thuộc tính cơ bản width, height: Đặt chiều rộng và chiều cao của phần tử. margin: Đặt margin của phần tử. padding: Đặt padding của phần tử. color, background-color: Đặt màu và màu nền của phần tử. font-size, font-family, font-weight, font-style: Đặt kích thước phông chữ, họ phông chữ, độ đậm phông chữ và kiểu phông chữ của phần tử.

Thuộc tính bố cục display: Đặt chế độ hiển thị của phần tử. float: Đặt chế độ float của phần tử. position: Đặt vị trí của phần tử. top, left, right, bottom: Đặt vị trí trên, trái, phải và dưới của phần tử. z-index: Đặt thứ tự xếp chồng của phần tử.

Thuộc tính văn bản text-align: Đặt căn chỉnh văn bản của phần tử. text-decoration: Đặt trang trí văn bản của phần tử. line-height: Đặt chiều cao dòng của phần tử. font-variant: Đặt biến thể phông chữ của phần tử. text-transform: Đặt chuyển đổi văn bản của phần tử. letter-spacing, word-spacing: Đặt khoảng cách chữ cái và khoảng cách từ của phần tử.

Thuộc tính viền border: Đặt kiểu viền của phần tử. border-width: Đặt độ rộng viền của phần tử. border-style: Đặt kiểu viền của phần tử. border-color: Đặt màu viền của phần tử. border-radius: Đặt bán kính viền của phần tử.

Thuộc tính nền background: Đặt nền của phần tử. background-color: Đặt màu nền của phần tử. background-image: Đặt hình ảnh nền của phần tử. background-repeat: Đặt chế độ lặp hình ảnh nền của phần tử. background-position: Đặt vị trí hình ảnh nền của phần tử. background-size: Đặt kích thước hình ảnh nền của phần tử.

Thuộc tính chuyển tiếp transition: Đặt hiệu ứng chuyển tiếp của phần tử. transition-property: Đặt thuộc tính chuyển tiếp của phần tử. transition-duration: Đặt thời gian chuyển tiếp của phần tử. transition-timing-function: Đặt hàm thời gian chuyển tiếp của phần tử. transition-delay: Đặt độ trễ chuyển tiếp của phần tử.

Khóa học IT Khóa học HTML Khóa học CSS Khóa học JavaScript Khóa học Java Hệ thống máy tính và Mạng hello css css cơ bản
Chia sẻ:

Bình luận