Лекція 14. СТИЛІ

 

Лекція 14. СТИЛІ

 

Стиль HTML – це набір характеристик шрифту, символів і абзацу, застосованих до певної частини документа. Використання стилів дозволяє уникнути необхідності додавання до HTML нових тегів форматування, оскільки нові команди форматування можуть включатись у стиль, а не у HTML - файл. Застосування стилів дозволяє з меншими затратами праці оновлювати сторінки, оскільки форматування буде відділене від змісту.

Таблиці каскадних стилів ( Cascading Style Sheets )

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

Internet Explorer підтримує стилі, які задаються одним із способів:

-       вбудовані стилі ( Global Style Sheets ) визначають стиль елементів у всьому документі. Інформація про стиль задається в заголовку документа з використанням тегів <STYLE> і </STYLE>;

-       залучені стилі ( Linked Style Sheets ) – інформація про стиль зберігається у окремому файлі, вказаному у тегу <LINK>, і може бути використана для декількох документів;

-       внутрішні стилі ( Inline Style Sheets ) – інформація про стиль розміщується всередині тега HTML і  поширюється на весь текст між цим тегом і відповідним йому кінцевим тегом.

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

Всі елементи Web-сторінки можна поділити на блокові і рядкові. Типовим прикладом блокового елементу є малюнок (тег <IMG>). Рядковим елементом є окреме слово або рядок тексту, але цілий абзац вважається блоковим елементом. Стилі, які можна застосувати до блокових і рядкових

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

До блокових елементів відносяться:

- абзац тексту (<P>);

- малюнок, графічне зображення (<IMG>);

- таблиця (<TABLE>);

- список (<OL>,<UL>).

Крім того, блоковим елементом розмітки можна примусово зробити будь -

який рядок і навіть будь-яке слово в документі, застосувавши до нього теги

<DIV> …</DIV>.

Розміщення будь-якого елемента між цими тегами дозволяє застосувати до нього атрибути стилю, пов‘язані з межами, відступами, “набивками” та ін.


Розглянемо абзац як блоковий елемент (див. рис.1)

РИС.1

 

Абзац як блоковий елемент має такі характеристики:

- висоту і ширину (height, width);

- межі;

- обтікання, тобто положення блоку           відносно тексту, який знаходиться поряд;

- поле і “набивка” (margin, padding).

“Набивкою” називається відстань від межі блокового елемента до межі його вмісту. Відстань від межі блоку до зовнішнього блокового елемента називається відступом або зовнішнім відступом.

Правила запису CSS задаються у формі простих і групових селекторів.

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

Селектор { властивість CSS: значення }

Селектор - це будь-який із розглянутих тегів HTML (наприклад, BODY, P, H1, LI). Далі у фігурних дужках декларується значення властивостей CSS, які визначають стиль даного елемента в документі.

Наприклад:

H1 {color:red} – задає стиль заголовкам першого рівня.

Для зручності використання можна декларувати у одному правилі декілька властивостей CSS для декількох селекторів.

Наприклад:

BODY {background-color:white; color:black; font-family:Times New Roman;   font-style:normal;  font-size:10pt}   (задає  стиль   всьому  тілу документа замість атрибутів тегу BODY).

 

Параметри шрифтів і абзаців, доступні  в стилях HTML

Параметр            Можливі значення

Font-family         Будь-який шрифт, інсталюваний у Windows

Font-size             Будь-який розмір шрифту в              пунктах (pt), дюймах (in), сантиметрах (cm) або пікселях (px)

Font-weight         Виділення (“жирність”) шрифта: Normal, bold (звичайний, напівжирний)

Font-style             Стиль елемента – звичайний або курсив (Italics)

Font-decoration   “Оформлення” тексту: none, underline, italic, line- through (відсутній, підкреслений, нахилений, перекреслений)

Color                   Будь-яке значення RGB або англійська назва кольору

Text-align            Left, center, right, justify (ліворуч, по центру,праворуч, по ширині)

Text-indent          Відступ - будь-яка величина в пунктах (pt),дюймах (in), сантиметрах (cm) або пікселях (px)

Параметри обтікання, тобто позиціонування елементів на сторінці, дозволяють створити ефект, при якому блоковий елемент не розриває текст, а вбудовується в нього. Цього ефекту дозволяє досягти атрибут float.

Значення атрибуту float

Left               Блок притиснутий ліворуч, текст обтікає його праворуч

Right            Блок притиснутий праворуч, текст обтікає його ліворуч

Both             Текст обтікає блок з обох боків

Відступ і набивка разом становлять те поле, яке знаходиться між межею основного елемента (сторінки) і вмістом внутрішнього (вкладеного) елемента. Поле і набивку можна задати як одразу для всього блоку, так і для кожної

сторони окремо.

Padding-right         Набивка праворуч

Padding-left           Набивка ліворуч

