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

Якщо два селектора ідентичні, тоді завжди пріоритет отримає останній з них. Наприклад, у вас є:

p { color: red; }
p { color: blue; }

Елемент p завжди буде синього кольору, тому що відповідне правило зазначено останнім.

Тим не менше, люди зазвичай не використовують ідентичні і конфліктуючі селектори спеціально (тому що це безглуздо). Конфлікти цілком можуть з’явитися, коли у вас є вкладені селектори. Розгляньте наступний приклад:

div p { color: red; }
p { color: blue; }

Виглядає так, ніби елементи p в межах елементу div будуть показані синім кольором, тому що правило, яке встановлює колір p, зазначено останнім. Однак насправді вони будуть показані червоним кольором через специфічність першого селектора. Говорячи простою мовою, пріоритет у конфліктних ситуаціях збільшується разом зі специфікою селектора.

Справжня специфіка групи вкладених елементів вимагає обчислень. По суті, ви прирівнюєте кожен селектор id (“#anything”) до значення 100, кожен селектор class (“.anything”) до 10, а кожен селектор HTML (“anything”) до 1. Потім ви складаєте їх значення, а загальний результат і буде вашим значенням специфіки.

• p має специфіку 1 (1 HTML селектор)
• div p має специфіку 2 (2 HTML селектора; 1 +1)
• .tree має специфіку 10 (1 селектор class)
• div p.tree має специфіку 12 (2 HTML селектора і 1 селектор class; 1 +1 +10)
• #baobab має специфіку 100 (1 селектор id)
• body #content .alternative p має специфіку 112 (HTML селектор, id селектор, class селектор, HTML селектор, 1 +100 +10 +1)

Таким чином, у разі, якщо всі ці приклади будуть використані, div p.tree (зі специфікою 12) буде більш специфічний, ніж div p (зі специфікою 2), а body #content .alternative p буде більш специфічний, ніж всі вони, незалежно від порядку.

CSS, або каскадні таблиці стилів, – це те, як HTML представлений. Точно так само як HTML описує контент, таблиці стилів визначають, як документ виглядає.

Стилі не нагадують структуру HTML. Вони використовують формат “властивість: значення” і велика частина властивостей може використовуватися для більшості HTML-тегів.

Зміст

• Застосування CSS – Як застосувати CSS до HTML.
• Селектори, Властивості і значення – Елементи CSS.
• Кольори – Використання кольору.
• Текст – Маніпуляція з розміром і формою тексту.
• Margins і Padding – Розставляємо речі по місцях.
• Межі
• Кладемо все разом – Готуємо гостру страву із цих інгредієнтів.

Головні переваги CSS:

1. Більш чистий код
   • Цей код легше підтримувати
   • Він швидше завантажується
   • Він краще оптимізований для пошукових систем
2. Модульний код
   • Правила стилю можуть застосовуватися до безлічі сторінок
   • Однаковий дизайн
   • Код легше підтримувати
3. Сила дизайну
   • Точність контролю (позиціонування, розмір, поля та ін)
4. Поділ праці
   • Завдання розробника – розробляти, завдання дизайнера – створювати дизайн
5. Краще доступність
   • Теги більше не використовуються не за призначенням (наприклад, <blockquote> для форматування)
   • Немає необхідності в позиціонуванні невидимих картинок
   • Користувачі можуть переписувати стильові таблиці автора

Правила CSS

Правила CSS містять визначення стилю елемента або групи елементів. Вони використовують наступний синтаксис:

селектор {властивість:значення; властивість:значення; властивість:значення;}

Всі пари властивість:значення є деклараціями. Множинні (складові) декларації розділяються крапкою з комою. Селектор визначає елементи, на які впливають правила. Давайте розглянемо наступне правило:

p {
 color:darkgreen;
 font-family:Verdana;
 font-size:10pt
}

Це правило визначає, що текст у всіх параграфах повинен бути темно-зеленого кольору, розмір тексту повинен бути 10 точок, а в якості шрифту можна використовувати шрифт Verdana.

Коментарі в CSS

Коментарі в CSS починаються з «/*» і закінчуються «*/». Погляньте на цей приклад:

p {
color:red; /* Текст у всіх параграфах повинен бути червоного кольору */
}

body {
	background: white url(http://www.htmldog.com/images/bg.gif) no-repeat top right;
}

Це включає в себе наступні властивості:

• background-color, з яким ми стикалися раніше.
• background-image, яке представляє собою місцезнаходження самого зображення.
• background-repeat, яке вказує, як зображення повторюється. Це може бути repeat — фактично еквівалент ефекту «мозаїки» по всьому фону; repeat-y — зображення повторюється по координатній осі Y, тобто зверху і знизу; repeat-x — зображення повторюється по координатній осі X, тобто слідує одне за одним зліва на право; no-repeat — зображення показується тільки один раз і не повторюється.
• background-position, показує розташування зображення. Це може бути top (зверху), center (по центру), bottom (знизу), left (ліворуч), right (праворуч) або будь-яка розсудлива їх комбінація.

Фонові зображення можуть використовуватися для більшості елементів HTML, а не тільки для сторінки повністю (body). Фонові зображення можуть використовуватися і для простих, але ефективних рішень – наприклад, для створення закруглених куточків.

Легко захопитися технікою фонових зображень і почати розміщувати їх по всій сторінці. Деякі візуально гіперактивні люди впевнені, що сторінка виглядає добре, коли яскраві кольорові фотографії накладаються одна на одну по всьому фону веб-сторінки, примушуючи користувача «розгадувати» текст на передньому плані. Це, звичайно ж, екстремальний приклад. Але факт полягає в тому, що найбільш дружній до користувача легкий для читання текст, набраний чорним кольором на білому фоні або білим кольором на простому чорному фоні (є також пропозиції злегка приглушати білий і чорний фон, щоб знизити відблиски).

Тому краще використовувати фонові зображення там, де на верхньому шарі не буде контенту, або робити фонові зображення дуже світлими, що, до речі, може зменшити вагу файлу зображення, тому що в цьому випадку задіяно менше кольорів (за умови, що ви застосовуєте формат з індексованої палітрою кольорів – наприклад, GIF).

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

У CSS селектор класу позначають іменем, яке слідує за точкою (.). Ідентифікатор позначають іменем, яке слідує за знаком решітки (#).

Таким чином CSS може нагадувати наступний код:

#top {
	background-color: #ccc;
	padding: 1em
}

.intro {
	color: red;
	font-weight: bold;
}

HTML робить відсилання до стилю CSS значеннями атрибутів id і class. Наприклад:

<div id="top">
<h1>Chocolate curry</h1>
<p class="intro">This is my recipe for making curry purely with chocolate</p>
<p class="intro">Mmm mm mmmmm</p>
</div>

Різниця між ідентифікатором id і класом полягає в тому, що ідентифікатор може застосовуватися для визначення одного елемента, а клас може використовуватися для визначення декількох елементів.

На додаток ви можете використовувати селектор для певного елемента HTML, просто вказавши спочатку HTML-селектор. Наприклад p.jam { якийсь стиль } буде застосовуватися для елементів параграфів, у яких є клас “jam”.

Ет-правила містять всередині себе набір CSS-правил і застосовують їх до чогось конкретного.

Імпортування

Ет-правило import приєднує іншу таблицю стилів. Припустимо, ви хочете додати стилі з іншої таблиці стилів до вже існуючої. У цьому випадку, ви швидше за все зробите так:

@import url(addonstyles.css);

Ця конструкція часто використовується в місці, де елемент link посилається на CSS файл HTML-сторінки, маючи при цьому внутрішню таблицю стилів, яка виглядає приблизно так:

<style type="text/css" media="all">@import url(monkey.css);</style>

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

Медіа-типи

Ет-правило media застосує вміст до певного типу медіа, наприклад, до друку:

@media print {
	body {
		font-size: 10pt;
		font-family: times new roman, times, serif;
	}
	#navigation {
		display: none;
	}
}

Можливі типи медіа:

• all – правила CSS застосовуються до всіх можливих типів медіа
• aural – для мовних синтезаторів.
• handheld – для портативних пристроїв.
• print – для принтерів.
• projection – для проекторів.
• screen – для дисплеїв комп’ютерів.

Ви також можете використовувати такі типи медіа: braille, embossed, tty і tv.

Примітка: не дивлячись на все вищесказане, браузер IE підтримує всього декілька медіа-типів – all, screen і print.

Кодування

Ет-правило charset просто встановлює кодування зовнішньої таблиці стилів. Правило вказується у верхній частині таблиці CSS і виглядає приблизно так:

@charset "ISO-8859-1";

Шрифтовий комплект (font-face)

Ет-правило font-face використовується для детального опису шрифту і може використовуватися для впровадження зовнішнього шрифту в ваш CSS. Правило вимагає наявності описувача font-family, до якого шрифт може відсилати й значенням якого може бути ім’я поточного шрифту або повністю нове ім’я. Щоб впровадити шрифт, використовують описувач drc. Інші описувачі, додані до ет-правила font-face, стають умовами для шрифту, який використовується. Наприклад, якщо ви додали стиль font-weight:bold в ет-правило, описувач src властивості font-family буде застосовуватися до селектора з властивістю font-family, якщо властивістю font-weight буде bold.

Ви можете використовувати схоже ет-правило font-face:

@font-face {
	font-family: somerandomfontname;
	src: url(somefont.eot);
	font-weight: bold;
}
p {
	font-family: somerandomfontname;
	font-weight: bold;
}

Це правило застосує шрифт somefont.eot до параграфів (за винятком випадків, коли для селектора p не встановлено font-weight: bold).

Підтримка впроваджуваних шрифтів дуже уривчаста. Браузери на основі коду Mozilla не підтримують їх і не мають найближчим часом таких планів. Тільки Internet Explorer, схоже, має певний ступінь підтримки. Щоб впроваджувати шрифти з IE, вам потрібно буде використовувати додаток Microsoft WEFT, який конвертує символи формату TrueType у формат OpenType (і потім ними можна скористатися тільки за певним вашим посиланням). Через обмеження (і складності) сумісності, рекомендується не використовувати шрифти, які не мають адекватної альтернативи серед системних шрифтів.

Сторінки

Ет-правило page регулює посторінкові медіа і є просунутим способом застосовувати стилі до друкованих медіа. Це правило визначає блок сторінки, який розширюється на блоковій моделі (box model, докладніше див Margins і Padding). Завдяки цьому правилу ви визначаєте розмір і подання єдиної сторінки.

Існує кілька угод, які застосовуються до ет-правила page: не повинно бути полів чи рамок; стиль створюється не для показу на екрані комп’ютера, тому не допускається використання в якості одиниць вимірювань пікселів (точок) і em.

Існує кілька певних властивостей, які можуть використовуватися. Наприклад, size може приймати значення portrait, landscape, auto або length. Властивість marks використовується для визначення мітки кадрування:

@page {
	size: 15cm 20cm;
	margin: 3cm;
	marks: cross;
}

Псевдокласи для посторінкових медіа

Існує три псевдокласи, які використовуються спеціально в зв’язці з ет-правилом page. Виглядає їх використання наступним чином:

@page :pseudo-class { stuff }.

:first — цей псевдоклас застосовується до першої сторінки посторінкових медіа.

:left та :right застосовуються для лівих і правих сторінок відповідно. Може використовуватися для вказівки великих полів зліва при друці лівої сторінки і праворуч – при друці правої сторінки.

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

І, нарешті, border-color використовують для вказівки кольору межі.

Додайте цей код в CSS-файл:

h2 {
	border-style: dashed;
	border-width: 3px;
	border-left-width: 10px;
	border-right-width: 10px;
	border-color: red;
}

У результаті ви повинні отримати червону переривчасту межу навколо заголовка HTML другого рівня (елемент h2) шириною 3 пікселі зверху і знизу, а також 10 пікселів зліва і праворуч (Ширина усього кордону в 3 пікселі в результаті була визначена).

Приклад коду

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
h1 {
position:relative;
top:60px;
left:50px;
border:2px solid #006;
padding:1px;
background-color:#600;
color:#eee;
}
#explanation {
color:#006;
font-weight:bold;
font-size:1.2em;
}
#wrapper {
width:600px;
background-color:#def;
border:1px solid #006;
}
</style>
<title>CSS Relative Positioning</title>
</head>
<body>
<div id="wrapper">
<h1>CSS Relative Positioning</h1>
<h2>From the Left and the Top</h2>
<div id="explanation">
<p>The h1 element on this page has been positioned relative to where it otherwise would be.</p>
<p>All other content on the page (including these sentences) will show up in the same position it would have if the h1 had not been positioned at all.</p>
</div>
</div>
</body>
</html>

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

