Стили текста css

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

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

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

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

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

Вы уже могли видеть данный пример во втором уроке по основам CSS, здесь давайте всё это немного повторим и посмотрим на дополнительные возможности, которые можно применить к тексту.

p.new {font-family:Verdana, Tahoma; font-size:12px; margin-right:150px;}

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

Далее логично поставить какой нибудь нормальный шрифт, в данном примере стоит Вердана, но за ним стоит еще один шрифт Тахома, это означает, что если не под грузится первый шрифт, то автоматически будет подгружаться второй, "font-family:Verdana, Tahoma;".

После определения шрифта, определятся его размер, мы поставили самый оптимальный 12 пикселей, "font-size:12px;".

Далее там прописывается отступ текста от правого края в 150 пикселей, "margin-right:150px;". Таким же способом можно задать отступ текста и от левого края, это "margin-left:0px;", сделать если надо отступ с верху, "margin-top:0px;", ну и конечно с низу, это делается так: "margin-bottom:0px;".

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

font-variant:small-caps Это свойство, которое делает все маленькие буквы заглавными.

font-style:italic; Стиль шрифта, курсив.

font-weight:bolt; Жирность шрифта, (вес) Максимальное значение 700.

Если вам не хочется писать такую длинную строку из примера, то данные стили текста в css, можно прописать сокращенным способом, например таким:

p.new {font: bold 12px Verdana, Tahoma}

В этом маленьком примере, всё прописывается сокращенным образом, с начала атрибут фонт и через двоеточие, все его значения "bold" это делает текст жирным, если нужен обычный, прописывайте "normal". Потом пишется размер шрифта в пикселях, там стоит 12px. В последнюю очередь, прописывается стиль самого шрифта, это "Verdana, Tahoma" и другие всякие шрифты, но эти два, самые основные.

Ну вот в принципе и все самые основные стили текста css, которые необходимо знать на зубок. Подключать отдельные стили к абзацу, проще простого, мы на примере составляли класс, у которого название было "new", это правило подключается к html таким образом:

<p class="new"> Текст.</p>