1. Bitcoin адрес для пожертвований: 1dapfB97R98wg8J3hknWpMDJ7P61CWjNn
    Скрыть объявление
  2. Участникам форума доступны: Skype, WhatsApp и Telegram конференции. Присоединяйтесь!
  3. Наши основные группы и каналы: VK, Twitter. Подписывайтесь!
  4. Мы открыли музыкальный клуб! Заходи и ставь свое музло!
  5. Скрыть объявление

Визуальное форматирование в CSS

Тема в разделе "Архив", создана пользователем WTBG, 29 июл 2008.

  1. WTBG

    WTBG Старейшина

    Репутация

    0 / 0


    display

    Определяет вид создаваемого элемента. Эти разные виды по-разному взаимодействуют друг с другом зависимости от расположения на странице.

    Значение:
    • inline - встроенный элемент (по умолчанию).
    • block - блочный элемент.
    • list-item - встроенный элемент пункта списка.
    • marker - общее содержимое, которое появляется перед элементом или после него. Используется только с псевдо-элементами : before (перед) и safter (после),
    • none - отсутствие элемента. Элемент в общей схеме не работает.
    • run-in - элемент типа блочного, свойства которого зависят от его местоположения.
    • compact - элемент типа встроенного, свойства которого зависят от его местоположения,
    • table (таблица), inline-table (оперативная таблица), table-row-group (группа строк таблицы), table-column (столбец таблицы), table-column-group (группа столбцов таблицы), table-header-group (группа верхних заголовков таблицы), table-footer-group (группа нижних заголовков таблицы), table-row (строка таблицы), table-cell (ячейка таблицы), table-caption (подпись таблицы) - элемент таблицы, соответствующий имени свойства.
    • inherit - принимается значение родительского элемента.
    Код (Text):
    1. p {display: block}

    width

    Определяет ширину элемента.

    Значение:
    • auto - ширина элемента выбирается броузером (по умолчанию).
    • любая соответствующая стандарту длина - число, представляющее ширину элемента.
    • любое соответствующее стандарту процентное значение - отношение в процентах ширины элемента к ширине окна,
    • inherit - принимается значение родительского элемента.
    Код (Text):
    1. p {width: 260px}

    min-width, max-width

    Определяет соответственно минимальную или максимальную ширину элемента.

    Значение:
    • любая соответствующая стандарту длина - число, представляющее минимальную или максимальную ширину элемента.
    • любое соответствующее стандарту процентное значение - отношение в процентах минимальной или максимальной ширины элемента к ширине окна.
    • none - ширина не ограничивается; такое значение применяется только к свойству max-width.
    • inherit - принимается значение родительского элемента.
    Код (Text):
    1. p {min-width: 100pх; max-width: 400px}

    height

    Определяет высоту элемента.

    Значение:
    • auto - высота элемента выбирается броузером (по умолчанию).
    • любая соответствующая стандарту длина - число, представляющее высоту элемента.
    • любое соответствующее стандарту процентное значение - отношение в процентах высоты элемента к высоте окна.
    • inherit - принимается значение родительского элемента.
    Код (Text):
    1. p {height: 260px}

    min-height, max-height

    Определяет соответственно минимальную или максимальную высоту элемента.

    Значение:
    • любая соответствующая стандарту длина - число, представляющее минимальную или максимальную высоту элемента.
    • любое соответствующее стандарту процентное значение - отношение в процентах минимальной или максимальной высоты элемента к высоте окна, попе - высота не ограничивается; такое значение применяется только к свойству max-height.
    • inherit - принимается значение родительского элемента.
    Код (Text):
    1. p{min-height: 100pх; max-height: 400px}

    line-height

    Определяет интерлиньяж для текстового элемента. Интерлиньяж - это расстояние между базовыми линиями двух соседних строк.

    Значение:
    • normal - значение выбирается броузером так, чтобы на странице поместились все элементы (по умолчанию).
    • любая соответствующая стандарту длина - число, представляющее высоту элемента.
    • любое соответствующее стандарту процентное значение - отношение е процентах высоты элемента к высоте окна.
    • любое соответствующее стандарту число - число, равное количеству кеглей используемого шрифта.
    • inherit - принимается значение родительского элемента.
    Код (Text):
    1. p {line-height: 2.2}

    vertical-align

    Определяет выравнивание текста по вертикали внутри элемента.

    Значение:
    • baseline - выравнивание базовой линии элемента по базовой линии его родительского элемента (по умолчанию).
    • middle - выравнивание средней линии элемента по базовой линии его родительского элемента
    • top - выравнивание верхней части элемента по верхнему краю его текста.
    • bottom - выравнивание нижней части элемента по базовой линии его родительского элемента.
    • sub - выравнивание текста элемента, чтобы он стал подстрочным по отношению к базовой линии родительского элемента.
    • super - выравнивание элемента, чтобы он стал надстрочным по отношению к базовой линии родительского элемента.
    • text-top - выравнивание верхней части элемента по верхней части текста родительского элемента.
    • text-bottom - выравнивание нижней части элемента по нижней части текста родительского элемента.
    • любая соответствующая стандарту длина - число, показывающее, на сколько поднят уровень элемента. Отрицательные числа показывают, на сколько уровень элемента ниже.
    • любое соответствующее стандарту процентное значение - отношение в процентах, показывающее, на сколько поднят уровень элемента. Отрицательные числа показывают, на сколько уровень элемента ниже.
    • inherit - принимается значение родительского элемента.
    Код (Text):
    1. p{vertical-align: super}

    float

    Определяет обтекание элемента слева или справа.

    Значение:
    • none - элемент не обтекается (по умолчанию).
    • left - элемент передвинут влево, а остальные элементы обтекают его справа.
    • right - элемент передвинут вправо, а остальные элементы обтекают его слева.
    • inherit - принимается значение родительского элемента.
    Код (Text):
    1. img {float: right}

    clear

    Определяет, как данный элемент обтекается по сторонам другими элементами.

    Значение:
    • none - обтекание доступно со всех сторон (по умолчанию).
    • left - элементов не должно быть слева от данного элемента.
    • right - элементов не должно быть справа от данного элемента.
    • both - элементов не должно быть справа и слева от данного элемента.
    • inherit - принимается значение родительского элемента.
    Код (Text):
    1. img {clear: both}

    overflow

    Определяет, как отображать элемент, когда он перекрывает другой элемент.

    Значение:
    • visible - перекрываемый элемент виден полностью, и из него ничего не вырезано (по умолчанию).
    • hidden - перекрываемая часть вырезается.
    • scroll - перекрываемая часть вырезается, и становятся видимыми любые полосы прокрутки.
    • auto - браузером определяется, надо ли вырезать перекрываемые области
    • inherit - принимается значение родительского элемента.
    Код (Text):
    1. img {overflow: visible}

    visibility

    Определяет, является ли элемент видимым.

    Значение:
    • visible - элемент видимый.
    • hidden - элемент не видимый, но он все равно влияет на общую структуру страницы.
    • collapse-если не применяется к таблицам, то получается тот же эффект, что и для hidden.
    • inherit - (по умолчанию) принимается значение родительского элемента.
    Код (Text):
    1. img {visibility: visible}

    clip

    Определяет для перекрываемых частей вырезаемые области.

    Значение:
    • auto - вырезаемая область должна иметь те же размеры и местоположение, что и перекрываемая часть (по умолчанию).
    • rect (top, right, bottom, left)-вырезаемая область определяется значениями сдвига соответственно сверху, справа, снизу и слева.
    • inherit - принимается значение родительского элемента.
    Код (Text):
    1. img {clip: rect(5px, 4рх, 2рх, 4рх)}

    direction

    Определяет направление текста в текстовых блоках.

    Значение:
    • Itr - слева направо (по умолчанию).
    • rtl - справа налево.
    • inherit - принимается значение родительского элемента.
    Код (Text):
    1. body {direction: Itr; unicode-bidi: embed}

    unicode-bidi

    Позволяет менять направление текста.

    Значение:
    • normal - менять направление письма не разрешено (по умолчанию).
    • embed - можно устанавливать направление письма с помощью свойства direction.
    • bidi-override - можно устанавливать направление письма с помощью свойства direction. Применяется к дополнительным текстовым блокам
    • inherit - принимается значение родительского элемента.
    Код (Text):
    1. body {unicode-bidi: embed}

    cursor

    Определяет, как выглядит указатель мыши при прохождении по элементу.

    Значение:
    • auto - внешний вид определяется браузером (по умолчанию).
    • crosshair - принимает форму указателя "графическое выделение".
    • default - внешний вид, как у указателя, установленного в системе пользователя по умолчанию.
    • pointer - принимает форму указателя "выбор ссылки".
    • move - принимает форму указателя "перемещение".
    • e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s- resize, w-resize - принимает формы указателей изменения размеров.
    • text - принимает форму указателя выделения текста.
    • wait - принимает форму указателя "система недоступна".
    • help - принимает форму указателя "выбор справки".
    • любой соответствующий стандарту URL - URL файла указателя мыши.
    • inherit - принимается значение родительского элемента.
    Свойство cursor в CSS3
    • cору - указывает на то, что что-то будет скопировано. Может изображаться как стрелка с небольшим знаком плюса рядом с ней.
    • alias - представляет альтернативу или ярлык на что-либо. Часто изображается как стрелка с небольшой изогнутой стрелкой сразу, за ней. Поддерживается Firefox.
    • context menu - этот курсор указывает на наличие контекстного меню, обычно открываемого щелчком на объекте правой кнопкой мыши. Чаете изображается в виде стрелки с небольшой картинкой меню сразу за ней.
    • cell - указывает на то, что может быть выбрана ячейка или группа ячеек. Курсор должен выглядеть как жирный знак плюс. Поддерживается Firefox
    • grab - указывает на то, что объект может быть ухвачен. Курсор должен выглядеть как разжатая кисть.
    • grabbing - указывает на то, что объект был схвачен. Курсор должен выглядеть как сжатая в кулак кисть.
    • spinning - свидетельствует о том, что программа выполняет задачу. Похоже на свойство wait, но пользователь может продолжать взаимодействовать с программой. Возможны различные изображения курсора, включая вращающийся мячик.
    • count up - указывает на то, что программа осуществляет отсчет в прямом направлении. Курсор должен быть изображен в виде отсчитывающих пальцев.
    • count down - указывает на то, что программа осуществляет отсчет в обратном направлении. Подобно отсчету в прямом направлении, курсор должен быть изображен в виде отсчитывающих пальцев.
    • count up-down - указывает на то, что программа осуществляет отсчет сначала в прямом, а затем в обратном направлении.
    Код (Text):
    1. img {cursor: pointer}

    zoom

    Определяет масштаб элемента. Работает только в IE.

    Значение:
    • число с плавающий точкой, где 1.0 нормальный размер.
    • любое соответствующее стандарту процентное значение, где 100% нормальный размер.
    Код (Text):
    1. img {zoom: 2.0}    /*Элемент увеличен в два раза*/
    Код (Text):
    1. div {zoom: 300%}    /*Элемент увеличен в три раза*/

    Пожалуйста, войдите или зарегистрируйтесь для просмотра скрытого текста.



  2. Злой заяц

    Злой заяц Новичок

    Репутация

    24 / 7


    Скрытый текст:
    Для просмотра скрытого текста Вы должны отключить AdBlock, либо другой блокировщик рекламы.

  3. nuvusuki

    nuvusuki Новичок

    Репутация

    0 / 0


    с unicode-bidi не совсем понятно, можно пример более доступный?