html - 表示中

Question

Sがテキストよりもはるかに大きくなるような「感情分析」を示したいと思いh5ます。

次のコードの何が問題になっていますか:

HTML:

<h1>S</h1> <h5>entiment Analysis</h5>

CSS:

h1 {
    margin-left: 36%;
    color:#C0C0C0;
    font-family: "calibri";
    text-decoration:underline;
    white-space: pre;
}

h5 {
    margin-left: 36%;
    color:#C0C0C0;
    font-family: "calibri";
    text-decoration:underline;
    white-space: pre;
}

CodePan でのライブコード

score 6 · Accepted Answer

それは厄介なコードです。最初の文字を大きくしたい場合は、次の方法を試すことができます。

ワーキングデモ

HTML

<div>Sentiment analysis</div>

CSS

div:first-letter {
  font-size:30px;
  font-weight:bold;
}

score 3 · Accepted Answer

同じ行に 2 つのブロックレベル要素を配置しようとしているため、それらを作成するinlineか、 or (推奨)inline-blockを使用するか、好きな要素内で要素を使用する必要がありますdisplay: inline;display: inline-block<span>h1

<h1><span>H</span>ello</h1>

そして、あなたがH使用することをターゲットにすることができますよりも

h1 > span {
   font-size: 54px;
}

最初の文字のみを対象とする場合は、:first-letter疑似を使用すると、要素も節約できます。

デモ

注: ここでは一般的な要素セレクターを使用しています。必ず a classまたは anidを使用して、要素を一意にターゲットに設定してください。

score 2 · Accepted Answer

Use this css rules for proper follow the css rules to render the requirement!


  <style>
  h1:first-line {
            margin-left: 36%;
            color:#C0C0C0;
            font-family: "calibri";
            font-size:1em;
            text-decoration:underline;
            white-space: pre;
            display:inline;
                }
   h1:first-letter{
            margin-left: 36%;
            color:#C0C0C0;
            font-family: "calibri";
            font-size:2em;
            text-decoration:underline;
            white-space: pre;
            display:inline;
                }
  </style>

ここに画像の説明を入力

score 0 · Accepted Answer

<style type="text/css">
      .style1
    {
        font-size: 36px;
    }
</style>
</head>
<body>
<p>
   <span class="style1">S</span>entiment</p>
</body>

score 0 · Accepted Answer

display:inline両方に追加h1& 、h5次に削除 margin-lefth5

デモはこちら >>

これを試して

 h1
   {
         margin-left: 36%;
         color:#C0C0C0;
         font-family: "calibri";
         text-decoration:underline;
         white-space: pre;
         display:inline;
  }


h5
   {
        color:#C0C0C0;
        font-family: "calibri";
        text-decoration:underline;
        white-space: pre;
        display:inline;
   }

これを実装する方法は少し複雑に思えます。コードを使用したい場合でも、私の回答を使用できます。それ以外の場合は、ここで他の回答の単純な方法を選択してください。

html - 表示中

6 に答える 6

Related

Reference