Жирный текст

Жирный текст

Больше обычного

Меньше обычного

Курсив

Курсив

С подчеркиванием

Зачеркнутый

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

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

1) font-family – свойство устанавливает семейство шрифта. Возможно перечисление нескольких значений.
Изменение шрифта в html на следующее значение произойдет, если предыдущее семейство не установлено в операционной системе пользователя .

Синтаксис написания:

font-family: имя шрифта [, имя шрифта[, ...]]

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

font-size: абсолютный размер | относительный размер | значение | проценты | inherit

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

• В пикселях;
• В абсолютном значении (xx-small, x-small, small, medium, large );
• В процентах;
• В пунктах (pt ).

Font-size:7

Font-size:24px

Font-size: x-large

Font-size: 200%

Font-size:24pt

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

font-style: normal | italic | oblique | inherit

Значения:

• normal –нормальное написание;
• italic – курсив;
• oblique – шрифт с наклоном вправо;
• inherit – наследует написание родительского элемента.

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

font-style:inherit

font-style:italic

font-style:normal

font-style:oblique

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

font-variant: normal | small-caps | inherit

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

font-variant:inherit

font-variant:normal

font-variant:small-caps

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

font-weight: bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900

Значения:

• bold – устанавливает полужирный шрифт html;
• bolder – жирнее относительно normal;
• lighter –менее насыщенное относительно normal;
• normal – нормальное написание;
• 100-900 – задается толщина шрифта в числовом эквиваленте.

font-weight:bold

font-weight:bolder

font-weight:lighter

font-weight:normal

font-weight:900

font-weight:100

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

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

font: font-size font-family | inherit

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

• caption – для кнопок;
• icon – для иконок;
• menu – меню;
• message-box –для диалоговых окон;
• small-caption – для небольших элементов управления;
• status-bar – шрифт строки состояния.

font:icon

font:caption

font:menu

font:message-box

small-caption

font:status-bar

font:italic 50px bold "Times New Roman", Times, serif

Для того чтобы задать цвет шрифта в html можно использовать свойство color . Оно позволяет устанавливать цвет, как с помощью ключевого слова, так и в формате rgb . А также в виде шестнадцатеричного кода.

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

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

Схема документа

HTML-разметка

A Movie in the Park:
Kung Fu Panda

Конечно, было бы легче использовать div-элемент для вывода изображения в качестве фонового рисунка, но в данном случае я предполагаю, что изображение - это контент документа, и, следовательно, оно принадлежит HTML. Элемент div будем использовать в качестве контейнера для абсолютного позиционирования текста в нём.

CSS

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

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

A Movie in the Park:
Kung Fu Panda

Будем использовать этот span для оформления текста и фона:

H2 span { color: white; font: bold 24px/45px Helvetica, Sans-Serif; letter-spacing: -1px; background: rgb(0, 0, 0); /* на случай, если следующая строка не сработает */ background: rgba(0, 0, 0, 0.7); padding: 10px; }

Проблемы

Как видно из рисунка, в конце строки блок текста заканчивается непосредственно после последнего символа в строке, и начинается сразу же по левому краю на следующей строке. Свойство padding для span-а, в данном случае, нам не поможет.

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

A Movie in the Park:
Kung Fu Panda

Этим новым span-ам мы зададим свойство padding:

H2 span.spacer { padding: 0 5px; }

Что на счёт семантики?

На данном этапе дизайн завершен, но при этом осталась одна проблема. А именно, огромное количество дополнительных элементов HTML добавленных только для дизайна. Я имею в виду span-ы. Чтобы решить эту проблему, воспользуемся jQuery. Для этого удалим все span-ы в разметке, и динамически добавим их:

A Movie in the Park:
Kung Fu Panda

$(function() { $("h2").wrapInner(""); $("h2 br").before("") .after(""); });

Как вставить текст в HTML страницу? Для этого существуют специальные HTML теги для текста.

В HTML существует шесть уровней заголовков. Они добавляются с помощью тэгов

-

. При этом

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

Пример создания заголовков:

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

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

На работу страницы количество тэгов

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

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

только для одного заголовка.

Абзац

Тэг

Создаёт абзац текста. У него есть отступы сверху и снизу для отделения одного абзаца от другого. Кроме того, есть возможность установить отступ первой строки. Всё это регулируется с помощью CSS.

