15 Вирівнювання, стилі шрифтів і горизонтальні роздільники

зміст

  1. форматування
    1. Колір фону
    2. вирівнювання
    3. прикріплюються об'єкти
  2. шрифти
    1. Елементи, що визначають стиль шрифту: елементи TT, I, B, BIG, SMALL, STRIKE, S і U
    2. Елементи управління шрифтами: FONT і BASEFONT
  3. Роздільники: елемент HR

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

15.1 Форматування

15.1.1 Колір фону

визначення атрибутів

bgcolor = колір [CI]
Небажаний. Цей атрибут встановлює колір фону тіла документа або елементів таблиці.

Цей атрибут встановлює колір фону тіла документа (елемент BODY ) або таблиці (елементи TABLE , TR , TH , and TD ). В елементі BODY можуть використовуватися додаткові атрибути для вказівки кольору тексту.

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

15.1.2 Вирівнювання

Вирівнювати блокові елементи (таблиці, зображення, об'єкти, абзаци і т.д.) можна за допомогою атрибута align . Хоча цей атрибут може встановлюватися для багатьох елементів HTML, діапазон його можливих значень в різних елементах може бути різним. Тут обговорюється тільки значення атрибута align для тексту.

визначення атрибутів

align = left | center | right | justify [CI]
Небажаний. Цей атрибут задає горизонтальне вирівнювання свого елемента щодо навколишнього контексту. Можливі значення:
  • left: рядки тексту вирівнюються по лівому краю.
  • center: рядки тексту вирівнюються по центру.
  • right: рядки тексту вирівнюються по правому краю.
  • justify: рядки тексту вирівнюються по обох краях.

Значення за замовчуванням залежить від загального напрямку тексту. Для тексту, спрямованого зліва направо, за замовчуванням використовується значення align = left, я для тексту, спрямованого справа наліво - align = right.

ПРИКЛАД небажане використання:
В даному прикладі заголовок центрируется. 

 <H1 align = "center"> How to Carve Wood </ H1>

З використанням CSS, наприклад, Ви можете досягти того ж ефекту в такий спосіб: 

 <HEAD>
  <TITLE> How to Carve Wood </ TITLE>
  <STYLE type = "text / css">
  H1 {text-align: center}
  </ STYLE>
 <BODY>
  <H1> How to Carve Wood </ H1>

Зверніть увагу, що будуть вирівняні всі оголошення H1 . Ви можете обмежити область дії стилю, встановивши атрибут class : 

 <HEAD>
  <TITLE> How to Carve Wood </ TITLE>
  <STYLE type = "text / css">
  H1.wood {text-align: center}
  </ STYLE>
 <BODY>
  <H1 class = "wood"> How to Carve Wood </ H1>

ПРИКЛАД небажане використання:
Аналогічно, щоб вирівняти абзац по правому краю за допомогою атрибута HTML align Ви можете записати: 

  <P align = "right"> ... Текст абзацу ...

а з використанням CSS: 

  <HEAD>
  <TITLE> How to Carve Wood </ TITLE>
  <STYLE type = "text / css">
  P.mypar {text-align: right}
  </ STYLE>
 <BODY>
  <P class = "mypar"> ... Текст абзацу ...

ПРИКЛАД небажане використання:
Щоб вирівняти по правому краю ряд абзаців, згрупуйте їх за допомогою елемента DIV : 

  <DIV align = "right">
  <P> ... текст першого абзацу ... <P> ... текст другого абзацу ... <P> ... текст третього абзацу ... </ DIV>

З використанням CSS властивість вирівнювання тексту успадковується від батьківського елемента, тому Ви можете використовувати: 

  <HEAD>
  <TITLE> How to Carve Wood </ TITLE>
  <STYLE type = "text / css">
  DIV.mypars {text-align: right}
  </ STYLE>
 <BODY>
  <DIV class = "mypars">
  <P> ... текст першого абзацу ... <P> ... текст другого абзацу ... <P> ... текст третього абзацу ...

  </ DIV>

Щоб відцентрувати з використанням CSS весь документ: 

  <HEAD>
  <TITLE> How to Carve Wood </ TITLE>
  <STYLE type = "text / css">
  BODY {text-align: center}
  </ STYLE>
 <BODY>
  ... тіло документа відцентроване ...

 </ BODY>

Використання елемента CENTER абсолютно еквівалентно використанню елемента DIV з атрибутом align , для якого встановлено значення "center". Використання елемента CENTER небажано .

15.1.3 прикріплюються об'єкти

Зображення та об'єкти можуть бути "вбудованими" або прикріплятися до краю сторінки, тимчасово змінюючи поля тексту з урахуванням об'єкта.

прикріплення об'єкта  

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

  • left: Об'єкт прикріплюється до поточного лівому полю. Наступний текст обтікає зображення праворуч.
  • right: Об'єкт прикріплюється до поточного правому краю. Наступний текст обтікає зображення зліва.

ПРИКЛАД небажане використання:
У наступному прикладі показано, як прикріпити елемент IMG до лівого полю. 

 <IMG align = "left" src = "http://foo.com/animage.gif" alt = "моя човен">

Деякі атрибути вирівнювання допускають значення "center", яка не прикріплює об'єкт, але центрує його щодо поточних полів. Однак для елементів P і DIV значення "center" призводить до центрування вмісту елемента.

Обтікання об'єкта текстом  

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

визначення атрибутів

clear = none | left | right | all [CI]
Небажаний. Визначає, де в візуальному браузері повинна з'явитися наступна за перекладом рядка, викликаному цим елементом, рядок. Цей атрибут враховує прикріплюються об'єкти (зображення, таблиці і т.д.). Можливі значення:
  • none: Наступний рядок починається звичайним чином. Це значення використовується за умовчанням.
  • left: Наступний рядок почнеться на найближчій рядку під прикріпленим об'єктом у лівого поля.
  • right: Наступний рядок почнеться на найближчій рядку під прикріпленим об'єктом у правого поля.
  • all: Наступний рядок почнеться на найближчій рядку під прикріпленим об'єктом у будь-якого поля.

Розглянемо наступний візуальний сценарій, в якому обтікання текстом проводиться праворуч від зображення до розриву рядка за допомогою BR : 

 **************** -------
 |  |  -------
 |  зображення |  - <BR>
 |  |
 ****************

Якщо для атрибута clear встановлено значення none, рядок, наступна за BR , почнеться відразу ж за ним праворуч від зображення: 

 *************** -------
 |  |  -------
 |  зображення |  - <BR>
 |  |  ------
 ***************

ПРИКЛАД небажане використання:
Якщо для атрибута clear встановлено значення left або all, наступний рядок буде відображатися так: 

 *************** -------
 |  |  -------
 |  зображення |  - <BR Clear="left">
 |  | 
 ***************
 -----------------

За допомогою таблиць стилів Ви можете задати подібна поведінка для всіх кінців рядків для всіх об'єктів (зображень, таблиць і т.д.), прикріплених до лівого полю. З використанням CSS Ви можете досягти цього ефекту в такий спосіб: 

 <STYLE type = "text / css">
 BR {clear: left}
 </ STYLE>

Щоб визначити таку поведінку тільки для певних примірників елемента BR , слід використовувати атрибут id : 

  <HEAD>
 ...

 <STYLE type = "text / css">
 BR.mybr {clear: left}
 </ STYLE>
 </ HEAD>
 <BODY>
 <P> ...
 *********** -------
 |  |  -------
 |  таблиця |  - <BR Id="mybr">
 |  | 
 ***********
 -----------------
 ...
 </ BODY>

15.2 Шрифти

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

15.2.1 Елементи, що визначають стиль шрифту : елементи TT , I , B , BIG , SMALL , STRIKE , S і U 

  <! ENTITY% fontstyle
  " TT | I | B | BIG | SMALL ">
 <! ELEMENT ( % fontstyle; | % phrase; ) - - ( % inline; ) *>
 <! ATTLIST ( % fontstyle; | % phrase; )
  % attrs;
  - % Coreattrs , % i18n , % events -
  >

Початковий тег: обов'язковий, Кінцевий тег: обов'язковий

Атрибути, обумовлені в іншому місці

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

TT: Видається як моно шрифт (шрифт друкарської машинки).
I: Являє курсивом.
B: Видається напівжирним шрифтом.
BIG: Видається "великим" шрифтом.
SMALL: Видається "малим" шрифтом.
STRIKE і S: Небажані. Являє перекресленим шрифтом.
U: Небажаний. Видається підкресленим шрифтом.

У наступному реченні показані кілька типів тексту: 

 <P> <b> напівжирний </ b>,
 <I> курсив </ i>, <b> <i> напівжирний курсив </ i> </ b>, <tt> моно </ tt> і 
 <Big> великий </ big> і <small> малий </ small> текст.

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

Приклад представлення різних стилів шрифтів

З використанням таблиць стилів можна досягти більшої різноманітності ефектів. Щоб задати для абзацу синій курсив за допомогою CSS, запишіть: 

  <HEAD>
 <STYLE type = "text / css">
 P.mypar {font-style: italic;  color: blue}
 </ STYLE>
 </ HEAD>
 <P id = "mypar"> ... Текст синім курсивом ...

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

15.2.2 Елементи управління шрифтами: FONT і BASEFONT

Використання елементів FONT і BASEFONT небажано .

Формальне визначення см. В Transitional DTD .

визначення атрибутів

size   = Cdata [CN]
Небажаний. Встановлює розмір шрифту. Можливі значення:
  • Ціле число від 1 до 7. Встановлює фіксований розмір шрифту, представлення якого залежить від агента користувача. Не всі агенти користувачів можуть представляти всі сім розмірів.
  • Відносне зміна розміру шрифту. Значення "+1" означає на один розмір більше. Значення "-3" означає шрифт на три розміри менше. Всі розміри відносяться до шкали від 1 до 7.
color = колір [CI]
Небажаний. Цей атрибут встановлює колір тексту.
face = cdata [CI]
Небажаний. Цей атрибут визначає список розділених комами назв шрифтів, пошук яких агент користувача повинен виконати в порядку пріоритету.

Атрибути, обумовлені в іншому місці

Елемент FONT змінює розмір і колір шрифту для тексту його вмісту.

Елемент BASEFONT встановлює базовий розмір шрифту (за допомогою атрибуту size). Зміни розміру шрифту за допомогою елемента FONT виробляються щодо базового розміру, встановленого елементом BASEFONT . Якщо елемент BASEFONT не використовується, за замовчуванням використовується розмір 3.

ПРИКЛАД небажане використання:
У наступному прикладі показана різниця між сім'ю розмірами шрифтів, що встановлюються за допомогою елемента FONT : 

 <P> <font size = 1> size = 1 </ font>
 <Font size = 2> size = 2 </ font>
 <Font size = 3> size = 3 </ font>
 <Font size = 4> size = 4 </ font>
 <Font size = 5> size = 5 </ font>
 <Font size = 6> size = 6 </ font>
 <Font size = 7> size = 7 </ font>

Це може представлятися таким чином:

Приклад представлення різних розміром шрифтів

Далі показаний приклад установки відносного розміру шрифту з використанням базового розміру 3:

Приклад представлення різних розміром шрифтів з використанням basefont

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

15.3 Роздільники: елемент HR 

  <! ELEMENT HR - O EMPTY - горизонтальний роздільник ->
 <! ATTLIST HR
  % coreattrs;
  - Id , class , style , title -
  % events;

  >

Початковий тег: обов'язковий, Кінцевий тег: заборонений

визначення атрибутів

align = left | center | right [CI]
Небажаний. Цей атрибут визначає горизонтальне вирівнювання роздільник щодо навколишнього контексту. Можливі значення:
  • left: роздільник вирівняний по лівому краю.
  • center: роздільник вирівняний по центру.
  • right: роздільник вирівняний по правому краю.

За замовчуванням використовується align = center.

noshade [CI]
Небажаний. Якщо цей атрибут встановлений, він пропонує агенту користувачеві представляти роздільник суцільним кольором, а не звичайним двоколірним стилем.
size = пікселі [CI]
Небажаний. Цей атрибут задає висоту роздільник. Значення за замовчуванням залежить від агента користувача.
width = length [CI]
Небажаний. Цей атрибут задає ширину роздільника. За замовчуванням використовується 100%, тобто вся ширина сторінки.

Атрибути, обумовлені в іншому місці

Елемент HR призводить до генерації горизонтального роздільник візуальними агентами користувачів.

Висота порожнього простору між роздільником і текстом залежить від агента користувача.

ПРИКЛАД неприпустимість використання:
У цьому прикладі роздільники центруються, а їх розмір встановлюється в половину ширини між полями. Верхній роздільник має товщину за замовчуванням, а для нижнього встановлена ​​товщина 5 пікселів. Нижній роздільник повинен представлятися суцільним кольором без тіні: 

  <HR width = "50%" align = "center">
 <HR size = "5" width = "50%" align = "center">
 <HR noshade size = "5" width = "50%" align = "center">

Ці роздільники можуть представлятися таким чином:

Приклад представлення різних горизонтальних роздільників

назад далі зміст елементи атрибути покажчик