код для курсива html

Теги и атрибуты при роботе со шрифтами html

Также в html существует ряд парных тегов, задающих лишь одно правило форматирования. К ним относятся:

Возможности атрибута style

2) font-size – задается размер от 1 до 7. Это один из основных способов того, как в html можно увеличить шрифт.
Синтаксис написания:

Размер шрифта можно также задать:

3) font-style – устанавливает стиль написания шрифта. Синтаксис:

Пример того, как поменять шрифт в html с помощью этого свойства:

4) font-variant – переводит все строчные буквы в заглавные. Синтаксис:

Пример того, как изменить шрифт в html этим свойством:

5) font-weight – позволяет установить толщину написание текста ( насыщенность ). Синтаксис:

Свойство font и цвет шрифта html

Font является еще одним контейнерным свойством. Внутри себя оно объединило значения нескольких свойств, предназначенных для изменения шрифтов. Синтаксис font :

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

Русскоязычные шрифты и их поддержка

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

Источник

Курсив CSS

В прошлой статье мы обсуждали спецификацию выделения текста жирным шрифтом. В текущей статье мы поговорим о том, как выделить текст курсивом HTML. Как и в случае с жирным текстом, курсивный текст можно сделать тремя способами:

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

Курсивный текст: тег

Тег i (italic), по аналогии с тегом b для жирного текста, служит для физического выделения курсивного текста (это означает, что изменяется только начертание текста). Применение тега i:

Курсивный текст: тег

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

Конструктор сайтов «Нубекс»

Но не стоит забывать, что текст, заключенный в теги i и em, хоть и отображаются практически одинаково (во всех современных браузерах), по своей сути являеются не совсем идентичными, как уже отмечалось выше. Поэтому использовать теги нужно по мере необходимости: тегом em HTML обрамлять важные участки текста, а визуальное курсивное оформление применять с помощью тега i или CSS-стилей. Рассмотрим теперь использование CSS-стилей для курсивного выделения текста.

Курсивный текст силами CSS

Для установления стилей отображения шрифтов в CSS применяется свойство font-style, которое может принимать значения: oblique (наклонный текст), italic (курсив) и normal (обычный шрифт).

Применение атрибута font-style на практике:

Но необходимо помнить, что некоторые браузеры текст со свойством font-style: oblique; могут интерпретировать не как наклонный текст, а как курсивный.

Источник

CSS / HTML: Как правильно сделать текст курсивом?

что такое правильно способ сделать текст курсивом? Я видел следующие четыре подхода:

это «старый путь». не имеет семантического значения и только передает презентационный эффект выделения текста курсивом. Насколько я могу видеть, это явно неправильно, потому что это несемантично.

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

это использует класс CSS для размещения презентации. Это часто бывает преподносится как правильный путь, но опять же, это кажется мне неверным. Это, кажется, не передает больше семантического значения, что . Но, плачут его сторонники, гораздо легче изменить весь свой курсивный текст позже, если вы, скажем, хотите, чтобы он был жирным. Но это не так, потому что я бы тогда остался с классом под названием «курсив», который выделил текст жирным шрифтом. Кроме того, неясно, почему я когда-либо хотел бы изменить весь курсивный текст на своем веб-сайте или, по крайней мере, мы можем думать о случаях, когда это не будет будьте желательны или необходимы.

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

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

семантический смысл может меняться, когда он не присутствует в достаточной степени. Допустим, я согласился с «сноской», основанной не более чем на тексте, находящемся в нижней части страницы. Что происходит, когда через несколько месяцев я хочу добавить больше текста внизу? Это уже не сноска. Как мы можем выбрать семантический класс, который менее универсален, чем но избегает этих проблемы?

резюме

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

кроме того, желание отделить стиль от структуры привело к тому, что CSS рекламируется как замена когда есть случаи, когда это было бы на самом деле менее полезно. Так что это оставляет меня со смиренными тег и интересно, является ли этот ход мысли причиной, почему он остается в спецификации HTML5?

