HTML, CSS và Javascript là ba ngôn ngữ máy tính thiết yếu trong phát triển web ảnh hưởng đến tính thẩm mỹ của trang web. Đây là kiến thức chung, và hầu như ai cũng biết về nó
Nếu HTML là cung cấp khung của trang web, thì CSS là ngôn ngữ tập trung vào việc thêm các tính năng vào khung bên dưới, cho phép trang web trở nên hấp dẫn hơn về mặt hình ảnh
Đây là lý do tại sao, thông qua CSS, chúng ta sẽ xem xét các cách khác nhau mà chúng ta có thể thêm, tạo kiểu và căn chỉnh hình ảnh trên một trang web
Làm cách nào để thêm hình ảnh trong CSS?
Trước khi xem xét các chủ đề này, chúng ta phải hiểu rõ sự thật.
Đầu tiên, công việc của CSS là cung cấp một thiết kế nâng cao cho cấu trúc của trang web. Vì vậy, chúng tôi sẽ thêm hình ảnh thông qua HTML chứ không phải CSS
So to add images, we use the
trong CSS
img {
display: block;
max-width: 100%;
}
Trong ví dụ trên, chúng tôi đã sử dụng HTML để thêm hình ảnh vào trang web và sử dụng CSS để đặt các tùy chọn hiển thị về cách trang web sẽ xuất hiện
Làm cách nào để căn giữa và hình ảnh trong CSS?
Có thể dễ dàng căn giữa hình ảnh với sự trợ giúp của thuộc tính lề trái và lề phải. Dưới đây là một ví dụ giải thích rõ ràng cách chúng ta có thể căn giữa hình ảnh trên trang web bằng CSS
Ví dụ.
Trong HTML
Thuộc tính object-fit là một thuộc tính khác được sử dụng để tự động thay đổi kích thước hình ảnh của trang web. Thuộc tính object-fit sẽ thay đổi kích thước hình ảnh bằng cách sử dụng giá trị chứa theo yêu cầu của màn hình
Cho dù đó là căn trái hay căn phải, hoặc thậm chí là căn giữa, đều có thể thực hiện được và hình ảnh có thể được căn chỉnh trong vòng vài giây trong CSS thông qua các thuộc tính text-align và float
Sử dụng thuộc tính text-align có thể dễ dàng căn chỉnh hình ảnh trên trang web. Với thuộc tính text-align và các giá trị như left, center và right, người ta có thể căn chỉnh hình ảnh trên trang web một cách thích hợp
Thuộc tính float là một thuộc tính khác được sử dụng để căn chỉnh hình ảnh trên trang web
Trang web được nâng cao về mặt trực quan đặt hình ảnh tối giản đẹp mắt làm hình nền. May mắn thay, CSS có thuộc tính background-image để đặt những hình ảnh đẹp làm hình nền cho trang web
Việc thêm, thay đổi và căn chỉnh hình ảnh để biến một trang web có giao diện đơn giản thành một trang web hấp dẫn trực quan chỉ mất vài phút với CSS. Chúng tôi hy vọng bạn đã học được điều gì đó mới về phát triển giao diện người dùng để cải thiện giao diện của trang web.
Nếu bạn muốn tìm hiểu miễn phí một số khái niệm cơ bản về CSS, hãy thử Thử thách viết mã trong 5 ngày của chúng tôi. Sau một giờ mỗi ngày trong năm ngày, bạn sẽ tìm hiểu kiến thức cơ bản về HTML, CSS và JavaScript. Đăng ký ngay qua form bên dưới.