Книга css3 3е издание Серия Бестселлеры OReilly

• Название: Книга css3 3е издание Серия Бестселлеры OReilly
• Анкор: TheBigBookofCSS33rdedition.pdf
• Дата: 08.08.2018
• Размер: 20.28 Mb.
• Имя файла: TheBigBookofCSS33rdedition.pdf
• Тип: Книга; #22630
• страница: 22 из 62

CSS The Missing Manual
«CSS» заключено внутри тега

, так что данный селектор потомка форма- тирует только этот текст (в этом смысле он подобен стилю, который вы добавили в шаге 3 ранее). Размер шрифта был увеличен, его цвет изменился, а высота стро- ки задана так, что теперь вписывается в верхнюю часть страницы. Вы заметите, что высота строки равна 1 em, а, как вы читали в начале этой книги, em основыва- ется на текущем размере шрифта элемента, поэтому в данном случае высота стро- ки будет переведена в 150 пикселов — таков размер шрифта данного стиля.
Один интересный прием позволяет осуществить свойство margin-right
, для ко- торого устанавлено отрицательное значение:
-1.25em
. Поскольку положитель- ные поля отодвигают элементы, отрицательные, в свою очередь, присоединяют элементы друг к другу. Так, в данном случае остальной текст заголовка (The
Missing Manual) располагается поверх «CSS».
ПРИМЕЧАНИЕ
Использование отрицательных полей разрешено в CSS (хотя это и сложная работа). Их даже при- меняют для некоторых весьма интересных разметок CSS.
5. Сохраните файл и просмотрите его в браузере.
Веб-страница должна иметь вид, представленный на рис. 6.22. Теперь вы може- те сравнить получившийся файл с законченным вариантом text.html
, который находится в папке
06_finished учебного материала.

204
Часть 2. Применение CSS
Рис. 6.22. С небольшой помощью CSS можно превратить простой текст в документ с профессиональным дизайном
Вы изучили основные свойства форматирования текста, предлагаемые CSS, и превратили малопривлекательный текст на языке HTML в страницу с отличным дизайном. В следующей главе мы рассмотрим применение на веб-страницах графи- ки, рамок, полей и прочих мощных команд форматирования, предлагаемых CSS.

7
Поля, отступы, границы
На любой HTML-тег воздействует множество CSS-свойств, определяющих, каким образом он будет отображен браузером. Некоторые из них, например границы
(рамки) и фоновый цвет, непосредственно видимы для глаза. Другие нельзя опре- делить явно (например, отступы и поля), но они также обеспечивают форматиро- вание. Понимая, как эти атрибуты работают, вы можете создать привлекательные столбцы, меню, элементы навигации, а также управлять пространством вокруг них
(веб-дизайнеры называют его
свободным, незаполненным пространством). Это делается, чтобы ваши веб-страницы не казались беспорядочными и нечитаемыми и вообще выглядели профессионально.
Все свойства, описываемые в данной главе, составляют основу блочной моде-
ли CSS, которая представляет собой одну из важнейших составляющих этого языка.
Понятие блочной модели
Когда вы думаете об абзаце текста или заголовке, то представляете буквы, слова, предложения. Фотографии, логотипы и другие изображения должны ассоцииро- ваться с тегом

. Браузер обрабатывает все теги как небольшие блоки. Для него любой тег — контейнер с содержимым: текстом, изображением или другими тегами
(рис. 7.1). Область в пределах границ, которая включает содержимое и отступы, может также иметь свой цвет фона. Фактически он является своеобразной подлож- кой, то есть расположен поверх фона. Таким образом, когда вы назначаете границы в виде штриховой линии, цвет проступает в промежутках между точками или штри- хами линий границ.
Все то разнообразие свойств, в которое заключено содержимое, образует блок, или контейнер.
Padding
— отступ, «заполнение» — промежуток между содержимым и его гра- ницей. Отступ отделяет фотографию от окаймляющей ее рамки.
Border
— граница, рамка — линия, черта, контур с любой стороны элемента. Гра- ница может быть со всех четырех сторон или с одной стороны в любой их комби- нации.
Background-color
— цвет фона — заполняет пространство внутри границы, вклю- чая область отступа padding