есть ли хорошие сообщения в блоге или статьи на эту тему? Возможно, теми, кто участвует в решении сохранить / создать тег?

12 ответов:

вы должны использовать разные методы для разных случаев использования:

не является неправильным, потому что он не является семантическим. Это неправильно (обычно), потому что это презентационный. Разделение озабоченности означает, что имеющаяся информация должна передаваться с помощью CSS.

именование в целом может быть сложно получить право, и имена классов не являются исключением, но тем не менее это то, что вы должны сделать. Если вы используете курсив, чтобы выделить блок из основного текста, то, возможно, имя класса «flow-distinctive» будет в порядке. Подумайте о повторном использовании: имена классов для категоризации-где еще вы хотели бы сделать то же самое? Это должно помочь вам определить подходящее имя.

включен в HTML5, но ему дана определенная семантика. Если причина, по которой вы отмечаете что-то курсивом, соответствует одной из семантик, определенных в спецификации, было бы целесообразно использовать . Иначе нет.

Я не эксперт, но я бы сказал, что если вы действительно хотите быть семантическим, вы должны использовать словари (RDFa).

это должно привести к чему-то вроде этого:

em используется для представления (люди будут видеть его курсивом) и property и href атрибуты связываются с определением того, что такое курсив (для машин).

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

tl; dr

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

Более Длинное Объяснение

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

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

семантика em изменились в HTML5, чтобы подчеркнуть акцент. strong может быть использован, чтобы показать важность также. strong может быть курсивом, а не жирным шрифтом, если это то, как вы хотите его стиль. Не позволяйте таблице стилей браузера ограничивать вас. Вы даже можете использовать сброс таблица стилей, чтобы помочь вам перестать думать в значения по умолчанию. (Хотя есть некоторые предостережения.)

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

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

ресурсы OOCSS

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

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

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

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

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

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

если это чисто стильная вещь, например, ваш дизайнер решил, что все ваши

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

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

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

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

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

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

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

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

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

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

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

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

это нормально нарушать правила иногда!

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

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

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

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

дать атрибут класса, значение, указывающее на характер данных (т. е. class=»footnote» хорошо)

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

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

НЕ НАДО

Источник

Как делать стили для текста

Содержание

WEB страничка

Чтоб наша WEB страничка смотрелась более презентабельно, разделим текст на абзацы и выделим заголовок. HTML имеет 6 уровней заголовков разделов документа, пронумерованных цифрами от 1 до 6. Заглавия объявляются парой тегов с номерами, надлежащими уровню, к примеру,

Заглавия

Воткните в текст файла other.html теги

Добро пожаловать на страницу компании SD!

Просмотрим приобретенный итог.

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

Восстановите окно браузера, нажав его кнопку на Панели задач (Taskbar).

Нажмите кнопку F5 либо кнопку Обновить (Refresh) на панели инструментов рабочего окна программки Internet Explorer. Файл other.html будет перезагружен, и вы увидите в окне браузера, как смотрится заголовок первого уровня.

Просмотрите, как будут смотреться заглавия других 5 уровней, изменяя в тегах номера: h2, h3 и так далее После каждого конфигурации не забывайте сохранять файл и обновлять изображение в окне браузера.

Когда вы закончите опыты, опять восстановите в файле other.html теги

Используя 6 уровней заголовков, которые предоставляет в ваше распоряжение язык HTML, можно сделать просто читаемый документ с интуитивно ясной структурой. Помните, что ваш документ всегда будет читаться существенно лучше, если в нем будет точное разделение на разделы и подразделы.

Выравнивание заголовков

По умолчанию заголовок выравнивается по левому краю странички. Но его можно также выровнять по правому краю либо центрировать. Для правостороннего выравнивания в теге

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

Добро пожаловать на страницу компании SD!

