Студопедия
Новини освіти і науки:
МАРК РЕГНЕРУС ДОСЛІДЖЕННЯ: Наскільки відрізняються діти, які виросли в одностатевих союзах


РЕЗОЛЮЦІЯ: Громадського обговорення навчальної програми статевого виховання


ЧОМУ ФОНД ОЛЕНИ ПІНЧУК І МОЗ УКРАЇНИ ПРОПАГУЮТЬ "СЕКСУАЛЬНІ УРОКИ"


ЕКЗИСТЕНЦІЙНО-ПСИХОЛОГІЧНІ ОСНОВИ ПОРУШЕННЯ СТАТЕВОЇ ІДЕНТИЧНОСТІ ПІДЛІТКІВ


Батьківський, громадянський рух в Україні закликає МОН зупинити тотальну сексуалізацію дітей і підлітків


Відкрите звернення Міністру освіти й науки України - Гриневич Лілії Михайлівні


Представництво українського жіноцтва в ООН: низький рівень культури спілкування в соціальних мережах


Гендерна антидискримінаційна експертиза може зробити нас моральними рабами


ЛІВИЙ МАРКСИЗМ У НОВИХ ПІДРУЧНИКАХ ДЛЯ ШКОЛЯРІВ


ВІДКРИТА ЗАЯВА на підтримку позиції Ганни Турчинової та права кожної людини на свободу думки, світогляду та вираження поглядів



Контакти
 


Тлумачний словник
Авто
Автоматизація
Архітектура
Астрономія
Аудит
Біологія
Будівництво
Бухгалтерія
Винахідництво
Виробництво
Військова справа
Генетика
Географія
Геологія
Господарство
Держава
Дім
Екологія
Економетрика
Економіка
Електроніка
Журналістика та ЗМІ
Зв'язок
Іноземні мови
Інформатика
Історія
Комп'ютери
Креслення
Кулінарія
Культура
Лексикологія
Література
Логіка
Маркетинг
Математика
Машинобудування
Медицина
Менеджмент
Метали і Зварювання
Механіка
Мистецтво
Музика
Населення
Освіта
Охорона безпеки життя
Охорона Праці
Педагогіка
Політика
Право
Програмування
Промисловість
Психологія
Радіо
Регилия
Соціологія
Спорт
Стандартизація
Технології
Торгівля
Туризм
Фізика
Фізіологія
Філософія
Фінанси
Хімія
Юриспунденкция






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

Елементи DIV і SPAN. Таблиці стилів.

HTML -документ може мати структуру, для якої недостатньо наявні елементи HTML. Елементи DIV і SPAN разом з атрибутами id і class забезпечують загальний механізм додавання структури в документи. Ці елементи визначають вбудовувану інформацію (SPAN) або інформацію рівня блоку (DIV), але не накладають ніяких інших виразів для представлення контексту. Припустимо, необхідно згенерувати документ у форматі HTML на основі бази даних інформації про клієнтів. Оскільки HTML не включає елементів для ідентифікації таких об'єктів як "клієнт", "номер телефону", "адреса електронної пошти" і так далі, використовуються елементи DIV і SPAN для досягнення потрібних ефектів структури і представлення. Для структуризації інформації може бути використаний елемент TABLE таким чином:

<DIV id="client-boyera" class="client">

<P><SPAN class="client-title">Інформація про клієнта: </SPAN>

<TABLE class="client-data">

<TR><TH>Прізвище:<TD>Boyera</TR>

<TR><TH>Ім'я:<TD>Stephane</TR>

<TR><TH>Тіл:<TD>(212) 555-1212</TR>

<TR><TH>Email:<TD>sb@foo.org</TR>

</TABLE>

</DIV>

Для елементів DIV і SPAN наявність початкового і кінцевого тега обов'язкова. Відмінність між цими елементами полягає у візуальному представленні - браузери ставлять переведення рядка до початку і після закінчення елементу DIV. У разі елементу SPAN це не відбувається.

Найчастіше ці елементи застосовуються у поєднанні з певними стилями, що дають можливість візуально представити структуру документу. Стиль - це набір правил оформлення і форматування, який може бути застосований до різних елементів сторінки. Визначення стильового оформлення HTML -документа проводиться за допомогою каскадних таблиць стилів (CSS - Cascading Style Sheets).

Існує цілих чотири способи зв'язування документу і таблиці стилів :

· Зв'язування - дозволяє використовувати одну таблицю стилів для форматування багатьох сторінок HTML

· Впровадження - дозволяє задавати усі правила таблиці стилів безпосередньо в самому документі

· Вбудовування в теги документу - дозволяє змінювати форматування конкретних елементів сторінки

· Імпортування - дозволяє вбудовувати в документ таблицю стилів, розташовану на сервері

Зв'язування - проводиться за допомогою елементу LINK :

<LINK REL="stylesheet" TYPE="text/css" HREF="URL">

Впровадження - варіант, при якому опис стилів розташовується в документі, усередині елементу HEAD з використанням елементу STYLE :

<STYLE type="text/css">

<-- приховуємо таблицю для старих браузерів

-->

</STYLE>.

Параметр type="text/css" є обов'язковим і служить для вказівки браузеру використовувати CSS.

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

Імпортування - в елементі STYLE можна імпортувати зовнішню таблицю стилів за допомогою властивості @import таблиці стилів :

@import: url(mystyles.css);

Його слід задавати на початку стильового блоку або зв'язуваної таблиці стилів перед завданням інших правил. Значення властивості @import являється URL файлу таблиці стилів.

Розглянемо правила формування таблиць стилів. Усі оголошення CSS (селекторы) записуються у фігурних дужках:

ЕЛЕМЕНТ {характеристика: величина}

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

Деякі характеристики будуть розглянуті нижче.

Наприклад, щоб забарвити усі заголовки першого рівня в червоний колір, можна написати:

H1 {color: red} чи H1 {color: #FF0000}

Групування. Можна присвоїти відразу групу властивостей декільком елементам. Для цього елементи перераховуються через кому, а кожна властивість відділяється від іншого крапкою з комою:

H1, H2 {font - size: 14pt; font - family: Arial; text - decoration: underline}

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

 

 

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

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

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

є тіло документу, визначуване BODY:

BODY {color: black;

font - family: "Times New Roman";

font - size: 12 pt;

background: url(picture.gif) white;}

 

Приведені правила задають форматування документу за умовчанням: чорним шрифтом Times New Roman з фоном, графічним файлом picture, що задається.gif, або на білому фоні, якщо файл недоступний.

Використання спадкоємствадозволяє використовувати для форматування не абсолютні, а відносні величини. Наприклад, використовуючи правила форматування документу, описані вище, ми можемо встановити властивості для елементу SPAN таким чином:

SPAN {font - size: 120%}

Контекстні селекторы. Спадкоємство дозволяє застосовувати стилі контекстного. Це означає, що селектор буде застосований до елементу тільки у тому випадку, якщо він знаходиться усередині певного елементу. Наприклад, визначення

P SPAN {font - size: 120%} означає, що розмір шрифту для елементу SPAN буде збільшений на 120% тільки у тому випадку, коли цей елемент знаходиться усередині елементу P. У усіх інших випадках використовуватимуться або значення за умовчанням (визначені в браузері), або визначені в таблиці стилів для цього елементу значення.

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

· Визначається, чи немає протиріч в завданні параметрів якого-небудь елементу. Якщо є, використовуються батьківські параметри. Якщо немає батьківських параметрів, використовуються параметри за умовчанням.

· Якщо присутній конфлікт між авторським стилем і стилем, визначеним за умовчанням, перевага віддається авторським параметром.

· Якщо конфліктують два стилі і один застосовується тільки в цій ситуації, а інший - в усіх випадках, перевага віддається першому (пріоритет "по специфічності").

Така система пріоритетів дозволяє одному документу посилатися на декілька таблиць стилів.

Класи. CSS реалізує можливість привласнювати стилі не усім однаковим елементам сторінки, а вибірково - для цього використовується параметр CLASS = "ім'я класу", що привласнюється будь-якому елементу сторінки. Клас дозволяє задати різні правила форматування для одного елементу певного типу або усіх елементів документу. Ім'я класу вказується в селекторі правила після імені тега і відділяється від нього точкою. Можна визначити декілька правил форматування для одного елементу і за допомогою параметра CLASS відповідного тега застосовувати різні правила форматування. Наприклад, можна визначити два класи для відображення заголовка першого рівня :

H1.red {color: red}

H1.blue (color: red; background - color: blue}

У тексті документу посилання на відповідний клас задається в параметрі CLASS :

<H1 CLASS="red">Червоний шрифт</H1>

<H1 CLASS="blue">Червоний шрифт на синьому фоні</H1>

У наведеному прикладі класи задавалися для різного відображення елементів одного типу. Якщо клас повинен застосовуватися до усіх елементів документу, то в селекторі задається ім'я класу з лідируючою точкою без вказівки конкретного елементу : .red {color: red} .blue (color: red; background - color: blue}

Тепер два класи red і blue можна застосовувати до будь-яких елементів документу :

<P CLASS="red">Червоний шрифт</P>

<P CLASS="blue">Червоний шрифт на синьому фоні</P>

Перший абзац відіб'ється червоним шрифтом, а другий - червоним шрифтом на синьому фоні.

Розглянемо деякі характеристики, визначувані в таблицях стилів.

 

font-family Використовується для указания шрифта та шрифтового сімейства, котрым будет відображаться элемент. P {font-family: Times New Roman, sans-serif;}
font-style Задає спосіб зображення шрифту : normal - Нормальний (за умовчанням), italic - Курсив, oblique - Похилий. P {font-style: italic;}
font-weight Визначає міра жирності шрифту за допомогою параметрів: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 B {font-weight: bolder;}
font-size Встановлює розмір шрифту. Параметр може вказуватися як у відносній (відсотки), так і абсолютній величині (пункти, піксели, сантиметри) H1 {font-size: 200%;} H2 {font-size: 150px;}

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

  1. Аеродинамічні властивості колісної машини
  2. Аналізатори людини та їхні властивості.
  3. Аналізатори людини та їхні властивості.
  4. Атрибутивні ознаки і властивості культури
  5. Білки, властивості, роль в життєдіяльності організмів.
  6. Біосфера Землі, її характерні властивості
  7. Будова атомів та хімічний зв’язок між атомами визначають будову сполук, а отже і їх фізичні та хімічні властивості.
  8. Будова і властивості аналізаторів
  9. Векторний добуток і його властивості.
  10. Види і властивості радіоактивних випромінювань
  11. Визначення добутку на множині цілих невід’ємних чисел, його існування та єдиність. Операція множення та її основні властивості (закони).
  12. Визначення суми на множині цілих невід’ємних чисел, її існування та єдиність. Операція додавання та її основні властивості (закони).




Переглядів: 1799

<== попередня сторінка | наступна сторінка ==>
Елемент LINK. | Курсори

Не знайшли потрібну інформацію? Скористайтесь пошуком google:

 

© studopedia.com.ua При використанні або копіюванні матеріалів пряме посилання на сайт обов'язкове.


Генерація сторінки за: 0.007 сек.