Подивимося, що станеться, якщо ми спозиціонуємо елемент h1 з правого нижнього кута, використовуючи відносне позиціонування як в цьому коді:

h1 {
 position:relative;
 bottom:40px;
 right:40px;
 border:2px solid #006;
 padding:1px;
 background-color:#600;
 color:#eee;
}

Фіксоване позиціонування

Елементи з зафіксованим позиціонуванням (fixed) залишаються в тому ж місці браузерного вікна, навіть коли сторінка прокручується. Це може використовуватися для постійного утримання елемента (наприклад, меню) на сторінці.

У зазначеному нижче прикладі фіксоване позиціонування використовується для утримання знака «додому», який посилається на головну сторінку у верхньому лівому кутку.

Приклад коду

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#homeLink {
position:fixed;
top:20px;
left:0px;
}
---- Code Omitted ----

</style>
<title>CSS Fixed Positioning</title>
</head>
<body>
<div id="wrapper">
<a href="index.html" id="homeLink"><img src="Images/littleHome.png" alt="Home"></a>
<h1>CSS Fixed</h1>
<h2>In Upper-Left Corner</h2>
<div id="explanation">
<p>The h1 element on this page has fixed positioning.</p>
<p>It will not move from it's place in the upper-left corner when the window is scrolled.</p>
</div>
</div>
</body>
</html>

