Sử dụng CSS để căn chỉnh hình ảnh sang bên trái của bố cục trang web
Hãy xem gần như bất kỳ trang web nào ngày hôm nay và bạn sẽ thấy sự kết hợp giữa văn bản và hình ảnh tạo nên phần lớn các trang đó. Nó rất dễ dàng để thêm văn bản và hình ảnh vào một trang . Văn bản được mã hóa bằng cách sử dụng các thẻ HTML chuẩn như đoạn văn, danh sách và tiêu đề, trong khi hình ảnh được bao gồm bằng phần tử .
Khả năng làm cho văn bản và những hình ảnh đó hoạt động tốt với nhau là những gì tạo nên các nhà thiết kế web tuyệt vời! Bạn không chỉ muốn văn bản và hình ảnh của mình xuất hiện từng cái một, đó là cách các phần tử cấp khối này sẽ được bố trí theo mặc định. Không, bạn muốn kiểm soát cách văn bản và hình ảnh lưu thông cùng nhau trong những gì cuối cùng sẽ là thiết kế hình ảnh của trang web của bạn.
Có một hình ảnh được căn chỉnh ở phía bên trái của một trang trong khi văn bản của trang đó chạy quanh nó là một điều trị thiết kế chung cho thiết kế in và cũng cho các trang web. Trong điều kiện web, hiệu ứng này được gọi là thả nổi hình ảnh . Kiểu này đạt được với thuộc tính CSS cho "float". Thuộc tính này cho phép văn bản truyền xung quanh hình ảnh được căn trái sang bên phải của nó. (Hoặc xung quanh một hình ảnh phù hợp với bên trái của nó.) Chúng ta hãy xem làm thế nào để đạt được hiệu ứng hình ảnh này.
Bắt đầu với HTML
Điều đầu tiên bạn cần làm là có một số HTML để làm việc. Đối với ví dụ của chúng tôi, chúng tôi sẽ viết một đoạn văn bản và thêm một hình ảnh ở đầu đoạn văn (trước văn bản, nhưng sau thẻ mở
). Dưới đây là những gì đánh dấu HTML trông giống như:
Theo mặc định, trang web của chúng tôi sẽ hiển thị cùng với hình ảnh phía trên văn bản. Điều này là do hình ảnh là các phần tử cấp khối trong HTML. Điều này có nghĩa là trình duyệt hiển thị ngắt dòng trước và sau phần tử hình ảnh theo mặc định. Chúng tôi sẽ thay đổi giao diện mặc định này bằng cách chuyển sang CSS. Đầu tiên, tuy nhiên, chúng tôi sẽ thêm một giá trị lớp vào phần tử hình ảnh của chúng tôi . Lớp đó sẽ hoạt động như một "móc" mà chúng ta sẽ sử dụng trong CSS của chúng ta sau này.
Lưu ý rằng lớp "trái" này không làm gì cả! Để chúng tôi đạt được phong cách mong muốn, chúng tôi cần sử dụng CSS tiếp theo.
Kiểu CSS
Với HTML của chúng tôi tại chỗ, bao gồm thuộc tính lớp của chúng tôi là "trái", giờ đây chúng tôi có thể chuyển sang CSS. Chúng tôi sẽ thêm quy tắc vào biểu định kiểu của chúng tôi sẽ nổi hình ảnh đó và cũng thêm một chút đệm bên cạnh hình ảnh để văn bản cuối cùng sẽ bao quanh hình ảnh không chống lại quá chặt. Đây là CSS bạn có thể viết:
.left {float: left; padding: 0 20px 20px 0; }Phong cách này nổi hình ảnh bên trái và thêm một chút đệm (sử dụng một số tốc ký CSS) ở bên phải và dưới cùng của hình ảnh.
Nếu bạn xem xét trang chứa HTML này trong trình duyệt, hình ảnh bây giờ sẽ được căn chỉnh ở bên trái và văn bản của đoạn văn sẽ xuất hiện bên phải của nó với một khoảng cách thích hợp giữa hai. Lưu ý giá trị lớp của "trái" mà chúng tôi đã sử dụng là tùy ý. Chúng tôi có thể gọi nó là bất cứ điều gì vì thuật ngữ "trái" không tự làm gì cả. Điều này cần phải có một thuộc tính lớp trong HTML mà làm việc với một phong cách CSS thực tế mà dictates những thay đổi trực quan bạn đang tìm kiếm để thực hiện.
Cách thay thế để đạt được những kiểu này
Cách tiếp cận này cho phần tử hình ảnh một thuộc tính lớp và sau đó sử dụng một kiểu CSS chung nổi phần tử chỉ là một cách để bạn có thể thực hiện giao diện "hình ảnh căn trái" này. Bạn cũng có thể đưa giá trị lớp ra khỏi hình ảnh và tạo kiểu cho nó bằng CSS bằng cách viết một bộ chọn cụ thể hơn. Ví dụ, chúng ta hãy xem xét một ví dụ mà hình ảnh đó nằm bên trong một bộ phận với một giá trị lớp của "nội dung chính".
Để tạo kiểu cho hình ảnh này, bạn có thể viết CSS này:
.main-content img {float: left; padding: 0 20px 20px 0; }Trong sceario này, hình ảnh của chúng tôi sẽ được căn chỉnh về bên trái, với văn bản trôi nổi xung quanh nó như trước đây, nhưng chúng tôi không cần phải thêm một giá trị lớp bổ sung vào đánh dấu của chúng tôi. Làm điều này ở quy mô lớn có thể giúp tạo một tệp HTML nhỏ hơn, điều này sẽ dễ quản lý hơn và cũng có thể giúp cải thiện hiệu suất.
Cuối cùng, bạn thậm chí có thể thêm trực tiếp phong cách vào đánh dấu HTML của mình, như sau:
Phương thức này được gọi là " kiểu nội tuyến ". Nó không được khuyến khích bởi vì nó kết hợp rõ ràng phong cách của một phần tử với đánh dấu cấu trúc của nó. Các phương pháp hay nhất về web quy định rằng phong cách và cấu trúc của một trang sẽ vẫn tách biệt. Điều này đặc biệt hữu ích khi trang của bạn cần thay đổi bố cục và tìm các kích thước và thiết bị màn hình khác nhau với trang web đáp ứng. Việc có phong cách của trang đan xen trong HTML sẽ làm cho việc truy vấn phương tiện truyền thông trở nên khó khăn hơn, điều chỉnh giao diện trang web của bạn khi cần cho các màn hình khác nhau.
Bài báo gốc của Jennifer Krynin. Được chỉnh sửa bởi Jeremy Girard vào 4/3/17.