Курсивный текст css: CSS (font-style). html: , . – Наклонный текст CSS на все случаи жизни

Когда вы доберетесь до CSS, возможно, у вас уже есть семантический элемент, который имеет смысл выделять курсивом для всех его вхождений на вашем сайте. em -хороший пример. Но, может быть, вы хотите, чтобы все aside > ul > li на вашем сайте были выделены курсивом. Вы должны отделить размышления о markup от размышлений о презентации.

Как уже упоминалось DisgruntledGoat i является семантическим в HTML5. Однако семантика кажется мне довольно узкой. Использование, вероятно, будет редким.

Семантика em изменилась в HTML5, чтобы подчеркнуть акцент. strong также можно использовать для демонстрации важности.

class="italic" -это плохо. Не используйте его. Она не семантична и совсем не гибка. Представление по-прежнему имеет семантику, только другого рода, чем markup.

class="footnote" эмулирует семантику markup, и это тоже неверно. Ваш CSS для сноски не должен быть полностью уникальным для вашей сноски. Ваш сайт будет выглядеть слишком грязно, если каждая часть будет стилизована по-разному. Вы должны иметь некоторые визуальные шаблоны, разбросанные по вашим страницам, которые вы можете превратить в классы CSS. Если ваш стиль для ваших сносок и блокчейнов очень похож, то вы должны поместить сходства в один класс, а не повторять себя снова и снова. Вы можете рассмотреть возможность принятия практики OOCSS (ссылки ниже).

Разделение проблем и семантики велико в HTML5 году. Люди часто не понимают, что markup-это не единственное место, где важна семантика. Существует семантика содержания (HTML), но есть также семантика представления (CSS) и поведенческая семантика (Javascript). Все они имеют свою собственную отдельную семантику, на которую важно обратить внимание для ремонтопригодности и сохранения DRY.

Ресурсы OOCSS

Поделиться Eva     06 сентября 2013 в 00:46

5

Возможно, оно не имеет особого смысла и должно быть только выделено курсивом, чтобы отделить его Презентационно от предшествующего текста.

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

Но я все же принимаю твою точку зрения. Это не редкость для дизайнеров, чтобы создать проекты, которые различаются визуально, не меняясь осмысленно. Я видел это чаще всего с коробками: дизайнеры дают нам проекты, включая коробки с различными комбинациями цветов, углов, градиентов и теней, без связи между стилями и смыслом содержания.

Поскольку эти достаточно сложные стили (с соответствующими проблемами интернета Explorer) повторно используются в разных местах , мы создаем классы , такие как box-1, box-2, чтобы мы могли повторно использовать стили.

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

Поделиться Paul D. Waite     21 января 2010 в 10:38

1

i элемент не является семантическим, поэтому для читателей экрана, Googlebot и т. д. он должен быть каким-то прозрачным (как и span или div элементов). Но это не лучший выбор для разработчика, потому что он соединяет слой презентации со слоем структуры — и это плохая практика.

Элемент em (а также strong ) всегда должен использоваться в семантическом контексте, а не в презентационном. Он должен использоваться всякий раз, когда какое-то слово или предложение является важным. Просто для примера в предыдущем предложении я должен использовать em , чтобы сделать больший акцент на части «должен всегда использоваться». Браузеры предоставляют некоторые свойства по умолчанию CSS для этих элементов, но вы можете и должны переопределить значения по умолчанию, если ваш дизайн требует этого, чтобы сохранить правильное семантическое значение этих элементов.

<span>Italic Text</span> — это самый неправильный путь. Во-первых, это неудобно в использовании. Во-вторых, он предполагает, что текст должен быть выделен курсивом. И структурный слой (HTML, XML и др.) никогда не должен этого делать. Презентация всегда должна быть отделена от структуры.

<span>Italic Text</span> , по-видимому, является лучшим способом для сноски. Это не предполагает никакой презентации, просто описывает наценку. Вы не можете предсказать, что произойдет в этой функции. Если сноска вырастет в объекте, вы можете быть вынуждены изменить его имя класса (чтобы сохранить некоторые логики в своем коде).

Поэтому всякий раз, когда у вас есть какой-то важный текст, Используйте em или strong , чтобы подчеркнуть его. Но помните, что эти элементы являются встроенными элементами и не должны использоваться для выделения большого блока текста.

Используйте CSS, если вы заботитесь только о том, как что-то выглядит, и всегда старайтесь избегать каких-либо дополнительных markup.

Поделиться Crozin     21 января 2010 в 11:02

1

Я думаю, что ответ заключается в том, чтобы использовать <em> , когда вы намереваетесь сделать акцент.

Если при чтении текста для себя вы обнаружите, что используете немного другой голос, чтобы подчеркнуть какой-то момент, то он должен использовать <em> , потому что вы хотите, чтобы программа чтения с экрана делала то же самое.

