HTML в чистому вигляді дає не дуже багаті можливості оформлення сторінки. Вирішити цю проблему покликані стилі CSS. Практично у кожного елемента (HTML-тега) існує атрибут style. значенням якого є опис стилів CSS даного тега. Стилі елемента задаються за наступним шаблоном:
Стилі CSS перераховуються через крапку з комою, кожен представляє собою пару "ім'я стилю: значення стилю", розділену між собою двокрапкою. Стиль, як правило, описує параметри зовнішнього вигляду елемента в цілому, або його будь-якого піделементи. Розглянемо приклад:
У контейнер span укладено текст "Hello, world.". span - це парний тег, який сам по собі ніяких видимих змін над своїм вмістом не виробляє, проте дозволяє застосувати певні стилі CSS, зазначені в ньому. Найчастіше його використовують саме для цих цілей. У нашому тезі задано два стилю CSS: стиль font-family зі значенням verdana і стиль font-size зі значенням 10px. Стиль font-family задає шрифт тексту, а стиль font-size - його розмір. Таким чином, текст "Hello, world." Буде відмалювали шрифтом Verdana розміром 10 пікселів.
Як і у випадку з HTML ключем до успіху є знання найбільш корисних і поширених стилів CSS. А в ідеалі - всіх. Їх досить багато, деякі є загальними для всіх типів елементів, деякі специфічні для певного типу. Наведу кілька дуже поширених стилів, крім font-family і font-size: background-color - фоновий колір елемента, наприклад, значення red або # ff0000 відповідає червоному кольору (другий варіант запису - шістнадцяткове значення кольору в HTML, може бути отримано з таблиці HTML -квіти. або за допомогою спеціального калькулятора), color - колір тексту, text-align - горизонтальне вирівнювання тексту (left - по лівому краю, center - по центру, right - по правому, justify - по ширині). Познайомитися з існуючими стилями буде вашим домашнім завданням :).
Тепер давайте розглянемо такий приклад: у нас є меню, реалізоване за допомогою таблиці, де кожна її осередок - пункт меню:
Для кожного осередку вказані стилі CSS, що формують загальний вигляд нашого меню:
Для відбору елементів в мові HTML має два окремі атрибута - class і id. Ці атрибути мають текстові значення і можуть бути встановлені у будь-якого елементу в HTML-сторінці. Відмінності їх в тому, що на сторінці можуть бути присутні кілька елементів з однаковим значенням атрибута class, в той час як елемент з певним значенням атрибута id може бути тільки один на сторінці. приклад:
Точка перед селектором означає, що даний блок стилів CSS застосовується до всіх елементів, у яких значення атрибута class одно імені селектора. Знак "решітка" # перед селектором означає, що блок стилів CSS застосовується до елементу зі значенням атрибута id рівним імені селектора. Тобто блок з селектором .link застосується до всіх елементів з class рівним link, а блок з селектором # text1 застосується до елементу, у якого id дорівнює text1.
За допомогою даного способу завдання стилів можна більш компактно описати наше меню:
Селектор #menu td відбере все осередки, що знаходяться всередині елемента з id menu. Можна було використовувати і class замість id, але id підкреслює унікальність нашого елементу (одне меню на сторінці).
Ще один момент. Якщо один елемент потрапляє під вибір декількох селекторів, то застосовуються стилі CSS кожного блоку з цими селекторами, при цьому повторюються стилі послідовно замінюються при проходженні від першого до останнього блоку. Погляньте на приклад:
Всі чотири елементи span потрапляють під селектор першого блоку стилів, третій елемент потрапляє під вибір обох селекторів. В обох блоках міститься стиль color, остаточне значення цього стилю третій елемент отримає з другого блоку (тобто blue), так як цей блок розташований нижче.
який розташовують зазвичай в блоці head. Однією сторінці можна вказати кілька файлів стилів CSS (для кожного файлу свій тег link).
Винесені стилі піддослідного меню в окремий файл:
cодержімое файлу style.css:
вміст файлу index.html:
Знайомтеся з існуючими стилями тут. Практикуйтеся;)