Прописувати стилі CSS для кожної окремої сторінки сайту дуже незручно, занадто багато роботи та й сторінка буде більш повільніше відкриватися. Розглянемо як зробити перенесення стилів CSS в окремий файл, який буде визначати зовнішній вигляд всіх сторінок сайту. Для прикладу візьмемо код того сайту, який ми оформили в CSS-стилях. Відразу виділю все прописані нами стилі.
/ # Записуємо стилі для горизонтального меню # /
# tabs10
width: 600px;
>
# Tabs10 ul <
margin: 0;
padding: 0px 0px 0px;
list-style: none;
>
# Tabs10 li <
display: inline;
margin: 0;
padding: 0;
> # Tabs10 a <
float: left;
background: url ( "tableft10.gif") no-repeat left top;
margin: 0;
padding: 0 0 0 4px;
text-decoration: none;
>
# Tabs10 a span <
float: left;
display: block;
background: url ( "tabright10.gif") no-repeat right top;
padding: 1px 7px 1px 1px;
color: #FFF;
> / * Commented Backslash Hack hides rule from IE5-Mac \ * /
# Tabs10 a span / * End IE5-Mac hack * /
# Tabs9 a: hover span <
color: #FFF;
>
# Tabs10 a: hover <
background-position: 0% -42px;
>
# Tabs10 a: hover span <
background-position: 100% -42px;
>
# Tabs10 #current a <
background-position: 0% -42px;
>
# Tabs10 #current a span <
background-position: 100% -42px;
>
/ # Тут прописані стилі для меню лівої і правої колонки # /
#navlist <
color: white;
background: # 17a;
border-bottom: 0.2em solid # 17a;
border-right: 0.2em solid # 17a;
padding: 0 1px;
margin-left: 0;
width: 12em;
font: normal 10px Verdana, sans-serif;
>
#navlist li <
list-style: none;
margin: 0;
font-size: 1em;
>
#navlist a <
display: block;
text-decoration: none;
margin-bottom: 0.5em;
margin-top: 0.5em;
color: white;
background: # 39c;
border-width: 1px;
border-style: solid;
border-color: # 5bd # 035 # 068 # 6cf;
border-left: 1em solid # fc0;
padding: 0.25em 0.5em 0.4em 0.75em;
>
#navlist a <
width: 99%; / * Only necessary for Internet Explorer * /
>
#navlist a <
voice-family: ""> "";
voice-family: inherit;
width: 9.6em; / * Tantek-hack should only used if Internet-Explorer 6 is in standards-compliant mode * /
>
#navcontainer> #navlist a <
width: auto; / * Only necessary if you use the hacks above for the Internet Explorer * /
>
#navlist a: hover, #navlist a # current: hover <
background: # 28b;
border-color: # 069 # 6cf # 5bd # fc0;
padding: 0.4em 0.35em 0.25em 0.9em;
>
#navlist a: active, #navlist a # current: active <
background: # 17a;
border-color: # 069 # 6cf # 5bd white;
padding: 0.4em 0.35em 0.25em 0.9em;
> ->
/ # Прописуємо ненумерований список і укладемо всі посилання які знаходяться в цьому списку в контейнер для горизонтального меню # /
/ # Записуємо ненумерований список для лівого меню # /
Ділимо сайт на п'ять блоків за допомогою PHP
Розіб'ємо цей код на, як вже було вище сказано чотири частини: шапка, ліве меню, місце для тексту і праве меню. Для більшої наочності я виділю ці ділянки на коді. Ще не будемо весь сайт создовать за допомогою CSS-стилів а візьмемо і оформимо тільки праву колонку в CSS а шапку, ліве меню і саму сторінку для тексту ми не будемо чіпати а залишимо як є. Так буде видно різницю
/ # Записуємо ненумерований список для правого меню # /
Тепер ми виріжемо всю виділену частину, де у нас знаходяться всі стилі. Відкриємо і вставимо в блокнот то що ми скопіювали (вирізали) і збережемо файл під назвою: "style.css" Природно, файл зберігаємо в ту ж папку, в якій знаходиться наш сайт.
Далі у верхній частині сайту замість запису пропишемо. яка робить посилання на той фай де знаходяться всі стилі і який збережений як "style.css". На сайті цей запис вже вставлена і виділена.
Ще раз зверніть увагу, що між дужкою "
Для одних стиль -
це складний спосіб
говорити про просте,
для інших - простий спосіб
говорити про складне.
"Inpropart"