У цьому розділі ми вивчимо атрибути стилю, за допомогою яких задають параметри абзаців. Абзаців в широкому сенсі цього слова - до яких відносяться і заголовки, і списки, І теги адреси, і великі цитати. Загалом, блокових елементів, розглянутих в розділі 2 і призначених для структурування тексту.
Наостанок ми познайомимося з двома дуже специфічними атрибутами стилю, які дозволять нам визначити, чи відображатиметься елемента Web-сторінки (т. Е. Буде він блоковим або вбудованим) і зробити елемент невидимим. Ці атрибути стилю застосовуються нечасто і тільки в сукупності з певною поведінкою (див. Частину III).
Параметри тексту
Почнемо ми з атрибутів стилю, керуючих висновком текстув структурирующих текст блокових елементах. Їх зовсім мало. І всі вони можуть бути тільки до блокових елементів.
Атрибут стилю text-align задає горизонтальне вирівнювання тексту:
text-align: left | right | center | justify | inherit
Тут доступні значення left (вирівнювання по лівому краю; звичайну поведінку Web-оглядача), right (по правому краю), center (по центру) та justify (повне вирівнювання).
приклади:
P (text-align: justify)
H1 (text-align: center)
Атрибут стилю text-indent задає відступ для "нового рядка":
text-indent:<отступ "красной строки">
Тут допускаються абсолютні і відносні (щодо ширини абзацу) величини відступу. За замовчуванням відступ "нового рядка" дорівнює нулю. Відзначимо, що атрибут стилю text-indent не підтримує значення inherit.
приклад:
P (text-indent: 5mm)
Ось тепер абзаци матимуть "новий рядок".
спискисеред блокових елементів стоять особняком. В основному, через те, що, по-перше, містять в собі інші блокові елементи (окремі пункти), а по-друге, включають маркери і нумерацію, які розставляє сам Web-оглядач. Ось про маркери і нумерацію, а точніше, про атрибути стилю, призначених для завдання їх параметрів, ми зараз і поговоримо.
Атрибут стилю list-style-type задає вид маркерів або нумерації у пунктів списку:
list-style-type: disc | circle | square | decimal | decimal-leading-zero |
lower-roman | upper-roman | lower-greek | lower-alpha | lower-latin |
upper-alpha | upper-latin | armenian | georgian | none | inherit
Як бачимо, доступних значень у цього атрибута стилю дуже багато. Вони позначають як різні види маркерів, так і різні способи нумерації.
Disc- маркер у вигляді чорного кружка (звичайну поведінку для маркованих списків).
Circle- маркер у вигляді світлого гуртка.
Square - маркер у вигляді квадратика. Він може бути світлим або темним, в залежності від Web-оглядача.
Decimal- нумерація арабськими цифрами (звичайну поведінку для нумерованих списків).
Decimal-leading-zero - нумерація арабськими цифрами від 01 до 99 з початковим нулем.
Lower-roman- нумерація маленькими римськими цифрами.
Upper-roman- нумерація великими римськими цифрами.
Lower-greek - нумерація маленькими грецькими буквами.
Lower-alpha і lower-latin - нумерація маленькими латинськими буквами.
Upper-alpha і upper-latin- нумерація великими латинськими літерами.
Armenian- нумерація традиційними вірменськими цифрами.
Georgian - нумерація традиційними грузинськими цифрами.
None - маркер і нумерація відсутні (звичайну поведінку для неспісков).
НА ЗАМІТКУ
Ми розглянули тільки значення атрибута стилю list-style-type, пропоновані стандартом CSS 3. Однак стандарт CSS 2 передбачав ще кілька значень, які до сих пір підтримуються Web-оглядачами. Ви можете знайти їх на Web-сторінці https://developer.mozilla.org/en/CSS/list-style-type.
Атрибут стилю list-style-type можна задавати як для самих списків, Так і для окремих пунктів списків. В останньому випадку створюється список, в якому пункти мають різні маркери або нумерацію. Іноді це може стати в нагоді.
Ось визначення маркованого списку з маркером у вигляді квадратика:
UL (list-style-type: square)
А в лістингу 9.1 ми поставили таке ж маркер для одного з пунктів маркованого списку.
Атрибут стилю list-style-image дозволяє задати в якості маркера пунктів списку якесь графічне зображення (створити графічний маркер). У цьому випадку значення атрибута стилю list-style-type, якщо такий заданий, ігнорується:
list-style-image: none |<интернет-адрес файла изображения>| inherit
Інтернет-адреса файлу з графічним маркером задається в такому ж форматі, що і інтернет-адреса файлу фонового зображення (див. Розділ 8):
UL (list-style-image: url (/markers/dot.gif))
Значення none прибирає графічний маркер і повертає простий, неграфіческій. Це звичайна поведінка.
Атрибут стилю list-style-image також можна задавати як для самих списків, так і для окремих їх пунктів.
Атрибут стилю list-style-position дозволяє вказати місце розташування маркера або нумерації в пункті списку:
list-style-position: inside | outside | inherit
Доступних значень тут два:
Inside - маркер або нумерація знаходяться як би усередині пункту списку, є його частиною;
Outside - маркер або нумерація винесені за межі пункту списку(Це звичайна поведінка).
Незрозуміло, навіщо потрібен цей атрибут стилю, адже списки, В яких маркер або нумерація винесені за межі пунктів, краще читаються. Ну, раз він присутній в стандартеCSS, значить, так тому і бути ...
приклад:
OL (list-style-position: inside)
Універсальна властивість, що дозволяє одночасно задати стиль маркера, його положення, а також зображення, яке буде використовуватися в якості маркера списку.
коротка інформація
позначення
| опис | приклад | |
|---|---|---|
| <тип> | Вказує тип значення. | <размер> |
| A && B | Значення повинні виводитися в зазначеному порядку. | <размер> && <цвет> |
| A | B | Вказує, що треба вибрати тільки одне значення із запропонованих (A або B). | normal | small-caps |
| A || B | Кожне значення може використовуватися самостійно або спільно з іншими в довільному порядку. | width || count |
| Групує значення. | [Crop || cross] | |
| * | Повторювати нуль або більше разів. | [,<время>]* |
| + | Повторювати один або більше разів. | <число>+ |
| ? | Зазначений тип, слово або група не є обов'язковим. | inset? |
| (A, B) | Повторювати не менше A, але не більше B раз. | <радиус>{1,4} |
| # | Повторювати один або більше разів через кому. | <время># |
значення
Будь-які комбінації трьох значень визначають стиль маркерів, вони розділяються між собою пробілом. Комбінації значень повинні слідувати в зазначеному порядку: спочатку йде тип маркера, потім положення і картинка. Жодне значення не є обов'язковим, тому невикористовувані можна опустити.
приклад
- багатовимірний поліном
- Нормальний абсолютно сходиться ряд
- Інтеграл від функції
- Колінеарний екстремум функції
Результат даного прикладу показаний на рис. 1.
Мал. 1. Застосування властивості list-style
об'єктна модель
об'єкт.style.listStyle
Специфікація
Кожна специфікація проходить кілька стадій схвалення.
- Recommendation (Рекомендація) - специфікація схвалена W3C і рекомендована як стандарт.
- Candidate Recommendation ( можлива рекомендація) - група, що відповідає за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників по реалізації стандарту.
- Proposed Recommendation ( Пропонована рекомендація) - на цьому етапі документ представлений на розгляд Консультативної ради W3C для остаточного затвердження.
- Working Draft (Робочий проект) - більш зріла версія чернетки після обговорення і внесення поправок для розгляду спільнотою.
- Editor "s draft ( редакторський чернетку) - чорнова версія стандарту після внесення правок редакторами проекту.
- Draft ( чернетка специфікації) - перша чорнова версія стандарту.
браузери
браузери
У таблиці браузерів застосовуються такі позначення.
опис
Встановлює адресу зображення, яке служить в якості маркера списку. Це властивість успадковується, тому для окремих елементів списку для відновлення маркера використовується значення none.
синтаксис
list-style-image: none | url ( "шлях до файлу") | inherit
значення
none Скасовує зображення в якості маркера для батьківського елемента. url Відносний або абсолютний шлях до графічного файлу. Значення можна вказувати в одинарних, подвійних лапках або без них. inherit Успадковує значення батька.HTML5 CSS2.1 IE Cr Op Sa Fx
- Lorem ipsum dolor sit amet
- Consectetuer adipiscing elit
- Sed diem nonummy nibh euismod
- Tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Результат даного прикладу показаний на рис. 1.
Мал. 1. Застосування властивості list-style-image
об'єктна модель
document.getElementById ( "elementID") .style.listStyleImage
браузери
В різних браузерахвідстань між зображенням і текстом може відрізнятися.
В Internet Explorerдо версії 7.0 включно не відображаються маркери, якщо для списку додано властивість float. Також в цьому браузері не підтримує значення inherit.
Встановлює адресу зображення, яке служить в якості маркера списку. Це властивість успадковується, тому для окремих елементів списку для відновлення маркера використовується значення none.
коротка інформація
синтаксис
list-style-image: none | url (<адрес>)
позначення
| опис | приклад | |
|---|---|---|
| <тип> | Вказує тип значення. | <размер> |
| A && B | Значення повинні виводитися в зазначеному порядку. | <размер> && <цвет> |
| A | B | Вказує, що треба вибрати тільки одне значення із запропонованих (A або B). | normal | small-caps |
| A || B | Кожне значення може використовуватися самостійно або спільно з іншими в довільному порядку. | width || count |
| Групує значення. | [Crop || cross] | |
| * | Повторювати нуль або більше разів. | [,<время>]* |
| + | Повторювати один або більше разів. | <число>+ |
| ? | Зазначений тип, слово або група не є обов'язковим. | inset? |
| (A, B) | Повторювати не менше A, але не більше B раз. | <радиус>{1,4} |
| # | Повторювати один або більше разів через кому. | <время># |
значення
none Скасовує зображення в якості маркера для батьківського елемента. url Відносний або абсолютний шлях до графічного файлу. Значення можна вказувати в одинарних, подвійних лапках або без них.
приклад
- Легко перевірити, що Афінний перетворення монотонно.
- Доказ рішуче стабілізує негативний криволінійний інтеграл, явно демонструючи всю нісенітницю вищесказаного.
- Статечної ряд, в першому наближенні, марнотратно спотворює багатомірний лист Мебіуса, звідки слід доводимо рівність.
Результат даного прикладу показаний на рис. 1.
Мал. 1. Застосування властивості list-style-image
об'єктна модель
об'єкт.style.listStyleImage
Специфікація
Кожна специфікація проходить кілька стадій схвалення.
- Recommendation (Рекомендація) - специфікація схвалена W3C і рекомендована як стандарт.
- Candidate Recommendation ( можлива рекомендація) - група, що відповідає за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників по реалізації стандарту.
- Proposed Recommendation ( Пропонована рекомендація) - на цьому етапі документ представлений на розгляд Консультативної ради W3C для остаточного затвердження.
- Working Draft (Робочий проект) - більш зріла версія чернетки після обговорення і внесення поправок для розгляду спільнотою.
- Editor "s draft ( редакторський чернетку) - чорнова версія стандарту після внесення правок редакторами проекту.
- Draft ( чернетка специфікації) - перша чорнова версія стандарту.
браузери
браузери
У таблиці браузерів застосовуються такі позначення.
| браузер | Internet Explorer | Netscape | Opera | Safari | Mozilla | Firefox | |||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| версія | 5.5 | 6.0 | 7.0 | 6.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 1.0 | 1.7 | 1.0 | 2.0 |
| підтримується | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так |
коротка інформація
опис
Атрибут, що дозволяє одночасно задати стиль маркера, його положення, а також зображення, яке буде використовуватися в якості маркера. Для більш детального ознайомлення з аргументами, дивіться властивості кожного параметра list-style-type, list-style-position і list-style-image окремо.
синтаксис
list-style: list-style-type || list-style-position || list-style-image
аргументи
Будь-які комбінації трьох значень, що визначають стиль маркерів, в довільному порядку. Значення розділяються між собою пробілом. Жоден аргумент не є обов'язковим, тому невикористовувані значення можна опустити.
- Lorem ipsum dolor sit amet
- Consectetuer adipiscing elit
- Sed diem nonummy nibh euismod
- Tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Результат даного прикладу показаний ні рис. 1.
Мал. 1. Застосування параметра list-style
