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


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

CSS работа с текстом (Часть 2)

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

<!Doctype html>
<html lang="ru-RU">
<head>
<meta charset=windows-1251>
<title>(Это title) Пример страницы на HTML5</title>
<style type="text/css">
 h1 {
font-size: 18px;
text-decoration: overline;
}
 h2 {
  font-size: 18px;
  text-decoration: line-through;
}
 h3 {
 font-size: 18px;
 text-decoration: underline;
}
</style>
</head>
<body>
<h1>Линия над текстом</h1>
<h2>Здесь у нас перечеркнутый текст</h2>
<h3>Нижнее подчеркивание </h3>
</body>
</html>

В браузере у нас следующий результат:

Свойства текста CSS decoration

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

Теперь давайте поговорим о таком интересном свойстве как выделение текста, которое задается свойством font-weight, сразу к примеру:

<!Doctype html>
<html lang="ru-RU">
<head>
<meta charset=windows-1251>
<title>(Это title) Пример страницы на HTML5</title>
<style type="text/css">
 h1 {
font-size: 18px;
font-weight: bold;
}
 h2 {
  font-size: 18px;
font-weight: 200;
}
</style>
</head>
<body>
<h1>Жирный текст</h1>
<h2>Текст с установленным выделением 200</h2>
</body>
</html>

В браузере результат следующий:

Свойства текста CSS weight

Это свойство устанавливает насыщенность шрифта, или его выделение, значения могут быть заданы как цифрами 100|200|300…|900, так и словами bold — полужирное начертание, normal — нормальное начертание, bolder-изменяет жирность относительно родительного тега в более насыщенную сторону, lighter- наоборот изменяет в более светлую. Это свойство заменило в языке html такие теги как <b> <strong>, дав более расширенные варианты настройки, но не как не заменило их смысла для поисковых систем в плане акцентирования.

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

<!Doctype html>
<html lang="ru-RU">
<head>
<meta charset=windows-1251>
<title>(Это title) Пример страницы на HTML5</title>
<style type="text/css">
 h1 {
font-size: 18px;
text-shadow: 1px 1px 2px #000000;
color: #fff;
}
 h2 {
  font-size: 18px;
  text-shadow: 3px 1px 2px #ff0000, 1px 1px 2px #000000;
  color: #fff;
}
</style>
</head>
<body>
<h1>Просто одна тень</h1>
<h2>Сочетание двух теней одновременно, разного цвета</h2>
</body>
</html>

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

Свойства текста CSS shadow

Я думаю, вы наглядно увидели, что этот параметр создает тень от текста, такого эффекта я обычно добивался в программе Adobe Photoshop, при создании логотипа или просто в дизайне. Параметры записи свойства следующие:
сдвиг по оси Х сдвиг по оси У Радиус размытия Цвет;
что наглядно видно на примере, отступы мы задаем в пикселях, а радиус размытия мы можем задавать, так же как и размер шрифта.

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

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

<!Doctype html>
<html lang="ru-RU">
<head>
<meta charset=windows-1251>
<title>(Это title) Пример страницы на HTML5</title>
<style type="text/css">
.f1 {
 font-style: italic;
}
.f2 {
 text-transform: uppercase;
}
.f3
{
line-height: 11px;
}
</style>
</head>
<body>
<p class="f1">Демонстрация свойств font-style</p>
<p class="f2">Наглядная демонстрация свойств text-transform</p>
<p class="f3">Наглядная демонстрация свойств line-height это межстрочный интервал который
дает вам возможность сделать самостоятельно выбор.</p>
<p></p>
</body>
</html>

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

Свойства текста CSS

Давайте по порядку первое свойство которое мы использовали это font-style, которое может иметь три значения, italic-курсив, oblique- наклонный текст, none –нормальный шрифт без эффектов. Следующее интересное свойство это text-transform которое может иметь четыре значения, lowercase – все буквы строчные, uppercase – все прописные, capitalize – начинать с прописных, none- убирает все эффекты. И последнее свойство line-height оно задает высоту между строками, всем известный межстрочный интервал, значения можете задавать хоть практически в любых единицах.

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

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

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


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

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

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

Allsoft
Хостинг Beget