Главная | Обратная связь | Поможем написать вашу работу!
МегаЛекции

Выравнивание последующего элемента





clear:left|right|both|none

Способ выравнивания следующего за плавающим элемента задаётся значениями:

  • left - верхнее поле элемента увеличивается так, чтобы на его выравнивание слева плавающий элемент не влиял,
  • right - верхнее поле элемента увеличивается так, чтобы на его выравнивание справа плавающий элемент не влиял,
  • both - верхнее поле элемента увеличивается так, чтобы на его выравнивание слева и справа плавающий элемент не влиял,
  • none - никакие изменения в параметры элемента не вносятся.

Управление списками

CSS предоставляет возможность управления нумерацией (счётчиками) разделов, списков, перечней иллюстраций ... Для этого используются функции counter() и counters(). Счётчики объявляются с помощью свойства content, потом могут обнуляться (свойство counter-reset) и прибавляться (свойство counter-increment). Например, для автоматической нумерации заголовков первого и второго уровней (h1 - главы и h2 - разделы) необходимо использовать стиль:

h1:before { content: "Глава " counter(chapter) ". "; counter-increment: chapter; counter-reset: section;}h2:before { content: counter(chapter) "." counter(section) " "; counter-increment: section;}

Применение такого стиля даёт нумерацию глав в виде Глава 1., Глава 2., а для разделов в виде 1.1, 1.2 и т.д.

Для символов нумерации нумерованных списков и маркеров ненумерованных списков есть возможность выбрать стиль свойством list-style-type.

Расположение маркера по отношению к тексту элемента списка регулируется с помощью свойств list-style-position и marker-offset.

Таблица 2.7. Свойства управления списком
Свойство Описание Умолчание Применение
content Генерация содержимого Пустая строка К псевдоэлементам before и after
counter-reset Сброс счётчика none Ко всем элементам
counter-increment Приращение счётчика none Ко всем элементам
list-style-type Стиль нумерации/маркирования disk К элементам с display:list-item
list-style-image Символ маркирования none К элементам с display:list-item
list-style-position Положение маркера outside К элементам с display:list-item
marker-offset Смещение маркера auto К элементам с display:marker

Генерация содержимого



content:URI|counter()|attr(X)|open-quote|close-quote|no-open-quote|no-close-quote

  • URI - адрес внешнего ресурса, используемого для генерации,
  • couter()|counters() - определение счётчиков,
  • attr(X) - функция, возвращающая значение атрибута Х элемента, выбранного селектором,
  • open-quote - открывающая кавычка, замещается соответствующими символами из свойства quotes,
  • close-quote - закрывающая кавычка, замещается соответствующими символами из свойства quotes,
  • no-open-quote - пустая строка, увеличивает уровень вложения кавычек на 1,
  • no-close-quote - пустая строка, уменьшает уровень вложения кавычек на 1.

Сброс счётчика

counter-reset:имя_счётчика Vv|none

Vv - начальное зачение счётчика.

Приращение счётчика

counter-increment:имя_счётчика Vv|none

Vv - величина приращения счётчика.

Стиль нумерации/маркирования

list-style-type:disk|circle|square
list-style-type:decimal|decimal-leading-zero|lower-roman|upper-roman
list-style-type:lower-greek|lower-latin|upper-latin

  • disk - диск в качестве маркера для маркированных списков,
  • circle - круг,
  • square - квадрат,
  • decimal - десятичная нумерация 1 2 3,
  • decimal-leading-zero - десятичная нумерация с ведущим нулём 01 02 03,
  • lower-roman - малые римские i ii iii iv,
  • upper-roman - большие римские I II III IV,
  • lower-greek - малые греческие буквы,
  • lower-latin - малые латинские буквы a b c,
  • upper-latin - большие латинские буквы A B C.

Положение маркера

list-style-position:inside|outside

<ul>
<li>
<code>outside</code> - маркер списка располагается<br> вне текста,
</li>
<li style="list-style-position:inside">
<code>inside</code> - маркер списка располагается<br> внутри текста.
</li>
</ul>
  • outside - маркер списка располагается
    вне текста,
  • inside - маркер списка располагается
    внутри текста.

Оформление таблиц

Для табличных элементов можно задать положение названия, алгоритм расчёта ширины таблицы, технику отображения пустых ячеек и формирования границ между ячейками.

Таблица 2.8. Свойства оформления таблиц
Свойство Описание Умолчание
caption-side Положение названия top
table-layout Алгоритм размещения auto
border-collapse Формирование границ collapse
border-spacing Размер границ 0
empty-cells Пустые ячейки show

Положение названия

caption-side:top|left|right|bottom

Алгоритм размещения

table-layout:auto|fixed

  • fixed - быстрый алгоритм. Формирование таблицы производится независимо от содержимого ячеек - ширина таблицы определяется атрибутами ширины составляющих её элементов;
  • auto - оптимизирующий (двухпроходный) алгоритм. Ширина таблицы определяется атрибутами ширины составляющих её элементов и размерами их содержимого.

Формирование границ

border-collapse:collapse|separate

  • collapse - границы описываются и формируются для горизонтальной группы ячеек,
  • separate - границы описываются и формируются отдельно для каждой ячейки.

При separate-алгоритме размеры границ можно задать с помощью свойства border-spacing одним числом сразу для обеих границ или двумя числами: размер (толщина) горизонтальной границы и вертикальной границы.