206
Часть 2. Применение CSS
Margin
— поле — это то пустое пространство, которое отделяет один тег от дру- гого. Полем, например, является промежуток, который находится между нижним краем одного абзаца текста и верхним последующего.
Рис. 7.1. Блочную структуру элемента образует содержимое тега (например, несколько предложений текста), а также отступы, границы и поля

Глава 7. Поля, отступы, границы
207
Для заданного тега можно применить любые комбинации. Вы можете установить только поле или добавить границы и отступы и т. д. Если вы сами явно не устанав- ливаете какие-то из этих свойств, то браузер предопределит их в своих настройках по умолчанию. Как правило, к тегам веб-страниц не добавляют ни отступов, ни гра- ниц. В то же время теги заголовков и абзацев по умолчанию форматируются брау- зерами с предопределенными значениями верхнего и нижнего полей.
ПРИМЕЧАНИЕ
Поскольку разные браузеры применяют разное количество отступов и полей к одним и тем же те- гам, лучше всего «обнулять» значения этих свойств для всех тегов. Другими словами, используйте набор простых стилей, названный сбросом значений CSS, для удаления отступов и полей из тегов
HTML. Потом, когда вы будете создавать дополнительные стили, добавляющие поля и отступы, вы сможете быть уверены в том, что у вас будет согласованный вид элементов в разных браузерах.
Управление размерами полей и отступов
Как поля, так и отступы добавляют промежутки вокруг содержимого тегов. Свой- ства margin и padding используются для отделения одного элемента веб-страницы от другого. Можно использовать их, например, чтобы добавить пустое пространс- тво между навигационным меню слева и основным содержимым главного раздела веб-страницы справа. Возможно, вы захотите отодвинуть границу от края фотогра- фии (рис. 7.2).
Рис. 7.2. Каждая фотография этой веб-страницы имеет поле размером 10 пикселов, то есть промежуток, отделяющий две соседние фотографии, составляет 20 пикселов

208
Часть 2. Применение CSS
На рис. 7.2 благодаря отступам изображения отделены друг от друга и для них установлен серый цвет фона. Вы можете задавать границы и поля для каждой сто- роны изображения независимо друг от друга. Обратите внимание, что для нижних краев (оснований) фотографий установлены большие по размеру отступы, чем для остальных.
Свойства padding и margin производят одинаковый визуальный эффект, и, пока вы не примените границу или цвет фона, вы не сможете сказать наверняка, каким свой- ством определен этот промежуток. Но если элемент имеет обрамляющую границу или цветной фон (подложку), вы заметите существенное различие этих свойств. От- ступ добавляет промежуток между содержимым и границей элемента и предотвра- щает эффект заключения содержимого элемента в рамку. Он также включает область фона, поэтому пространство, занимаемое отступом, может быть свободно от содер- жимого (текста или фотографии), но может быть заполнено фоновым цветом или изображением. А поля добавляют так называемые межстолбцовые промежутки, ко- торые придают веб-странице более «воздушный» внешний вид.
Вы можете управлять полями или отступами каждого отдельного элемента независимо. Четыре свойства управляют соответствующими полями с каждой стороны элемента: margin-top
, margin-right
, margin-bottom и margin-left
. Аналогично с отступами: padding-top
, padding-right
, padding-bottom и padding-left
. Вы можете использовать любые единицы измерения CSS для определения размеров полей и отступов, например:
margin-right: 20px;
padding-top: 3em;
margin-left: 10%;
Пикселы и em используются и работают точно так же, как при форматировании текста (см. раздел «Установка размера шрифта» гл. 6). Поле 20 пикселов добавля- ет соответствующий пустой промежуток, отступ 3 em — промежуток, в три раза больше размера шрифта стилизуемого элемента. Вы можете также использовать процентные значения, но здесь не все так просто (комментарии смотрите во врезке
«Информация для опытных пользователей. Поля, отступы в процентах» далее).
СОВЕТ
Чтобы удалить все промежутки полей или отступов, используйте свойства со значением 0 (напри- мер, margin-top: 0 или padding-bottom: 0). Чтобы убрать все дополнительное пустое пространство с четырех сторон окна браузера, нужно присвоить свойствам margin и padding нулевые значения: margin: 0; padding 0;. Это позволит поместить баннер-заголовок, логотип или какой-то другой эле- мент веб-страницы вплотную у самого края окна браузера, без промежутков.
ИНФОРМАЦИЯ ДЛЯ ОПЫТНЫХ ПОЛЬЗОВАТЕЛЕЙ
Поля, отступы в процентах
При использовании в качестве единиц измерения процентов браузеры вычисляют размер промежутков полей и отступов на основе ширины самого элемен- та-контейнера,
в который заключены форматиру­
емые элементы. Рассмотрим самый простой случай веб­страницы, когда таким элементом­контейнером является

