Глава 10. Форматирование

Глава 10. Форматирование

Создание и раскрутка сайтов

Вбиваю в ТОП-10, как гвозди

8-965-148-98-02, diplom07@mail.ru

Создание и раскрутка сайтов

Вбиваю в ТОП-10, как гвозди

8-965-148-98-02, diplom07@mail.ru

Глава 10. Форматирование

Глава 10. Форматирование

www.homa.xp3.biz 

В этой главе речь пойдет о форматировании элементов, на самом деле речь об этом уже шла в 7 главе, в которой мы говорили о размерах элемента width и height, минимальных и максимальных размеров элемента max-height, max-width, min-height, min-width и свойстве overflow. Все свойства из 7 главы относятся к категории "форматирование элементов".

Показ элементов

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

Display имеет кучу возможных значений, большинство из которых поддерживаются далеко не всеми браузерами, поэтому мы поговорим лишь о тех, которые будут корректно работать во всех браузерах, а таковых всего 3:

  • block - показывает элемент как блочный (происходит перенос строк вначале и в конце элемента);
  • inline - показывает элемент как встроеный (элемент не переносятся на следующую строку);
  • none - запрещает показ элемента (элемент "удаляется" из общего потока, его занимаемое пространство на экране не резервируется).

    Теперь расшифрую написанное и покажу примеры.

    Начнем с block и inline.

    Помните, в той же 7 главе мы говорили о том, что все элементы можно разделить на строчные и блочные? так вот значения block и inline свойства display позволяет самостоятельно указывать, какие элементы мы хотим сделать строчными, а какие блочными, что позволяет решить ряд задач при верстке сайта с помощью CSS.

    Пример:

    <style>.menu{display:block;color:#006;font-size:14px;font-weight:bold;padding:5px}h2{padding:5px;color:#800;font-size:16px}</style>

    <title>display:block;</title>

    <p>В этом примере показано как можно сделать вертикальное меню присвоив ссылке (элемент a) свойство display с значением block.

    <h2>Меню:</h2>

    <a href=# class=menu>Все о слонах</a>

    <a href=# class=menu>Купить слона</a>

    <a href=# class=menu>Взять слона на прокат</a>

    <p>Как видите ссылки стали блочными, т.е. в начале и в конце элемента a происходит перенос строки, хотя по умолчанию ссылка должна была идти в общем потоке текста.

    смотреть пример

    А вот пример использования значения inline:

    <title>display:inline</title>

    <p>Вот пример того как можно зпретить параграфу перенос строки

    <p style=display:inline;background:#c5f;padding:5px>Это параграф.

    <p style=display:inline;background:#c0e;padding:5px>И это параграф!

    <p style=display:inline;background:#c5f;padding:5px>И снава параграф!

    смотреть пример

    Идем дальше. значение none свойства display запрещает элемент к показу. Браузер удаляет элемент с таким значением из общего потока.

    Небольшой пример:

    <title>display:none</title>

    А где 2-й блок?

    <div style=background:#c5f>Блок 1</div>

    <div style=display:none>Блок 2</div>

    <div style=background:#c0e>Блок 3</div>

    смотреть пример

    Это свойство незаменимо на страницах, где присутствует динамика, например, для создания раскрывающегося списка.

    Я уже показывал этот пример:

    <title>display:none и скрипты</title>

    <script>function show_hide(id){item=document.getElementById(id);if(item.style.display=='none'){item.style.display='block'}else item.style.display='none';}</script>

    <div id=block style=display:none>

    <h2 style=color:#ff0>А вот и я</h2>

    </div>

    <a href=javascript:show_hide('block') style=color:#ff0>Нажми на меня</a>

    <hr>

    <div id=block1 style=display:none>

    <h2 style=color:#0ff>А здесь я</h2>

    </div>

    <a href=javascript:show_hide('block1') style=color:#0ff>И на меня нажми</a>

    смотреть пример

    Курсивом, в данном примере, выделен скрипт, который может динамически обрабатывать блоки div присваивая ему свойства display:none или display:block, и хотя пока Вам, думаю, мало, что понятно из выше написанного, но цель данного примера показать для каких целей предназначено свойство display:none.

    Ну и для общего развития. Как уже говорилось выше block, inline и none это далеко не все возможные значения свойства display.

    Вот остальные:

  • list-item - элемент выводится как блочный и добавляется маркер списка;
  • run-in - устанавливает элемент как блочный или строковый в зависимости от контекста;
  • compact - устанавливает элемент как блочный или строковый в зависимости от контекста;
  • marker значение используется совместно с псевдоэлементами before и after, генерирует блок маркера;
  • table - элемент объявляется таблицей;
  • inline-table - элемент объявляется строкой таблицы;
  • table-row-group - элемент объявляется группой строк ячеек таблицы;
  • table-header-group - элемент объявляется группой строк ячеек таблицы, располагается в начале таблицы;
  • table-footer-group - элемент объявляется группой строк ячеек таблицы, располагается в конце таблицы;
  • table-row - элемент отображается как строка таблицы;
  • table-column-group - определяет, что элемент является группой 1 или более колонок таблицы;
  • table-column - элемент объявляется колонкой ячеек таблицы;
  • table-cell - элемент объявляется ячейкой таблицы;
  • table-caption - задает заголовок таблицы.

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

    Видимость элемента

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

    Возможные значения свойства visibility:

  • inherit - элемент отображается т.к. указанно в элементе родителе;
  • visible - отображает элемент (по умолчанию);
  • hidden - скрывает элемент. в отличии от display:none оставляет за элементом площадь которую он занимает (проще говоря если display:none удаляет элемент, то hidden делает его прозрачным);
  • collapse - скрывает колонки и строки таблицы идентично display:none, если свойство применяется к другим элементам, не имеющим отношения к таблицам, то результат будет таким же, как hidden.

    Пример:

    <title>visibility</title>

    <p>Блок 2 скрыт, однако место, которое он занимает, зарезервировано за ним.

    <div>

    <span style=background:#c5f;padding:5px>блок 1</span>

    <span style=visibility:hidden;background:#c0e;padding:5px>блок 2</span>

    <span style="background:#c5ffa0;padding:5px;">блок 3</span>

    </div>

    <hr>

    <p>Строка 2 скрыта (удалена), если только дело происходит не в IE

    <table border=1>

    <tr>

    <td>Строка 1

    <tr style=visibility:collapse>

    <td>Строка 2

    <tr>

    <td>Строка 3

    </table>

    смотреть пример

    Обратите внимание visibility:collapse не поддерживается браузером IE.

    Видимая часть элемента

    Свойство clip определяет видимую область элемента, в которой будет показано его содержимое. Все, что не помещается в эту область, обрезается и становится невидимым. На данный момент единственно доступная форма области - прямоугольник.

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

    Значения:

  • rect (сверху справа снизу слева) - обрезает элемент сверху, справа, снизу и слева в соответствии с заданными, в скобках, 4 значениями, которые могут выражаться в процентах от ширины/длины элемента, пикселях или любых других единицах измерения принятых в css;
  • auto - оставляет элемент или 1 из сторон элемента без изменений (по умолчанию).

    Пример:

    <title>clip</title>

    <div style='position:absolute;clip:rect(15px auto auto 15px);width:100px;height:100px;background:#c5f;border:double 5px #008'>

    Этот блок частично обрезан слева и сверху.

    </div>

    смотреть пример

    О том, что такое position:absolute (абсолютно позиционированный элемент) мы поговорим в отдельной главе.

    Полезные советы:

  • В виду того, что свойство visibility:collapse не поддерживается браузером IE, рекомендую при работе с таблицами использовать display:none, результат будет аналогичным collapse только работающим в IE.
  • Свойства display, visibility и clip в сочетании со скриптами и псевдоэлементами позволяют достичь весьма интересных результатов.

    << предыдущая глава | следующая глава >>

  • Отвечу на любые вопросы. С уважением, Дмитрий Владимирович:
    8-965-148-98-02, diplom07@mail.ru.
    Печатать страницу: Глава 10. Форматирование

    Глава 10, Форматирование, Глава, 10, Форматирование, создание, сайта, веб, заказ, web, дизайн, раскрутка, продвижение, новый, сайт, рейтинг, сео, seo, Создание сайтов, web-программирование, seo-продвижение, создание и раскрутка сайтов, вбиваю в топ-10, как гвозди, попробуйте бесплатно, Создание сайтов, web-программирование, seo-продвижение, Глава, 10, Форматирование, создание, сайта, веб, заказ, web, дизайн, раскрутка, продвижение, новый, сайт, рейтинг, сео, seo, создание, сайта, веб, заказ, web, дизайн, раскрутка, продвижение, новый, сайт, рейтинг, сео, seo, раскрутка сайтов, Вбиваю в ТОП-10, как гвозди, раскрутка сайтов, Делаю и раскручиваю сайты, Дмитрий Владимирович

    ×

    Ваше письмо