Padding-top           Набивка зверху

Padding-bottom        Набивка знизу

Margin-right          Праве поле (відступ)

Margin-left             Ліве поле

Margin-top            Верхнє поле

Margin-bottom    Нижнє поле

Границі блоку можуть характеризуватись кольором, шириною, стилем.

Колір для всієї границі задається “border-color:колір”. Для кожної лінії границі можна задати колір окремо:

Border-right-color – колір правої лінії;

Border-left-color – колір лівої лінії; Border-top-color – колір верхньої лінії; Border-bottom-color – колір нижньої лінії.

Ширина границі блоку визначається атрибутом border-width, вона може задаватись у пікселях (px), друкарських пунктах (pt) або у відсотках (%).

Можна окремо вказати ширину правої, лівої, верхньої і нижньої лінії: border- right-width, border-left-width, border-top-width, border-bottom-width.

Для границі можна задати стиль за допомогою атрибута border-style:

None – границі не відображуються; Solid – безперервна лінія;

Dotted – пунктирна лінія;

Dashed – штрихова лінія; Double – подвійна лінія; Groove – об‘ємна канавка; Ridge – об‘ємний гребінець; Incet – складка всередину; Outset – складка назовні.

НАПРИКЛАД:

<p style=”border-color:red;border-style:dashed;border-top:10px purple double”>

(абзац  буде окреслений зверху подвійною лінією бузкового кольору

шириною 10 пікселів, решта ліній – червоні штрихові). </p>

Списки

CSS дозволяють управляти формою маркера, який розташований поряд з елементом списка за допомогою атрибута list-style-type:

disk – маркер у вигляді диску;

circle – маркер у вигляді кола;

square – маркер у вигляді квадрата.

У нумерованих списках встановлюються такі значення атрибута: Lower-roman – малі римські цифри (i, ii, iv,…);

Lower-alpha – малі латинські букви (a,b,c,d,..);

Upper-roman – великі римські цифри (I,II,IV,…); Upper-alpha – великі латинські букви (A,B,C,D,F,..); Decimal – цифри (1,2,3,…).

За допомогою атрибута list-style-position можна визначити, яким чином буде розташований маркер відносно списка. Атрибут може приймати значення:

inside – значення елемента списку виходить за рівень маркера;

outside – значення елемента списку не виходить за рівень маркера.

Колір і фон сторінки

Фон сторінки задається атрибутом background-color:колір.

Фоновий малюнок задається за допомогою атрибута background-image: ім‘я файла.

Вбудовані стилі

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

Наприклад, в документі текст має бути шрифтом Arial розміром 14 пунктів, колір тексту чорний, вирівнювання по ширині, заголовки шрифтом Arial розміром 16 пунктів, курсив, вирівнювання по центру:

<HTML>

<HEAD>

<STYLE TYPE=”TEXT/CSS”>

P  {color:  black;  font-family: Arial;  font-size:14 pt;  font-style:italic; text- indent:45 px; text-align:justify;}

H1 {color:black; font-size:16 pt; font-family: arial; text-align:center; font-

style:italic}

</STYLE>

</HEAD>

<BODY>

<H1>Свята й обряди календарного циклу</H1>

<P>  Календарні свята  й  обряди  -  складний фольклорний комплекс, в якому             поєднуються раціональний досвід і релігійно-магічні вірування,

високоестетичні традиції та пережиткові звичаї.</P>

</BODY

</HTML>

Відображення  програмою-броузером:

 


Залучені стилі

У випадку, якщо планується використовувати одні і ті ж стилі на декількох HTML-сторінках, найбільш ефективним буде  збереження інформації про стилі у файлі, до якого будуть звертатись всі HTML-документи.

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

Файл стилів зберігається з розширенням .css

Файл STYLE.CSS:

P {color:black; font-family: arial; font-size:14 pt;font-style:italic; text-

align:justify;}

H1 {color:black; font-size:16 pt; font-family: arial; text-align:center; font- style:italic}

 

Використовуючи тег <LINK> в заголовку кожного HTML-документа можна посилатись на цей файл таким чином:

<HEAD>

<TITLE> Мій документ </TITLE>

<LINK REL=STYLESHEET HREF=”C:/SITE/STYLE.CSS”>

</HEAD>

Атрибут REL описує відношення файла, який залучається, до основного, тобто те, що залучуваний файл є файлом стилів.

Внутрішні стилі

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

Приклад:

<P STYLE=”text-align:center; color:blue”>

Національне вбрання

</P>

<P>

Народні заняття

</P>

(Текст «Національне вбрання» буде розташований по центру і одержить синій колір. Цей стиль діє до тега </p>, і в цьому місці броузер повернеться до того  стилю, який використовувався до задання цього внутрішнього стилю).

 

Tags: 
WEB-програмування (4 курс HTML)