, который имеет ширину всего окна браузера. В данном случае значение в процентах

Глава 7. Поля, отступы, границы
209
в каждый конкретный момент времени вычисляется на основании текущей ширины окна. Допустим, оно составляет 760 пикселов. При этом левое поле, равное
10 %, добавит промежуток 76 пикселов с левого края стилизуемого элемента. Но если вы измените раз­
меры окна браузера, размер промежутка левого поля тоже изменится. Уменьшение до 600 пикселов изме­
нит размер на 60 пикселов (10 % от 600 пикселов).
Однако элемент­контейнер не всегда равен ширине окна браузера. В последующих главах книги, когда мы будем создавать более сложный дизайн веб­страниц, вы увидите, что для разработки комплексного дизайна придется добавлять дополнительные элементы.
Возможно, вы захотите добавить в веб­страницу тег

для группировки, отделения содержимого бо­
кового навигационного меню. Допустим, меню имеет ширину 300 пикселов. Тег

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

бокового меню и установленного в размере 10 %, будет равен 30 пикселам.
При установке процентных значений верхнего и нижне­
го полей элементов ситуация еще более запутанная: эти значения вычисляются на основании ширины элемента­
контейнера, а не его высоты. Таким образом, 20%­ное верхнее поле составит 20 % от ширины стилизуемого тега.
ИНФОРМАЦИЯ ДЛЯ ОПЫТНЫХ ПОЛЬЗОВАТЕЛЕЙ
Сокращенный набор свойств margin и padding
Нередко требуется одновременно установить одинаковые значения полей или от- ступов для всех четырех сторон стилизуемого элемента. Но последовательно наби- рать четыре различных свойства стиля (
margin-right
, margin-left и т. д.) утомительно и отнимает лишнее время. Не пугайтесь: здесь вы также можете использовать сокра- щенные варианты свойств margin и padding для быстрой установки всех четырех па- раметров одновременно:
margin: 0 10px 10px 20px;
padding: 10px 5px 5px 10px;
СОВЕТ
Если при описании стиля для CSS-свойства используется значение, равное 0, то совсем не нужно указывать единицу измерения. Например, наберите всего лишь margin: 0; вместо margin: 0px;.
Порядок определения четырех значений свойств margin и padding важен. Они должны идти в такой последовательности: верхнее значение, правое значение, ниж-
нее и левое. Без этого у вас могут быть проблемы с форматированием. Самый легкий способ запомнить очередность — по буквам английского слова
TRouBLe (пробле- мы, неприятности), соответствующим первым буквам английских слов, отража- ющих последовательность:
Top (верх), Right (право), Bottom (низ), Left (лево).
Если вы хотите применить одинаковое значение свойства для всех четырех сто- рон, нет ничего проще — используйте единственное значение. Чтобы удалить все поля из заголовка
, напишите такой стиль:
h1 {
margin: 0;
}
Кроме того, пользуйтесь кратким вариантом набора для добавления отступов — промежутков между содержимым и его границами:
padding: 10px;

