CSS (Cascading Style Sheets) đã trở thành một tiêu chuẩn không thể thiếu trong việc xây dựng các trang web. Dù bạn là một nhà phát triển hay nhà thiết kế web, kiến thức cơ bản về CSS là vô cùng quan trọng. CSS là công cụ kết nối giữa lập trình và thiết kế, và ai làm việc trong lĩnh vực này cần phải nắm vững về CSS. Nếu bạn mới bắt đầu làm việc với CSS, hãy bắt đầu với một trình soạn thảo mà bạn thích và làm theo hướng dẫn trong bài viết này để thực hành sử dụng CSS.
Tổng quan: Những vấn đề sẽ được trình bày
Trong bài viết này, chúng ta sẽ bắt đầu với những vấn đề cơ bản và tiềm năng của CSS, những vấn đề về CSS mà chúng tôi thường gặp và sử dụng trong xây dựng các trang web. Đây là một số vấn đề chính trong bài viết:
- Padding và margin
- Floats
- Căn chỉnh vào giữa
- Các kiểu danh sách (list)
- Tạo kiểu cho các tiêu đề (heading)
- Overflow
- Position
1. Padding và Margin
Hầu hết những người mới bắt đầu thường nhầm lẫn giữa padding và margin và sử dụng chúng không đúng cách. Hiểu về padding và margin là kiến thức cơ bản để sử dụng CSS.
Padding là khoảng trống bên trong của một phần tử, trong khi margin là khoảng trống bên ngoài của một phần tử. Khi áp dụng các màu nền và đường viền vào một phần tử, khác biệt giữa padding và margin trở nên rõ ràng. Padding không bị che phủ bởi màu nền hoặc đường viền, trong khi margin lại tạo ra khoảng trống bên ngoài của phần tử.
Ảnh : Mô phỏng khái niệm Box Model
Ví dụ, thẻ tiêu đề
ở giữa hai đoạn văn. Bạn có thể thấy margin tạo khoảng trắng giữa các đoạn văn và padding (phần màu xám) tạo ra một không gian trống cho thẻ này. h2 { background: #f0f0f0; border: 1px solid #ddd; margin: 15px 0; padding: 15px; }
h2 { background: #f0f0f0; border: 1px solid #ddd; margin: 15px 0; padding: 15px; }Một ví dụ về CSS hoàn chỉnh cho thẻ tiêu đề
Một mẹo nhỏ là padding sẽ tăng tổng chiều rộng của phần tử. Ví dụ, nếu bạn chỉ định độ rộng của phần tử là 100 pixel và bạn đặt padding bên trái và bên phải là 10 pixel, tổng chiều rộng của phần tử sẽ là 120 pixel.
100px (nội dung) + 10px (padding bên trái) + 10px (padding bên phải) = 120px (tổng chiều rộng của phần tử)Thông qua ví dụ trên, bạn có thể sử dụng margin để mở rộng khung xung quanh các phần tử mà không ảnh hưởng trực tiếp đến phần tử đó. Điều này đặc biệt hữu ích khi bạn cần bố trí các cột trong một bố cục.
Đọc thêm về các bài viết liên quan:
- Box Model
- Margins and Padding
- The Definitive Guide to Using Negative Margins
- CSS Shorthand Guide
- CSS Margin
- CSS Padding
2. Floats
Floats là một kiểu cơ bản trong CSS và được sử dụng để căn chỉnh hình ảnh và bố trí các cột trong trang web. Floats tương tự như việc căn chỉnh các phần tử bên trái và bên phải trong HTML.
Theo HTML Dog, thuộc tính float xác định chiều rộng cố định của phần tử và dịch chuyển nó về phía bên phải hoặc bên trái, với nội dung xung quanh.
Float: left căn chỉnh các phần tử về bên trái và có thể được sử dụng như một container để bố trí layout và các cột. Xem ví dụ dưới đây để hiểu rõ hơn:
.floated_element { float: left; width: 200px; margin: 5px; }Float: right căn chỉnh các phần tử về bên phải và các phần tử xung quanh sẽ được đặt bên trái.
Một thủ thuật đơn giản để tránh lỗi gấp đôi margin trong Internet Explorer 6 (IE6) là thêm thuộc tính display: inline vào phần tử dùng float.
.floated_element { float: left; width: 200px; margin: 5px; display: inline; /* Khắc phục trong IE6 */ }Đọc thêm các bài viết liên quan:
- Floatutorial
- Clearing Floats
- CSS Float Theory: Things You Should Know
- CSS-Tricks: All About Floats
- Containing Floats
- W3Schools: Clear
- W3Schools: Float
3. Căn chỉnh vào giữa
Thẻ