CSS未應用

Question

我試圖使用這樣的Div打開和關閉標簽來阻止一段代碼：

<div id="header"> 
  <a href="www.hugowolfdesigns.tumblr.com">
    <img src="http://i596.photobucket.com/albums/tt48/stizzo96/hugowolf_zps386e6f4e.png" alt=" photo hugowolf_zps386e6f4e.png" class="header"/>
  </a>
</div>

但是，如果我嘗試使用#header在CSS中進行編碼，它將不會遵循任何規則？ 我是HTML和CSS的新手，請原諒我的無知。

編輯：這是幫助我所需的必需CSS。 抱歉忘記了，我還是新來的。

.header{ 
    width:300px; 
    height:300px;
    display:block; 
    margin: auto;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;} 

最后一部分是從幫助網站復制的，因為當鼠標懸停在幫助網站上時，它可以淡入和淡出。 每次我嘗試更改“。” 如果使用“＃”，它將完全忽略規則。

Answer 1

答案中的CSS用於類頭，而不用於id頭： .header { 。 在CSS中. 指代一個類， #表示ID。 該CSS當前應用於圖像： http : //jsfiddle.net/BjgvY/

Answer 2

不知道您的CSS是什么，因為您還沒有包含CSS，但是我想您是指您正在嘗試執行以下操作：

#header {
    height:50px;
}

而且什么也沒有發生。 這是因為默認情況下，#header的溢出值是“ visible”，並且隨着圖像的增大，它將溢出並占用所需的空間。

如果您不希望發生這種情況，則必須將溢出更改為其他值，例如：

#header {
    height:50px;
    overflow: hidden;
}

將隱藏超出標題的50px高度限制的所有內容。

如果您要更改圖像的大小，請在圖像上設置高度/寬度屬性，而不是在頁眉上。 或者，最好鏈接到更合適尺寸的圖像； 如果只要將其縮小到200x160之類的大小，則加載〜1000x800的圖像毫無意義。

具有相同名稱的ID和類可能也是一個壞主意。 為了清楚起見，如果您嘗試使用“ header”類獲取圖像以遵循某些CSS樣式，則需要使用

.header {
}

選擇器，而不是

#header {
}

如果您發布CSS，除了根據我認為可能做錯的事情在黑暗中拍攝之外，我還可以提供更相關的答案。

編輯：

似乎您在使用CSS選擇器時遇到困難，

#header {
}

將引用具有標頭ID的任何元素，例如

<div id="header"></div>

而CSS選擇器

.header {
}

指的是具有CLASS標頭的元素，例如

<div class="header"></div>

回到您的代碼

<div id="header"> 
  <a href="www.hugowolfdesigns.tumblr.com">
    <img src="http://i596.photobucket.com/albums/tt48/stizzo96/hugowolf_zps386e6f4e.png" alt=" photo hugowolf_zps386e6f4e.png" class="header"/>
  </a>
</div>

    #header { // these styles will apply to your div with ID header
    }

    .header { // these styles will apply to your image with the class header
    }

看起來似乎很煩，但是如果您是CSS新手，我強烈建議您閱讀有關選擇器的文章。 因為它們對於使用CSS進行任何操作都至關重要。

這是文檔

第5.8.3章討論了類選擇器

第5.9章討論了ID選擇器

（無關）

您的鏈接不正確，應該是

 <a href="http://www.hugowolfdesigns.tumblr.com">

如果它指向另一個網站，或者只是

 <a href="/">

如果它指向同一網站的主頁