Веб-орієнтована розробка програмного забезпечення ЗПі-81-20210115T104851Z-001 / Лабораторна робота 3_КАСКАДНI ТАБЛИЦI
.docЛабораторна робота № 8
Тема:Каскадні таблиці стилів
Мета:
навчитися форматувати текст засобами каскадних таблиць
Теоретичні відомості
Каскадні таблиці стилів або CSS (Cascading Style Sheets) були революцією, WWW, що потрясла. Якщо до цього Web-дизайнер не знав, як виглядатиме його творіння в різних програмах Web-оглядачів, то тепер він може контролювати все: від зображення шрифту до положення картинки на сторінці.
Припустимо, вам потрібно змінити колір тексту в HTML-документі з чорного на синій. Ви поміщаєте його в пару тегів <FONT> і </FONT> наступного вигляду:
<P><FONT color="blue">Це текст синього кольру</FONT></P>
А зараз уявимо, що ви внесли визначення зовнішнього вигляду тексту в інше місце документа:
P.bluetext { color: blue }
Цей рядок означає, що ми визначили для тексту, що знаходиться усередині тега <P> і поміченого стильовим класом bluetext, синій колір шрифту. Така конструкція HTML називається визначенням стилю або просто стилем.
В результаті в HTML-тексті у нас залишаться тільки теги логічного форматування тексту:
<P class="bluetext">Це синій текст</P>
Тут ми помітили потрібний текст за допомогою атрибуту class, привласнивши йому значення bluetext. Атрибут class задає ім'я стильового класу для тега, і його підтримують всі теги.
Ви можете перепризначувати кольори тексту для всіх тегов <P>. В цьому випадку ми не задаємо ім'я стильового класу:
P { color: blue }
Або ви можете задати форматування для стильового класу, не прив'язаного ні до якого тегу:
bluetext{ color: blue }
І тепер ви можете привласнювати стильовий клас тексту, ув'язненому в будь-які теги:
<H1 class="bluetext">Це синій колір</H1>
<CENTER class="bluetext">Це синій колір</CENTER>
Це
<B class="bluetext">жирний синій</B> текст
Ви можете дати спеціальне форматування тегу тільки в тому випадку, якщо він поміщений всередину іншого тега:
H7 B { color: blue }
І тепер:
<H7><B>Этот</B> текст буде синім</H7>
<P>А <B>этот</B> - не буде!</P>
Більш того, ви можете вбудувати визначення стилю прямо в тег:
<P style="color: blue">Це синій текст</P>
Це досягається за допомогою атрибуту style, який також підтримують всі теги HTML.
І ще один спосіб прив'язати стиль до якого-небудь тегу - використовувати атрибут id, задаючий унікальне ім'я елементу HTML.
#headerofdocument { font-size: 20pt }
Тут ми задали розмір шрифту 20 пунктів.
<H1 id="headerofdocument">Це заголовок документа</H1>
Ви можете задавати декілька атрибутів у визначенні стилю. В цьому випадку вони розділяються крапкою з комою:
P { color: blue; fotn-size: 9ptl; text-align: center }
Визначення стилів, винесені в заголовок HTML-документа, складають таблицю стилів. Таблиця стилів полягає в теги <STYLE> і </STYLE>:
<Style [type="text/css"]>
. . .
</STYLE>
Тег <STYLE> може містити необов'язковий атрибут type, що містить обов'язкове значення text/css.
Таблицю стилів можна винести в окремий файл і використовувати відразу в декількох документах. В цьому випадку в заголовку HTML-документа необхідно розмістити тег <LINK>, вказуючий на цю таблицю стилів:
<LINK rel="stylesheet" href="{ Адреса файлу таблиці стилів}">
Властивості шрифту
font - задає параметри шрифту елементу сторінки.
Замінює атрибути font-family, font-height, font-size, font-style, font-variant і font-weight. Значення цих атрибутів можуть розташовуватися у будь-якому порядку.
font: {font-family} [{font-height}] [{font-size}] [{font-style}] [{font-variant}] [{font-weight}];
Значення за умовчанням - normal normal normal medium normal "Times New Roman".
Альтернативний формат:
font: caption|icon|menu|message-box|small-caption|status-bar;
В цьому випадку доступні шість зумовлених значень, задаючі один із стандартних шрифтів, використовуваних в елементах інтерфейсу Windows:
font: caption; - шрифт заголовка кнопок, текстових міток і т.п.;
font: icon; - шрифт підписів під піктограмами;
font: menu; - шрифт пунктів меню;
font: message-box; - шрифт вмісту стандартних вікон-попереджень;
font: small-caption; - дрібний шрифт заголовків;
font: status-bar; - шрифт вмісту рядка стану.
Підтримується IE починаючи з 4.0
font-family - вказує ім'я шрифту або шрифтового сімейства, використовуваного в елементі сторінки.
font-family: { Ім'я шрифту}|serif|san-serif|cursive|fantasy|monospace;
Як значення цього атрибуту задається або безпосередньо ім'я потрібного шрифту, або одне з п'яти зумовлених значень, задаючих ім'я шрифтового сімейства. Можна задавати одночасно декілька шрифтів, розділивши їх імена комами; в цьому випадку Web-оглядач зможе вибрати з них той, який встановлений на комп'ютері клієнта. Якщо ім'я шрифту містить пропуски, його слід узяти в лапки.
font-family: "Times New Roman",sans-serif;
Підтримується IE починаючи з 3.02 для текстових елементів і починаючи з 4.0 для нетекстових.
Підтримується NN починаючи з 4.0
font-weight - задає "жирність" шрифту, використовуваного в елементі сторінки.
font-weight: normal|bold|bolder|lighter|100..900;
"Жирність" може бути задана трьома способами. По-перше, зумовленими значеннями normal і bold, задаючими звичайне і жирне зображення відповідно. По-друге, відносними значеннями bolder і lighter, що роблять шрифт елементу сторінки жирніше і світліше. І, по-третє, одним з дев'яти значень від 100 до 900; тут нормальному зображенню відповідає значення 400, а жирному - 700.
font-weight: normal; - звичайний;
font-weight: lighter; - світліше;
font-weight: bold; - жирний;
font-weight: bolder; - жирніше;
font-weight: від 100 до 900 - будь-яке значення, кратне 100 (200,700).
Значення за умовчанням normal.
Підтримується IE починаючи з 3.02 для текстових елементів і починаючи з 4.0 для нетекстових. При цьому IE 4.0 і старіші версії розпізнавали тільки значення normal і bold цього атрибуту.
Підтримується NN починаючи з 4.0
font-size - задає розмір шрифту, використовуваного в елементі сторінки.
font-size: xx-small|x-small|small|medium|large|x-large|xx-large|larger|smaller|{ Абсолютний розмір}|{ Відносний розмір}%;
Можливе завдання або абсолютного розміру шрифту в одній з підтримуваних CSS одиниць вимірювання, або як відсоток від розміру шрифту батька. Також доступні дев'ять певних значень.
font-size: 200% - відносна величина (відсотки)
font-size: 150px - розмір в пікселях
font-size: 300pt - розмір в пунктах
font-size: {xx-small,small,medium,large,x-large,xx-large} - задають один з семи розмірів шрифтів, підтримуваних HTML
font-size: {smaller,larger} - задають розмір шрифту, який на розмір або більше, або менше батьківського шрифту відповідно
Підтримується IE починаючи з 3.02 для текстових елементів і починаючи з 4.0 для нетекстових.
Підтримується NN починаючи з 4.0
font-style - задає зображення шрифту.
font-style: normal|italic|oblique;
font-style: normal; - задає звичайний вид шрифту (використовується за умовчанням);
font-style: italic - курсивне зображення;
font-style: obligue - похиле зображення (легкий нахил нормального шрифту) (IE відображає як курсив, а NN не підтримує).
Підтримується IE починаючи з 3.02 для текстових елементів і починаючи з 4.0 для нетекстових.
Підтримується NN починаючи з 4.0
font-variant - задає вид малих букв шрифту, використовуваного в елементі сторінки.
font-variant: normal|small-caps;
font-variant: normal; - задає звичайний вид малих букв шрифту (використовується за умовчанням);
font-variant: small-caps; - робить їх такими, як великі букви, тільки меншого розміру (капітель).
Підтримується IE починаючи з 4.0
Колірна гамма
color - Визначає колір елементу.
color: { Колір};
Підтримується IE починаючи з 3.02 для текстових елементів сторінки і починаючи з 4.0 для нетекстових. Підтримується NN починаючи з 4.0
background - задає всі властивості фону елементу сторінки в один прийом. Замінює собою атрибути background-attachment, background-color, background-image, background-position і background-repeat.
background: [{background-color}] [{background-image}] [{background-repeat}] [{background-attachment}] [{background-position}];
Значення цих властивостей можуть розташовуватися у будь-якому порядку.
Значення за умовчанням transparent none repeat scroll 0% 0%.
Підтримується IE починаючи з 3.02; завдання значень background-position і background-repeat підтримується починаючи з 4.0
background-color - задає фоновий колір Web-сторінки або її елементу.
background-color: { Колір}|transparent;
Зумовлене значення transparent задає "прозорий" фон. Воно ж є значенням за умовчанням.
Підтримується IE починаючи з 4.0, у складі атрибуту background - з 3.02
Підтримується NN починаючи з 4.0
background-image - задає фоновий малюнок Web-сторінки або її елементу.
background-image: url({ Інтернет-адреса файлу малюнка})|none;
Зумовлене значення none відключає фоновий малюнок. Воно ж є значенням за умовчанням.
Підтримується IE починаючи з 4.0, у складі атрибуту background - з 3.02
Підтримується NN починаючи з 4.0
background-attachment - даний атрибут дозволяє "зафіксувати" фоновий малюнок, щоб він не прокручувався разом з вмістом Web-сторінки.
background-attachment: scroll|fixed;
background-attachment: scroll; - фонове зображення прокручується разом з вмістом сторінки (значення за умовчанням);
background-attachment: fixed; - фонове зображення фіксується на одному місці і не прокручується з вмістом сторінки.
Застосовується тільки для тега <BODY>.
Підтримується IE починаючи з 4.0, у складі атрибуту background - з 3.02
background-repeat - встановлює порядок повторення малюнка фону на Web-сторінці або її елементі.
Іноді цей атрибут необхідний, щоб зайняти весь вільний простір, якщо фоновий малюнок дуже малий, щоб покрити простір без повторення.
background-repeat: repeat|no-repeat|repeat-x|repeat-y;
background-repeat: repeat; - розмножує фонове зображення на всіх напрямках (значення за умовчанням);
background-repeat: no-repeat; - забороняє фоновому зображенню повторюватися;
background-repeat: repeat-x; - розмножує фонове зображення тільки по горизонталі;
background-repeat: repeat-y; - розмножує фонове зображення тільки по вертикалі.
Підтримується IE починаючи з 4.0
background-position - задає місцезнаходження фонового малюнка. Це комбінований атрибут, замінюючий атрибути background-position-x і background-position-y.
background-position: [{background-position-x}] [{background-position-y}];
Якщо задана тільки одна координата, то вона вважається горизонтальною, а для вертикальної приймається значення 50%.
Значення за умовчанням 0% 0%.
Підтримується IE починаючи з 4.0
background-position-x - задає горизонтальну координату фонового малюнка.
background-position-x: {X}|{X}%|left|center|right;
Координата може бути задана цілим числом (абсолютна координата), відсотком від відповідного розміру фонового малюнка (відносна координата) або зумовленим значенням. Доступні три зумовлені значення: left, center, right, які задають вирівнювання фонового малюнка на сторінці по лівому краю, по центру і по правому краю відповідно.
Значення за умовчанням 0%.
Підтримується IE починаючи з 4.0
background-position-y - задає вертикальну координату фонового малюнка.
background-position-y: {Y}|{Y}%|top|center|bottom;
Координата може бути задана цілим числом (абсолютна координата), відсотком від відповідного розміру фонового малюнка (відносна координата) або зумовленим значенням. Доступні три зумовлені значення: top, center, bottom, які задають вирівнювання фонового малюнка на сторінці по верху, по центру і по низу сторінки відповідно.
Значення за умовчанням 0%.
Підтримується IE починаючи з 4.0
scrollbar-3dlight-color - задає колір верхньої і лівої меж смуги прокрутки, її бігунка і стрілок.
scrollbar-3dlight-color: { Колір};
Підтримується IE починаючи з 5.5
scrollbar-arrow-color - задає колір стрілок на кнопках смуги прокрутки.
scrollbar-arrow-color: { Колір};
Підтримується IE починаючи з 5.5
scrollbar-base-color - задає колір бігунка і кнопок-стрілок смуги прокрутки.
scrollbar-base-color: { Колір};
Підтримується IE починаючи з 5.5
scrollbar-darkshadow-color - задає колір "тіні", що відкидається бігунком і кнопками прокрутки смуги прокрутки (колір правих і нижніх гранієй).
scrollbar-darkshadow-color: { Колір};
Підтримується IE починаючи з 5.5
scrollbar-face-color - задає колір бігунка і кнопок прокрутки смуги прокрутки.
scrollbar-face-color: { Колір};
Підтримується IE починаючи з 5.5
scrollbar-highlight-color - задає колір "освітленої" частини бігунка і кнопок прокрутки смуги прокрутки (колір лівих і верхніх їх граней).
scrollbar-highlight-color: { Колір};
Підтримується IE починаючи з 5.5
scrollbar-shadow-color - задає колір "неосвітленої" частини бігунка і кнопок прокрутки смуги прокрутки (колір правих і нижніх їх граней). Не плутати з кольором "тіні", атрибутом scroll-darkshadow-color, що задається.
scrollbar-shadow-color: { Колір};
Підтримується IE починаючи з 5.5
scrollbar-track-color - задає колір робочої частини смуги прокрутки, тобто тій її частині, по якій переміщається бігунок.
scrollbar-track-color: { Колір};
Підтримується IE починаючи з 5.5
Властивості тексту
text-decoration - задає спеціальне оформлення тексту: підкреслений, закреслений і т.п.
text-decoration: none|underline|overline|line-through|blink;
text-decoration: none; - відміняє спеціальне оформлення (значення за умовчанням для більшості тегов);
text-decoration: underline; - підкреслює текст (значення за умовчанням для тегов <A>, <INS> і <U>);
text-decoration: overline; - межа зверху тексту;
text-decoration: line-through; - закреслює текст (значення за умовчанням для тегов <DEL>, <S> і <STRIKE>);
text-decoration: blink; - мигання тексту (відсутній в IE)
text-decoration: uppercase - всі букви стають заголовними;
text-decoration: lowercase - всі букви стають маленькими (прописними);
text-decoration: capitalize - кожне слово в рядку починається з великої букви.
Підтримується IE починаючи з 3.02 для текстових елементів сторінки і починаючи з 4.0 для нетекстових.
Підтримується NN починаючи з 4.0
text-underline-position - задає місцезнаходження лінії підкреслення: вище або нижче за текст. Має сенс, якщо атрибут text-decoration рівний underline або overline.
text-underline-position: below|above;
text-underline-position: below; - розміщує лінію підкреслення під текстом (значення за умовчанням);
text-underline-position: above; - над текстом ("надчеркиваніє").
Підтримується IE починаючи з 5.5
text-align - визначає горизонтальне вирівнювання тексту.
text-align: left|right|center|justify;
text-align: left; - вирівнювання тексту по лівому краю (значення за умовчанням);
text-align: right; - вирівнювання по правому краю;
text-align: center; - вирівнювання по центру;
text-align: justify; - вирівнювання по обох краях (по ширині).
Підтримується IE починаючи з 3.02; значення justify підтримується починаючи з 4.0
Підтримується NN починаючи з 4.0
text-align-last - задає горизонтальне вирівнювання останнього рядка абзацу.
text-align-last: auto|inherit|left|right|center|justify;
text-align: auto; - вирівнює останній рядок абзацу так само, як і решту рядків (грунтуючись на значенні атрибуту text-align) (значення за умовчанням);
text-align: inherit; - так само, як вирівняний текст ;
text-align: left; - вирівнювання тексту по лівому краю;
text-align: right; - вирівнювання по правому краю;
text-align: center; - вирівнювання по центру;
text-align: justify; - вирівнювання по обох краях (по ширині).
Підтримується IE починаючи з 5.5
text-indent - встановлює відступ червоного рядка.
text-ident: { Відступ}|{ Відступ}%;
Відступ може бути заданий як абсолютною величиною, так і відсотком від ширини.
Значення за умовчанням 0.
Підтримується IE і NN починаючи з 4.0
text-height - інтервал між рядками тексту.
text-height: { Інтервал}|{ Інтервал}%;
Інтервал може бути заданий як абсолютною величиною, так і відсотком від ширини.
Підтримується IE і NN починаючи з 4.0
text-transform - Задає перетворення регістра символів тексту.
text-transform: none|capitalize|uppercase|lowercase;
text-transform: none; - відключає будь-які перетворення регістра символів (значення за умовчанням);
text-transform: capitalize; - перетворить першу букву кожного слова тексту у верхній регістр;
text-transform: uppercase; - перетворить всі символи тексту у верхній регістр;
text-transform: lowercase; - в нижній регістр.
Підтримується IE і NN починаючи з 4.0
clear - задає поведінку тексту при "обтіканні" ним деяких елементів сторінки, таких як зображення.
clear: none|left|right|all;
Атрибут задається для тексту, а не для елементу сторінки, який він "обтікатиме".
clear: none; - дозволяє тексту "обтікати" елемент сторінки (значення за умовчанням);
clear: left; - забороняє тексту "обтікати" елемент сторінки з лівого боку;
clear: right; - з правого боку;
clear: all; - з обох боків.
Підтримується IE і NN починаючи з 4.0
word-spacing - визначає додаткова відстань між словами в тексті.
word-spacing: normal|{ Величина};
Значення цього атрибуту може бути задане або абсолютною величиною в одній з підтримуваних CSS одиниць вимірювання, або зумовленим значенням normal, задаючим стандартну величину відстані між символами.
Значення за умовчанням normal.
Підтримується IE починаючи з 4.0
word-wrap - встановлює, чи буде рядок, що виходить за межі елементу сторінки і не містить пропусків, переноситися по словах.
word-wrap: normal|break-word;
word-wrap: normal; - забороняє переносити рядки по словах (значення за умовчанням);
word-wrap: break-word; - вирішує.
Підтримується IE починаючи з 5.5
word-mode - задає напрям рядків тексту: горизонтальне або вертикальне.
word-mode: lr-tb|tb-rl;
word-mode: lr-tb; - задає звичайне горизонтальне розташування рядків тексту; текст пишеться зліва направо і зверху вниз (значення за умовчанням);
word-mode: tb-rl; - повертає текст на 90° за годинниковою стрілкою; при цьому він писатиметься зверху вниз і справа наліво.
Підтримується IE починаючи з 5.5
leter-spacing - визначає відстань між символами в тексті.
letter-spacing: normal|{ Величина};
Значення цього атрибуту може бути задане або абсолютною величиною в одній з підтримуваних CSS одиниць вимірювання, або зумовленим значенням normal, задаючим стандартну величину відстані між символами.
Значення за умовчанням normal.
Підтримується IE починаючи з 4.0
line-height - задає вертикальну відстань між рядками тексту.
line-height: normal|{Y}|{Y}%;
Висота може бути задана як абсолютною величиною, так і відсотком від висоти.
Зумовлене значення normal задає стандартна відстань.
Значення за умовчанням normal.
Підтримується IE і NN починаючи з 4.0
direction - задає порядок читання тексту: зліва направо або справа наліво.
direction: ltr|rtl|inherit;
direction: ltr; - задає порядок читання зліва направо (значення за умовчанням);
direction: rtl; - справа наліво;
direction: inherit; - примушує успадковувати порядок читання.
Для документів, складених на європейських мовах, порядок читання завжди зліва направо (ltr).
Підтримується IE починаючи з 5.0
unicode-bidi - задає поведінку вбудованих елементів при зміні надсилання листа за допомогою атрибуту direction.
unicode-bidi: normal|embed|bidi-override;
unicode-bidi: normal; - змінює надсилання листа (використовується за умовчанням);
unicode-bidi: embed; - змінює надсилання листа тільки у вбудованого елементу;
unicode-bidi: bidi-override; - аналогічно embed за тим виключенням, що надсилання листа змінюється згідно значенню атрибуту direction, незалежно від локальних установок Web-оглядача.
Підтримується IE починаючи з 5.0
accelerator - дозволяє вказати, чи містить текст елементу сторінки клавішу-прискорювач.
accelerator: true|false;
Клавіша-прискорювач - це особлива клавіша на клавіатурі, при натисненні якої разом з клавішею <Alt> відбувається перехід до даного елементу сторінки.
accelerator: true; - вказує, що текст містить клавішу-прискорювач;
accelerator: false; - не містить.
Значення за умовчанням не має.
Приклад використання:
<LABEL for="txtName"><U style="accelerator: true">И</U>мя</LABEL>
<INPUT type="text" id="txtName" accesskey="B" value="Имя користувача">
В цьому випадку символ "И" в слові "Ім'я" буде підкреслений. Якщо в регіональних налагодженнях операційної системи Windows 2000 була вибрана опція Приховати індикатори клавіш-прискорювачів до натиснення Alt, цей символ не буде підкреслений, поки користувач не натисне клавішу <Alt> на клавіатурі.
Підтримується IE починаючи з 5.0
Властивості тексту, що містить ієрогліфи
text-justify - задає тип тексту по ширині. Значення атрибуту text-align при цьому повинне бути рівне justify.
text-justify: auto|newspaper|distribute|distribute-all-lines|distribute-center-last|inter-word|inter-ideograph|inter-cluster|kashida;
text-justify: auto; - віддає управління вирівнюванням по ширині на розсуд Web-оглядача (використовується за умовчанням);
text-justify: newspaper; - вирівнює рядки, змінюючи відстань між словами і між символами;
text-justify: distribute; - аналогічно newspaper і призначено для азіатських мов (тайський і ін.);
text-justify: distribute-all-lines; - аналогічно distribute за тим виключенням, що останній рядок абзацу піддається повному вирівнюванню. Призначено для ієрогліфічних мов;
text-justify: distribute-center-last; - не реалізовано;
text-justify: inter-word; - вирівнює рядки, змінюючи тільки відстань між словами;
text-justify: inter-ideograph; - вирівнює рядки ієрогліфічного тексту, змінюючи відстані між словами і між ієрогліфами;
text-justify: inter-cluster; - вирівнює рядки тексту на азіатських мовах, що не містять пропусків між словами;
text-justify: kashida; - вирівнює рядки тексту на арабській мові, змінюючи ширину самих символів.
Підтримується IE починаючи з 5.0
text-autospace - дозволяє встановити, чи додаватиме додатковий простір між фрагментами тексту, написаними на різних мовах.
text-autospace: none|ideograph-alpha|ideograph-numeric|ideograph-parenthesis|ideograph-space;
text-autospace: none; - забороняє додавати додатковий простір між фрагментами тексту (використовується по умочанію);
text-autospace: ideograph-alpha; - додає додатковий простір між ієрогліфічними і неієрогліфічними (літінськимі, киріллістічеськимі, грецькими і т.д.) фрагментами тексту;
text-autospace: ideograph-numeric; - додає додатковий простір між ієрогліфічним текстом і цифрами;
text-autospace: ideograph-parenthesis; - додає додатковий простір між ієрогліфічним текстом і круглими дужками;
text-autospace: ideograph-space; - збільшує ширину пропусків, що граничать з ієрогліфічним текстом.
Підтримується IE починаючи з 5.0
text-kashida-space - задає відсоток, на який розширюватимуться символи арабської мови при вирівнюванні тексту по ширині. Можна використовувати тільки, якщо атрибут text-justify рівний auto, distribute, kashida або newspaper.
text-kashida-space: { Розширення}%|inherit;
Величина відступу може бути задана як відсоток вільного простору між символами, на який вони можуть розширюватися. Значення 0% (використовується за умовчанням) означає, що розширення символів неприпустимо, а замість них розширюватиметься вільний простір; значення 100% - що допустиме розширення тільки символів, але не вільного простору.
Підтримується IE починаючи з 5.5
line-break - задає правила розриву рядків для тексту на японській мові.
line-break: normal|strict;
line-break: normal; - задає звичайні правила розриву японського тексту (значення за умовчанням);
line-break: strict; - задає строгі правила.
Підтримується IE починаючи з 5.0
word-break - включає або відключає підтримку перенесення рядків по словах (а не тільки по пропусках) для текстів, що містять фрагменти на різних мовах.
word-break: normal|break-all|keep-all;
word-break: normal; - дозволяє рядкам "розриватися" по слову (використовується за умовчанням);
word-break: break-all; - призначено для текстів на азіатських мовах з невеликими іншомовними фрагментами;
word-break: keep-all; - призначено для текстів, що включають фрагменти на ієрогліфічних мовах.
Підтримується IE починаючи з 5.0
ime-mode - задає стан IME (Input Method Editor - редактор способу введення), за допомогою якого вводяться ієрогліфічні тексти на китайській, корейській і японській мовах. Цей атрибут застосовується тільки для полів введення.
ime-mode: auto|active|inactive|disabled;
ime-mode: auto; - передає управління IME Web-оглядачеві (значення за умовчанням);
ime-mode: active; - активізує IME. Користувач може його деактівізіровать;
ime-mode: inactive; - деактівізіруєт IME. Користувач може його активізувати;
ime-mode: disabled; - відключає IME.
Підтримується IE починаючи з 5.0
layout-flow - задає напрям написання тексту: по горизонталі або по вертикалі.
layout-flow: horizontal|vertical-ideographic;
layout-flow: horozontal; - задає горизонтальний напрям написання тексту (значення за умовчанням);
layout-flow: vertical-ideographic; - вертикальний напрям написання тексту.
Підтримується IE починаючи з 5.5. В даний час визнаний застарілим; замість нього рекомендується використовувати атрибут writing-mode.
layout-grid - задає параметри розмітки елементу сторінки, використовуваної для виведення ієрогліфічних текстів на китайській, корейській і японській мовах. Замінює атрибути layout-grid-char, layout-grid-line, layout-grid-mode і layout-grid-type.
layout-grid: [{layout-grid-char}] [{layout-grid-line}] [{layout-grid-mode}] [{layout-grid-type}]
Значення цих атрибутів можуть розміщуватись у будь-якому порядку.
Значення за умовчанням - both loose none none.
Підтримується IE починаючи з 5.0
layout-grid-char - задає крок горизонтальної розмітки елементу сторінки, використовуваної для виведення ієрогліфічних текстів на китайській, корейській і японській мовах.
layout-grid-char: none|auto|{Y}Y}%;
Крок розмітки може бути заданий як абсолютною величиною, так і відсотком від кроку розмітки. Зумовлене значення auto примушує Web-оглядач встановлювати крок розмітки по максимальному символу тексту. Інше зумовлене значення none взагалі відключає розмітку.
Значення за умовчанням - none.