Заглавная страница
Избранные статьи
Случайная статья
Познавательные статьи
Новые добавления
Обратная связь

ТОП 10 на сайте

Приготовление дезинфицирующих растворов различной концентрации

Техника нижней прямой подачи мяча.

Франко-прусская война (причины и последствия)

Организация работы процедурного кабинета

Смысловое и механическое запоминание, их место и роль в усвоении знаний

Коммуникативные барьеры и пути их преодоления

Обработка изделий медицинского назначения многократного применения

Образцы текста публицистического стиля

Четыре типа изменения баланса

Задачи с ответами для Всероссийской олимпиады по праву

Мы поможем в написании ваших работ!

ЗНАЕТЕ ЛИ ВЫ?

Влияние общества на человека

Приготовление дезинфицирующих растворов различной концентрации

Практические работы по географии для 6 класса

Организация работы процедурного кабинета

Изменения в неживой природе осенью

Уборка процедурного кабинета

Сольфеджио. Все правила по сольфеджио

Балочные системы. Определение реакций опор и моментов защемления

Главная Избранные Случайная статья Познавательные Новые добавления Обратная связь FAQ

Заголовний стиль (елемент style)

⇐ ПредыдущаяСтр 23 из 33Следующая ⇒

Для розміщення інформації про стиль застосовується спеціальний контейнер <STYLE></STYLE>, що вставляється в заголовну частину документа й має вигляд:

</STYLE>

У цьому коді значення text/css атрибута type повідомляє браузеру, що в поточному файлі застосований текст мовою CSS. Усі формальні описи стилів, що представляють собою CSS-правила, містяться в елементі STYLE.

Наприклад,

<html>

<head>

<title>Анна Каренина</title>

<!-- Опис аркуша стилів >

H1 {font-size:15pt}

H1.curs {font-size:16pt; font-style: italic}

# blue {background-color: blue; color: white}

</style>

</head>

<body>

<h1>Часть первая</h1>

<h1 class="curs">Глава первая</h1>

<h1 id="blue">Все счастливые семьи похожи друг на друга, каждая несчастливая семья несчастна по-своему.</h1>

</body>

</html>

У даному прикладі всі елементи H1 будуть відображені шрифтом розміру 15pt, а деякі елементи H1, що виділені в клас curs, будуть представлені курсивом з розміром 16pt. Елемент, що позначено ідентифікатором id="red", буде виведено білим шрифтом на синьому фоні.

CSS-правила

Розглянемо загальні правила визначення й присвоєння стильових властивостей, які передбачені CSS:

1) відповідно до специфікації CSS стильові властивості вводяться за допомогою визначення стилю, яке прийнято позначати фігурними дужками. Наприклад,

{font-size:15pt};

2) в одному визначенні стилю може записуватися кілька властивостей через крапку з комою. Наприклад:

{color: blue; font-family: Arial; text-align: right};

3) відповідно до специфікації CSS призначення стилю тому або іншому елементу HTML складається у встановленні зв'язку:

Елемент {Визначення_стилю}.

Наприклад,

Р {font-family: Arial; font-size: 14pt}

#fl {width: 150; height: 100}.

Елемент, до якого відноситься стиль, що визначається називається селектором. В останньому прикладі селектори були представлені іменами HTML-елементів Р і ідентифікатором f1. Селектори, що збігаються з іменами тегів, позначають класи, а селектори, що починаються зі знака # («рамка»), відповідають унікальним ідентифікаторам елементів.

Селектори позначаються по імені елементів, до яких застосовується визначення стилю. Наприклад, селектор table вказує на те, що визначення стилю відноситься до елементів TABLE. Селектори нечутливі до регістра, однак в CSS прийнято записувати елементи прописними літерами.

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

Види селекторів

У специфікаціях CSS визначено кілька видів селекторів.

1. Селектори типу.

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

Р{ font-family:arial; font-size:14pt}

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

2.Селектори класу

HTML-елемент або група елементів, оформлених одним стилем, утворюють клас. Наприклад, елементи заголовків другого рівня, які однаково відформатовано, становлять клас.

Клас може позначатися так само, як і тип HTML-елемента, наприклад, абзаци документа утворюють клас Р. Однак частіше класу привласнюється формальне ім'я, що надалі буде пов'язане з певним набором стильових властивостей. Наприклад, клас із ім'ям blue:

HI.blue {color: blue}

Ім'я класу відділяється від імені елемента крапкою. Тому самому класу можуть належати різнотипні HTML-елементи. Для цього в список стилів вводиться CSS-правило із крапкою перед ім'ям класу, але без указівки назви елементів, наприклад,

.bgyellow { background-color: yellow}

Селектор. bgyellow позначає клас, а вираз у фігурних дужках - визначення стилю, що буде ставитися до будь-якого елемента класу bgyellow. Належність HTML-елемента цьому класу повинна бути зазначена в атрибуті class, наприклад:

<Р class="bgyellow">

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

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

Всі елементи з атрибутом class, наявні в документі, будуть відображені із застосуванням стилю, що задається селектором класу.

3. Селектори id

При розробці Web-сторінки часто виникає необхідність змінити стиль тільки одного елемента (не зачіпаючи стилів інших однотипних елементів). Простіше це зробити таким способом. Задайте за допомогою селектора id індивідуальний стиль, і цей стиль буде автоматично привласнений конкретному елементу, позначеному ідентифікатором id.

Наприклад:

#red {color: FF0000}

Потрібний елемент абзацу повинен містити однойменне значення атрибута id:

<Р id="red"> Цей абзац буде відображений червоним шрифтом </Р>

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

Ознакою селектора id є символ «#» перед ім'ям. Селектор id застосовується в межах тіла документа body для завдання індивідуального стилю оформлення конкретного елемента. У цьому складається його відмінність від селектора класу.

Зверніть увагу, що значення атрибутів class і id у тегах HTML записуються в одинарних (') або подвійних лапках ("). Селектор класу й селектор id в аркуші стилів указуються без лапок.

Стильові властивості

Значення властивостей

У визначенні стилю вказуються найменування властивостей і їх значення (числові й символьні).

Числові значення застосовуються для завдання розмірів, наприклад, ширини й висоти блоку, розміру шрифту, товщини рамки, міжрядкових інтервалів і т.д. Значення виражається десятковим числом, за яким звичайно слідує розмірність. Розмірність записується після числа без додаткового пробілу, наприклад, 8pt, lcm, 2.5in, 130%. У випадку негативного значення перед числом ставиться знак мінус (наприклад, -15рх).

Числові значення можуть виражатися в абсолютних або відносних одиницях:

· абсолютні значення задають точний розмір елемента й приводяться в стандартних одиницях виміру довжини;

· відносні значення визначають розмір елемента щодо іншого елемента. Наприклад, ширина зображення може виражатися у відсотках щодо ширини блоку, у який вкладений малюнок, або щодо розміру вікна браузера. Міжсимвольний інтервал часто задається в одиницях em ширини символу основного шрифту (букви «m»).

Одиниці виміру значень властивостей подані в таблиці 1.

Табл. 1. Одиниці виміру значень властивостей

Умовне позначення	Найменування одиниці виміру	Приклад
Абсолютні одиниці
in	дюйм	width:.25in
cm	сантиметр	height: 1.5cm
mm	міліметр	margin-left: 12mm
pt	пункт (1pt = 1/72in)	font-size: 16pt
pc	пік (1pc = 12pt)	line- height: 1.2pc
Відносні одиниці
px	піксел	left: 200px
em	ширина букви «m»	letter-spacing: 0.3em
ex	висота букви «m»	font-size: 2ex
%^	процент	width: 150%

Символьні значення складаються з букв латинського алфавіту або з комбінацій букв, цифр і спеціальних символів. Форма запису визначається стандартом CSS. Символьні значення привласнюються багатьом стильовим властивостям, наприклад, властивостям шрифтів font-family (гарнітура шрифту) і font-style (стиль виводу шрифту), властивості тексту text-align (вирівнювання). Іншим прикладом використання символьних значень є властивості кольору color і background-color, значення яких задаються в символьному форматі RGB-моделі.

У CSS для опису кольору застосовуються й інші формати RGB-моделі, які не підтримуються в HTML: десятковий формат (наприклад, rgb (128,0,128)) і процентний формат (наприклад, rgb(50%,0,50%)).

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

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

Розглянемо коротко властивості шрифтів:

· font - family - задає гарнітуру шрифту, що буде використана для виводу тексту. Значенням цієї властивості може бути назва конкретного шрифту (наприклад, Arial) або назва сімейства шрифтів. У специфікації CSS передбачені наступні сімейства: serif (наприклад, Times New Roman, Bodoni), sans-serif (наприклад, Arial, Future), cursive (наприклад, Caflisch Script), fantasy (наприклад, Alpha Geometrique), monospace (наприклад, Courier New). При визначенні властивості font-family можна вказувати список шрифтів, розділених комами, аналогічно тому, як це робиться при завданні атрибута face;

· font- size - визначає розмір шрифту. Значення розміру може бути задане в абсолютних одиницях (наприклад, l0pt, 8mm, 2in), у відсотках від основного шрифту (наприклад, 130%), а також за допомогою розмірних вираpазів: хх-small (надмілкий), х-small (дуже дрібний), small (дрібний), medium (середній), large (великий), х-large (дуже великий), хх-large (надвеликий), larger (більше), smaller (дрібніше);

· font - style - задає стиль виводу символів. Можливі наступні значення цієї властивості: normal (звичайний), italic (курсив) і oblique (похилий);

· font- weight - назначає ступінь «жирності» шрифту. Для цього використовуються цілі числа з діапазону від 100 до 900 із кроком 100 одиниць або ключові слова: bold (жирний), bolder (більш жирний) і lighter (більш тонкий);

· font - variant - указує варіант накреслення поточного шрифту. Для цієї властивості браузери підтримують два значення: small-caps (відображення малими прописними буквами) і normal (не впливає на відображення).

· font - «узагальнююча» властивість шрифту, у якій може бути зазначене значення будь-якого атрибута шрифту (font-family, font-size, font-style і т. ін.). Для цього значення властивостей упорядковуються у вигляді послідовності.

Приклади завдання властивостей шрифту:

Р { font-family: helvetica, arial}

STRONG { font-size: 150%}

DIV.imono {font-family: monospace; font-size: larger; font-variant: small-caps}

Найменування властивостей не чутливі до реєстру символів. Однак звичайно використовують рядкові символи, як це прийнято в специфікації CSS.

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

Такі властивості, як міжрядковий інтервал, відстань між словами й буквами, називають властивостями тексту. Властивості тексту визначаються для абзаців, навіть, для всього документа, тобто задаються на рівні блоків (Р, DIV, BODY). Але ці властивості можна задавати й для окремих слів або декількох букв, тобто на рівні строкових елементів (SPAN, STRONG і ін.). Нижче перелічені основні властивості тексту, передбачені специфікацією CSS.

· letter-spacing - установлює відстань між буквами (міжсимвольний інтервал). За замовчуванням цій властивості привласнюється значення normal. Можна також указувати відстань у будь-яких абсолютних одиницях (див. таблицю 1);

· word - spacing - установлює відстань між словами. Аналогічно letter-spacing значенням цієї властивості за замовчуванням уважається normal. Інші значення можуть бути задані в абсолютних одиницях (наприклад, 10рх, 2mm);

· text- indent - задає відступ першого рядка абзацу («новий рядок»). Ця властивість застосовується до блоків, і його значення виражається в абсолютних одиницях (наприклад, 4mm, lcm, 20pt і т.д.) або у відсотках від ширини блоку (наприклад, 5% або 10%). За замовчуванням значення властивості text-indent дорівнює нулю. Якщо цій властивості привласнити негативне значення, то замість абзацного відступу одержимо виступ першого рядка;

· text - align - задає горизонтальне вирівнювання для тексту, розміщеного всередині елемента (наприклад, Р або DIV). Ця властивість приймає значення: center (по центру), left (уліво), right (вправо) і justify (за шириною). За замовчуванням текст вирівнюється по лівому краю. Ефект вирівнювання особливо помітний при великому розмірі шрифту й малій ширині вікна браузера;

· vertical-align - установлює розташування тексту й малюнків по вертикалі щодо базової лінії. Властивість може приймати, наприклад, наступні значення: baseline (вирівнювання по базовій лінії, приймається за замовчуванням), sub (вирівнювання по лінії нижнього індексу), super (вирівнювання по лінії верхнього індексу);

· line- height - визначає міжрядковий інтервал. Значення цієї властивості можна задавати в абсолютних одиницях (наприклад, 16pt, 3mm), у відсотках (130%), а також кількістю рядків (наприклад, 1.7 або 3).

Властивості кольору і фону

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

· color - установлює колір шрифту;

· background-color - задає колір фону, на якому буде виведено елемент. За замовчуванням ця властивість має значення none. Часто властивість background-color використовується спільно із властивістю color, що визначає колір тексту. Замість назви властивості background-color в аркушах стилів можна вказувати його скорочення background, наприклад, style="background: red";

· background-image - визначає вставку фонового зображення. Значенням цієї властивості є URL адреса малюнка. Наприклад, наступне CSS-правило

.pog {background-image: URL (myfig.jpg);};

задає для елементів класу pog фоновий малюнок, що зберігається у файлі myfig.jpg. Якщо зображення прозоре, то через нього будуть видні нижні об'єкти сторінки. Щоб цього не відбувалося, разом із розглянутою властивістю задається колір фону;

· background-repeat - призначає повтор фонового малюнка. Ця властивість застосовується, якщо розмір малюнка менше видимої області елемента. За замовчуванням має значення repeat - малюнок повторюється. Для повторення малюнка тільки по горизонталі вибирається значення repeat-х, тільки по вертикалі - repeat-у, а для відключення повторення - значення no-repeat.

⇐ Предыдущая 18 19 20 21 222324 25 26 27 Следующая ⇒

Читайте также:

Техника нижней прямой подачи мяча

Комплекс физических упражнений для развития мышц плечевого пояса

Стандарт Порядок надевания противочумного костюма

Общеразвивающие упражнения без предметов

Последнее изменение этой страницы: 2020-12-09; просмотров: 128; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 3.139.83.178 (0.048 с.)