210
Часть 2. Применение CSS
ПРИМЕЧАНИЕ
Если нужно применить одинаковое значение свойства поля или отступа сверху и снизу элемента и одно и то же значение для левого и правого края, можете указывать два значения. Так, объявление margin:
0 2em; удаляет верхнее и нижнее поля, а левое и правое поля устанавливаются равными 2 em. Точно так же, если верхние и нижние поля (или отступы) изменяются, а правые и левые остаются прежними, можно воспользоваться тремя значениями. Например, объявление margin: 0 2em 1em; установит раз- мер верхнего поля равным 0, левого и правого полей — 2 ems, а нижнего поля — 1 em.
Конфликты полей
В CSS не всегда справедливы математические расчеты. Вы сами можете в этом убедиться, когда нижнее поле одного элемента веб-страницы касается верхнего поля другого элемента. Вместо того чтобы объединить эти поля, браузер исполь- зует большее из них (рис. 7.3, вверху). Предположим, значение нижнего поля мар- кированного списка установлено равным 30 пикселам, а значение верхнего поля следующего за ним абзаца составляет 20 пикселов. Вместо того чтобы сложить два значения, получив общий промежуток в размере 50 пикселов между списком и аб- зацем, браузер применяет наибольшее из двух значений — в данном случае 30 пик- селов. Если вас это не устраивает, используйте вместо полей верхний или нижний отступ (см. рис. 7.3, внизу).
Рис. 7.3. В случае соприкосновения двух вертикальных полей меньшее из них игнорируется
На рис. 7.3, несмотря на то что и верхний заголовок имеет нижнее поле в размере
20 пикселов, а у расположенного ниже абзаца текста верхнее составляет 15 пикселов, браузер добавляет промежуток между ними, равный всего 20 пикселам. Чтобы по- лучить тот промежуток, который вы хотели (35 пикселов), используйте вместо полей отступы, как показано в нижней части рисунка. Здесь для заголовка установлен ниж- ний отступ, равный 20 пикселам. Он складывается с верхним полем абзаца, равным
15 пикселам, и получается общий промежуток в размере 35 пикселов.

Глава 7. Поля, отступы, границы
211
Ситуация еще более усугубляется, когда один элемент веб-страницы вложен в другой. Это может привести к затиранию отдельных частей. Допустим, вы добав- ляете на веб-страницу «предупреждение» (заключенное в тег

). Верхнее и ниж- нее поля устанавливаются в размере 20 пикселов, чтобы отделить сообщение от заголовка сверху и от абзаца текста снизу. Пока все выглядит неплохо.
Но, предположим, вы вставляете заголовок в сообщение с предупреждением и, чтобы добавить небольшие промежутки между сообщением и верхним и нижним краем блока

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

, но вы не правы (рис. 7.4, слева). Вместо этого поле появляется над блоком

. В данном случае не имеет значения, како- го размера поле применяется к заголовку, — поле все равно окажется над

Рис. 7.4. Как бы ни соприкасались вертикальные поля, в любом случае произойдет конфликт
Чтобы решить эту проблему, добавьте небольшой отступ или границу вокруг элемента-контейнера (в данном случае 1 пиксел нижнего отступа для тега

).
ПРИМЕЧАНИЕ
На профессиональном жаргоне CSS это явление называется конфликтом полей. Оно означает, что два поля фактически превращаются в одно.
Есть два пути решения этой проблемы: добавить либо небольшой отступ, либо границу вокруг

. Поскольку между этими двумя полями располагаются гра- ница и отступ, поля больше не соприкасаются и заголовок имеет небольшой отде- ляющий промежуток (см. рис. 7.4, внизу).