Коми, які поділяють селектори, дозволяють «розділяти» декларації між селекторами. Правило, яке продемонстровано нижче, вказує, що всі елементи i, елементи класу “warning” і елементи з ідентифікатором id “important” будуть підкреслені.

i, .warning, #important {
 text-decoration: underline;
}

Ієрархія селекторів

Якщо правила конфліктують:

• Правило з більш специфічним селектором йде першим
• Якщо два селектора мають однаковий рівень специфічності, правило, яке вказано пізніше в документі, йде першим

Як визначається специфічність селектора

Припустимо, ваші селектори об’єднані в наступному порядку і ті, що нагорі мають найвищий рівень специфічності

1. Декларації в атрибутах стилю йдуть без селектора і володіють найвищим пріоритетом
2. Селектори з атрибутом ідентифікатора id (наприклад, h1 # foo {}) є наступними по важливості в ієрархії
3. Селектори з іншими атрибутами (наприклад, h1.foo і a [target]) або псевдокласи (наприклад, a: hover) розміщуються наступними в ієрархії найбільш важливих
4. Селектори без інших атрибутів крім імені елемента (наприклад, h1) займають наступну сходинку в ієрархії найбільш важливих
5. Універсальний селектор (*) володіє найменшим пріоритетом

Для коректного визначення точного значення специфічності, пройдіть наступний процес:

1. Почніть зі значення 0.0.0.0
2. Якщо ви знайдете декларацію в атрибуті стилю, ви повинні змінити першу цифру на 1, що дасть вам 1.0.0.0. Тоді ви отримуєте найвище значення специфічності і необхідності в подальших розрахунках немає
3. Кожного разу, коли настає умова 2, додайте 1 до другої цифри. Наприклад, для ol # foo li # bar додайте 2 (1 за кожний id), що дає вам 0.2.0.0
4. Кожного разу як ви стикаєтеся з третім випадком, додайте одиницю до третьої цифри. Наприклад, для ol # foo li # bar a [target] додайте 1, що дає вам 0.2.1.0.
5. Кожного разу, коли виконується умова 4, додайте 1 до четвертої цифрі. Наприклад, для ol # foo li # bar a [target] додайте 3 (по одному за кожне ім’я елемента), що дає нам 0.2.1.3

Коли ви порівнюєте специфічність двох селекторів, почніть з найбільших цифр ліворуч. Число, яке більше іншого, буде більш специфічним. Якщо вони рівні, йдіть далі і порівнюйте наступні цифри.

Каскад

Правила стилю можуть визначатися веб-дизайнерами в трьох різних місцях:

1. У запровадженому стилі
2. У зовнішній таблиці стилів (на яку посилається HTML-файл або яка імпортується)
3. У рядку елемента

Впроваджені таблиці стилів

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

Приклад коду

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Embedded Style Sheet</title>
<style type="text/css">
.warning {color:#ff0000}
h1.warning {text-decoration:underline}
p.warning {font-weight:bold}
</style>
</head>
<body>
<h1 class="warning">WARNING</h1>
<p class="warning">Don't go there!</p>
</body>
</html>

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

Позиціонування

Властивість position застосовується для опису елемента, коли він позиційований (розміщений) абсолютно (absolute), щодо (relative), статично (static) або фіксовано (fixed).

Значення static – це значення за замовчуванням для всіх елементів. Воно визначає нормальне розташування елементів, як вони зазвичай зустрічаються в HTML-документі.

Значення relative дуже схоже з static, з тією лише різницею, що ви можете змістити елементи з його колишнього розташування за допомогою значень top, right, bottom і left.

Значення absolute витягує елемент зі стандартного потоку HTML-документа і трансформує його у повністю новий світ. У цьому маленькому і божевільному світі можна розміщувати абсолютно позиційовані елемент у будь-якій частині сторінки, якщо використовувати значення top, right, bottom та left.

Значення fixed діє схожим чином, що і absolute. Різниця в тому, що елемент позиціонується щодо вікна браузера, а не сторінки. У результаті елемент, позиційовані за допомогою fixed завжди знаходиться на одному і тому ж місці, навіть якщо ви прокручуєте вікно в браузері. Це в теорії. На практиці техніка ідеально працює в браузерах Mozilla і Opera, але в IE ви можете зіткнутися з проблемами.

Розкладка сторінки з використанням абсолютного позиціонування

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

<div id="navigation">
<ul>
<li><a href="this.html">This</a></li>
<li><a href="that.html">That</a></li>
<li><a href="theOther.html">The Other</a></li>
</ul>
</div>

<div id="content">
<h1>Ra ra banjo banjo</h1>
<p>Welcome to the Ra ra banjo banjo page. Ra ra banjo banjo. Ra ra banjo banjo. Ra ra banjo banjo.</p>
<p>(Ra ra banjo banjo)</p>
</div>

Досягнемо бажаного за допомогою цих значень CSS:

#navigation {
	position: absolute;
	top: 0;
	left: 0;
	width: 10em;
}

#content {
	margin-left: 10em;
}