Пустые ячейки

empty-cells:show|hide

При separate-алгоритме задаётся способ отображения границ пустых ячеек таблицы:

  • show - граница отображается так же, как и для имеющих содержимое,
  • hide - граница вокруг пустых ячеек таблицы не отображается.

Размеры элементов

Размер элементов по вертикали и горизонтали можно задавать. Можно указать высоту строки (на высоту строки влияет и её выравнивание).

Таблица 2.9. Свойства управления размерами элемента
Свойство Описание Умолчание Применение
min-width Минимальная ширина Зависит от браузера Ко всем элементам, кроме табличных и незаменяемых внутристрочных
max-width Максимальная ширина   Ко всем элементам, кроме табличных и незаменяемых внутристрочных
height Высота auto Ко всем элементам, кроме табличных и незаменяемых внутристрочных
min-height Минимальная высота 0 Ко всем элементам, кроме табличных и незаменяемых внутристрочных
max-height Максимальная высота   Ко всем элементам, кроме табличных и незаменяемых внутристрочных
line-height Высота строки normal Ко всем элементам
vertical-align Вертикальное выравнивание baseline Внутристрочные элементы и ячейки таблиц

Вертикальное выравнивание

vertical-align:baseline|middle|sub|super|text-top|text-bottom|top|bottom

  • baseline - по базовой линии строки или нижней границе объемлющего блока,
  • middle - по базовой линии объемлющего блока плюс половина высоты его,
  • sub - нижний индекс,
  • super - верхний индекс,
  • text-top - верхушка элемента выравнивается по верхушке шрифта родительского элемента,
  • text-bottom - низ элемента выравнивается по низу шрифта родительского элемента,
  • top - верх элемента выравнивается по верху строки,
  • bottom - низ элемента выравнивается по низу строки.

Отображение элементов

Таблица 2.10. Свойства управления отображением содержимого элемента
Свойство Описание Умолчание Применение
overflow Наложение visible К блочным или замещаемым элементам
clip Область отображения auto К блочным или замещаемым элементам
visibility Отображение inherit Ко всем элементам

Вид наложения

overflow:visible|hidden|scroll|auto

  • visible - содержание не обрезается, а может отображаться и вне границ,
  • hidden - содержание обрезается по границам, прокрутка не предусмотрена,
  • scroll - содержание обрезается по границам, предусмотрен механизм прокрутки,
  • auto - обработка определяется браузером.

Область отображения

clip:shape|auto

  • auto - область отображения имеет тот же размер и те же границы, что и сам элемент,
  • shape - форма области отображения - прямоугольник rect (верх, право, низ, лево), для которого задаются смещения относительно границ элемента. Отрицательные смещения обеспечивают отображение вне границ элемента.

Способ отображения

visibility:visible|hidden|collapse

  • visible - область отображения видима,
  • hidden - часть области отображения, выходящая за границы, не видима (прозрачна),
  • collapse - часть области отображения, выходящая за границы, скрыта.
<IMG id="Носорог" src="../Images/Носорог.gif" width="148" height="125" style="visibility:visible"><INPUT onClick="if (this.value=='Скрыть') {Носорог.style.visibility='hidden' this.value='Показать'} else {Носорог.style.visibility='visible' this.value='Скрыть'}" type="button" value="Скрыть">

Границы, отступы, поля

При оформлении документов для каждого из его элементов можно указать границы, отступы и поля. Соответствующие свойства применимы ко всем элементам.

top
left
margin-top
margin-left
border-top
border-left
padding-top
padding-left content padding-right
padding-bottom

 

border-right
border-bottom

 

margin-right
margin-bottom

 

right
bottom

 

Таблица 2.11. Свойства оформления документов
Свойство Описание Умолчание
margin/padding[-top/right/bottom/left] Поле, отступ верхний, правый, нижний, левый 0
border[-top/right/bottom/left]-width Толщина верхней, правой, нижней, левой границы medium
border[-top/right/bottom/left]-color Цвет верхней, правой, нижней, левой границы Значение свойства color
border[-top/right/bottom/left]-style Тип верхней, правой, нижней, левой границы none

Поле

margin:Sv|Pv|auto

Отступ

padding:Sv|Pv|auto

Значения полей, равно как и отступов, можно задать как персонально, например:
<ДЕСКРИПТОР style="margin-left:20px; padding-top:15px">
так и одной строкой
<ДЕСКРИПТОР style="margin:10mm 5mm 10mm 20mm">
в порядке следования: верх, право, низ и лево.

Толщина границы

border-width:Rv>0|thin|medium|thick

  • thin - тонкая,
  • medium - средняя,
  • thick - толстая.

Тип границы

border-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset

  • none - линия отсутствует,
  • hidden - скрытая линия,
  • dotted - пунктирная линия,
  • dashed - штриховая линия,
  • solid - обычная линия,
  • double - двойная обычная линия с интервалом между линиями,
  • groove - углубленная линия,
  • ridge - выпуклая линия,
  • inset - утопленная линия,
  • outset - выпуклая линия.

Свойства границ можно объединять, задавая сразу все нужные величины: толщину, тип и цвет. Например:
h1 {border-bottom: thick solid red}





Рекомендуемые страницы:

Воспользуйтесь поиском по сайту:



©2015- 2021 megalektsii.ru Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав.