1

会社名を表示して、名前の「メイン」部分が1行に表示されて大きくなり、名前の2番目の部分がその下の中央に配置されて小さくなるようにする必要があります。スローガンや「字幕」ではないので、すべて同じh1要素に含める必要があり、理想的には、純粋なCSSを使用して変換する必要があります（em回避できる場合はスパンやsがないことを意味します）。

例：

<h1>Big Bill's Custom Auto Parts</h1>

次のように表示されます。

ビッグビルズ

カスタム自動車部品

これを行うための純粋なCSSの方法はありますか（まだ完全にサポートされていない疑似クラスでも）？

4

6 に答える 6

6

不可能です。2 つの異なるヘッダーがあり、それに応じてスタイルを設定できる方が理にかなっているようです。

<span>内にa を追加せずに、変更が発生する場所をどのように指定できます<h1>か?

于 2012-04-09T22:23:44.253 に答える
5

見出し自体に新しい行を含めることはできますか? その場合、次のように最初の行のセレクターを使用できます。

HTML

<h1>Foo bar                                                                                            
baz</h1>

CSS

h1 {
  font-size:1em;
  white-space:pre;
}
h1:first-line {
  font-size:3em;
}
于 2012-04-09T22:38:59.923 に答える
3

The shortest solution to this without using extra headers is the use of a span element:

<h1><span>Big Bill's</span> Custom Auto Parts</h1>

CSS:

h1.span {
  /* styling rules */
}
于 2012-04-09T22:28:44.033 に答える
1

で改行しても問題ない場合は、疑似要素<br/>を使用してこれを実現できます。::first-line

于 2012-04-09T22:30:44.267 に答える
1

あなたは、コンテンツとプレゼンテーションを分離して、純粋な CSS の方法でそれを行いたいと言いました。追加はありませspansんbr。わかりますが、問題を考えると、コンテンツに基づいてプレゼンテーション ルールを作成する必要があります。それは理にかなっていますか？コンテンツと避けたいプレゼンテーションが混在していませんか?

于 2012-04-09T22:43:25.957 に答える
-1

このスレッドで他のことを試しましたが、これが最終的に機能しました。

<h3>Tutorials <span style="font-size:14px;">(2 of them)</span></h3>
于 2016-04-22T02:35:36.307 に答える