WordPress的，根源主題，標題

一個人爲我做了一個網站，我試圖理解它。它在這裏： http://www.brilliantzenaudio.com WordPress的，根源主題，標題

請注意，左上方有一個徽標圖像。我試圖理解這是從哪裏來的。相關代碼似乎部分在header.php中，部分在app.css中。 From header.php，

<header class="banner" role="banner"> 
    <div class="container"> 

    <div class="row"> 
     <div class="col-xs-12 col-lg-2"> 
     <h1 class="logo"><a href="<?php echo home_url(); ?>/"><?php bloginfo('name'); ?>">Brilliant Zen Audio</a></h1> 
      ... stuff removed here, other items in header ...    
     </div> 
    </div> 
    </div> 
</header>

而app.css包含如下行。看看上面的php，我發現有一個類「橫幅」的元素，所以顯然有css代碼尋址（給它一個顏色，一個位置，邊界和z-索引）。我也看到標題標籤也被賦予了「標題」的「角色」。這是否適用於任何直接目的或是屏幕閱讀器的用途？

我們也可以看到php包含h1元素和'h1'元素中的'a'元素。這些東西都有CSS條目。我不清楚他們的目的是什麼。首先，該徽標是一個圖像。爲什麼放入h1標籤？我瞭解標籤的必要性，因爲徽標應該是可點擊的（以回到主頁）。但是，接下來的一段話是關於如何解析PHP的鏈接的文本的東西。聰明的是，圖像被放在那裏，因爲它是「h1.logo a」css條目中的背景。

我在下面的評論增加了一些一般性問題。

.banner { } 

header.banner { 
    background:#603913; 
    position:relative; // question: what does this mean and how will it effect the position of things if I start moving or changing elements? 
    border-bottom:solid 1px #fff; // question: is this bottom border important for some reason? 
    z-index:9999; // what does this do? 
} 
h1.logo { 
    margin:0; // is there a need to define these on h1.logo? 
    padding:0; 
} 
h1.logo a { 
    display:block; // what is display:block and how does it affect appearance? How would it affect changes if I change the size or location of the logo? 
    text-indent:-9999px; // what is this? 
    background:url(../img/sm-logo.png) no-repeat 0 0; 
    width:101px; // what does it mean when you set the width and height of an <a> 
    height:103px; 
    margin:0 auto; 
}

來源

2013-10-18 composerMike

標誌是'app.css'中定義的背景圖片，關於一些常見問題，爲什麼不問問創建它的人？ – egig

因爲他們通常會想要更多的錢。 – MackieeE

是的，我用完了所有的資金，所以我試圖繼續自己工作。 – composerMike

.banner { } 

header.banner { 
    background:#603913; 
    position:relative; // This is set, so that the position:absolute of h1.logo a will work, and is also needed in order to make the z-index work. 
    border-bottom:solid 1px #fff; // Is responsible for the white line at the bottom of the header. It 's not important, but looks nice... 
    z-index:9999; // The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order. 
} 
h1.logo { 
    margin:0; // Yes, because normally an h1 has a top and bottom margin defined, with this setting, you set it to 0. 
    padding:0; 
} 
h1.logo a { 
    display:block; // Normally an a element has inline properties. By setting this to block you can use width, margin and other properties which aren't available for inline elements 
    text-indent:-9999px; // The text-indent property specifies the indentation of the first line in a text-block. 
    background:url(../img/sm-logo.png) no-repeat 0 0; 
    width:101px; // Sets the width of this a, because it is a block element. 
    height:103px; 
    margin:0 auto; 
}

來源

2013-10-18 12:23:19 veelen