HTML часть 2 (Стили)

  Эта статья познакомит читателя с настройками цвета различных состовляющийх ползунка, созданием таблиц в базовом виде 
и настройками ссылок.
  Сразу же приступим к делу. Наверняка многим из вас хотелось сделать ползунок справа какого-нибудь иного цвета нежели 
цвета по умолчанию, причины для этого могут быть совершенно любыми от простого каприза пользователя до того что цвет 
не вписывается в общий дизайн сайта, но причина не важна, важен сам процесс и результат.
  Загрузить стиль можно как из файла .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 файл. Конечно в данной статье 
я расмотрел все лишь очень поверхностно, не описывая различные тонкости, но этого должно хватить, по крайней мере для 
начала.
Статью написал faceH0r 05.10.2005
Используются технологии uCoz