CSS
Підключення
<link rel=”stylesheet” type=”text/css” href=”mystyle.css” media=”all” />
Також можливо підключати в середині документа (так не роблять!)
Варіант 1 |
Варіант 2 |
<style type=”text/css”> ... </style> |
<p style=”color: red”> Я абзац виділений червоним кольором </p> |
Правило @media дозволяє вказати тип носія, для якого буде застосовуватися зазначений стиль. В якості типів виступають різні пристрої, наприклад, принтер, КПК, монітор та ін У табл. 1 перераховані деякі з них.
Тип |
Опис |
all |
Всі типи. Це значення використовується за умовчанням |
aural |
Мовні синтезатори, а також програми для відтворення тексту вголос. Сюди, наприклад, можна віднести мовні браузери |
braille |
Пристрої, засновані на системі Брайля, які призначені для сліпих людей |
handheld |
Планшети комп'ютери і аналогічні їм апарати |
Друкуючі пристрої на кшталт принтера |
|
projection |
Проектор |
screen |
Екран монітора |
tv |
Телевізор |
Синтаксис
Html селектори
Це найпростіший випадок - в якості селектора ми використовуємо ім'я того html-елемента, який хочемо змінити. Наприклад, для тега <strong> селектором буде strong. Відповідно, для тега <h1>селектором буде h1, і так далі. Тепер ми можемо перевизначити зовнішній вигляд всіх таких елементів в нашому документі:
strong {
font-weight: normal;
color: red;
} h1 { font: bold 10pt verdana; }
Селектори класа
«Клас» - це якесь ім'я, рядок, яке ми можемо застосувати до будь-яких HTML-тегам, щоб згодом посилатися на них по імені класу. Як ім'я класу ви можете використовувати практично будь-який рядок. Зручність таких селекторів в тому, що можна привласнити одне ім'я класу безлічі html-тегів в документі і потім управляти їх зовнішнім виглядом, звертаючись до них по імені класу:
.myClass { font: bold 10pt verdana; } /* змінюєм шрифт для всіх тегів з класом myClass */
Id селектори
Будь ідентифікатор (ID) - це якесь ім'я, яке ви, так само, як і у випадку з класами, можете застосувати до будь-якого HTML-тегу. Основна відмінність - ID повинен бути унікальний в рамках html-документа:
#myObj{ margin: 1em;} /* змінюємо поля для елемента в якого id=”myObj” */ span#today { margin: 1em; } /*змінюємо поля для елемента span, у якого id=”today”*/
Як застосувати один стиль до кількох селекторів
Дуже поширена завдання - застосувати один набір правил до кількох різних селекторів. Це робиться елементарно - достатньо перерахувати селектори через кому:
/ * Всі параграфи і списки робимо червоними, шрифтом Tahoma * /
p,
li,
ul,
ol {
color:red;
font-face:
Tahoma, sans-serif;
}
Селектори які залежать від контексту
<html>
<head>
<title></title>
<link href="lib/style/style.css" rel="stylesheet" type="text/css"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<ul>
<li><a href=”#”>ссилка</a></li>
<li><a href=”#”>ссилка</a></li>
</ul>
<table>
<tbody>
<tr>
<td>
<p>
<a href=”#”>ссилка</a>
</p>
</td>
</tr>
</tbody>
</table>
</body>
<html/>
/ * всі посилання, що знаходяться всередині списків, стануть червоними: * /
li a {color: red;} / * всі посилання в параграфах, знаходяться всередині таблиць, стануть зеленими: */
table p a {color: green;}
Це найпоширеніший метод створення контекстуальних селекторів, який називається «селектором нащадків». Розберемо його докладніше.
«Нащадками» елемента HTML називаються будь вкладені в нього елементи: це його «діти» (тобто безпосередньо вкладені), діти його дітей, і так далі, вглиб ієрархії тегів.
Правильно використовуючи селектори, ми можемо прицільно застосувати CSS стилі до потрібних елементів, пославшись на їх батьківський елемент. Для цього перед селектором шуканого елемента треба вставити селектори його «предків», розділивши їх пропуском.
У наведеному прикладі ми начебто створили список селекторів, розділений пробілами. Насправді це один селектор нащадків. Він вказує на всі гіперпосилання (елементи A) вкладені в списки (елементи LI), в свою чергу знаходяться всередині елемента з ідентифікатором footer. У всіх таких гіперпосилань ми міняємо товщину шрифту на bold (напівжирний шрифт).