20

Web サイトの応答性によって変更される可能性があるため、HTML ではなく CSS を介して段落のテキストを追加したいと考えています。

今、私はそれを動作させることができません.CSSに何か問題があるのでしょうか?

また、これはこれを行う唯一の方法ですか (純粋な HTML と CSS を使用)、またはテキストをターゲットにして解像度ごとに変更する別の方法はありますか?

HTML:

<p class="title"></p>

CSS:

p.title {
        width: auto;
        height: auto;
        position: relative;
        float: left;
        clear: none;
        margin: 40px 0 0 0;
        padding: 0;
        display: block;
        font-family: 'Fjalla One', sans-serif; 
        font-weight: 400; 
        font-size: 36px;
        color: #d76e50; color: rgba(215, 92, 52, 0.9);
        cursor: default;
        content:"TITLE GOES HERE";
}
4

4 に答える 4

58

CSSプロパティは、疑似要素contentと一緒にのみ使用できます。たとえば、スタイルのみを持ち、メディアクエリによる解像度に依存するテキストのプロパティも含む子要素を作成することで、これを回避できます。::before::after::aftercontent

于 2013-11-04T15:43:00.440 に答える
13

レスポンシブ デザインの一部としてコンテンツを変更したい場合でも、CSS はコンテンツを配置する場所ではありません。

HTML/CSS/JS の要点は、コンテンツ、スタイリング、およびスクリプトを分離することです。コンテンツを CSS に入れたり、スタイリングを HTML に入れたりすると、意図が何であれ、それが壊れます。

しかし、あなたの質問に直接答えるには、CSScontentが有効なケースはごくわずかです。一般的なセレクターでは使用できません (正確には上記の点のためです)。

content疑似要素がページに追加されるセレクターでのみ使用できます。content実際には、これはwith::beforeおよび::afterセレクターのみを実際に使用できることを意味します。

そして、それを使用できるこれらの場合でも、説明した方法で使用するべきではありません. ::beforeと を使用すると::after、実際のコンテンツを CSS に挿入するためのものではありません。ウィキペディアのようなサイトの外部リンクの横に表示される小さな記号など、何かの横にマーカーを挿入するようなタスクを目的としています。その種のものはまだスタイリングであるため、「コンテンツ」を追加するとしても、CSS に含めるのは正しいことです。

とを使用して挿入されたコンテンツは、サイト内の他のコンテンツ::beforeと::afterは動作が異なる場合があることに注意してください。たとえば、Javascript を介して疑似要素にアクセスできず、ユーザーがテキストを選択できない場合があります。

あなたがやろうとしていることを達成するためのより一般的な方法は、さまざまな異なるコンテンツ文字列を含む 2 つ (またはそれ以上) の要素をページに配置し、レスポンシブ CSS コードでそれらの 1 つを表示させ、他の要素を表示させることです。ページ サイズに応じて非表示になります。

于 2013-11-04T15:45:53.200 に答える
3

CSS コンテンツ プロパティは、Mozilla Developer Networks Documentsに従って疑似要素にのみ適用できるため、次のコード行を css ファイルに追加できます。

p.title::after {content: 'TITLE GOES HERE';}
于 2013-11-04T15:49:44.487 に答える