Псевдо-елементи в селекторах

ТЕОРЕТИЧНІ ВІДОМОСТІ

Базові поняття

Cascading Style Sheets (Каскадні таблиці стилів) –це мова,яка містить набір властивостейдля опису зовнішнього виду будь-якого HTML-документу. З її допомогою дизайнер має повний контроль над стилем і розташуванням кожного елементу веб-сторінки.

Для чого потрібен CSS? Наприклад, необхідно створити червоний заголовок:

<h1><font color=”red”><b><u>TEКСT</font></h1>

А якщо подібний стиль необхідно використати 10-20 раз? У такому разі необхідно використати CSS.

H1 { color: red }

Приведений приклад є простим правилом CSS. Правило складається з двох основних частин: селектора (‘H1’) і визначення (‘color:blue’). Визначення у свою чергу теж складається з двох частин: властивості (‘color’) і значення (‘blue’). У той час, як приведений приклад впливає тільки на одну з властивостей, необхідних для побудови HTML документа, він уже є таблицею стилів. Скомбінований з іншими таблицями стилів (одним з фундаментальних властивостей CSS є комбінування таблиць стилів) він буде визначати кінцевий вигляд усього документа. Властивість 'color' є одним з порядку 50 властивостей, що визначають вид HTML документа.

Включення в HTML

Для того, щоб таблиця стилів впливала на вигляд документа, броузер повинний знати про її існування. Специфікація HTML визначає три способи включення таблиць стилів у HTML.

<HTML>

<HEAD>

<TITLE>title</TITLE>

H1 { color: blue } </STYLE> </HEAD> <BODY>

<H1>Headline is blue</H1>

<P STYLE="color: green">While the paragraph is green. </BODY>

</HTML>

Даний приклад демонструє три способи об'єднання стилю з HTML: використовуючи елемент 'LINK' для зв'язку з зовнішньою таблицею стилів, використовуючи елемент 'STYLE' всередині елемента 'HEAD' і використовуючи атрибут 'STYLE' в елементі всередині секції 'BODY'. Відповідно до трьох способів об’єднання документів, CSS розрізняють на три типи: зв’язані (Linked Style Sheets - LSS), глобальні (Global Style Sheets - GSS) та внутрішні таблиці стилів (Inline Style Sheets - ISS). Останній спосіб змішує стиль із вмістом і тому втрачає відповідні достоїнства традиційних таблиць стилів.

Групування

Для зменшення розміру таблиці стилів можна групувати селектори в розділені комами списки:

H1, H2, H3 { font-family: helvetica }

Так само можна групувати визначення.

H1 { font-weight: bold; font-size: 12pt; line-height: 14pt;

font-family: helvetica; font-variant: normal; font-style: normal;

}

Крім цього, деякі властивості мають власний синтаксис угруповання:

H1 { font: bold 12pt/14pt helvetica }

що еквівалентно попередньому прикладу.

Псевдо-елемент 'first-letter'

Псевдо-елемент 'first-letter' використовується для створення ефекту буквиці, що є розповсюдженим типографським ефектом. Цей елемент подібний до 'first-line', тільки стосується першої літери.

Наступний приклад дозволяє створити ефект буквиці, коли висота першої букви дорівнює висоті двох рядків.

Приклад:

<HTML>

<HEAD>

<TITLE>Title</TITLE> <STYLE TYPE="text/">

P	{ font-size: 12pt; line-height: 12pt }
P:first-letter { font-size: 200%; float: left }
SPAN	{ text-transform: uppercase }

</STYLE>

</HEAD>

<BODY>

<P><SPAN>The first</SPAN> few words of an article in The Economist.</P> </BODY>

</HTML>

Псевдо-елементи в селекторах

У контекстних селекторах псевдо-елементи допускаються тільки наприкінці селектора:

BODY P:first-letter { color: purple }

Псевдо-елементи можуть у селекторах комбінуватися з класами.

Приклад:

P.initial:first-letter { color: red }

<P CLASS=initial>First paragraph</A>

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

ХІД РОБОТИ

1. Освоїв основні принципи створення каскадних таблиць стилів.

2. Вивчив основні відмінності побудови різних типів CSS, засвоїти синтаксичні конструкції побудови елементів CSS.

3. Практично освоїв методи побудови каскадних таблиць стилів.

XHTML код

Рис.1 XHTML - код

CSS код

Рис. 2 CSS- код фону

Рис.3 CSS – код фото

Рис.3 Результат

Висновок: На цій лабораторній роботі я практично освоїв основних принципів створеннякаскадних таблиць стилів (CSS), вивчення основних конструкцій та синтаксису CSS.