212
Часть 2. Применение CSS
ПРИМЕЧАНИЕ
Горизонтальные (левые и правые) поля и поля между плавающими элементами не конфликтуют.
Между абсолютно и относительно позиционируемыми элементами также нет конфликта.
Удаление пустых полей
с помощью отрицательных значений
Большинство значений свойств в CSS должны быть положительными. Что же про- изойдет, если указать для размера шрифта текста отрицательное значение, напри- мер, минус 20 пикселов? Вообще, отступы должны иметь положительные значе- ния. Однако CSS допускает использование отрицательных значений для создания определенных визуальных эффектов. Отрицательные поля вместо добавления пу- стого пространства между тегом и соседними элементами, наоборот, вызывают
удаление этих промежутков. В результате может получиться абзац, накладываю- щийся на заголовок, выступающий из своего элемента-контейнера (с боковой па- нели или из другого элемента

) или даже совсем исчезающий за пределами окна браузера. Таким образом, можно с уверенностью сказать, что применение отрицательных значений полей дает немалую пользу.
Даже когда вы устанавливаете значения полей, равные 0, между двумя заго- ловками все равно остается небольшой промежуток (благодаря межстрочному интервалу, как описано в подразделе «Установка межстрочного интервала» раз- дела «Форматирование абзацев текста» гл. 6). На самом деле это не так уж плохо, поскольку трудно читать предложения без дополнительных интервалов, слива- ющиеся друг с другом. Тем не менее разумное, умеренное использование неболь- ших промежутков между заголовками текста поможет создать интересные визу- альные эффекты. Второй заголовок на рис. 7.5 (который начинается со слов Raise
Tuna) имеет верхнее поле, равное 10 пикселам. Оно поднимает заголовок вверх, что обеспечивает небольшое наложение текста на пространство вышестоящего заголовка. Кроме того, левые и правые границы заголовка, начинающегося со слов
Extra! Extra!, теперь соприкасаются с буквами большего заголовка, создавая эф- фект единой надписи.
Можно также использовать отрицательные значения полей для того, чтобы имитировать отрицательный отступ. В третьем заголовке на рис. 7.5, который на- чинается со слов The Extraordinary Technique, линия подчеркивания отображена прямо под текстом. Она на самом деле представляет собой верхнюю границу сле- дующего абзаца (о том, как добавить к тексту границы, вы узнаете из следующего раздела). Но поскольку здесь определена верхняя граница с отрицательным зна- чением, она располагается чуть выше текста абзаца и фактически находится под верхним заголовком. Обратите внимание на то, что хвост буквы Q заголовка бук- вально свисает под линией-границей. Поскольку отступ между содержимым (то есть
Q) и границей не может быть отрицательным, вам не удастся поднять нижнюю границу так, чтобы она находилась ближе к тексту или любому другому содержи- мому, не говоря уже о наложении. И все же есть возможность добиться этого эф- фекта, применив границу с отрицательным значением к последующему, нижесто- ящему элементу веб-страницы.

Глава 7. Поля, отступы, границы
213
Рис. 7.5. Чтобы превратить верхнюю границу последнего абзаца в нижнюю границу вышестоящего заголовка, вернее, имитировать такой эффект, добавим небольшой отступ
СОВЕТ
Можете использовать либо верхнее поле абзаца с отрицательным значением, либо отрицательное нижнее поле заголовка. Оба варианта приведут к одному и тому же визуальному эффекту поднятия абзаца выше, ближе к тексту заголовка.
Отображение линейных и блочных элементов
Хотя браузеры и обрабатывают любой тег веб-страницы подобно блочному эле- менту, на самом деле они не все одинаковы. В CSS есть два различных типа эле- ментов: блочные (прямоугольные) и линейные (inline), которым соответствуют два различных типа тегов.
В блочных элементах создается разрыв строки перед тегом и после него. Напри- мер, тег создает блок, отделенный от тегов, расположенных выше и ниже его.
Другими примерами являются заголовки, теги

, таблицы, списки и элементы списков.
Линейные (inline) элементы не создают разрывов строк ни до, ни после самих тегов. Они отображаются на одной строке с содержимым рядом стоящих тегов. Тег

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

. Было бы очень странно, если бы отдельное слово в середине абзаца, вы- деленное

, вдруг появилось на отдельной строке.
Другими примерами линейных тегов являются

— для добавления изобра- жений,

— для создания ссылок, различные теги для полей форм и т. д.
В большинстве случаев CSS работает с линейными и блочными элементами оди- наково. Можно применять шрифты, цвет, фоновые параметры, границы к обоим типам элементов. Однако поля и отступы линейных элементов браузеры обрабаты- вают по-другому. Если добавить поля или отступы слева или справа линейного