Цей фрагмент коду розміщує панель навігації на лівій стороні і задає ширину колонки в 10 em. Оскільки навігація позиційована абсолютно, вона не зачіпається потоком решти сторінки. Отже, все, що потрібно, це встановити ліве поле (left margin) області контенту рівним ширині панелі навігації.

Нескладно. Зрозуміло, двухколоночною технікою це не обмежується. Використовуючи позиціонування з розумом, ви можете розставити практично необмежену кількість колонок. Коли потрібно додати третю колонку, ви просто додаєте в HTML-документ новий фрагмент “navigation2″ і змінюєте CSS:

#navigation {
	position: absolute;
	top: 0;
	left: 0;
	width: 10em;
}

#navigation2 {
	position: absolute;
	top: 0;
	right: 0;
	width: 10em;
}

#content {
	margin: 0 10em; /* setting top and bottom margin to 0 and right and left margin to 10em */
}

Єдиний недолік абсолютно позиційованих елементів пов’язаний з маленьким світом, який вони населяють – неможливо сказати, де вони закінчуються. Тим з вас, хто вирішить скористатися наведеними вище прикладами на своїх сторінках з невеликою навігацією і великою зоною контенту, рішення підійде відмінно, особливо у разі використання відносних значень для завдання ширини і розмірів. Однак ви повинні залишити надії розмістити що-небудь, наприклад, підвал, під цими елементами. Для досягнення цієї мети треба використовувати float для розміщення фрагментів, а не абсолютне позиціонування.