В предстоящем мы не будем припоминать для вас о необходимости перед просмотром сохранять файл с начальным кодом и обновлять изображение в браузере.

Как в HTML сделать текст выделенным (жирным)

Воткните в файле other.html открывающий и закрывающий теги так, чтоб они ограничили текст Тут вы узнаете… Этот элемент должен принять последующий вид:

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

Как в HTML сделать текст курсивом

Воткните в начальный код HTML тег и так, чтоб отредактированный элемент принял последующий вид:

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

Как в HTML сделать текст подчеркнутым

Как в HTML прирастить текст

Сейчас увеличим размер шрифта текста. Это можно сделать различными методами.

Теги наращивают размер шрифта текста, заключенного меж ними.

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

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

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

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

Воткните теги ограничив ими обозначенный абзац.

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

Коды выделения

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

— применяется для определения слова. Текст выводится курсивом по умолчанию.

— для выделения слов и усиления. Текст отображается курсивом по умолчанию.

— для выделения заглавий книжек, кинофильмов, спектаклей и так далее выводится курсивом по умолчанию.

— для фрагментов кода программ. Показывается на дисплее шрифтом фиксированной ширины.

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

— служит для отображения сообщений программ. Выводится шрифтом фиксированной ширины. Тег устаревший.

— для особо принципиальных фрагментов. Обычно выделяется полужирным начертанием.

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

атрибут style=»color: blue» определяет, что свойство color (цвет) имеет значение blue (голубой), другими словами текст заголовка первого уровня должен отображаться голубым цветом.

Выравнивание стилями

Поглядим, как при помощи языка каскадных таблиц стилей указать стиль текстового куска, который начинается словами Тут Вы узнаете…

Для указания толщины шрифта употребляется свойство font-weight со значениями lighter (узкий), bold (полужирный), bolder (жирный), к примеру, style=»font-weight: bold».

Для определения курсивного начертания применяется свойство font-style со значением italic. Потому, чтоб придать тексту полужирное курсивное начертание, следует атрибут style найти так: style=»font-weight: bold; font-style: italic». Направьте внимание: характеристики могут размещаться в любом порядке и непременно обязаны делиться точкой с запятой.

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

Для определения метода выравнивания текста по горизонтали употребляется свойство text-align со значениями left (налево), right (на право), center (по центру), justify (по ширине). Таким макаром, чтоб указать, что текст Тут Вы узнаете… должен быть оформлен полужирным курсивным начертанием с размером 150% от начального и выровнен по центру, следует его стиль найти последующим образом:

style=»font-weight: bold; font-style: italic; font-size: 150%; text-align: center»

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

Видите ли, язык HTML позволяет использовать различные методы стилевого дизайна. Совместно с тем, применение языка каскадных таблиц стилей CSS является более желаемым.

Другие варианты выравнивания и использования стилей

Мы разглядели только один вариант использования языка таблиц стилей, когда определение стиля размещается конкретно внутри тега элемента, который вы описываете.

Это делается при помощи атрибута style, применяемого с большинством стандартных тегов HTML. Но есть и другие варианты использования CSS.

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

Таблицы стилей действуют другим, более комфортным и экономным методом. Для присвоения какому-либо элементу определенных черт вы обязаны один раз обрисовать этот элемент и найти это описание как стиль, а в предстоящем просто указывать, что элемент, который вы желаете оформить подходящим образом, должен принять характеристики стиля, описанного вами. Комфортно, не правда ли?

Не считая того, язык таблиц стилей позволяет работать со шрифтовым оформлением страничек на еще более высочайшем уровне, чем стандартный HTML.

Дополнительная информация по теме

Статья в подробных деталях описывает процесс создания рамки для текста в редакторе MS Word

В данной статье изложена инструкция по созданию эффектной презентации в редакторе MS Power Point

В статье описываются правила размещения и работы со ссылками при помощи Microsoft FrontPage

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

Источник