Если это чисто стилевая вещь, например, ваш дизайнер решил, что все ваши заголовки <h3> будут выглядеть лучше в курсиве Garamond, то нет никакой семантической причины включать его в HTML, и вы должны просто изменить CSS для соответствующих элементов.

Я не вижу никаких причин использовать <i>, если только вам не нужно специально поддерживать какой-то устаревший браузер без CSS.

Поделиться GrahamS     21 января 2010 в 11:05

1

HTML курсивный текст отображает текст в формате курсива.

<i>HTML italic text example</i>

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

<p>This is <em>emphasized </em> text format <em>example</em></p>

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

Смотрите это руководство для получения дополнительной информации: http://www.snoopcode.com/html/html-text-formating

Поделиться Prabhakar     29 ноября 2015 в 04:23

0

Хорошо, первое, что нужно отметить, это то, что <i> был устаревшим и не должен использоваться <i> не был устаревшим, но я все равно не рекомендую его использовать—смотрите комментарии для деталей. Это происходит потому, что он полностью противоречит сохранению презентации в слое презентации, на который вы указали. Точно так же <span> , кажется, тоже ломает форму.

Итак, теперь у нас есть два реальных способа делать вещи: <em> и <span> . Помните, что em означает ударение . Если вы хотите сделать акцент на слове, фразе или предложении, вставьте его в теги <em> , независимо от того, хотите ли вы Курсив или нет. Если вы хотите изменить стиль каким-то другим способом, используйте CSS: em { font-weight: bold; font-style: normal; } . Конечно, вы также можете применить класс к тегу <em> : если вы хотите, чтобы некоторые подчеркнутые фразы отображались красным цветом, дайте им класс и добавьте его в CSS:

Fancy some <em>shiny</em> text?

em { font-weight: bold; font-style: normal; }
em.special { color: red; }

Если вы применяете курсив по какой-то другой причине, перейдите к другому методу и дайте разделу класс. Таким образом, вы можете изменить его стиль, когда захотите, не регулируя HTML. В вашем примере сноски не должны подчеркиваться—фактически, они должны подчеркиваться, поскольку смысл сноски состоит в том, чтобы показать неважную, но интересную или полезную информацию. В этом случае вам гораздо лучше применить класс к сноске и сделать его похожим на класс в слое представления—CSS.

Поделиться Samir Talwar     21 января 2010 в 10:37

0

Я бы сказал, что используйте <em> , чтобы подчеркнуть встроенные элементы. Используйте класс для блочных элементов, таких как блоки текста. CSS или нет, но текст все равно должен быть помечен. Будь то для семантики или для наглядного пособия, Я предполагаю, что вы будете использовать его для чего-то значимого…

Если вы выделяете текст по причине ANY, вы можете использовать <em> или класс, который выделяет ваш текст курсивом.

Это OK, чтобы иногда нарушать правила !

Поделиться tahdhaze09     21 января 2010 в 14:17

-1

Используйте, если вам нужны некоторые слова/символы курсивом в содержании без других стилей. Это также помогает сделать контент семантическим.

текстовый стиль лучше подходит для нескольких стилей и не требует семантической необходимости.

Поделиться aryan     21 января 2010 в 10:37

-3

DO

1. Присвойте атрибуту класса значение, указывающее на характер данных (т. е. class="footnote" -это хорошо)

2. Создайте таблицу стилей CSS для страницы

3. Определите стиль CSS, присоединенный к классу, который вы назначаете элементу

   .footnote { font-style:italic; }

НЕ

1. Не используйте элементы <i> или <em> — они не поддерживаются и слишком тесно связывают данные и представление.
2. Не присваивайте классу значение, указывающее на правила представления (т. е. не используйте class="italic" ).

Поделиться Ninju Bohra     22 февраля 2012 в 17:42

Похожие вопросы:

p.italic {
font-style: italic; 
}

<p>This is normal text.</p>
<p>This is italic text.</p>    

p.cursive {
    letter-spacing: -1px;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus interdum placerat ligula mattis semper. Nunc ornare pellentesque arcu, malesuada ullamcorper est cursus at. Duis id nibh ligula. Nam maximus nibh finibus lorem laoreet, vel tincidunt purus ornare. Nulla molestie eu massa et elementum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus interdum placerat ligula mattis semper. Nunc ornare pellentesque arcu, malesuada ullamcorper est cursus at. Duis id nibh ligula. Nam maximus nibh finibus lorem laoreet, vel tincidunt purus ornare. Nulla molestie eu massa et elementum.</p>

span {
    font-family: cursive;
}

<span>Cursive text</span>

p {
  font-family: cursive;
}

<p>some text in cursive font</p>

<i>Italic Text</i>

<em>Italic Text</em>

<span>Italic Text</span>

<span>Italic Text</span>