CSS: відмінності між версіями
| [перевірена версія] | [перевірена версія] |
Вилучено вміст Додано вміст
м заміна застарілого тегу source |
|||
Рядок 58:
Приклад:
<
p {
font-family: Verdana, sans-serif;
Рядок 84:
color: red;
}
</syntaxhighlight>
В прикладі використано 7 правил, селектори <code>p</code>, <code>h2</code>, <code>.note</code>, <code>p.warning</code>, <code>#paragraph1</code>, <code>a:hover</code> та <code>#news p</code>.
Приклад властивості: <code>color: red</code>, де властивості з назвою <code>color</code> присвоєно значення <code>red</code>.
Рядок 96:
Третє правило також можна записати як <code>*.note</code>.<br/>
Щоб третє правило застосовувалося лише до абзаців, його слід переписати як:
<
p.note {
color: red;
Рядок 102:
font-weight: bold;
}
</syntaxhighlight>
Четверте правило стосується тих елементів рівня абзацу (p), що мають властивість <code>class</code> рівну 'warning'. Такі абзаци матимуть фонове зображення warning.png згори.
Рядок 119:
CSS може також містити коментарі. Синтаксис коментарів подібний до синтаксису, що використовується в багатьох [[мова програмування|мовах програмування]] (наприклад [[C (мова програмування)|C]], [[PHP]]). Слід звернути увагу на те, щоб в коментарях CSS-файлів не використовувалися [[Кирилиця|кириличні]] літери (деякі браузери некоректно обробляють CSS-файли з українськими літерами<ref>[http://cssing.org.ua/2006/12/23/ie-css-russian-comments-bug/ CSS, UTF и Интернет эксплорер], 2006{{ref-ru}}</ref>).
<
/* comment */
</syntaxhighlight>
=== Селектори та Псевдо-класи ===
Рядок 139:
Селектори можуть поєднуватися й іншим чином для досягнення більшої гнучкості (див. [http://www.w3.org/TR/CSS21/selector.html визначення селекторів на сайті W3C]).
В наступному прикладі кілька селекторів об'єднуються через кому<ref>[http://www.w3.org/TR/CSS1#contextual-selectors contextual-selectors]</ref>. Правило встановлює шрифт для HTML-заголовків всіх рівнів.
<
h1, h2, h3, h4, h5, h6 {
font-family: "Arial", sans-serif;
}
</syntaxhighlight>
=== Приєднання до сторінки ===
Рядок 149:
Включення CSS-файлу до сторінки ([[XHTML]]):
<
<link rel="stylesheet" href="example.css" type="text/css" />
</syntaxhighlight>
Включення CSS-файлу до сторінки ([[HTML]]):
<
<link rel="stylesheet" href="example.css" type="text/css">
</syntaxhighlight>
Імпорт CSS-файлів до HTML та XHTML-сторінок:
<
<style type="text/css">
@import "example.css";
</style>
</syntaxhighlight>
CSS може бути визначений в <code><head></code> частині сторінки або для елементу сторінки через <code>style</code>.
Включення CSS-файлу до [[XML]]-сторінки:
<
<?xml-stylesheet type="text/css" href="example.css"?>
</syntaxhighlight>
== Історія ==
| |||