Гиперссылка в HTML-документах

1. 6 Каскадні таблиці стилів (Cascade Style Sheets – CSS) 

Основним поняттям CSS є стиль – тобто набір правил оформлення і форматування, який може бути застосований до різних елементів сторінки.

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

В даний час мова CSS налічує досить велику кількість властивостей елементів HTML, якими вона може управляти.  

Властивості елементів

Властивості шрифту

font-family

Використовується для вказівки шрифту, яким відображатиметься елемент.
P {font-family: Times New Roman, serif;}

font-weight

Визначає ступінь жирності шрифту за допомогою трьох параметрів: lighter, bold, bolder
B {font-weight: bolder;}

font-size

Встановлює розмір шрифту. Параметр може вказуватися як у відносній (відсотки), так і абсолютній величині (пункти, пікселі, сантиметри)
H2 {font-size: 150px;}
H3 {font-size: 400pt;}

Колір елемента і колір фону

color

Визначає колір елемента
I {color: yellow;}

background-color

Встановлює колір фону для елемента – саме для елемента, а не для сторінки.
<H1 style="background-color: gold; color: brown;">Sheets</H1>

Властивості тексту

text-decoration

Встановлює ефекти оформлення шрифту, такі, як підкреслення або закреслюваний текст
H4 {text-decoration: underline;}
А {text-decoration: none;}
. wrong {text-decoration: line-through;}

text-align

Визначає вирівнювання елемента.
P {text-align: justify}
H1 {text-align: сеnter}

text-indent

Встановлює відступ першого рядка тексту. Частіше за все використовується для створення параграфів з табульованим першим рядком.

line-height

Управляє інтервалами між рядками тексту.
P {line-height: 50 %}

Властивості меж

margin-left

Встановлюють значення відступів навкруги елемента.
IMG {margin-right: 20pt}
P {margin-left: 2cm}

margin-right
margin-bottommargin-top

Встановлюють значення відступів навкруги елемента.
IMG {margin-right: 20pt}
P {margin-left: 2cm}

Одиниці вимірювання

px

Пікселі

cm

Сантиметри

mm

Міліметри

pt

Пункти (друкар. )

%

Відсотки

Способи застосування стилів

Отже, розрізняють чотири способи застосування стилів:

  • перевизначення стилю в елементі розмітки
  • розміщення опису стилю в заголовку документа в елементі STYLE
  • розміщення посилання на зовнішній опис через елемент LINK
  • імпорт опису стилю в документ

Перевизначення стилю

Під перевизначенням стилю в елементі розмітки ми розуміємо застосування атрибута STYLE в даному елементі розмітки:

<h1 style="font-weight:normal; font-style:italic; font-size:10pt;"> Заголовок першого рівня </h1>

Атрибут (style) можна застосувати усередині будь-якого елемента розмітки.

Очевидно, що не всякі параметри стилю можна встановити для конкретного елемента розмітки.

Тут же слід зазначити наступне: стилі розроблені в першу чергу для управління відображенням тексту. Не слід захоплюватися стилями при управлінні відображенням не текстових елементів HTML-розмітки .

Елемент STYLE

Застосування елемента STYLE - це основний спосіб упровадження каскадних таблиць стилів. Окрім управління відображенням елементів розмітки елемент STYLE дозволяє описувати стильові властивості елементів, які можна змінювати при програмуванні на JavaScript

Елемент STYLE дозволяє визначити стиль відображення для:

  • стандартних елементів HTML-розмітки
  • довільних класів (селектор class)
  • HTML-об'єктів (селектор id)

Стандартні елементи розмітки описуються в елементі STYLE наступним способом:

<head>

<style>

p {color:darkred;text-align:justify;font-size:8pt;} </style>

</head>

<body>

<p>

Цей параграф ми використовуємо як приклад застосування опису стилю

</p>

</body>

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

Посилання на зовнішній опис

Посилання на опис стилю, розташований за межами документа, здійснюється за допомогою елемента LINK, який розміщують в елементі HEAD. Зовнішній опис може представляти з себе файл, зміст якого - опис стилів. Опис стилів в цьому файлі по синтаксису в точності співпадатиме із змістом елемента STYLE.

Нижче наведений приклад посилання на зовнішній опис стилів:

<link type="text/css" rel="stylesheet href="http"://путь. ru/my_css. css">

Важливими тут є значення атрибутів rel і type. Rel зобов'язаний мати значення "stylesheet". Type може приймати значення: "text/css" або "text/javascript". Другий тип опису стилів введений Netscape. Його ми в даному учбовому курсі не обговорюємо.

Атрибут href задає універсальний локатор ресурсу (URL) для зовнішнього файлу опису стилів. Це може бути посилання на файл з будь-яким ім'ям, а не тільки на файл з розширенням *. css.

Імпорт опису стилів

Імпорт описувачів стилів - це в деякому розумінні конкурент описаному вище вказівці на зовнішній описувач стилю.

Імпортувати стиль можна або всередину елемента STYLE, або всередину зовнішнього файлу, яким є описувач стилю. Оператор імпорту стилю повинен передувати всім іншим описувачам стилів:

<style>

@import:url(http://путь. ru/style. css)

а {color:cyan; text-decoration:underline;}

</style>

Стиль, що імпортується, можна перевизначити або через описувач елемента в STYLE, або через атрибут елемента style.  

1 2 3 4 5 6 7

Похожие работы