На самом деле в html они выполняют не только оформительскую роль, но и смысловую. Так, тег b просто выделяет тег жирным, не придавая ему большего смысла, а вот strong помимо простого выделения еще и придает словам особую важность. Поэтому этим тегом не стоит выделять полтекста, а использовать разумно.

В CSS также есть свойства, которые обладают таким же эффектом, что и перечисленные теги. Например, свойство font-weight: bold делает текст жирным, а font-style: italic – курсивным.

Подчеркивание и зачеркивание текста

Для подчеркивания и зачеркивания тоже есть свои теги. подчеркивает слова, а — зачеркивает их. Чтобы добиться такого же эффекта через css, применяют свойство text-decoration. У него есть несколько значений:

Underline – подчеркивание снизу;

Overline – подчеркивание сверху;

Line-through — зачеркивание;

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

В HTML 5 ввели еще один тег — mark, который позволяет просто выделить текст. По умолчанию он выделяется желтым цветом, хотя через css вы можете легко переназначить это и создать свое выделение, которое соответствует дизайну вашего сайта.

Вывод текста в верхнем и нижнем индексе

Немного разобрались, но что если вам надо написать формулу или что-то другое, где нужно вывести некоторые цифры или буквы в верхнем или нижнем индексе. Конечно, html предоставляет нам для этого нужные средства. Тег sub отображает шрифт в виде нижнего индекса, а sup — в виде верхнего. Также это можно сделать через css. Для этого нужному тексту надо прописать:

vertical-align: sub | super

Font-size: размер шрифта, чуть меньший, чем у обычного текста

Как оформить текст с помощью CSS?

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

Соответственно, нужный вам для оформления фрагмент заключаем в span, привязываем к нему произвольный стилевой класс и пишем стили без каких-либо проблем!

Вывод текста с сохранением пробелов.

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

Nowrap – слова отображаются одной строкой без переносов. Если они не влезают в строку, появится горизонтальная прокрутка.

Pre – действует аналогично тегу pre

Pre-wrap – аналогично предыдущему значению, но автоматически переносит текст на новую строку, когда он перестает помещаться (пожалуй, самое лучшее значение)

Выравнивание текста

Мы уже рассмотрели некоторые html теги для текста, но еще стоит упомянуть выравнивание. Оно задается не тегами, а через css-свойство text-align:

Right – по правому краю.

Left – по левому.

Center – по центру (например, для заголовков)

Justify – по ширине. Это значение означает, что слова в строке будут растянуты так, чтобы занять всю ее ширну.

Цвет и фон текста

Опять же, это уже невозможно задать с помощью html-тегов, зато можно через css. Мы опять же приходим к выводу, что использовать теги для редактирования текста html не очень удобно. Для цвета самого текста есть свойство color, которое имеет много значений. Цвет можно задавать как с помощью ключевых слов (orange, black, red), так и с явным указанием цветового режима: color: rgb(130, 100, 12). Фон задается абсолютно также, но только с помощью свойства background.

Размер и шрифт текста

Свойство Font-size задает размер шрифта, а font-family позволяет выбрать сам шрифт или его семейство. Например.

Здравствуйте, дорогие читатели . Сегодня хочу рассказать Вам как сделать красивые теги (метки) только с помощью CSS3.

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

А вот если они ещё и красивые, тогда вообще супер, так и хочется нажать на них:-)

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

Хотелось бы добавить, что в исходниках есть три примера. Но на практике мы рассмотрим только один. Почему? Потому что в двух примерах изменён только цвет, там всё очень просто, и проблем с эти возникнуть не должно. Ну ладно, давайте уже будем делать.

ι

HTML

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

. А HTML код меток я взял уже готовый со своего блога. В конечном итоге вот, что у меня получилось:

Google Photoshop Twitter Вкладки Иконки Красивые сайты Модальное окно Новичку Подсветка кода Поисковики Полезные сайты Прозрачность Скачать Слайдер Создать блог

Как видите мы сразу задали класс нашим будущим меткам — tagcloud. Теперь давайте сделаем красивый вид с помощью стилей.

CSS