Тэг

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

Для примера выделим часть текста красным цветом.

Нужная часть текста находится внутри тэга . Чтобы она была красной, тэгу установлен атрибут style, который задаёт стили. Так как работа со стилями описывается в учебнике CSS, здесь я не буду объяснять, как работает этот атрибут. Просто добавьте его в тэг, как написано в примере.

Тэг

Тэг

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

Выделение текста
В HTML есть тэги для выделения текста. Тэги 

и 
 создают жирный шрифт. Хотя
эти тэги имеют некоторые различия, на странице они обычно выглядят одинаково. Тэги

 и 

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

Пример выделения текста:
21
22
23
24

 Жирный шрифт
Жирный шрифт
Курсивный шрифт
Курсивный шрифт

Текст можно выделять с помощью стилей. Каждый сам решает, как выделять текст, с помощью тэгов
или стилей.
Другие тэги
Мы рассмотрели специальные HTML теги для текста. Но текст могут содержать и многие другие
тэги, которые добавляют контент на страницу. Можно даже вставить текст вне каких-либо
тэгов, он всё равно отобразится на экране. Но на практике так никто не делает, потому что вне тэгов
текстом нельзя управлять. Поэтому весь текст конечно должен находиться внутри тэгов. А когда Вы изучите
CSS, Вы сможете определять внешний вид текста.
Бывает так, что нужно вывести картинку и приписать название (короткую фразу). Для этого есть такие параметры:
Align="top" – выравнивает текст по верху изображения.

 align="bottom" – выравнивает текст по низу.

 align="middle" – выравнивает текст по центру.
Ниже приведён код, в котором демонстрируется работа выше описанных параметров.

 <html
>

<head
>

<title
>
Изображение и текстtitle
>

head
>

<body
>

<p
>
<img
 src="images/htmlbeer0.jpg"

 width="100"

 height="180"

 align="top"

 />
Красивая пчёлкаp
>

<br
>
<br
>

<p
>
<img
 src="images/htmlbeer1.jpg"

 width="120"

 height="180"

 align="middle"

 />

Очень симпатичная пчёлкаp
>

<br
>
<br
>
<br
>

<p
>
<img
 src="images/htmlbeer2.jpg"

 width="160"

 height="180"

 align="bottom"

 />
 Тоже ничего.p
>

body
>

html
>

Красивая пчёлка
 Очень симпатичная пчёлка
 Тоже ничего.

Теперь посмотрим, как нужно выводить картинку при большом количестве текста. 

Есть два параметра:
Align="left" – изображение "обтекает текст" слева.

 align="right" – изображение "обтекает текст" справа.
Для наглядности напишите такой код:
 <html
>

<head
>

<title
>
HTML изображение слева – текст справаtitle
>

head
>

<body
 >

<img
 src="images/htmlsun.jpg"

 align="left"

 width="140"

 height="124"

 />

<big
>
Солнцеbig
>

<br
>

<p
>
 > Здесь может быть текст содержащий информацию о Солнце.p
>

<br
>
<br
>

<img
 src="images/htmlmoon.jpg"

 align="right"

 width="140"

 height="124"

 />

<big
>
Лунаbig
>

<br
>

<p
>
 Здесь вы можете вставить научную статью о Луне.p
>

body
>

html
>


 Солнце

По форме Солнце близко к идеальной сфере с диаметром 1392000 км. Оно вмещает в себя орбиту Луны, и еще остается много места. Фактически более миллиона таких планет как Земля свободно поместились бы внутри Солнца. Кроме того, если бы вы смогли вести машину по его поверхности со скоростью 88 км/ч, у вас бы ушло 5 с половиной лет, чтобы объехать Солнце один раз (притом не останавливаясь). Но размер Солнца не постоянен. Современные исследования показывают, что диаметр Солнца уменьшается приблизительно на 1 метр в час. Если этот феномен проходил и в прошлом столетии, тогда Солнце, которое мы видим сейчас на 800 км меньше, чем то, которое видели наши предки. Возможно, это солнечное сжатие является частью долговременного колебания, которое помогает стабилизировать громадный выброс энергии.

 Луна