Floating

Елемент з атрибутом float буде переміщений на праву чи ліву сторону, а навколишній контент буде його обтікати.

Floating (обтікання) зазвичай застосовується для позиціонування маленьких елементів на сторінці, але ви також можете застосовувати його до великих фрагментів, наприклад колонкам навігації.

Розглянемо HTML-приклад. Можна додати такі правила CSS:

#navigation {
	float: left;
	width: 10em;
}

#navigation2 {
	float: right;
	width: 10em;
}

#content {
	margin: 0 10em;
}

Якщо наступний елемент не повинен «огинати» float-об’єкти, можна додати властивість clear . clear: left очищає float-елементи ліворуч, clear: right – праворуч, а clear: both робить так, щоб float-елементів не було з обох сторін – зліва і справа. Таким чином, щоб, наприклад, додати підвал на сторінку, вам буде потрібно помістити HTML-фрагмент id “footer” і додати цей рядок в CSS-файл:

#footer {
	clear: both;
}

Ось і все. У вас буде підвал (футер), який завжди буде показуватися під колонками, незалежно від їх довжини.

Це було лише коротке введення в позиціонування і розстановку елементів за допомогою float, де розміщення великих елементів на сторінці може обернутися стресом. Але треба завжди пам’ятати, що такі техніки можуть бути застосовні до всіх елементів, всередині цих фрагментів. Використовуючи значення Float, позиціонування, padding, marging та межі ви можете реалізувати будь-який проект. І все, що можна досягти за допомогою таблиць, можна зробити за допомогою CSS.

Єдиним виправданням використання таблиць в розкладці сторінки можна вважати ситуацію, коли сторінка створюється для дуже старих браузерів. Ось чому CSS – це сучасне рішення: воно надає вам доступні сторінки, які важать менше, ніж такі ж, але зверстані за допомогою таблиць.