Коли я освоїв все вищеперелічене (а освоювати довелося, до речі, повністю самостійно - на жаль, на той момент я не набрів на численні сайти з обучалка і сурседамі) то задумався: а чи не можна якось зменшити ті багатоповерхові конструкції, якими були мої перші сайти .
У пору раннього чайнічества я бувало народжував сторіночки в 200-250 кб (Страшно згадати: 0)) і мої знайомі приходячи на таке "творчість народів півночі" довго матюкалися: чому все так туго вантажиться.
Як виявилося, через якийсь час, кимось розумним була придумана спеціальна фіча, названа "Каскадні таблиці стилів", в народі CSS, або просто "стилі".
По суті своїй стилі - це присвоєння групі елементів, промаркованих за типом або присвоєному позначенню ("імені"), яких або складних параметрів, опис яких для кожного з цих елементів ускладнює сторіночку донезмоги ... Та й клопітно воно ..
Загалом, прописавши якому-небудь елементу СТИЛЬ, ми можемо згодом, маючи хоч сто таких елементів, поміняти вид кожного протягом буквально пари хвилин, змінивши їх СТИЛЬ в одному єдиному файлі.
Приблизний зміст такого виносного файлу стилю:
A: link {COLOR: # 666666; TEXT-DECORATION: none}
A: visited {COLOR: # 666666; TEXT-DECORATION: none}
A: active {COLOR: # 666666; TEXT-DECORATION: none}
A: hover {COLOR: # 666666; TEXT-DECORATION: underline}
BODY {margin = "5"; SCROLLBAR-FACE-COLOR: #FFFFFF; FONT-WEIGHT: normal; BACKGROUND: #FBFBFB; SCROLLBAR-HIGHLIGHT-COLOR: #FFFFFF; SCROLLBAR-SHADOW-COLOR: #FFFFFF; COLOR: # 666666; SCROLLBAR-3DLIGHT-COLOR: #AAAAAA; SCROLLBAR-ARROW-COLOR: # 999999; SCROLLBAR-TRACK-COLOR: #EEEEEE; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; SCROLLBAR-DARKSHADOW-COLOR: # 555555;}
TD {FONT-WEIGHT: normal; FONT-SIZE: 11pt; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}
DIV {FONT-WEIGHT: normal; FONT-SIZE: 11pt; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}
P {FONT-WEIGHT: normal; FONT-SIZE: 11pt; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}
.small {FONT-SIZE: 10pt; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}
.large {FONT-WEIGHT: bold; FONT-SIZE: 11pt; FONT-FAMILY: Arial, Helvetica, sans-serif}
.navigation {BACKGROUND: #FFFFFF}
.navigationcell {BACKGROUND: #FFFFFF}
.micro {FONT-SIZE: 7pt; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}
.z1 {FONT-SIZE: 8pt; COLOR = # 999999; FONT-WEIGHT: bold; text-align: center}
.t3 {FONT-SIZE: 8pt; }
.link {FONT-SIZE: 12; FONT-STYLE: italic}
.txt {text-indent: 8pt; text-align: justify}
.com {text-indent: 10pt; FONT-STYLE: italic; text-align: justify; FONT-SIZE: 10}
.t: link {COLOR: # 777777; FONT-WEIGHT: bold;}
.t: visited {COLOR: # 777777; FONT-WEIGHT: bold; TEXT-DECORATION: none;}
.t: active {COLOR: gray; FONT-WEIGHT: bold; TEXT-DECORATION: none;}
.t: hover {COLOR: black; FONT-WEIGHT: bold; TEXT-DECORATION: none;
FILTER: dropShadow (Color = white, OffX = 1, OffY = 1, Positive = 2); HEIGHT: 10
Ось така фіча приблизно забезпечує сайту той вид, в якому ви його спостерігаєте: 0)
Розкладемо по цеглинці ... І почнемо зі посилань:
A: link {COLOR: # 666666; TEXT-DECORATION: none}
A: visited {COLOR: # 666666; TEXT-DECORATION: none}
A: active {COLOR: # 666666; TEXT-DECORATION: none}
A: hover {COLOR: # 666666; TEXT-DECORATION: underline}
А: тут означає клас елементів, в HTML званих "посилання", тобто теги виду "<a href ..."
link - позначення линка в спокої, так би мовити, вихідний вид, в якому він постає, коли ми бачимо пагу тільки-тільки після її завантаження.
{} А ось переможе таких дужок в CSS прописується присвоюється елементу стиль, тобто праметри, які будуть автоматично привласнені вибраний елемент.
Так само у нас тут є колір линка - color: # 666666 - тобто темно-сірий.
І ще один момент: якщо в коді самої сторінки пишеться font color = "", в той час як в CSS - "color: ім'я кольору;", крапка з комою ставиться після кожної властивості в списку, якщо після нього йде інша властивість. Після останнього ставити не обов'язково, але в принципі можна.
І оформлення тексту - TEXT-DECORATION. Писати це великими, з великої літери або малими - абсолютно рівнозначно. Тут написано великими виключно для виразності і помітності: 0)
Отже, в параметрі се у нас значиться "none" - це означає, що нам бродилка покаже лінк у вигляді простого тексту - не синього, як за замовчуванням, і без ідіотського цього підкреслення: 0)
Визначення "visited" - оформити посилання точно так само як і відвідані вже посилання. Якщо ви помічали раніше - то вони, відвідані, за замовчуванням бродилками обозначаюЦЦа як потемнілі. А у нас буде равнообразно. Бо - нєфіг ...
Отже: перші два рядки визначили вигляд, в якому лінки знаходяться за початковим станом.
Але як виділити їх, позначити, що це не просто текст, а все ж посилання?
Для цього у мене прописані наступні два рядки:
A: active
{COLOR: # 666666; TEXT-DECORATION: none}
"Актив" - це є лінк, виділений мишкою, але з прибраним з нього курсором. Якщо придивлявся іноді, внаслідок кривих рук, міг бачити отакі повисли навколо лінків або картинок "рамочки" виділення - ось це воно і є: 0)
За тутешньому оформлення воно, знову ж, нічим не відрізняється від попередніх параметрів, тому в самому тексті я його виділяю, як правило, жирним (<b> ось так </ b>).
а от третє ...
A: hover {COLOR: # 666666; TEXT-DECORATION: underline}
hover - якщо мені не зраджує склероз, "ховер" перекладається як "ширяння» (не мізків, а в повітрі!): 0)
Цей параметр вказує бродилки, як оформити це посилання при зависанні на ній курсору. Тут я залишив їй первісний колір, а виділяти вирішив підкресленням. Слід також звернути увагу на те, що тут уже замість "none" коштує "underline" - що, собсно і є це саме "підкреслення" при наведенні курсора.
цими чотирма рядками ми разом призначили ВСІМ посиланнях на сторінці, в яку буде включений цей стиль, особливий зовнішній вигляд. Ця установка стосується ВСІХ посилань як таких.
а уявіть тепер, що було б, якби на кожну посилання писати ось таке? а посилань - 30, 40? економія в 40 разів! : 0) _)
Дивимося далі:
BODY
{
margin = "5";
SCROLLBAR-FACE-COLOR: #FFFFFF;
FONT-WEIGHT: normal;
BACKGROUND: #FBFBFB;
SCROLLBAR-HIGHLIGHT-COLOR: #FFFFFF;
SCROLLBAR-SHADOW-COLOR: #FFFFFF;
COLOR: # 666666;
SCROLLBAR-3DLIGHT-COLOR: #AAAAAA;
SCROLLBAR-ARROW-COLOR: # 999999;
SCROLLBAR-TRACK-COLOR: #EEEEEE;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; SCROLLBAR-DARKSHADOW-COLOR: # 555555;
}
BODY - це "тушка сторінки".
У ній можна познущатись над скроллбар (для тих, хто в танку: така фіча праворуч по вертикалі, за котороую можна тягати вгору-вниз, промативая не вміщується на екрані: 0))
У даному варіанті у мене написано:
margin = "5"; - Це відступ в 5 піхелей від краю дії (за замовчуванням набагато більше). Якщо відступ взагалі не потрібен - ставимо значення "нуль": 0)
SCROLLBAR-FACE-COLOR: #FFFFFF;
морда особи скроллбар. Тобто розфарбовує найбільшу поверхню заданим кольором. У мене це - в тон сторінці
SCROLLBAR-HIGHLIGHT-COLOR: #FFFFFF;
це відблиск на повзунку і кубиках зі стрілками
SCROLLBAR-SHADOW-COLOR: #FFFFFF;
це "тінь" - продовження "відблиску", (те ж саме, тільки нижня грань і права)
COLOR: # 666666;
це колір взагалі ...
SCROLLBAR-3DLIGHT-COLOR: #AAAAAA;
це тонюсенькая облямівкою навколо кожної детальки
SCROLLBAR-ARROW-COLOR: # 999999;
колір трикутних стрілок вгорі і внизу лінійки
SCROLLBAR-DARKSHADOW-COLOR: # 555555;}
глибока чорна тінь-контур
SCROLLBAR-TRACK-COLOR: #EEEEEE;
колір доріжки ..
Більш наочно все це видно на малюнку:
Ось власне і все. Таким от нехитрим перекрутити і фарбують в різні кольори ськролли сторінок: 0) Правда, працює це тільки в експлорері.
Дивимося далі:
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
це означає послідовність шрифтів, якими відображається контент сайту. Якщо немає першого, то бродилка використовує другий. Якщо немає другого - третій. Ну а якщо і четвертого нету, то це лінуксоїд без кириличних шрифтів приперся, ну його лісом ..; 0)
тепер осередку таблиць:
TD {FONT-WEIGHT: normal; FONT-SIZE: 11pt; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}
що таке ТД, я сподіваюся, ви вже запам'ятали, а якщо ні - доведеться перечитати все про таблиці з самого початку.
Отже ... тут прописано - FONT-WEIGHT: normal; - Шрифт нормальної товщини.
FONT-SIZE: 11pt; - Розмір шрифту. Звернути увагу на "pt" - це не в піхелах! це в ПУНКТАХ. Хоча особливо критичних різниць тут немає, просто інші одиниці виміру ..
Тут можна ставити і просто цифру без приписки в яких воно одиницях. Тоді цифра спрацює як розмір відносний і дозволить юзверя недбалим рухом мишки по масштабованості дії зіпсувати наш великий дізігн нафіг. А це не є гут ... Тому ні відсотків (так, можна і відсотками!), Ні вільних розрядів від -7 до просто 7 ставити не рекомендую. Або, якщо ти вже настільки крутий збоченець, ставити треба скрізь, а потім довго і клопітно рухати масштабність, насолоджуючись, як твою сторінку морщить і плющить по всіх абзаців% 0)
Ну і, нарешті, це:
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}
це у нас означає теж, що в самій паге "Ім'я шрифту".
Тільки тут перераховано, на всякий пожежний випадок, аж чотири шрифту, більш-менш здібних замінюватися не сильно псуючи дізігн. Навіщо це треба? На випадок, якщо на ваш хом'як * забреде яке-небудь інтелектуальне убозтво, примудрився угробити у себе на компі ВЕРДАНІ і Ариал. Хоча ці два шрифту щосили зазвичай використовуються Віндою і Вёрдом та й багатьма іншими прогами. Вони найзручніші і легко прочитувані, тому - практично незамінні. Так от, якщо все ж у якого-небудь мудака бракуватиме цих шрифтів, то пага покаже йому те, що прописано далі - Хельветіку або Сан-Серіф: 0) Якщо і цього у нього немає, то бродилка покаже йому, що там у нього стоїть і нехай він цим поперхнеЦЦа ..: 0)
Цим абзацом ми прописали, що ВЕСЬ текст на паге отражаеЦЦа 11-м розміром шрифтом, одним із зазначених там, вище.
Їдемо далі:
DIV {FONT-WEIGHT: normal; FONT-SIZE: 11pt; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}
це обрізання тег шару, який можна використовувати для позначення виділення певної ділянки таблиці або тексту. Ну - ось, припустимо, не треба мені весь текст на сторінці одноманітним - хочу шматок якогось нитка ізвратного кольору і вигляду ... укладаємо його в тег DIV і призначаємо певні параметри. Отримуємо виділення абзацу: 0)
На даний момент він абсолютно ідентичний основному тексту.
А ось так пишеться параграф. Він і позначається просто буквою P.
P {FONT-WEIGHT: normal; FONT-SIZE: 11pt; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}
У ньому у нас знову ж таки абсолютно ідентичні параметри. Але якщо задати інші, то все параграфи стануть виглядати не так як текст основної сторінки. Слід пам'ятати, що всі параграфи, як правило, виділені деяким відступом зверху і знизу від решти тексту. Це легко виправити, але про це пізніше.
Отже, ми задали параметри відображення всіх основних елементах:
Тексту,
Посиланнях,
Таблицями,
Блокам і
Параграфами.
Але що робити, якщо треба якийсь малесенький абзац зробити не таким, як інші абзаци? Що робити якщо один або два або більше елементів повинно мати окремий від більшості вид? Возитися з параграфом тут недоречно: 0)
Тут можна викрутитися таким чином:
початок нового стилю позначаємо точкою:.
а за нею відразу вписуємо ім'я нашого особливого стилю. Вкладеного, так би мовити, каскаду:
.small {FONT-SIZE: 10pt; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}
це означає, що теги, в які включено "class =" small ""
, Показуватимуть нам своє текстовий вміст саме в тому вигляді, який прописаний в цьому абзаці. Тобто, на 1pt меншого в даному контексті розміру: 0)
типовий приклад:
<B> <a href="бла-бла-бла" class=small> текст </a> </ b>
або <p class = small> текст </ p>
або <div class = small> текст </ div>
або
<Td class = small ...
<Table class = small ..
ну і т.п.
Точно так само всередину тегів можна одночасно і по кілька запихати теги рівняння ... типу align = center (left, right, justify)
Ось ще один клас:
.large
{FONT-WEIGHT: bold; FONT-SIZE: 11pt; FONT-FAMILY: Arial, Helvetica, sans-serif}
і ще:
.
navigation {BACKGROUND: #FFFFFF}
і ще:
.
navigationcell {BACKGROUND: #FFFFFF}
і ще:
.
micro {FONT-SIZE: 7pt; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}
а навіщо, собсна, нам щоразу писати тег вирівнювання в самій паге по сто разів? Ми ж можемо впендюріть його прямо в стиль!
Ось таким чином приблизно:
.z1 {FONT-SIZE: 8pt; COLOR = # 999999; FONT-WEIGHT: bold; text-align: center}
тільки тут він прописується не просто як align =, а як саме як text-align:
АХТУНГ !!! - Звернути увагу, що не через "одно", а саме через двокрапку !!!
.t3 {FONT-SIZE: 8pt; }
а в цьому випадку мені потрібно було просто змінити лише розмір і решта я не прописав ..
що у нас вийшло в цьому випадку?
Розглянемо приклад взаємодії і взаємовпливу стилів:
(Ще це називаеЦЦа "спадкуванням"):
маємо:
<Div class = "micro">
текст, текст, текст, текст, текст, текст, текст, текст, текст
<P class = "large"> текст, текст, текст, текст ...: 0) </ p>
текст, текст, текст, текст, текст, текст, текст, текст,
</ Div>
Принцип ясний?
(Для тих, хто в танку: - дія стилю распространяеЦЦа на все, що всередині позначеного об'єкта, ЯКЩО внутрішні, вкладені теги, які не забезпечені власним стилем, суперечливими чи доповнюють стиль об'єкта. Стиль перестає діяти відразу по закритті тега, його містить, і в дію вступає стиль об'єкта більш "високого рівня" - того, що навколо вкладеного, або наступного)
Чимось це все схоже на матрьошку ... Це вам абстрактний образ - для кращого розуміння проблеми: 0)
.link {FONT-SIZE: 12; FONT-STYLE: italic}
а ось тут у мене стоїть "італік" - це означає, що текст буде схильний модифікації в стилі <i> </ i> - тобто стане похилим: 0)
.
txt {text-indent: 8pt; text-align: justify}
.com {text-indent: 10pt; FONT-STYLE: italic; text-align: justify; FONT-SIZE: 10}
а ось цим я вирішив виділити лінки іншого типу - ті, які в менюшках типу календарів по датам:
.
t: link {COLOR: # 777777; FONT-WEIGHT: bold;}
.t: visited {COLOR: # 777777; FONT-WEIGHT: bold; TEXT-DECORATION: none;}
.t: active {COLOR: gray; FONT-WEIGHT: bold; TEXT-DECORATION: none;}
але в них уже буде змінюватися і колір і товщина букв:
.t: hover {COLOR: black; FONT-WEIGHT: bold; TEXT-DECORATION: none;
а ось ця приписка є фіча чисто плорерная - тобто в інших браузерах навіть не відобразиться.
FILTER: dropShadow (Color = white, OffX = 1, OffY = 1, Positive = 2); HEIGHT: 10}
Це називається "фільтр", вбудована в бродилку фіча, що відображає такі спецефекти, як "тінь", "світіння", "переливання" і багато іншого: 0)
Розглянемо Егон параметри: (Color = колір відкидаємо тіні - білий !, OffX і OffY - це на скільки піхелов тінь буде відстояти від букв - у нас це на піхель вправо і на піхель вліво. Можна до цифири пріпользовать знак "мінус" - це дасть вивернула вліво і вгору від цифири тінь: 0)
"Посітіве" я, чесно сказати, не пам'ятаю - по-моєму, щільність - поекспериментуйте: 0)
АХТУНГ !! - Звернути увагу, що субпараметри взяті в () і після них йде - ";" - Крапка з комою. Закриває каскад все той же}
параметри всередині {} розділяються знову ж таки ";" але після останнього параметра перед самою "}" крапка з комою зовсім не обов'язкові.
ну, от собсно і все саме основне про CSS. На фільтрах я більш детально зупинятися не буду, оскільки вони придатні в основному тільки для плорера, а отже, серйозного вебоделу нафіг не здалися - при всій приємності немає сенсу возитися з тим, що видно далеко не всім відвідувачам.
Залишилося тільки пояснити, що замість того, щоб ліпити ось такі "багатотомники" у кожну знову ж пагу, можна зберігати на сайті всього ОДИН єдиний файл, викликати який з кожної потрібної паги. Або - зберігати таких стилів декілька - для зручності або дізігна: на одній паге так, на іншій - отак.
Підключається воно так: пишемо цю нісенітницю в текстовий файл, прямо в блокноті - це простіше! і зберігаємо на сайті як "імярек.css"
Після цього відкриваємо пагу і в сааамую початку під тегом </ head>
вставляємо ось таке:
<LINK href = "/ шлях / імярек.css" type = text / css rel = stylesheet>
міняти в цьому рядку можна тільки шлях до файлу стилю та найменування самого файлу.
Тим, хто в танку: ВСЕ, абсолютно всі імена файлів на вашому сайті повинні бути набрані виключно латиницею, тобто ЛАТИНИЦЕЮ.
За допомогою стилів можна робити і купу прикрас: наприклад, таблиці не суцільний лінією, а пунктиром або точками:
1
2
У першому випадку у нас застосований вставлений в початок таблиці тег
style = "border: dotted 1pt; border-color: gray;
У другому випадку замість dotted значиться dashed
Після цих тегів ставимо розмір наших точок або тире - і перевіряємо як виглядає.
Цими ж стилями можна перетворити й кнопки, і тег HR -
-------------------------------------------------- ------------------------------
Завдяки стилям можна навіть посилання підкреслювати пунктиром, як зараз входить у моду.
А ще, деякі дії дозволяють перемикати стилі, що при грамотному їх написанні може служити своєрідними "скінами" сайту. Змінив стиль - помінялося все - розфарбування, рамки, шрифт і т.п. Дуже зручно і приємно.
Так, мало не забув ... тег <H1> </ H1>, про який я обіцяв розповісти докладніше, так от: багато пошуковики позитивно сприймають заголовки, прописані в цьому тезі. Причому, чим менше цифра тега, тим вище "пріоритет" цього заголовка. Всього їх 6, с H1 по H6. H6 найдрібніший і більш-менш вписується в дизайн, а ось H1 норовить розтягнутися в казна-які величини
- Ось такими буквами. Але що ж робити? Адже для збільшення находимой нам потрібен цей тег! При всій його нестравності і небажанні вписуватися в дизайн він приносить непогану кількість "очок" користі перед пошукачами. І тут нам допоможуть стилі. Прописуємо в CSS ось такий каскад:
H1 {FONT-SIZE: 10pt; COLOR: # 666666; font-style: normal; line-height: 16px; font-weight: bold; margin: 0px; padding: 0px;}
заголовок
другий заголовок
- Як бачите можна і H1 приборкати так, щоб він відображався не крупніше звичайного тексту і навіть відступів, звичайних для нього, зверху і знизу не буде: 0) За цей параметр відповідає відразу група налаштувань:
line-height: 16px; - Це у нас висота того простору, в якому розташовується рядок. Чи не шрифту, а всього рядка! Тобто поставимо його, наприклад, 10 - отримаємо наползание тексту:
line-height: 30px;
line-height: 8px;
заголовок
другий заголовок заголовок
другий заголовок
font-weight: bold; - Цей тег робить заголовки виділеними жирним
margin: 0px; - Відступ від верхнього лівого кута комірки
padding: 0px; - Відступ всередині осередку від всіх країв, виробляє майже той самий ефект, що і margin
margin: 0px;
margin: 30px;
заголовок
другий заголовок заголовок
другий заголовок
Тепер про те, як це все чіпляється до сайту. Зберігається CSS зазвичай в окремому файлі, який броузер і зчитує при відображенні сторінок вашого сайту. Щоб CSS надавав вплив на вміст сторінки, на початку її вставляємо ось такий виклик:
<Link href = "/ шлях / ім'я файла.css" rel = "stylesheet" type = "text / css">
прописати його треба між тегом <html> і тегом <body>. Якщо ж великої потреби в потужній та складної таблиці стилів немає і потрібно лише одноразово підправити якийсь елемент, досить вставити у відповідний тег "style =" параметри "- наприклад ось:
<Table width = "100%" height = "410" border = "0" cellpadding = "14" cellspacing = "0" class = "txt" style = "border: dashed 1pt; border-color: gray; border-top : none; border-bottom: none; ">
Цей рядок заголовка таблиці. Вбудований стиль в ній "прибирає" верхню і праву кордону, залишаючи тільки ліву і праву.