Это единственный естественный спутник Земли. Масса Луны составляет 0,0123 массы Земли (приблизительно 1/81) или 7,6.1022 кг. Диаметр Луны чуть больше четверти земного (0,273) или 3 476 км. Луна освещает Землю в 500 000 раз слабее Солнца). На Луне нет привычной для нас атмосферы, нет рек и озёр, растительности и живых организмов. Сила тяжести на Луне в шесть раз меньше, чем на Земле. День и ночь с перепадами температур до 300 градусов длятся по две недели.

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

<head
>

<title
>
Вывод изображения на HTML страницу title
>

head
>

<body
>

<img
 src=" images//htmleclipse.jpg"

 alt=
 align="left"

 width="160"

 
height="130"

 style=" border: 8px solid #ffffff;"

/>

<big
>
big
>

<br
>

<p
>
 Статья о Солнечном затмении.
p
>

body
>

html
>


Астрономическое явление, которое заключается в том, что Луна закрывает (затмевает) полностью или частично Солнце от наблюдателя на Земле. Солнечное затмение возможно только в новолуние, когда сторона Луны, обращенная к Земле, не освещена, и сама Луна не видна. Затмения возможны только если новолуние происходит вблизи одного из двух лунных узлов (точки пересечения видимых орбит Луны и Солнца), не далее чем примерно в 12 градусах от одного из них.
CSS дает широкие возможности по оперированию стилем текста. Можно влиять на шрифт, цвет, размер и другие свойства текста.
Так как эта страница расчитана на новичков, то сначала напомним базовый синтаксис CSS и используемую терминологию.
Каждое правило CSS состоит из селектора и определения. Селектор - обычно это тег, к которому мы применяем наш стиль, а определение - это само стилевое отображение. Определение состоит из свойства и его значения. Например: свойство - цвет, значение - красный.
Синтаксис CSS следующий:
селектор { свойство: значение }

Пример правила CSS:
p { color
: blue
 }

 
Отображать текст синим цветом. Одному селектору можно указать несколько пар (свойство: значение).
p { color
: blue
; font-size
: 10pt
 }

В этом примере задано правило тегу 
Отображать текст синим цветом и размером 10pt. То есть тут мы имеем две пары (свойство: значение) применённые к одному селектору, в данном случае к тегу абзаца 
В дальнейшем, когда в тексте будут встречаться слова свойство и значение, будет иметься ввиду именно определение для селектора в правиле CSS.
 
Свойства шрифта
Если не указывать это свойство в CSS, то броузер будет показывать текст шрифтом по умолчанию. Обычно это Times New Roman.
Список шрифтов в значении font-family
 может включать одно или несколько названий, разделенных запятой. Если в имени шрифта содержатся пробелы, например, Trebuchet MS, оно должно заключаться в кавычки, одинарные или же двойные.
Браузер поочерёдно проверяет наличие шрифтов из списка на компьютере пользователя. Если первый шрифт в списке есть, то используется он, иначе браузер проверяет наличие второго шрифта из списка. Если ни одного нет, используется шрифт по умолчанию. В конце списка обычно прописывают ключевые слово, которое описывает тип желаемого шрифта - serif, sans-serif, fantasy, cursive или monospace.
Универсальные семейства шрифтов:
serif
 - антиквенные шрифты (шрифты с засечками), типа Times;
sans-serif
 - рубленные шрифты (шрифты без засечек или гротески), типичный представитель - Arial;
monospace
 - моноширинные шрифты, ширина каждого символа в таком семействе одинакова (шрифт Courier).
fantasy
 - семейство декоративных шрифтов;
cursive
 - семейство курсивных шрифтов;
Пример с использованием:

 


 
 


 
Заголовок h1
 
Заголовок h2


Следующее свойство:
Пример кода, в этом примере встроим стили в тег при помощи атрибута style.

 


 


Пример нормального шрифта.
Пример курсива.
Пример наклонного шрифта.


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

 


 


 
Обычный текст.
 Текст капителью.
 
Опять обычный текст.


Следующее свойство:
Свойство font-weight
 устанавливает насыщенность шрифта. Для этого в значении используются ключевые слова: bold
 - полужирное начертание, normal
 - нормальное начертание. Значение может быть установленно в диапазоне от 100 до 900 с шагом 100. Сверхсветлое начертание, которое может отобразить браузер, имеет значение 100, а сверхжирное - 900. Нормальное начертание шрифта (normal, которое установлено по умолчанию) соответствует 400, стандартный полужирный текст, bold, - значению 700.
