Solve common CSS problems
Trang này tổng hợp các câu hỏi và câu trả lời, cùng các tài liệu khác trên MDN có thể giúp bạn giải quyết các vấn đề CSS phổ biến.
Định kiểu cho box
- Làm thế nào để thêm bóng đổ cho một phần tử?
-
Bóng đổ có thể được thêm vào box bằng thuộc tính
box-shadow. Hướng dẫn này giải thích cách hoạt động của nó và hiển thị một ví dụ. - Làm thế nào để lấp đầy một box bằng hình ảnh mà không làm biến dạng ảnh?
-
Thuộc tính
object-fitcung cấp nhiều cách khác nhau để vừa khít một hình ảnh vào box có aspect ratio khác nhau, và bạn có thể tìm hiểu cách sử dụng chúng trong hướng dẫn này. - Những phương pháp nào có thể được sử dụng để định kiểu cho box?
-
Tổng quan về các thuộc tính khác nhau có thể hữu ích khi định kiểu cho box bằng CSS.
- Làm thế nào để làm cho các phần tử trở nên bán trong suốt?
-
Thuộc tính
opacityvà các giá trị màu có kênh alpha có thể được sử dụng cho mục đích này; hãy tìm hiểu nên dùng cái nào trong tình huống nào.
Bài học và hướng dẫn về định kiểu box
CSS và văn bản
- Làm thế nào để thêm bóng đổ cho văn bản?
-
Bóng đổ có thể được thêm vào văn bản bằng thuộc tính
text-shadow. Hướng dẫn này giải thích cách hoạt động của nó và hiển thị một ví dụ. - Làm thế nào để làm nổi bật dòng đầu tiên của đoạn văn?
-
Tìm hiểu cách nhắm mục tiêu dòng văn bản đầu tiên trong đoạn văn bằng pseudo-element
::first-line. - Làm thế nào để làm nổi bật đoạn văn đầu tiên trong một bài viết?
-
Tìm hiểu cách nhắm mục tiêu đoạn văn đầu tiên bằng pseudo-class
:first-child. - Làm thế nào để làm nổi bật một đoạn văn chỉ khi nó xuất hiện ngay sau một tiêu đề?
-
Combinator có thể giúp bạn nhắm mục tiêu chính xác các phần tử dựa trên vị trí của chúng trong tài liệu; hướng dẫn này giải thích cách sử dụng chúng để áp dụng CSS cho một đoạn văn chỉ khi nó đứng ngay sau một tiêu đề.
Bài học và hướng dẫn về định kiểu văn bản
CSS Layout
- Làm thế nào để căn giữa một phần tử?
-
Việc căn giữa một phần tử bên trong một box khác theo cả chiều ngang lẫn chiều dọc từng rất phức tạp, nhưng flexbox hiện nay đã làm cho việc này trở nên đơn giản.
Hướng dẫn về layout
Note: We have a cookbook dedicated to CSS Layout solutions, with fully working examples and explanations of common layout tasks. Also check out Practical Positioning Examples, which shows how you can use positioning to create a tabbed info box, and a sliding hidden panel.