Có vẻ như có một vài kỹ thuật khác nhau, vì vậy tôi đã hy vọng nhận được câu trả lời "dứt khoát" về điều này ...
Trên một trang web, đó là cách phổ biến để tạo logo liên kết đến trang chủ. Tôi muốn làm như vậy, trong khi tối ưu hóa tốt nhất cho các công cụ tìm kiếm, trình đọc màn hình, IE 6+ và các trình duyệt đã tắt CSS và / hoặc hình ảnh.
Ví dụ thứ nhất: Không sử dụng thẻ h1. Không tốt cho SEO, phải không?
<div id="logo">
<a href="">
<img src="logo.png" alt="Stack Overflow" />
</a>
</div>Ví dụ hai: Tìm thấy cái này ở đâu đó. CSS có vẻ hơi hack.
<h1 id="logo">
<a href="">Stack Overflow</a>
</h1>/* css */
#logo {
padding: 70px 0 0 0;
overflow: hidden;
background-image: url("logo.png");
background-repeat: no-repeat;
height: 0px !important;
height /**/:70px;
}Ví dụ ba: Cùng một HTML, cách tiếp cận khác nhau bằng cách sử dụng văn bản thụt lề. Đây là phương pháp "Phark" để thay thế hình ảnh.
<h1 id="logo">
<a href="">Stack Overflow</a>
</h1>/* css */
#logo {
background: transparent url("logo.png") no-repeat scroll 0% 0%;
width: 250px;
height: 70px;
text-indent: -3333px;
border: 0;
margin: 0;
}
#logo a {
display: block;
width: 280px; /* larger than actual image? */
height: 120px;
text-decoration: none;
border: 0;
}Ví dụ bốn: Phương pháp Leahy-Langridge-Jefferies . Hiển thị khi hình ảnh và / hoặc css bị tắt.
<h1 id="logo" class="logo">
<a href="">Stack Overflow</a>
</h1>/* css */
h1.logo {
margin-top: 15px; /* for this particular site, set this as you like */
position: relative; /* allows child element to be placed positioned wrt this one */
overflow:hidden; /* don’t let content leak beyond the header - not needed as height of anchor will cover whole header */
padding: 0; /* needed to counter the reset/default styles */
}
h1.logo a {
position: absolute; /* defaults to top:0, left:0 and so these can be left out */
height: 0; /* hiding text, prevent it peaking out */
width: 100%; /* 686px; fill the parent element */
background-position: left top;
background-repeat: no-repeat;
}
h1#logo {
height: 60px; /* height of replacement image */
}
h1#logo a {
padding-top: 60px; /* height of the replacement image */
background-image: url("logo.png"); /* the replacement image */
}Phương pháp nào là tốt nhất cho loại điều này? Vui lòng cung cấp html và css trong câu trả lời của bạn.
titlethuộc tính nên có trong <a>?