214
Часть 2. Применение CSS
элемента, то посредством установки верхнего или нижнего отступа или поля уве- личить высоту линейного элемента не удастся. В верхнем абзаце на рис. 7.6 линей- ному элементу назначено форматирование с применением границ, фонового цвета и полей по 20 пикселов со всех четырех сторон. Но браузер добавляет пустые про- межутки только с левой и правой сторон элемента.
Рис. 7.6. Добавление к линейному элементу верхнего, нижнего полей или отступа не изменит высоту элемента: форматирование будет не таким, как вы ожидаете
На рис. 7.6 в среднем абзаце фон и границы ссылки накладываются на текст, находящийся выше и ниже стилизуемого. Цвет фона линейного элемента отобра- жается поверх вышестоящей строки текста, но под следующей. Браузер обрабаты- вает каждую строку так, как будто она расположена в стеке, наверху по отношению к предыдущей. Как правило, это не представляет проблемы, так как строки текста обычно не накладываются. Если вы хотите, чтобы верхние и нижние поля работа- ли для линейного элемента, используйте инструкцию display:inline-block
(см рис. 7.6,
внизу). Она оставит элемент линейным, но он будет восприниматься как блочный, поэтому отступы, поля, границы, ширина и высота будут к нему применяться. Это работает даже в таких браузерах, как Internet Explorer 7, но только для нормальных линейных элементов, например ссылок, тегов

,

и

. Кроме того,

Глава 7. Поля, отступы, границы
215
вам следует добавить инструкцию vertical-align:middle
, чтобы Internet Explorer 7 отображал линейный блок таким же образом, как и остальные браузеры.
ПРИМЕЧАНИЕ
Есть одно исключение из этого правила: если поля или отступы применяются к линейным элемен- там , элементы не изменяют своей высоты. Браузеры корректно изменяют высоту контейне- ра элемента-изображения, чтобы подогнать ваши отступы и поля.
Иногда требуется, чтобы линейные элементы вели себя так же, как блочные, или наоборот. Маркированные списки рассматривают элемент в виде отдельного блока, то есть каждый из списка располагается в стеке поверх следующего. Но что делать, если вы хотите изменить поведение пунктов списка таким образом, чтобы все они располагались рядом друг с другом, на одной строке? Или, возможно, вы захотите, чтобы линейный элемент обрабатывался как блочный, например, изоб- ражение, встроенное в абзац текста, было расположено на отдельной строке, с вер- хним и нижним промежутками-интервалами.
К счастью, в CSS есть команда, которая позволяет вам это сделать, — это свойство display
. С его помощью можно заставить блочный элемент работать как линейный:
display: inline;
Или, наоборот, вы можете сделать так, чтобы линейные элементы, например изображение или ссылка, вели себя как блочные:
display: block;
ПРИМЕЧАНИЕ
У свойства display есть большое количество параметров, многие из которых не работают во всех браузерах. Значение inline-block работает во всех современных браузерах (см. рис. 7.6). Другое значение — none — обрабатывается в большинстве браузеров и имеет множество вариантов ис- пользования. Это значение выполняет одну простую функцию — полностью скрывает стилизуемый элемент, чтобы он не отображался в окне браузера.
Используя программный код JavaScript, вы можете скрыть элементы, чтобы они стали видимыми после изменения значения свойства display на inline или block. Сделать их видимыми можно и сред- ствами CSS: в книге вы увидите такой пример.
Добавление границ
Граница представляет собой обычную линию, которая очерчивает стилизуемый элемент. Как показано на рис. 7.1, она располагается между отступом и полем эле- мента. С помощью границ, добавленных со всех сторон, можно заключить изобра- жение в рамку или выделить баннер и т. д. Но совсем не обязательно применять границы, создающие очертания со всего содержимого элемента. Точно так же, как вы добавляете границы с четырех сторон элемента, можно добавить требуемую границу только к любой комбинации. Эта гибкость обеспечивает добавление про- извольных элементов дизайна. Например, добавьте границу слева от элемента, придайте ей толщину около 1 em, и она станет похожа на маркер в виде квадрата.
Единственная граница с нижнего края абзаца производит тот же визуальный эф- фект, что и элемент