Отображение текста <h1> <h5> с помощью css

Question

Отображение текста <h1> <h5> с помощью css

Я хочу показать "Анализ настроений" такой, что 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

5

html css alignment html-heading

Источник

user3121782 26 дек '13 в 12:15

6 ответов

Другие вопросы по тегам html css alignment html-heading

user890082 26 дек '13 в 12:23 2013-12-26 12:23 · Answer 1 · 2013-12-26 12:23

Это грязный код. Если вы просто хотите сделать первую букву больше, вы можете попробовать следующее.

Рабочая Демо

HTML

<div>Sentiment analysis</div>

CSS

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

6

Источник

user890082 26 дек '13 в 12:23

user1542290 26 дек '13 в 12:19 2013-12-26 12:19 · Answer 2 · 2013-12-26 12:19

Вы пытаетесь выровнять 2 элемента уровня блока в одной строке, так что либо вам нужно сделать их inline или же inline-block используя display: inline; или же display: inline-block (рекомендуется) или использовать <span> элемент внутри вашего h1 лайк

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

И чем ты можешь нацелиться H с помощью

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

Если вы хотите настроить таргетинг только на первую букву, лучше, если вы используете :first-letter псевдо, который также сохранит вам элемент.

демонстрация

Примечание: здесь я использую общие селекторы элементов, убедитесь, что вы используете class или id нацеливаться на элемент однозначно.

user2594694 26 дек '13 в 14:44 2013-12-26 14:44 · Answer 3 · 2013-12-26 14:44

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>

введите описание изображения здесь

user2659972 26 дек '13 в 12:34 2013-12-26 12:34 · Answer 4 · 2013-12-26 12:34

<h1>Hello</h1>
<h1>World</h1>

h1:first-letter {
    font-size: 60px;
}

демонстрация

1

Источник

user2659972 26 дек '13 в 12:34

user3136316 26 дек '13 в 12:18 2013-12-26 12:18 · Answer 5 · 2013-12-26 12:18

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

0

Источник

user3136316 26 дек '13 в 12:18

user1101893 26 дек '13 в 12:19 2013-12-26 12:19 · Answer 6 · 2013-12-26 12:19

Добавлять display:inline как для h1 & h5Затем удалите margin-left от h5

ДЕМО ЗДЕСЬ >>;;

Попробуй это

 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;
   }

Ваш способ реализовать это кажется немного сложным, даже если вы хотите использовать свой код, вы можете использовать мой ответ, в противном случае выберите любой из простых методов в других ответах здесь.