Thẻ học CSS

Nhà tài trợ chuyên mục

CSS (Cascading Style Sheets) là một ngôn ngữ bảng định kiểu được sử dụng để mô tả giao diện và định dạng của một tài liệu được viết bằng ngôn ngữ đánh dấu, được tạo ra bởi Håkon Wium Lie. Đây là một công nghệ chính của World Wide Web, được thiết kế để tách biệt phần trình bày khỏi cấu trúc của tài liệu. CSS nổi bật với tính linh hoạt và khả năng tạo kiểu mạnh mẽ, cho phép kiểm soát chính xác bố cục, màu sắc, phông chữ và hoạt ảnh của các phần tử trang. Ngôn ngữ này cung cấp các bộ chọn và thuộc tính nâng cao, cung cấp cho nhà phát triển các công cụ để tạo ra giao diện đáp ứng, hấp dẫn về mặt trực quan. CSS cũng hỗ trợ tính mô-đun và tái sử dụng của các kiểu, duy trì hiệu suất và cho phép tạo ra các thiết kế nhất quán trên các trình duyệt và thiết bị khác nhau.

Ứng dụng thẻ học của chúng tôi bao gồm các câu hỏi phỏng vấn CSS được chọn lọc kỹ lưỡng với câu trả lời chi tiết sẽ chuẩn bị hiệu quả cho bạn cho bất kỳ cuộc phỏng vấn nào yêu cầu kiến thức về CSS. IT Flashcards không chỉ là một công cụ cho những người tìm việc - đó là một cách tuyệt vời để củng cố và kiểm tra kiến thức của bạn, bất kể kế hoạch nghề nghiệp hiện tại của bạn là gì. Sử dụng ứng dụng thường xuyên sẽ giúp bạn cập nhật với những xu hướng CSS mới nhất và giữ kỹ năng của bạn ở mức cao.

Thẻ học CSS mẫu từ ứng dụng của chúng tôi

Tải xuống ứng dụng của chúng tôi từ App Store hoặc Google Play để nhận thêm flashcard miễn phí hoặc đăng ký để truy cập vào tất cả flashcard.

Sự khác biệt giữa các lớp (class) và ID trong CSS là gì?

Các lớp và định danh là công cụ CSS cho phép bạn tạo phong cách cho các phần tử HTML cụ thể. Mặc dù cả hai phương pháp lựa chọn gần như giống nhau, nhưng có một số khác biệt.

1. Độc đáo: Các lớp là không độc đáo, có nghĩa là bạn có thể sử dụng cùng một lớp trên nhiều phần tử khác nhau. Ngược lại, định danh là độc đáo trên một trang, có nghĩa là mỗi định danh chỉ có thể được sử dụng một lần trên một trang.

2. Độ chính xác: Định danh là chính xác hơn so với các lớp. Điều này có nghĩa là nếu các phong cách xung đột, phong cách định danh sẽ ghi đè lên phong cách lớp.

3. Ứng dụng JavaScript: Định danh thường được sử dụng để thao tác các phần tử HTML bằng cách sử dụng JavaScript, trong khi các lớp ít khi được sử dụng cho mục đích này.

4. Khả năng mở rộng: Phong cách lớp có thể được tái sử dụng bởi nhiều phần tử trên trang. Định danh là ít linh hoạt hơn và có khả năng sẽ được sử dụng để tạo phong cách cho các phần riêng biệt.

Xin lưu ý rằng một trong những phương pháp tốt nhất là sử dụng các lớp cho phong cách CSS và định danh cho JavaScript.

Làm thế nào một stylesheet CSS có thể được liên kết với một tài liệu HTML?

Một trang CSS có thể được đính kèm vào tài liệu HTML theo một trong những cách sau:

1. **Kiểu in-line:** Kiểu được đính kèm trực tiếp vào các phần tử HTML bằng cách sử dụng thuộc tính `style`. Ví dụ:

<p style="color:red;">Văn bản này có màu đỏ</p>

Phương pháp này ít khi được sử dụng, thường chỉ cho những thay đổi kiểu "một lần".

2. **CSS nội bộ:** Kiểu được bao gồm trong các thẻ `<style>` trong phần `<head>` của tài liệu HTML. Ví dụ:

<head>
     <style>
       p { color: red; }
     </style>
   </head>

