metoda / Metod_sam_IT_ta_tehnol_Internet_2010_ukr

4.2.2 Селектори

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

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

Приклад: h1 {color:red; size:20pt;}

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

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

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

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

Приклад: h1.blue {color:blue; size:20pt;}

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

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

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

Приклад: .green {color:green;}

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

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

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

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

Ідентифікатори використовуються в основному для додання одному або декільком елементам одного класу індивідуальних властивостей. Приклад:

<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 може використовуватися без зазначення класу.

Контекстуальні селектори (Contextual Selectors) – це з’єднання декількох звичайних селекторів. Стиль задається тільки елементам у заданій послідовності залежно від каскадного порядку.

Приклад: p em {color:silver;}.

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

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

Якщо потрібно надати декільком елементам Web-сторінки однакові властивості, при визначенні селектори перелічуються через кому перед блоком властивостей.

Приклад: h1,h2,h3,p,strong {color:green; font-style:italic;}

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

4.2.3 Таблиці стилів

Використання внутрішніх стилів мало чим відрізняється від використання звичайних 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 (ISS) вийшов більшим, ніж 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>, але це менш грамотно.

Содержание