.tagcloud { float:left; width:300px; margin-top:20px; margin-right:10px; } .tagcloud a { font-size:13px; color:#999; border-radius: 3px; background: #333; border-bottom:2px solid #888; margin:5px; padding:5px 5px 7px; float:left; -moz-transition: all 0.2s 0.01s ease-in; -o-transition: all 0.2s 0.01s ease-in; -webkit-transition: all 0.2s 0.01s ease-in; } .tagcloud a:hover { color:#fff; background-color:#FF6766; -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -o-transform: rotate(5deg); }

Сам список сделан шириной в 300 пикселей. Естественно Вы можете сделать шире или уже для Вашего сайта. А также размер , отступы и т.д. всё можно настроить.

Цвет можно изменить с помощью background: в данном случае цвет #333. Также можно настроить цвет при наведении в классе.tagcloud a:hover, в данном примере background-color:#FF6766;

Теперь самое интересное — . Плавное изменение цвета и плавный наклон задаётся с помощью transition:

Moz-transition: all 0.2s 0.01s ease-in; -o-transition: all 0.2s 0.01s ease-in; -webkit-transition: all 0.2s 0.01s ease-in;

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

А сам наклон метки задаётся с помощью transform:

Webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -o-transform: rotate(5deg);

5deg — это 5 градусов вправо, а -5deg — это пять градусов влево. Естественно это значение Вы можете изменить на большее или меньшое.

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

ι

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

Предварительное форматирование

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

 и 

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

Стилевое оформление текста

Приведенные ниже теги < center > , < font > ,< s > ,< u > для оформления стиля текста применяются в настоящее время крайне редко и являются нежелательными элементами. Вместо них широко используются таблицы стилей CSS.

Тег

позволяет центрировать все элементы документа в окне браузера. Например:

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

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

Полужирный , Курсив , > Моноширинный ,

Зачеркнутый текст ,

Подчеркнутый текст , КРУПНЫЙ ТЕКСТ ,

мелкий текст , Нижний индекс ,

Верхний индекс .

# 4: различные стили форматирования–>

Добро пожаловать

---

Я рад приветствовать Вас

на моей странице.

Вот что я ^люблю делать в _{свободное} время:

- Исследовать Интернет

Логический стиль документа

Текст в документе HTML может быть логически выделен одним из следующих тегов:

– определить слово. Как правило – курсив;

– усилить акцент. Как правило – курсив;

– заголовок чего-то большого. Курсив;

– компьютерный код. Моноширинный шрифт;

– текст, введенный с клавиатуры. Жирный шрифт;

– сообщение программы. Моноширинный шрифт;

– очень важные участки. Жирный шрифт;

– замена переменной на число. Курсив;

– позволяет включить цитату в объект.

# 5: логический стиль документа–>

Элементы содержания

---

Использование элемента INS

Использование элемента DEL

Использование элемента Q

Использование элемента EM

Использование элемента STRONG

Работа с тегами FONT

Тег позволяет установить вид, размер и цвет шрифта.

размер шрифта n=1..7, стандартный размер n=3

относительный размер, 3+3=6

Кроме размера, могут устанавливаться цвет и тип шрифта, например:

Пример шрифта

# 6: различные виды шрифтов–>

---

Задание абсолютных размеров шрифтов

Шрифт размера 7

Шрифт размера 1

---

Задание относительных размеров шрифтов

Шрифт размера +4

Задан зеленый цвет шрифта

Шрифт Courier

Цвет символов на всей странице можно изменить с помощью аргумента TEXT тега : … Аргумент BGCOLOR=” цвет” изменяет цвет фона.

<

Управление цветом текста

---

Аквамарин – aqua
Белый – white
Желтый – yellow
Синий – blue
Ультрамарин – navy
Фиолетовый – violet
Фуксиновый – fuchsia		Черный – black

---

---

Специальные символы

Символы, которые не могут быть введены в текст документа непосредственно через клавиатуру, называются специальными символами. Для них существуют особые теги. Четыре символа – знак меньше < , знак больше > , амперсант & и двойные кавычки “” имеют специальное значение внутри HTML и, следовательно, не могут быть использованы в тексте в своем обычном значении. Для использования одного из этих символов введите одну из следующих последовательностей:

< – < > – > & – & " – "e.

Чтобы визуально оформить и выделить текст в html применяют такие элементы:

STRONG

Выделяет текст жирным шрифтом:

Между этими тегами текст будет выделен жирным шрифтом

EM (Emphasis)

Выделяет текст, заключенный между открывающим и закрывающим тегами, курсивом:

Этот текст будет выделен курсивом

U (Underline)

Отображает помещенный между открывающим и закрывающим тегами текст как подчеркнутый:

Данный текст подчеркнутый

SUB

Отображает текст, заключенный между открывающим _{и закрывающим} тегами, как нижний индекс от основного текста.

Формула пропана С ₃ Н ₈

Результат: С 3 Н 8

SUP

Используется для создания верхнего индекса. Например:

Будет выглядеть 2 5 = 32.

FONT

Используется для изменения цвета, шрифта и размеров и текста.
Атрибуты:
SIZE - с помощью него можно менять размер шрифта. Возможные значение - 1 , 2 , 3 , 4 , 5 , 6 , 7.
COLOR - задает цвет текста.
FACE - для определения шрифта (Times New Roman, Arial, Tahoma)

Например:

Этот текст без оформления

Увеличенный желтый шрифт

Красный текст 3 размера

При просмотре в браузере увидим:

SIZE="+2" это значит увеличенный шрифт на 2 единицы по сравнению со стандартным. Стандартный размер шрифта равен 3 .

HR

Применятся для вставки в текст горизонтальной линии. Отличительная особенность – нет закрывающего тега.
Атрибуты:
ALIGN – определяет выравнивание горизонтальной линии. Атрибут может принимать следующие значения:
left – выравнивает по левому краю документа.
right – выравнивает по правому краю.
center – выравнивание по центру документа (используется по умолчанию).
WIDTH – применяется для определения длины линии в пикселах или процентах от ширины страницы.
SIZE – толщина линии в пикселах.
NOSHADE – с помощью этого атрибута линия закрашивается как сплошная. Без него – линия выглядит объемной.
COLOR – задаем цвет линии.

Например:

Текст до линии

---

Текста после линии
А это линия толщиной 3px без noshade

---

А здесь линия c noshade закрашенная в красный цвет

---

noshade >

Результат:

Следующая страница -