Tất cả các hình ảnh trình diễn có được xác định trong CSS không?

Question

Gần đây tôi đã học (X) HTML & CSS và một trong những nguyên tắc chính là HTML dành cho cấu trúc và CSS để trình bày. Với ý nghĩ đó, có vẻ như với tôi rằng một số lượng hình ảnh công bằng trên hầu hết các trang web chỉ để trình bày và như vậy phải ở trong CSS (với div hoặc span để giữ chúng trong HTML) - ví dụ logo, hình ảnh tiêu đề, hình nền.

Tuy nhiên, trong khi các ví dụ trong sách của tôi đặt một số hình ảnh trong CSS, chúng vẫn thường trong HTML. (Tôi chỉ nói về những hình ảnh 'presentational', không phải là hình ảnh 'cấu trúc' mà là một phần quan trọng của nội dung, ví dụ như ảnh trong một trang web ảnh).

Tất cả các hình ảnh đó có trong CSS không? Hoặc có lý do kỹ thuật hay logic nào để giữ chúng trong HTML?

Cảm ơn, Grant

Answer 1

Nếu một hình ảnh là "nội dung" nói trong một bài báo, hình ảnh biên tập, sau đó sử dụng thẻ img. Nếu nó là một phần của giao diện người dùng, chủ đề hoặc da của bạn hoặc bất cứ tên nào, thì hãy đặt nó vào CSS.

đọc đề xuất của

• Thiết kế với tiêu chuẩn web (Zeldman)
• Bullet Thiết kế Proof Web (Dan Cederholm)
• CSS Mastery (Andy Clark, Andy Budd, Cameron Moll)

Answer 2

Một lý do để đưa những hình ảnh trong CSS có thể là để phục vụ cho các trình duyệt khác nhau từ cùng một trang web, chỉ bằng cách thay đổi CSS: ví dụ, nếu bạn phát hiện một điện thoại di động/nhúng/túi trình duyệt bạn có thể cung cấp cho họ cùng một HTML nhưng với CSS không bao gồm hình ảnh.

Answer 3

Thuộc tính src của thẻ img là bắt buộc theo HTML 4.01/XHTML 1.0 DTD. Đó là lý do tại sao nó luôn luôn được bao gồm trong HTML.

Bạn có thể chỉ định nó trong CSS cho mục đích skining, nhưng hầu hết các hình ảnh trong hầu hết các trường hợp là tĩnh và không thay đổi để đặt nó trong CSS là một bước không cần thiết.

Answer 4

Tôi đặt chúng vào CSS nếu có thể. Một lý do là tôi nghĩ rằng họ thuộc về đó như bạn đã đề cập và một trong những khác là khả năng sử dụng sprites. Điều này có thể làm giảm đáng kể thời gian tải trang của bạn.

Answer 5

Vâng, nó phụ thuộc. Ví dụ: nếu bạn muốn thực hiện một số hiệu ứng khi chuột trên một hình ảnh, nó phải ở trong HTML. Khi bạn đặt hình ảnh trong HTML, bạn có thể định vị nó một cách tự do hơn trong CSS. Ngoài ra, theo tôi biết, hình ảnh được bao gồm CSS không được thu thập dữ liệu (Bạn có thể quan tâm đến việc biểu tượng của công ty bạn được thu thập bởi người tìm kiếm).

Nếu bạn nghĩ về khả năng truy cập, hình ảnh nhúng HTML có thể có thông tin về tiêu đề và alt. Vì vậy, ví dụ: khi bạn đặt chuột lên biểu trưng của công ty, trình duyệt có thể hiển thị phương châm của công ty bạn nếu bạn nhúng nó với thuộc tính title = "motto" trong thẻ img. Bạn không thể làm điều đó với CSS.

Ngoài ra mọi người được sử dụng để đặt hình ảnh trong HTML chứ không phải CSS và hành vi là một điều khó thay đổi.

Trong kết nối, tùy theo nhu cầu của bạn, CSS không đủ linh hoạt để phù hợp với nhu cầu của bạn và bạn nên đặt hình ảnh trong HTML. Nhưng nếu CSS phù hợp với nhu cầu của bạn cho hình ảnh giao diện người dùng, thì CSS là ý tưởng tốt hơn.

Answer 6

Đôi khi, tải hình ảnh giao diện người dùng bằng CSS, cũng ngăn người dùng tải xuống hình ảnh giao diện người dùng của bạn vào ổ đĩa của họ, trong khi lưu trang.

Nhưng tất nhiên có nhiều cách khác để lưu chúng, nhưng chỉ là một điểm để thêm.

Và trình duyệt có xu hướng ưu tiên CSS hơn HTML, do đó tải hình ảnh qua CSS có thể nhanh hơn một chút so với HTML.