ПРИКЛАД

HTML:

Какой-то текст

</u></strong></font>

А якщо подібний стиль потрібно використовувати кілька разів? Добре якщо раз 5, а якщо 10-20? Ось тут нам і допоможе Сss. Існує три види таблиць стилів: Внутрішні таблиці стилів, Глобальні таблиці стилів і Зв'язані таблиці стилів. Внутрішні таблиці стилів (Inline Style Sheets) за допомогою спеціального атрибуту поміщаються прямо в HTML теги. Глобальні (Global Style Sheets) визначають стиль елементів у всьому документі. Зв'язані (Linked Style Sheets) можуть бути використані для декількох документів відразу і зберігаються в зовнішньому файлі. Далі детальніше.

Структура і правила

Селектори (Selectors):

Синтаксис: селектор { властивості}

Будь-який елемент HTML - це можливий селектор CSS. Властивості селектора визначають стиль елементу, для якого він визначений.

ПРИКЛАД:

H1 {color:red; size:20pt;}

Всі елементи H1 в документі будуть червоного кольору, розміром в 20 крапок (pt, point).

Класові селекторы (Class Selectors):

Синтаксис: селектор.класс {властивості}

CLASS- атрибут елементу в HTML, що визначає його клас. У CSS можна описати власні стилі для різних класів одних і тих же елементів.

ПРИКЛАД:

H1 blue {color:blue; size:20pt;}

Всі елементи H1 з атрибутом CLASS="blue" стануть синіми.

Класи можуть так само бути описані без явної прив'язки їх до певних елементів.

Синтаксис: .класс { властивості}

ПРИКЛАД:

green {color:green;}

В даному випадку всі елементи з атрибутом CLASS="green" стануть зеленими.

ID селекторы (ID Selectors):

Синтакс: #id { властивості}

ID- індивідуально іменований стиль. C його допомогою можна створювати стилістичні виключення серед елементів одного класу.

Індіфікатори використовуються в основному для додання одному або декільком елементам одного класу індивідуальних властивостей. Скажімо, Ви створили клас blue - синій курсив. Але Вам знадобився жирний підкреслений текст синім курсивом. Звичайно, можна створити новий клас, але навіщо? Простіше описати ID. Напріклад "boldunderline". І всі елементи класу blue із значенням ID "boldunderline" стануть жирним підкресленим синім курсивом. Станеться як би синтез властивостей класу blue і ідентифікатора boldunderline.

ПРИКЛАД:

<html>

<head>

<title> Приклад CSS </title>

</head>

<style>

blue {color: blue; font-style: italic}

#boldunderline {text-decoration: underline; font-weight: bold}

</style>

<body>

<p class="blue"> Здравствуйте, это моя домашняя страница. </p>

<p class="blue" id="boldunderline"> Пока еще в стадии разработки ... </p>

<p id="boldunderline">... Но скоро откроется </p>

</body>

</html>

Як видно з прикладу, атрибут ID може бути використаний без вказівки класу (останній параграф прикладу). Тоді параграф володітиме лише властивостями ID "boldunderline" (у прикладі - жирний, підкреслений текст).

Контекстні селектори (Contextual Selectors):

Контекстні селектори - це поєднання декількох звичайних селекторів. Стиль задається лише елементам в заданій послідовності залежно від каскадного порядку.

ПРИКЛАД:

P EM {color:silver;}

У даному прикладі всі елементи EM усередині елементів P матимуть заданий стиль.

Задання декільком елементам однакових властивостей:

Скажемо Вам потрібно задати декільком елементам Вашій веб-сторінки однакові властивості. В цьому випадку при визначенні селектори перераховуються через кому перед блоком властивостей.

ПРИКЛАД:

h1,h2,h3, p, strong {color:green; font-style:italic;}

Всі елементи h1, h2, h3, p і strong будуть зеленими.

Псевдокласи і псевдоелементи :

Синтаксис:

селектор: псевдоклас { властивості }

селектор: клас: псевдоклас { властивості }

селектор: псевдоелемент { властивості }

селектор: клас: псевдоелемент { властивості }

