В CSS огромное количество всевозможных удобных и качественно меняющих внешний вид свойств и мы продолжаем изучать CSS работу с текстом и в этом уроке, мы углубимся в тему работы с текстом и рассмотрим новые свойства текста.
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>
В браузере у нас следующий результат:
Это свойство декорирования текста линией, все варианты которые можно сделать я показал на примере, кроме одного, это значение 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>
В браузере результат следующий:
Это свойство устанавливает насыщенность шрифта, или его выделение, значения могут быть заданы как цифрами 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>
Вот что мы видим в браузере:
Я думаю, вы наглядно увидели, что этот параметр создает тень от текста, такого эффекта я обычно добивался в программе 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>
В браузере видим следующее:
Давайте по порядку первое свойство которое мы использовали это font-style, которое может иметь три значения, italic-курсив, oblique- наклонный текст, none –нормальный шрифт без эффектов. Следующее интересное свойство это text-transform которое может иметь четыре значения, lowercase – все буквы строчные, uppercase – все прописные, capitalize – начинать с прописных, none- убирает все эффекты. И последнее свойство line-height оно задает высоту между строками, всем известный межстрочный интервал, значения можете задавать хоть практически в любых единицах.
CSS безусловно, качественно улучшил функционал работы с текстом, давая реально качественные эффекты и расширенные возможности, в плане работы с текстом, да и не только.
CSS безусловно, качественно улучшил функционал работы с текстом, давая реально качественные эффекты и расширенные возможности, в плане работы с текстом, да и не только.
HTML5 и CSS3
Научись создавать профессиональные современные сайты на HTML5 и CSS3
Разрешается републикация материалов сайта с обязательным указанием ссылки на автора
материала (указание автора, его сайта), ссылки следующего содержания:
https://for-net.ru - Как сделать сайт самому
