Самостоятельное создание сайта
ВСЕ О ТОМ, КАК
СДЕЛАТЬ САЙТ
САМОМУ


Оставить отзыв или предложение

CSS работа с текстом

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

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

<!Doctype html>
<html lang="ru-RU">
<head>
<meta charset=windows-1251>
<title>(Это title) Пример страницы на HTML5</title>
<style type="text/css">
 h1 {
 color: #ff0000;
font-family: Geneva, Arial, Helvetica, sans-serif;
}
 h2 {
 color: #000000;
 font-family: Impact, sans-serif;
}
</style>
</head>
<body>
<h1>Это заголовок первого уровня на котором я вам наглядно продемонстрирую СSS работу с текстом</h1>
<h2>Это заголовок второго уровня на котором я вам наглядно продемонстрирую СSS работу с текстом</h2>
</body>
</html>

Вот что мы получим в браузере:

Выбор шрифта на CSS

В данной ситуации я показал на примере двух заголовков, как можно изменить шрифт, реализуется это по средствам свойства font-family где мы собственно и прописывали нужный нам шрифт. Шрифты прописываются из набора стандартных, такие как Arial, Verdana, Times New Roman, Georgia, Courier New, Comic Sans MS.
Запись после названия шрифта означает следующее:

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

<style type="text/css">
@font-face {
Font-family: “Robson Celtic”; src: url(fonts/robson.ttf);
}
H1 {
font-family: “Robson Celtic”, serif;
}
</style>

Благодаря свойству @font-face мы добавляем в таблицу стилей новый шрифт, прописываем его название, и адрес где он у нас расположен, это может быть в корне вашего сайта или в отдельной папке, в любом случае пишем полный путь. А после того как мы прописали этот шрифт, можно свободно им пользоваться как в примере. Но на самом деле, как показывает практика, это свойство очень редко используется, так как особой потребности менять шрифты не возникает, только в случаях какого-либо очень оригинального и красивого дизайна.

Идем дальше, теперь мы будем менять размер шрифта, вот как наглядно это выглядит:

<!Doctype html>
<html lang="ru-RU">
<head>
<meta charset=windows-1251>
<title>(Это title) Пример страницы на HTML5</title>
<style type="text/css">
 h1 {
 color: #ff0000;
 font-family: Geneva, Arial, Helvetica, sans-serif;
 font-size: 14px;
}
 h2 {
 color: #000000;
 font-family: Impact;
 font-size: 25px;
}
</style>
</head>
<body>
<h1>Это заголовок первого уровня на котором я вам наглядно продемонстрирую СSS работу с текстом</h1>
<h2>Это заголовок второго уровня на котором я вам наглядно продемонстрирую СSS работу с текстом</h2>
</body>
</html>

В браузере мы увидим следующее:

изменение размера шрифта на CSS

Здесь мы задали размер шрифта с помощью свойства font-size и размер шрифта мы взяли в пикселях, хотелось бы заметить, что вариантов тут много, можно задавать в процентах относительно стандартного шрифта, так же при адаптивном дизайне, да и вообще при верстке многие используют em, это масштабируемая единица, которая равна текущему размеру шрифта, то есть если для какого либо тега, стандартно задан размер 14px то 2em будет равно 28px. Но не стоит на первоначальном этапе сильно забивать себе голову, так как этот вопрос более подробно разбирается при верстке адаптивного дизайна, вы просто должны это понимать и знать. Еще хотелось бы отметить, я специально сделал заголовок первого уровня меньше по размеру, чем второго, но значимости у него это не убавило. Подобными манипуляциями с размерами заголовков, раньше оптимизаторы повышали релевантность страниц, делая заголовки размером таким же, как и текст на сайте, выделяли ключевые слова, и прописывали по многу штук на странице, но все поменялось и теперь за подобную накрутку можно попасть под фильтр поисковой системы.

Теперь давайте рассмотрим такое свойство как выравнивание текста, пример:

<!Doctype html>
<html lang="ru-RU">
<head>
<meta charset=windows-1251>
<title>(Это title) Пример страницы на HTML5</title>
<style type="text/css">
 h1 {
 color: #ff0000;
 font-family: Geneva, Arial, Helvetica, sans-serif;
 font-size: 14px;
 text-align: center;
}
 h2 {
 color: #000000;
 font-family: Impact;
 font-size: 14px;
 text-align: right;
 }
 h3 {
 font-size: 14px;
 text-align: left;
 }
 p {
  text-align: justify;
 }
</style>
</head>
<body>
<h1>Пример выравнивания текста</h1>
<h2>Выравнивание по правому краю</h2>
<h3>Выравнивание по левому краю </h3>
<p>Здесь много текста который заполняет весь блок благодаря свойству justify,Здесь много текста который заполняет весь блок благодаря свойству justify,Здесь много текста который заполняет весь блок благодаря свойству justify,</p>
</body>
</html>

В браузере видим следующее:

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

В данном примере я показал четыре основных вида выравнивания текста, все это достигается по средствам свойства text-align, которое заменило в html атрибут align=””. Мы можем выравнивать текст по правому краю – right, по центру – center, по левому краю – left, и заполнять строки текстом, как бы растягивать его – justify.

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

Дата публикации:2014-04-03


Буду очень признателен, если вы поделитесь ссылкой на страницу со своими друзьями в социальных сетях.
Если у вас возникнут вопросы по теме пишите, надеюсь у вас все получиться, удачи вам и всего наилучшего!

Нашли ошибку в тексте

Нашли ошибку в тексте!!!
Просто выделите её мышкой, нажмите Ctrl+Enter.
И мы все исправим.

Allsoft
Хостинг Beget