有關如何使用CSS

使圖像可點擊我學習上的教程如何使用HTML + CSS創建tabless網頁模板和我有關於以後的事有點懷疑有些疑惑包含有ID 的div =標誌，這樣的事情：有關如何使用CSS

 <div id="header"> <!-- HEADER --> 
      <div id="logo">  <!-- My Logo --> 
       <h1><a href="#">My web site is cool</a></h1> 
       <p id="slogan"> 
        My web site is finally online 
       </p> 
      </div> 
          ...... 
          OTHER HEADER STUFF 
          ...... 
     </div> <!-- Close header -->

而與此相關的的#header格（及其內容）我有以下的CSS代碼：

/* For the image replacement of the logo */ 
h1 { 
    background: url(../images/logo.jpg) no-repeat; 
    text-indent: -9999px; 
    width: 224px; 
    height: 71px; 
} 

h1 a { 
    display: block; 
    width: 258px; 
    height: 64px; 
    text-decoration: none; 
}

因此，此代碼將圖像，而不是我的網站很酷文本是在標籤。

我有一些問題了解H1一個 CSS設置，在本教程中說，對於H1這個CSS設置一個：

打開阻止（從內聯）鏈接的顯示模式在頭部，所以我可以設置寬度和高度，以及形象標識是現在點擊

這件事是不是對我來說很清楚，我有以下幾點疑惑：

^h ave我將一個元素（即內聯）轉換爲一個塊元素，使其與底層圖像（logo.jpg）的維度相同？

TNX

安德烈

來源

2013-07-02 AndreaNobili

就拿這個例子中，

的a元素inline默認情況下，因此，如果你是做類似

CSS

a {background:red; height:210px; width:200px;}

HTML

<a href="#">test</a>

你會注意到width和height屬性不起作用。現在，這個元素在那個寬度的大小，你需要設置該元素的顯示屬性爲要麼display:block或display:inline-block

JSFiddle Demo Example

HTML：

<a href="#">Without display:inline block, width and height set.</a> 
<br><br> 
<a href="#" class="inline-block">With display:inline block, width and height set.</a> 
<br><br> 
<a href="#" class="block">With display:block, width and height set.</a>

CSS ：

a {background:#ccc; height:210px; width:200px;} 
.inline-block { display:inline-block; } 
.block { display:block; }

來源

2013-07-02 15:44:19

如果您要鏈接圖片，則無需提供a高度/寬度，甚至不需要display:block。但是，你真的不應該像這樣在h1裏放置一個圖像。您最好將h1中的a作爲塊（使用display:block）並將背景設置爲圖像，然後隱藏文本。對於該網站的用戶來說，這並沒有多大區別，但它會從HTML代碼中刪除圖像，使屏幕閱讀器變得更容易，而且語義更加正確。所以你的代碼是：

a { display: block; font-size:0; background-image:url("logo.png"); height:100; width:100 }

來源

2013-07-02 15:47:42

有關如何使用CSS

回答

相關問題