Изменяем текст в шапке сайта okis
В шапке шаблонов окиса, вы можете прописать два вида текста. Заголовок h1.art-logo-name в котором можно прописать имя вашего сайта и дополнительный текст art-logo-text который отлично подходит для написания слогана компании или контактной информации. Редактировать эти тексты вы можете в админ панели сайта, на вкладке "Параметры сайта" заполнив поля "Ваши контакты" и "Слоган" соответственно.
А вот о том как изменить внешний вид и параметы отображения этих текстов я и хотел бы поговорить в сегодняшнем уроке. Изменять настройки отображения текста в шапке сайта okis, можно (и нужно) в редакторе css. Для этого к селектору элемента, необходимо прописать сответствующие свойства и значения. Вот несколько примеров:
1. Изменяем цвет текста в шапке сайта
Копируйте нижеприведенный код, вставьте его в редактор css, измените значения цвета на нужные вам. Подобрать цвет вы можете при помощи таблицы безопасных цветов для вебдизайна.
h1.art-logo-name, h1.art-logo-name a, h1.art-logo-name a:link, h1.art-logo-name a:visited, h1.art-logo-name a:hover {
color: #fff !important;
}
.art-logo-text, .art-logo-text a {
color: #fff !important;
}
2. Изменяем размер текста
Для того что бы изменить размеры текста в шапке, необходимо дописать строчку font-size между фигурных скобок и указать значение.
h1.art-logo-name, h1.art-logo-name a, h1.art-logo-name a:link, h1.art-logo-name a:visited, h1.art-logo-name a:hover {
color: #fff !important;
font-size: 48px;
}
.art-logo-text, .art-logo-text a {
color: #fff !important;
font-size: 20px;
}
3. Изменить семейство шрифта
За то какое семейство шрифта будет использоваться, отвечает свойство font-family
Обратите внимание что для того что бы шрифт отображался в браузере у всех пользователей, необходимо что бы этот шрифт был установлен в системе этого пользователя. Именно поэтому рекомендуется использовать шрифты из так называемого условно безопасного списка шрифтов:
- Arial
- Arial Black
- Comic Sans MS
- Courier New
- Georgia
- Impact
- Times New Roman
- Trebuchet MS
- Verdana
Эти шрифты присутствуют в системах большинства ваших посетителей и гарантированно будут правильно отображены во всех браузерах. Если же шрифта нет в системе, он будет заменен на стандартный шрифт отображения текста который стоит по умолчанию в системе у конкретного юзера.
h1.art-logo-name, h1.art-logo-name a, h1.art-logo-name a:link, h1.art-logo-name a:visited, h1.art-logo-name a:hover {
color: #fff !important;
font-size: 48px;
font-family: Impact, sans-serif;
}
.art-logo-text, .art-logo-text a {
color: #fff !important;
font-size: 20px;
font-family: Arial, Verdana, sans-serif;
}
Если же вы пропишете несколько семейств шрифта через запятую, браузер поочередно проверит наличие шрифта в системе, и отобразит первый найденный. Заканчивают сторочку как правило типом шрифта, описывающим обобщенное описание типа.
- serif — шрифты с засечками (антиквенные), типа Times;
- sans-serif — рубленные шрифты (шрифты без засечек или гротески), типичный представитель — Arial;
- cursive — курсивные шрифты;
- fantasy — декоративные шрифты;
- monospace — моноширинные шрифты, ширина каждого символа в таком семействе одинакова (шрифт Courier).
На этом я пожалуй и остановлюсь, потому как свойств текста очень много и описать их все в одном уроке не представляется возможным. Но мне кажется вы уловили суть и немного поэкспериментировав, добьетесь нужного вам результата.
Кроме вышесказанного могу посоветовать интересное решение: Онлайн-генератор свойств текста, с помощью которого вы сможете визуально настроить внешний вид любого типа текста присутствующего на вашем сайте созданном на okis.ru
Более подробно о свойствах текста можно почитать в справочнике css на сайте htmlbook.ru
Спасибо за внимание, надеюсь урок помог вам. Если остались вопросы, вы можете задать их в комментариях к уроку.