クラス宣言ヘッダー - HTML 5

Question

HTML5で提供されるヘッダー要素にイメージ（ロゴ）を入れようとしていましたが、CSSのクラスをheader.imageの行に宣言することができるかどうか分かりましたか？

私はheader.imageを試しましたが、動作していないようですが、すぐに.headerimageという名前のクラスがあったら、適用しようとしていたパディングプロパティを選択しているようです。

非常に基本的な学習をしていますが、いつか私はHTMLコードを取得しました。あなたの時間が許せば、助けてください。ありがとう

私はHTML5で提供されているヘッダー要素に画像（ロゴ）を入れようとしていましたが、CSSでクラスを宣言することができるかどうかわかっている人は、header.imageの行に不思議ですか？

私はheader.imageを試しましたが、動作していないようですが、すぐに.headerimageという名前のクラスがあったら、適用しようとしていたパディングプロパティを選択しているようです。

非常に基本的な学習をしていますが、いつか私はHTMLコードを取得しました。あなたの時間が許せば、助けてください。ありがとう

これはHTML/CSScode全体ではありませんが、いくつかのスクリーンショットを撮ることができました。皆さんは私がいくつかの質問に答えるのを手伝って、期間が私がやろうとしていたこととは関係がないことを理解しています。 スクリーンショット1：https://skitch.com/android86/fm4r7/dreamweaver（HTMLデザインビュー）スクリーンショット2：https://skitch.com/android86/fm4fd/dreamweaver（CSS）

スクリーンショット1で、私はしかし、HTML 5が提供するナビゲーションタグの一部として、Webサイトの連絡先やログインのリンクを持ってしてみました私はこれらをhgroupの横に水平にしたいと思っていました。私はhgroupに幅を割り当てましたが、今はhgroupの右側に多くのスペースがありますが、navは水平に並んでいます。これはCSSの位置や浮動小数点プロパティで処理する必要がありますか？私は様々な組み合わせで両方を試しましたが、領域に収まるようにナビに幅を割り当てましたが、動作していないようです。どんな手掛かり？ CSSコードはスクリーンショット2にあります。ここでの議論を見た後、クラスを使用するのではなく、代わりに親の子関係が最も関連性があるかもしれないと思いました。私は個人的に思って、非常にユニークなシナリオとクラスであるときにCSSのidを使うべきだと読んで、ある種のことを非常に一般的に使うことを期待するとき、この親の子関係はクラスを宣言する方法ですか？みんな、ありがとう。 CSSで

Answer 1

実際にクラスセレクタであるため、クラス名にピリオドを使用することはできません。たとえば、いくつかのhtml要素に "foo"というクラスを適用していますか？この要素を ".foo"としてCSSにリンクすることができます。

例HTML：

<header class="foo"> 
    <img class="bar" src="some/path/here"> 
    Some content here 
</header> 

例CSS：

.foo { color: #AAA; } 

または

header.foo { color: #AAA; } 

最初のCSSの例ではスタイルがすべての要素にapplyedされますが、クラス「FOOを持っているWICH " 2番目からすべての要素では、クラス "foo"と同じ時間が "header"型である。

あなたのケースに戻って、唯一の目的はヘッダー要素の内部のイメージにスタイルを適用することだと思います。これは、さまざまな方法を行うことができます意志上記

1. 画像クラスを使用します

   .bar { width: 100px; } 
   

   以上の具体的

   img.bar { width: 100px; } 
   

2. 使用親子関係を

   header img { width: 100px; } 
   

   スタイルを適用するAYヘッダ要素内またはその 子要素

   header>img { width: 100px; } 
   

   で、これはヘッダのみの直接の子のためにOKになります。

3. 2つのアプローチを組み合わせる。

ヘッダー要素に画像が1つしかないことがわかっている場合は、「>」でアプローチすることをおすすめします。さまざまなCSSセレクタ、ID、およびクラスの詳細を参照してください。それは仕事をするだろう。

Answer 2

、this.thingのようなスペースのない期間は、意味：（。）クラスthingを持っていますが、彼らはタイプのthis

期間である場合にのみ

選択要素をので、CSSでの特殊文字です期間を指定してクラスに名前を付けることはできません。 _または-をお試しください。

Answer 3

と仮定すると、あなたのマークアップは次のようになります。

<header><img /></header> 

あなたはこのなりたいセレクタ：

header img {...} 

あなたは本当にクラスは、クラス=「画像」を使用して画像（ちょっと冗長）なかった場合

header .image {...} /* note space */ 

これは、ブラウザがhtmlヘッダー要素をサポートしていることを前提としています。そうでない場合は、html5shim 1やモダナイザなどを使用したい場合は2