Псевдокласи і псевдоелементи - це особливі класи і елементи, властиві CSS, які автоматично визначаються браузерами, що підтримують CSS. Псевдокласи розрізняють різні типи одного елементу, створюючи при визначенні власні стилі для кожного з них. Псевдоелементи є частями інших елементів, задаючи цим частинам відмінний від елементу в цілому стиль.

Примечание : описания нескольких свойств для одного селектора, контекстуального селектора, класса, индивидуально именованного стиля или группы объедененных селекторов отделяются друг от друга точкой с запятой ";".

Список псевдокласів і псевдоелементів :

Anchor Pseudo Classes- ці псевдокласи елементу <а href=" ">, що позначає посилання. Псевдокласи цього елементу: (посилання), active (активне посилання), visited (відвіданий раніше URL), hover (псевдоклас, виникаючий при підведенні курсора до посилання, не працює в Несткейпе).

First Line Pseudo-element- first-line. Цей псевдоелемент може бути використаний з block-level елементами (p, h1 і так далі). Він змінює стиль першого рядка цих елементів.

First Letter Pseudo-element- first-letter. Схожий на first-line, але впливає не на весь рядок, а лише на перший символ.

ПРИКЛАД :

a:link,a:visited {color:blue}

a:active {color:red}

a:hover {text-decoration:none}

У даному прикладі всі елементи Anchor (заслання) будуть синіми. При натисненні (у активному стані) поміняють колір на червоний. І при підведенні курсора мишки зникне підкреслення.

Примітка: опис декількох властивостей для одного селектора, контекстуального селектора, класу, індивідуально іменованого стилю або групи об'єднаних селекторів відділяються один від одного крапкою з комою ";".

Внутрішні Таблиці Стилів

Як вже говорилося, використання Внутрішніх стилів мало чим відрізняється від використання звичайних HTML тегов. Вони задають стиль лише одному елементу документа за допомогою атрибуту STYLE в HTML теге.

ПРИКЛАД HTML:

<font color="blue" size="3" face="Arial"> Вперед в будущее </font>

ПРИКЛАД INLINE STYLE SHEET:

<font style="color:blue; font-size:12pt; font-family:Arial"> Вперед в будущее </font>

Як можна відмітити, код Inline Style Sheet вийшов більш ніж HTML. Тому ISS слід використовувати лише якщо необхідно задати певному елементу свій індивідуальний стиль, що існує в класифікації CSS і нереалізований в HTML. Або ж при необхідності абсолютно позиціонувати даний елемент.

Глобальні Таблиці Стилів

Глобальні стилі задають вигляд елементів всього документа. Для цього використовується тег <STYLE type="text/css">. Він розміщується в заголовку документа.

ПРИКЛАД:

<html>

<head> <title> Приклад Глобальных Таблиц Стилей </title>

</head>

h1{color:red; font-style:italic; font-size:32px}

.blue{color:blue}

#bold{font-weight:bold}

</STYLE>

<body>

<h1> Этот заголовок написан крупным красным курсивом </h1>

Вот <font class="blue"> это </font> слово - синее,

a <font id="bold"> это</font> - жирное.

</body>

</html>

У даному прикладі всі елементи H1 будуть написані великим червоним курсивом, всі елементи з вказаним класом BLUE будуть синіми, а всі елементи з ідентифікатором ID="Bold" стануть жирними. Для простоти замість <STYLE type="text/css"> можна використовувати просто тег <STYLE>, що менш грамотно.

Зв'язані Таблиці Стилів

Зв'язані таблиці стилів використовуються для додання декільком документам одного стилю і зберігаються в окремому файлі. Це дуже привабливо, коли потрібно витримати сайт в одному стилі, не утрудняючи себе складанням таблиць для кожного документа.

ПРИКЛАД:

Файл styles.css

body {background:black; font-size:9pt; color:red; font-family:Arial Black}

.base{color:blue; font-style:italic}

h1 {color:white}

#bold {font-weight:bold}

</STYLE>

У самих же HTML документах робиться посилання на цей файл за допомогою тега <LINK>. Виглядає це так: <LINK rel="STYLESHEET" TYPE="text/css" HREF="шлях до файла">

ПРИКЛАД:

Файл Index.html

<html>

<head>

<title> Просто еще один приклад </title>

</head>

<body>

Содержание Документа

</body>

</html>