Phương pháp này hữu ích cho các tài liệu HTML đơn trang.

3. **CSS bên ngoài:** Phương pháp được sử dụng phổ biến nhất để đính kèm CSS. Trang CSS được viết trong một tệp riêng biệt (thường có phần mở rộng .css) và đính kèm vào tài liệu HTML bằng cách sử dụng một liên kết trong phần `<head>`. Ví dụ:

<head>
     <link rel="stylesheet" type="text/css" href="styles.css">
   </head>

Phương pháp này thường được sử dụng nhất vì nó cho phép dễ dàng cập nhật, bảo dưỡng và chia sẻ các bảng kiểu trên các tài liệu HTML khác nhau.

Pseudo-classes trong CSS là gì và đưa ra một ví dụ về cách sử dụng chúng.

Lớp giả mạo trong CSS là từ khóa bổ sung cho các bộ chọn mà định rõ trạng thái cụ thể của một phần tử nhất định. Chúng cho phép tạo kiểu cho các phần tử HTML không chỉ dựa trên thông tin được chứa trực tiếp trong mã, mà còn dựa trên một ngữ cảnh hoặc trạng thái cụ thể của phần tử.

Ví dụ, lớp giả mạo :hover cho phép thay đổi hình ảnh của một phần tử khi di chuột lên trên. Các lớp giả mạo khác hữu ích bao gồm :active (khi phần tử đang hoạt động hoặc được nhấp), :visited (khi một liên kết đã được truy cập), hoặc :first-child (tạo kiểu cho phần tử con đầu tiên của một phần tử nhất định).

Mã mẫu cho thấy cách sử dụng lớp giả mạo :hover để thay đổi màu nền của một phần tử nhất định khi di chuột lên trên:

button:hover {
  background-color: red;
}

Trong trường hợp này, màu nền của nút sẽ thay đổi thành màu đỏ khi người dùng di chuột lên trên. Các tương tác như vậy sẽ không thể xảy ra nếu không sử dụng lớp giả mạo.

Phương pháp để định vị các phần tử trong CSS là gì và hạn chế của chúng là gì?

Trong CSS, chúng ta có một số phương pháp để định vị các phần tử để lựa chọn:

1. Tĩnh: Đây là cài đặt mặc định trong đó các phần tử xếp chồng lên nhau theo thứ tự được quy định bởi cấu trúc HTML. Vị trí của phần tử không liên quan và không thể thay đổi bằng các thuộc tính top, right, bottom hoặc left. Hạn chế là thiếu khả năng kiểm soát vị trí của phần tử.

2. Tương đối: Cho phép bạn thay đổi vị trí của một phần tử so với vị trí ban đầu của nó. Vị trí được xác định bằng các thuộc tính top, right, bottom, left nhưng không ảnh hưởng đến bố cục của các phần tử khác. Hạn chế là các phần tử chỉ đơn giản được di chuyển, không được loại bỏ khỏi dòng tài liệu bình thường.

3. Tuyệt đối: Vị trí của một phần tử được xác định so với phần tử cấp cao hơn gần nhất có vị trí khác với vị trí tĩnh (tương đối, tuyệt đối, cố định, dính). Nếu không có phần tử như vậy, vị trí được xác định so với tài liệu itself. Phần tử được loại bỏ khỏi dòng tài liệu thông thường và không ảnh hưởng đến bố cục của các phần tử khác. Hạn chế là việc cần kiểm soát ngữ cảnh vị trí.

4. Cố định: Vị trí của một phần tử được xác định so với cạnh của trình duyệt. Một phần tử như vậy không di chuyển ngay cả khi cuộn trang. Nó được loại bỏ khỏi dòng tài liệu bình thường và không ảnh hưởng đến bố cục của các phần tử khác. Hạn chế là việc có khả năng che khuất các phần tử khác bởi phần tử đặt cố định.

5. Dính: Đây là sự kết hợp của vị trí tương đối và cố định. Phần tử hoạt động như một phần tử tĩnh cho đến khi cạnh trên của nó đạt đến một nơi cụ thể (ví dụ: cạnh trên của màn hình), sau đó phần tử hoạt động như thể nó được định vị cố định. Hạn chế là việc cần hỗ trợ trình duyệt.