Изменение внешнего вида первой буквы
Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье вы узнали, что такое псевдоселекторы в CSS. В данной короткой статье (но от этого не менее важной) я хотел рассказать, как с помощью CSS изменить внешний вид первой буквы. Давайте разберем, как это сделать. А делается это с помощью псевдоэлемента first-letter. Допустим мы хотим сделать, чтобы первые буквы всех элементов списка имели красный цвет и размер шрифта в 30px. Давайте напишем пример и используем внедренный стиль <style>:
<html>
<head>
<meta charset="utf-8"/>
<style type="text/css">
ul li:first-letter {
color:red;
font-size:30px;
}
</style>
</head>
<body>
<ul>
<li>Элемент списка №1</li>
<li>Элемент списка №2</li>
<li>Элемент списка №3</li>
<li>Элемент списка №4</li>
</ul>
</body>
</html>
Обязательно наберите данный пример и посмотрите результат его работы.
В принципе, вы могли и не использовать данный псевдоэлемент, а применить inline-стиль, который можно применить к любой букве (или символу). Давайте приведу пример кода:
<html> <head> <meta charset="utf-8"/> </head> <body> <ul> <li><span style="color:red;font-size:30px;">Э</span>лемент списка №1</li> <li>Элемент с<span style="color:green;font-size:30px;">п</span>иска №2</li> </ul> </body> </html>
На самом деле это издевательство над кодом, и так лучше не делать.
В данной статье вы узнали, как изменить внешний вид первой буквы через CSS.
На связи был Алексей Гулынин, оставляйте свои комментарии, увидимся в следующих статьях.