Браузеры обычно не могут точно показать требуемую насыщенность шрифта, поэтому переключаются между значениями bold
, normal
 и lighter
. На практике же начертание в большинстве браузеров обычно ограничено только двумя вариантами: нормальное начертание и жирное начертание.
Значения lighter
 и bolder
 изменяют жирность шрифта относительно насыщенности родителя, соответственно, в меньшую и большую сторону.

 


 


 
Обычный текст. Текст bold.
 
Опять обычный текст.


Следующее свойство:
Свойство font-size
 - определяет размер шрифта элемента. Размер шрифта можно задать несколькими способами.
Абсолютный размер кегля шрифта может задаваться с использованием ключевых слов: xx-small (крайне малый), small (малый), medium (средний, значение по умолчанию), large (большой), x-large (очень большое), xx-large (крайне большое). Абсолютные размеры шрифта зависят от настроек браузера и операционной системы, так что они не совсем абсолютны.
Для изменения размера текста относительно родителя используется другой набор констант (larger - увеличивает размер относительно родительского, smaller - уменьшает размер).

 


 


 
Обычный текст.
 
Текст xx-small.
 Текст larger.
 
Текст small.
 
Текст medium.
 
Текст large.
 
Текст x-large.
 
Текст xx-large.
 
Опять обычный текст.
 
Текст 150%.
 
Текст 15px.
 Текст larger.


 
Свойства текста
Кроме работы со шрифтами, CSS даёт ряд инструментов для работы с свойствами самого текста.
Рассмотрим первое свойство:
При установке межстрочного интервала отчёт идёт от базовой линии шрифта. По умолчанию расстояние между строками текста зависит от вида и размера шрифта и определяется браузерами автоматически. Отрицательное значение интерлиньяжа не допускается.

 


 


 
Обычный текст. Первая строка.
 
Вторая строка.
 
Третья строка.
 
Изменённый текст. Первая строка.
 
Вторая строка.
 
Третья строка.


При процентной записи за 100% берется высота шрифта.
Следующее свойство:
При помощи определения { text-decoration
: none
 }
 можно убирать подчеркивание у ссылок, которое устанавливается в браузерах по умолчанию.

 


 
 


 
Поисковик Google.



Следующее свойство:
Свойство text-transform
 - управляет отображением букв, можно устанавливать заглавные или прописные символы в зависимости от выбранного значения.

 Свойство text-transform
Свойство
Значение

 
Описание

 
Пример

text-transform

 
none
capitalize
uppercase
lowercase

 
Убрать все эффекты
Начинать С Прописных
ВСЕ ПРОПИСНЫЕ
все строчные

 
text-transform: uppercase

Пример использования:

 


 


 
Текст none.
 
Текст capitalize.
 
Текст uppercase.
 
Текст lowercase.


Сравните текст который содержится в html-коде с текстом в окне браузера.
Следующее свойство:
Свойство text-align
 - служит для выравнивания текста по горизонтали окна браузера или контейнера, в котором расположен блок текста.

 Свойство text-align
Свойство
Значение

 
Описание

 
Пример

text-align

 
left
right
center
justify

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

 
text-align: right

Подробное описание значений:
center
 - текст выравнивается по центру.
 
justify
 - выравнивание по ширине, фактически это выравнивание по правому и левому краю одновременно, между словами текста образовываются пустые места, которые браузер заполняет пробелами.
 
left
 - выравнивание по левопу краю. Это значение используется по умолчанию.
 
right
 - выравнивание по правому краю.
Пример использования этого свойства будет совмещён с примером работы следующего свойства.
Следующее свойство:
Свойство text-indent
 - служит для создания величины отступа первой строки блока текста (например, для абзаца 
Это свойство допускает отрицательное значение, в таком случае создается выступ первой строки.

 Свойство text-indent
Свойство
Значение

 
Описание

 
Пример

text-indent

 
значение
%

 
Отступ первой строки

 
text-indent: 15px;
text-indent: 10%

 


 
 


Работа со свойствами text-align и text-indent.
Для лучшего понимания работы кода откройте страницу
в новом окне и уменьшите его размер.