Эта статья познакомит читателя с настройками цвета различных состовляющийх ползунка, созданием таблиц в базовом виде
и настройками ссылок.
Сразу же приступим к делу. Наверняка многим из вас хотелось сделать ползунок справа какого-нибудь иного цвета нежели
цвета по умолчанию, причины для этого могут быть совершенно любыми от простого каприза пользователя до того что цвет
не вписывается в общий дизайн сайта, но причина не важна, важен сам процесс и результат.
Загрузить стиль можно как из файла .css, но так же настройки можно вписать в код страницы.
Для того чтобы вписать стиль в сам html-код страницы, нужно воспользоваться следующими тегами - <style></style>.
<style>
body
{
scrollbar-face-color : #FF0000; // Цвет самого ползунка
scrollbar-3dlight-color : #00FF00; // Цвет объемных границ
scrollbar-arrow-color : #0000FF; // Цвет стрелок на кнопках
scrollbar-track-color : #FFFF00; // Цвет полосы прокрутки
}
</style>
Теперь ползунок будет красным, границы зелеными, стрелки на кнопках синими, а полоса прокрутки желтой. Если непонятно
почему цвета именно такие, какие они есть, то напомню - формат цвета в html состоит из трех компонент
RGB(Red Green Blue), насыщенность которых можно регулировать отдельно, если быть точным то представление вот такое
RRGGBB, в шестнадцатеричной системе. Немного поиграв с параметрами вы поймете что к чему.
Перейдем к созданию таблиц. В данном материале я опишу лишь основы, которые помогут читателю создать простейшие
таблицы.
Для создания таблицы нужно использовать теги - <table>, </table>, <td>, </td>.
<table>
<td class="MyStyle">
Текст первой ячейки
</td>
<td class="MyStyle">
Текст второй ячейки
</td>
</table>
В данном случае будет создано 2 ячейки, со стилями MyStyle, который описан ниже:
.MyStyle
{
border-left : #FFFF00 5 solid; // Настройки краев таблицы
border-right : #FFFF00 5 solid; // left-левый край, right-правый, top-верх, bottom-низ.
border-top : #FFFF00 5 solid; // Первый параметр это цвет, так же могут быть константы
border-bottom : #FFFF00 5 solid; // второй это толщина, для чего нужен третий я не знаю.
font-style : italic; // Стиль курсив
background-color : #FF0000; // Цвет фона ячейки
color : #00FF00; // Цвет текста в ячейке
width : 500; // Ширина ячейки в пикселях, но можно задавать единицы измерения
}
С сылками дело обстоит точно так же - нужно создать два стиля, один из которых отвечает за состояние ссылки при
наведении на нее курсора мыши, а второй для состояния покоя.
Ссылка в состоянии покоя:
.MyLinkStyle
{
font-size : 15; // Размер шрифта
color : #00FF00; // Цвет текста
text-decoration : none; // Дополнительные параметры текста
}
Выделенная ссылка:
.MyLinkStyle:hover
{
font-size : 20;
color : #FF0000;
text-decoration : underline; // Подчеркнутый
}
Использовать эти стили так же просто как и в таблицах:
<a href="http://www.faceH0r.narod.ru" class="MyLinkStyle">My site</a>
На последок хотелось бы объяснить как выгрузить эти стили в отдельный файл, что придаст больше эстетичности вашему
сайту. Для этого нужно создать файл MyNameFile.css, и прописать туда все стили, без <style></style>, так как
будто бы это часть главного файла html, между этими тегами. Так же необходимо в главном html файле указать файл стилей,
делается это добавлением подобной строки:
<link rel="stylesheet" href="MyNameFile.css">
Теперь можно использовать эти стили точно так же как и если бы они были вписаны в html файл. Конечно в данной статье
я расмотрел все лишь очень поверхностно, не описывая различные тонкости, но этого должно хватить, по крайней мере для
начала.
|