0

HTML + CSS を使用してテーブル Web テンプレートを作成する方法をチュートリアルで勉強していますが、次のことに少し疑問があります。

次のようなid=logo を持つ div を含むヘッダーがあります。

        <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 div (およびそのコンテンツ) に関連して、次の 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;
}

したがって、このコードはタグ内にあるMy web site is coolテキストの代わりに画像を配置します。

h1 a CSS 設定を理解するのに問題があります。チュートリアルでは、h1 a のこの CSS 設定は次のようになります。

ヘッダー内のリンクの表示モードを (インラインから) ブロックするようになり、幅と高さを設定できるようになり、ロゴの画像をクリックできるようになりました

このことは私にはあまり明確ではなく、次の疑問があります。

a 要素 (インライン) をブロック要素に変換して、基になる画像 (logo.jpg) と同じサイズにする必要がありますか?

TNX

アンドレア

4

2 に答える 2

3

この例を見て、

a要素はデフォルトであるinlineため、次のようなことを行う場合

CSS

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

HTML

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

widthおよびheightプロパティが機能していないことに気付くでしょう。display:blockこの要素をその幅でサイズ変更するには、要素の表示プロパティを次のいずれかに設定する必要があります。display:inline-block

JSFiddle デモの例

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-02T15:44:19.440 に答える
1

画像をリンクしている場合は、a高さ/幅やdisplay:block. ただし、そのような中に画像を入れるべきではありませんh1。ブロックのa内側を作成し（ を使用）、背景を画像に設定してから、テキストを非表示にすることをお勧めします。サイトのユーザーにとっては大きな違いはありませんが、HTML コードから画像が削除され、スクリーン リーダーが使いやすくなり、意味的により正確になります。したがって、コードは次のようになります。h1display:block

a { display: block; font-size:0; background-image:url("logo.png"); height:100; width:100 }
于 2013-07-02T15:47:42.850 に答える