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