,
или
Книга css3 3е издание Серия Бестселлеры OReilly
 Скачать 20.28 Mb.
|
|
(горизонтальная линия), выступая разделителем частей веб-страницы. 216 Часть 2. Применение CSS Вы можете управлять тремя различными свойствами любой из границ: color (цвет), width (ширина, толщина) и style (стиль). Цвет color может быть представ- лен шестнадцатеричным числом, ключевым словом или значением в системе RGB (или RGBA). Ширина границы width — толщина линии, используемой для очер- чивания. Вы можете использовать любые единицы измерения CSS (кроме процен- тов) или ключевые слова thin (тонкая линия), medium (средняя) и thick (толстая). Самые распространенные и понятные единицы измерения для данного свойства — пикселы. И наконец, свойство style управляет типом линии границы. Существует мно- жество различных стилей. Примеры приведены на рис. 7.7. Вы можете также определить стиль с помощью ключевых слов. Например, solid рисует сплошную линию, а dashed — штриховую (пунктирную). В CSS для границ имеются следую- щие стили: solid , dotted , dashed , double , groove , ridge , inset , outset , none и hidden . Клю- чевые слова none и hidden работают одинаково: они полностью удаляют границы. Но значение none удобно использовать для удаления границы с одной стороны элемента (см. раздел «Форматирование абзацев текста» гл. 6). Рис. 7.7. Внешний вид стилей границ в следующих браузерах: Internet Explorer 9 (вверху слева), Chrome для Windows (вверху справа), Firefox для Macintosh (внизу слева) и Safari для Macintosh (внизу справа) Глава 7. Поля, отступы, границы 217 Сокращенный набор свойства border Если вы посмотрите на полный список свойств, доступных в CSS, то подумаете, что границы действительно сложны. Вообще, есть 20 разновидностей свойств границ, с которыми вы столкнетесь в следующих разделах книги, а также не- сколько относящихся к таблицам. Но все это — лишь варианты, обеспечивающие различные способы управления одними и теми же тремя свойствами: цвета, ши- рины (толщины) и стиля для каждой из четырех границ. Наиболее простое и по- нятное свойство — border , которое просто добавляет границы с заданными пара- метрами: border: 4px solid #FF0000; Данный стиль создает сплошную красную границу с толщиной линии 4 пиксе- ла. Вы можете использовать это свойство для создания простейшей рамки, окайм- ляющей изображение, панель навигации или любой другой элемент, которые надо выделить в отдельный блок. ПРИМЕЧАНИЕ Последовательность указания параметров свойства не имеет значения: border: 4px solid #FF0000; работает так же, как border: #FF0000 solid 4px;. Форматирование отдельных границ Вы можете управлять границей с каждой стороны элемента отдельно, используя соответствующее свойство: border-top , border-bottom , border-left или border-right Они работают точно так же, как стандартное border , с тем исключением, что управляют границей только с одной стороны стилизуемого элемента. Добавить красную пунктирную линию снизу можно, используя следующее объявление свойства: border-bottom: 2px dashed red; Вы можете объединять общее свойство border со свойствами отдельных границ. Например, использовать border-left , чтобы определить основной, общий стиль, а затем выборочно настроить одну или несколько границ. Допустим, вы хотите, чтобы верхняя, левая и правая стороны абзаца имели одинаковый тип границы, а нижняя выглядела по-другому. Можно написать следующие четыре строки CSS- кода: border-top: 2px solid black; border-left: 2px solid black; border-right: 2px solid black; border-bottom: 4px dashed #333; Такого же эффекта можно достигнуть всего двумя строками CSS-кода: border: 2px solid black; border-bottom: 4px dashed #333; Первая строка кода определяет общий вид всех четырех границ, а вторая пере- определяет вид нижней границы. Преимущество не только в том, что легче напи- сать две строки CSS-кода вместо четырех, но и в том, что изменить стиль будет 218 Часть 2. Применение CSS проще. Если вы захотите сделать цвет верхней, левой и правой границ красным, то необходимо отредактировать единственную строку кода вместо трех: border: 2px solid red; border-bottom: 4px dashed #333; При использовании этого сокращенного метода установки границ определяет- ся общий вид всех четырех границ. Затем вид одной из границ переопределяется с помощью свойства конкретной границы, например border-left . Очень важно, чтобы CSS-свойства были написаны в определенной последовательности. В общем случае глобальные установки границ должны быть на первом месте, а установки отдельной границы — на втором: border: 2px solid black; border-bottom: 4px dashed #333; Поскольку свойство нижней границы border-bottom указано вторым, оно час- тично переопределяет общие установки свойства border . Если бы border-bottom было расположено первым, то border было бы отменено и все четыре границы ста- ли бы одинаковыми. Последнее явное свойство может переопределить любые ана- логичные свойства, определенные в CSS-коде выше. Это пример работы механиз- ма каскадности CSS, который мы рассматривали в гл. 5. Вы также можете использовать этот сокращенный метод установки границ, чтобы выключить отображение посредством ключевого слова none . Предположим, вы хотите установить границы только с трех сторон элемента (сверху, слева, сни- зу). Всего две строки кода обеспечат такое форматирование: border: 2px inset #FFCC33; border-right: none; Возможность тонкой настройки границ каждой стороны стилизуемого элемен- та является причиной большого количества разновидностей свойств границ. Остальные 15 свойств позволяют определять индивидуальные цвета, стили, тол- щину линий границ для каждой стороны. Например, можно переписать опреде- ление border: 2px double #FFCC33; в следующем виде: border-width: 2px; border-style: double; border-color: #FFCC33; В этом варианте используются три строки кода вместо одной, поэтому вы, на- верное, будете избегать такого способа. Однако каждая сторона имеет свой соб- ственный набор из трех свойств, которые удобно использовать для отмены одного. Правая граница: border-right-width , border-right-style и border-right-color . Левая, верхняя и нижняя границы имеют похожие свойства: border-left-width , border-left- style и т. д. Вы можете изменить ширину единственной стороны границы так: border-right- width: 4px; . При таком подходе хорошо то, что, когда вы позже решите изменить границу на сплошную, нужно будет отредактировать только групповое свойство границы, изменив dashed на solid Глава 7. Поля, отступы, границы 219 Кроме того, вы можете задать собственные значения для каждой стороны гра- ницы, используя свойства border-width , border-style и border-color . Например, border-width: 10px 5px 15px 13px; применит четыре различных значения ширины для каждой из сторон (верхней, правой, нижней и левой). Допустим, вы хотите установить все четыре границы элемента в виде пунктир- ной линии толщиной 2 пиксела, но при этом нужно, чтобы каждая граница имела свой цвет (возможно, вы создаете сайт для детей). Вот способ быстро сделать это: border: 2px dashed green; border-color: green yellow red blue; Этот набор правил создает границы в виде двухпиксельной пунктирной линии со всех четырех сторон элемента, при этом верхняя граница будет иметь зеленый цвет, правая — желтый, нижняя — красный, а левая — синий. СОВЕТ Как правило, при использовании границ требуется добавлять отступы. Они обеспечивают проме- жутки между границами и содержимым элементов: текстом, изображениями, прочими тегами. Обыч- но границы отображаются слишком близко к содержимому элементов, только если вы не захотите разместить их вокруг изображения. Установка цвета фона В CSS имеются средства для добавления фона как для всей веб-страницы, так и для отдельного заголовка или любого другого элемента страницы. Используйте свой- ство background-color в сочетании с любым из действительных определений цветов, которые описаны в разделе «Придание тексту цветового оформления» гл. 6. При же- лании вы можете окрасить фон веб-страницы в яркий зеленый цвет, указав следу- ющий код: body { background-color: rgb(109,218,63); } Или можете создать стилевой класс, например .review , со свойством желаемого цвета фона, а затем применить его к тегу HTML-кода таким образом: > ПРИМЕЧАНИЕ Вы можете также поместить изображение на заднем плане в качестве фона веб-страницы и управ- лять его размещением различными способами. Мы рассмотрим это в следующей главе. Кроме того, к фону любого элемента можно добавить цветовой градиент. Фоновый цвет удобно применять для создания множества различных визуаль- ных эффектов. Вы можете придать заголовку контрастность, рельефность, устано- вив темный цвет для фона и светлый — для текста. Цвет фона также является от- личным средством для выделения таких обособленных частей веб-страницы, как панель навигации, баннер или боковая панель. И не забывайте о ранее рассмотренном методе задания цвета RGBA. С его помо- щью можно сделать фон полупрозрачным, позволяя просматриваться находящим- ся за ним цветам, текстурам или изображениям, принадлежащим другим объектам. Например, можно сделать желто-коричневый фон страницы. Затем, предположим, 220 Часть 2. Применение CSS что возникло желание придать находящемуся внутри тегу более светлый от- тенок желто-коричневого цвета. Вместо задания для фона элемента div сплошного цвета можно добавить белый цвет, а затем управлять прозрачностью этого цвета, чтобы через него просвечивались различные оттенки желто-коричневого цвета: body { background-color: rgb(247,226,155); } .special-div { background-color: rgba(255,255,255.75); } СОВЕТ Когда вы пользуетесь одновременно фоновым цветом и границами, помните: если стиль грани- цы — точечная или пунктирная линия (см. рис. 7.7), то фоновый цвет проступает в промежутках между точками или штрихами линий границ. Другими словами, браузеры размещают линию границ поверх цвета фона. Создание скругленных углов Как уже ранее упоминалось, веб-браузеры рассматривают все элементы как строго прямоугольные блоки. Это становится очевидным при установке границы вокруг абзаца или div -элемента. К счастью, есть возможность сгладить острые углы таких прямоугольников, добавив к стилям скругленные углы (рис. 7.8). В CSS3 имеется свойство border-radius , позволяющее дизайнерам добавлять скругления к одному или нескольким углам элемента. В самом простом варианте свойство border-radius получает одно значение, которое затем применяется ко всем четырем углам эле- мента: .specialBox { background-color: red; border-radius: 20px; } Рис. 7.8. В CSS3 позволяется скруглять углы любого элемента. Чтобы увидеть любое из этих удивительных закруглений, элемент должен иметь цветной фон или границу Глава 7. Поля, отступы, границы 221 Браузер использует предоставленное значение радиуса для создания круговой траектории в каждом углу элемента. Как показано на рис. 7.9, значение, равное расстоянию от центра окружности до ее края, является ее радиусом. В качестве единиц измерения чаще всего используются пикселы и em, но можно также при- менять и проценты (хотя они ведут себя немного неожиданно). Рис. 7.9. Можно создавать не только скругленные (вверху), но и эллиптические углы (внизу), предоставляя либо одно значение — border-radius: 20px, либо комбинацию из двух значений, разделенных символом слеша, —border-radius: 40px/20px; При использовании единственного значения браузер рисует закругления оди- накового радиуса для каждого угла элемента. Например, для верхнего левого изо- бражения на рис. 7.8 используется следующее объявление: border-radius: 30px; Но предоставлением одного и того же значения для каждого угла настройки не ограничиваются. Для каждого угла можно предоставить отдельные значения, задав четыре параметра. Например, у верхнего правого блока на рис. 7.8 четыре разных угла. Объявление имеет следующий вид: border-radius: 0 30px 10px 5px; Сначала задается числовое значение для левого верхнего угла блока, а затем по часовой стрелке — для всех остальных углов. То есть первое значение ( 0 в примере на рис. 7.8) применяется к левому верхнему, второе ( 30px ) — к правому верхнему, третье ( 10px ) — к правому нижнему, четвертое ( 5px ) — к левому нижнему углу. Можно также задать только два значения, тогда первое число будет применено к левому верхнему и правому нижнему углам, а второе к правому верхнему и ле- вому нижнему углам. Кроме рассматриваемых до сих пор абсолютно круглых углов (то есть представ- ляющих собой часть окружности), можно также задавать эллиптические углы, по- добные тем, что показаны в двух нижних примерах на рис. 7.8. Для эллиптической формы угла требуется два значения радиуса: первое для радиуса от центра до лево- го или правого края, а второе для определения расстояния от центра до верхнего или нижнего края. Например, чтобы добавить углы, показанные в левом нижнем углу на рис. 7.8, нужно создать следующее объявление: 222 Часть 2. Применение CSS border-radius: 40px/20px; Значение 40px задает горизонтальный радиус, а значение 20px — вертикальный радиус. Слеш между ними оповещает браузер о создании эллиптического угла. Можно сделать так, что у каждого из четырех углов будут разные вытянутые фор- мы, предоставив четыре набора следующих значений: border-radius: 40px/20px 10px/30px 20px/40px 10px/20px; Можно даже смешивать эллиптические и скругленные углы: border-radius: 10px 10px/30px 20px/40px 10px; И наконец, если нужно пойти по более длинному пути, то для определения фор- мы каждого угла можно воспользоваться отдельными свойствами. Например: border-radius: 1em 2em 1.5em .75em; можно также написать следующим образом: border-top-left-radius: 1em; border-top-right-radius: 2em; border-bottom-right-radius: 1.5em; border-bottom-left-radius: .75em; Если использовать одно процентное значение, то, скорее всего, у вас получит- ся эллиптический угол. Дело в том, что браузер вычисляет горизонтальный ради- ус, используя процентное вычисление от ширины элемента, а для вычисления вертикального радиуса применяется процентное вычисление от высоты этого эле- мента. Поэтому, если создать объявление border-radius: 20% для элемента, не пред- ставляющего собой правильный квадрат, браузер вычислит эллиптический угол, похожий, скорее всего, на тот, который получается при объявлении border-radius: 20px/40px; ПРИМЕЧАНИЕ Internet Explorer 8 и более ранние версии не понимают свойство border-radius, поэтому при его объ- явлении будут показаны прямые углы. Кроме того, версия 3.2 браузера Safari для iOS и версия 2.1 Android Browser требуют префикса производителя -webkit-, например: -webkit-border-radius: 20px;. Дополнительная информация дана в следующей врезке. ИНФОРМАЦИЯ ДЛЯ НОВИЧКОВ Префиксы производителей Правила CSS постоянно развиваются. Команда W3C (World Wide Web Consortium) разрабатывает новые CSSсвойства, поддержка которых затем добавляется в новые веббраузеры. Но иногда создатели браузе ров сами придумывают новые CSSсвойства, которые представляются им интересными, и добавляют их к своим браузерам. А иногда специалисты W3C приду мывают новые CSSсвойства, которые производители браузеров не спешат добавить в свои браузеры. В течение периода разработки новых CSSсвойств и стандартов производители браузеров проявляют осторожность. Они не хотят окончательно связы вать себя обязательствами по поддержке тех CSS свойств, которые могут измениться. Точно так же при проведении экспериментов с CSSсвойствами собственной разработки производители браузеров не смеют утверждать, что они придумали согласованный стандарт. Чтобы пометить CSSсвойство как экспе Глава 7. Поля, отступы, границы 223 риментальное или еще не до конца согласованное, производители браузеров используют префикс, ко торый ставится перед названием свойства. Каждый из основных производителей браузеров использует собственный префикс: • -webkit- — применяется Chrome, Safari и другими браузерами на базе WebKit; • -moz- — используется Mozilla Firefox; • -o- — применяется Opera; • -ms- — используется Microsoft Internet Explorer. Когда работа над свойством еще не завершена, брау зер может поддерживать версию с префиксом произ водителя. Например, когда было впервые предложено свойство border-radius , Firefox поддерживал свой ство -moz-border-radius , а Safari поддерживал свойство -webkit-border-radius Когда свойству требуется префикс производителя, то для получения одного и того же эффекта обычно использует ся несколько строк кода, по одной для каждого произво дителя, а в завершение —версия без префикса: -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; Обычно, если W3C CSS Working Group принимает свой ство и в достаточной степени завершает его детали зацию, производители отказываются от префикса. Например, сегодня все основные браузеры просто поддерживают свойство border-radius , которому теперь не требуется префикс производителя. В книге будут встречаться CSS3свойства с не до конца отра ботанными особенностями, для использования ко торых может понадобиться префикс производителя. Необходимость применения таких префиксов будет особо оговариваться, наряду с рассмотрением по рядка их использования с тем или иным свойством. ИНФОРМАЦИЯ ДЛЯ НОВИЧКОВ Добавление теней Как уже упоминалось, чтобы сделать текст более рельефным, к нему можно доба- вить еле заметную (или весьма заметную) тень. Для добавления теней к блоку, обрамляющему элемент, в CSS3 включено свойство box-shadow , позволяющее, на- пример, блоку казаться парящим над страницей (рис. 7.10). Это свойство работает в большинстве современных браузеров, включая Internet Explorer 9. К сожалению, Internet Explorer 9 рисует тени заметно тоньше, чем дру- гие браузеры. Кроме того, Internet Explorer 8 и более ранние версии просто игно- рируют это свойство и не рисуют тени для элементов. По сравнению со свойством text-shadow , у этого свойства есть несколько допол- нительных настроек. Например, можно сделать так, чтобы тень появлялась внутри блока, как показано в нижней части рис. 7.10. Основной синтаксис свойства box-shadow показан на рис. 7.11. Первое значение задает горизонтальное смещение, то есть это значение приводит к перемещению тени влево или вправо от элемента. Положительное число приводит к перемещению тени вправо (верхний блок на рис. 7.10), а отрицательное число — влево. Основными по- зициями тени является положение либо слева (при отрицательном значении, как показано на рисунке), либо справа (при положительном значении), либо выше верх- него края (при отрицательном значении), либо ниже нижнего края (при положи- тельном значении) элемента с ее размытием с помощью указанного радиуса. 224 Часть 2. Применение CSS Рис. 7.10. CSS3-свойство box-shadow позволяет добавлять тени элементам Второе значение задает вертикальное смещение — позицию тени либо над эле- ментом, либо под ним. При положительном значении тень помещается ниже ниж- него края блока (верхний блок на рис. 7.10), а при отрицательном значении тень помещается над верхним краем блока. ПРИМЕЧАНИЕ Для задания значений тени нужно использовать пикселы или em. Проценты работать не будут. Третье значение определяет радиус размытия тени. Оно определяет степень размытости и ширины тени. Значение 0 не придает эффекта размытости, то есть Глава 7. Поля, отступы, границы 225 получается тень с четкими краями. Чем выше значение, тем более размытой и тус- клой становится тень. Рис. 7.11. Основной синтаксис свойства box-shadow И наконец, последнее значение указывает цвет отбрасываемой тени. Можно воспользоваться любым цветовым значением CSS, но RGBA-значения смотрятся намного лучше, потому что позволяют управлять прозрачностью цвета, чтобы сде- лать тень полупрозрачной и больше похожей на настоящую. У свойства box-shadow есть два дополнительных значения: ключевое слово inset и значение расширения (spread). Ключевое слово inset заставляет браузер рисовать тень внутри блока (нижний блок на рис. 7.10). Для создания внутренней тени нуж- но просто добавить inset в качестве первого значения свойства box-shadow : box-shadow: inset 4px 4px 8px rgba(0,0,0,.75); В качестве четвертого значения (между радиусом размытия тени и ее цветом) можно также добавить значение расширения. Это приведет к расширению тени на указанное значение. Иначе говоря, если добавить значение расширения, равное 10px , браузер расширит тень на 10 пикселов в каждом направлении (тень получа- ется на 20 пикселов шире и на 20 пикселов выше). Это значение также задает то место, где применяется радиус размытия. То есть, когда добавляется значение рас- ширения, размытие тени не начинается до тех пор, пока не будет применено зна- чение расширения. В частности, это пригодится в том случае, когда нужно добавить тень вокруг всего элемента для создания эффекта, который во многих программах редактирования изображений называется свечением (glow). ПРИМЕЧАНИЕ Браузер Android и устаревшие версии Safari для iPhone для работы свойства box-shadow требуют ис- пользования префикса производителя, рассмотренного в предыдущей врезке. То есть, чтобы заставить тени блоков работать в этих, а также в новых браузерах, нужно добавить к стилю два объявления: -webkit-box-shadow: 2px 2px 10px #000000; box-shadow: 2px 2px 10px #000000; 226 Часть 2. Применение CSS Например, во втором сверху блоке на рис. 7.10 горизонтальное и вертикальное смещения установлены в 0 , для радиуса тени задано значение 8px , а для расшире- ния — значение 2px . Значение расширения выталкивает тень на 2 пиксела наружу относительно всех четырех сторон блока, а затем радиус тени, равной 8 пикселам, расширяет размытие еще на 8 пикселов. Значение расширения можно даже исполь- зовать для создания вокруг существующей границы второй, по-другому расцвечен- ной тени. Вот как выглядит пример кода для этого эффекта: border: 10px solid rgb(100,255,30); box-shadow: 0 0 0 10px rgb(0,33,255); И наконец, можно даже применить к стилю несколько теней (второй блок сни- зу на рис. 7.10). Нужно просто поставить запятую после первого набора установок тени, а затем добавить еще одну тень: box-shadow: 10px 5px 8px #FF00FF, -5px -10px 20px 5px rgb(0,33,255); Количество теней не ограничено (или ограничено только здравым смыслом). ПРИМЕЧАНИЕ К сожалению, браузеры рисуют тени множеством вариантов. Internet Explorer 9, например, создает тень заметно более тонкую, чем другие браузеры. Чтобы визуально сравнить тени блоков, рисуемые браузерами, зайдите на сайт по адресу http://thany.nl/apps/boxshadows/. Определение параметров высоты и ширины Рассмотрим еще два CSS-свойства, являющихся частью блочной модели CSS. Они предназначены для установки размеров объектов, таких как таблица, столбец, ко- лонка, баннер, боковая панель. Свойства height и width назначают высоту и шири- ну области стилизуемого элемента. Мы будем часто пользоваться ими при созда- нии разметки, макета веб-страниц, как описано в части 3. Они также применяются для разработки базового дизайна: назначения ширины таблиц, создания простей- ших боковых панелей или галерей эскизов. Разработка стилей с этими свойствами не составляет сложностей. Просто набе- рите их со значением в любой единице измерения CSS, которые мы изучили. На- пример: width: 300px; width: 30%; height: 20em; Пикселы как единицы измерения просты в использовании, понятны и удобны, обеспечивают точные ширину или высоту. Единица измерения em — это примерно то же самое, что и размер шрифта текста, но в условных единицах. Допустим, вы устанавливаете размер шрифта 24 пиксела; единица em для этого стилизуемого элемента будет равна 24 пиксела, а если вы установите ширину равной 2 em, она составит 2 ⋅ 24, или 48 пикселов. Если вы не определите в стиле размер шрифта текста, то он будет взят из унаследованных параметров. Глава 7. Поля, отступы, границы 227 ПРИМЕЧАНИЕ В CSS3 представлены дополнительные единицы измерения под названием rem, которые основаны на значении свойства font-size элемента html. Эти единицы измерения работают во всех основных браузерах, за исключением Internet Explorer 8 и более ранних версий. Эта единица измерения уже рассматривалась в данной книге. Процентные значения свойства ширины width рассчитываются на основании ширины элемента-контейнера. Если вы установите ширину заголовка равной 75 %, и этот заголовок не вложен ни в какие другие элементы веб-страницы с явно определенной шириной, то ширина текста заголовка составит 75 % от ширины окна браузера. Если посетитель изменит размер окна браузера, то ширина заго- ловка тоже изменится. Однако если заголовок заключен в блок шириной 200 пикселов (возможно, для создания столбца), то ширина данного заголовка составит 150 пикселов. Процентные значения в свойстве высоты height работают точно так же, но расчет базируется на высоте элемента-контейнера, а не на его ширине. Вычисление фактических размеров блочных элементов Свойства width и height на первый взгляд кажутся довольно простыми и понятными, однако есть несколько нюансов, вводящих начинающих веб-дизайнеров в заблу- ждение. Прежде всего, существует различие между значениями ширины и высоты, которые вы явно указываете при написании стилей, и размером пространства, ко- торое браузер фактически выделяет и использует для отображения элементов блоч- ной модели CSS. Свойства width и height устанавливают ширину и высоту области содержимого стилизуемого элемента — пространства, в котором заключены текст, изображения или другие вложенные теги (см. рис. 7.1, чтобы вспомнить о том, где именно в блочной конструкции элементов CSS находится область содержимого). Фактическая ширина элемента веб-страницы представляет собой область экрана (окна браузера), выделяемую для отображения. Она состоит из ширины полей, границ, отступов и явно указанного значения ширины в свойстве стиля, как пока- зано на рис. 7.12. Допустим, вы назначили следующие свойства: width: 100px; padding: 15px; border-width: 5px; margin: 10px; Если определено свойство width , то вы всегда точно знаете, сколько места займет содержимое элемента — текст и изображения, заполняющие основное простран- ство элемента, — независимо от любых других установленных свойств. Вам не нуж- но ничего вычислять, потому что значение width и есть размер основного простран- ства для размещения содержимого (в представленном выше примере ширина равна 100 пикселов). Конечно, придется выполнить несложные арифметические опера- ции, чтобы выяснить общий точный размер. В представленном выше примере для размещения стилизуемого элемента браузером отводится пространство шириной 228 Часть 2. Применение CSS 160 пикселов: 20 пикселов для левого и правого полей, 10 для левой и правой гра- ниц, 30 для левого и правого отступа и 100 пикселов в качестве ширины основного содержимого. Версии браузера Internet Explorer старше 6-й неправильно работают с этими параметрами, поэтому для них требуется сделать кое-какие доработки веб- страницы. Рис. 7.12. Вычисление фактической ширины блока стилизуемого элемента выполняется путем сложения ее составляющих Общее правило по регулированию высоты элементов на странице гласит: не делайте этого! Многие подающие надежды дизайнеры CSS пытаются задать высоту абсолютно для всего, желая получить полный контроль над пикселами. Но если вы не уверены полностью в точных размерах содержимого внутри тега, то можете столкнуться с некоторыми нежелательными результатами (рис. 7.13). В этом примере блок с цитатой, который используется для того, чтобы акцен- тировать внимание на интересном отрывке из статьи, имеет ширину и высоту по 100 пикселов. Когда в блок добавляется больше текста, чем может уместить- ся в такую высоту, его содержимое выходит за пределы. Даже если вы уверены, что текст, который вы разместили в блоке с фиксированной высотой, соответ- ствует его размерам, посетитель может увеличить размер шрифта в своем брау- зере и высота текста, соответственно, может стать больше, по сравнению с вы- сотой блока. Другими словами, свойство height полезно для контроля высоты элемента , содержащего, например, изображения, потому что в таком случае вы може- те правильно определить его высоту. Однако, если вы используете это свойство для элементов, содержащих текст, не забудьте не только протестировать свои страницы в основных браузерах, но и проверить их при различных установлен- ных размерах шрифта, увеличивая его в браузерах. Глава 7. Поля, отступы, границы 229 Рис. 7.13. Когда устанавливается высота элемента (например, высота div-элемента правой боковой панели, как в данном примере), содержимое которого выше самого элемента, браузеры просто позволяют содержимому выйти за нижнюю границу элемента СОВЕТ Область баннеров на странице является еще одним подходящим кандидатом для установки высоты. Обычно баннер имеет ограниченное содержимое: логотип, поле поиска, может быть, какие-нибудь навигационные кнопки. Зачастую у баннеров остается довольно много пустого пространства (по- могающего привлечь внимание посетителя к ключевым элементам навигационной панели), поэто- му указание высоты для баннера обычно не вызывает проблем. Переопределение ширины блока с помощью box-sizing Как уже упоминалось, веб-браузеры традиционно вычисляют ширину элемента, складывая значения свойств border , padding и width . Это не только заставит вас проводить математические вычисления (этого только не хватало!), чтобы опре- делить реальную ширину отображаемого элемента, но может вызвать некоторые другие проблемы. Особенно это касается случаев создания плавающих разметок с использованием процентных отношений. Подробности создания плавающих разметок нам еще предстоит изучить, но если говорить вкратце, CSS позволяет с помощью свойства float помещать элементы бок о бок, что дает возможность создавать разметки, состоящие из нескольких столбцов. Когда для нескольких столбцов используется процентное отношение, могут возникать довольно странные проблемы. Предположим, что есть два столбца (на самом деле два таких тега, как ) и нужно, чтобы каждый занимал 50 % ширины 230 Часть 2. Применение CSS окна. Соответственно, для двух столбцов устанавливается ширина 50 %, но на тот момент, когда добавляется отступ или рамка к одному из столбцов, вы увеличива- ете его ширину, которая становится больше 50 % (если точнее, она составляет 50 % плюс значение левого и правого отступов и значение ширины левой и правой час- тей). В большинстве случаев это заставит второй столбец опуститься ниже перво- го. К счастью, CSS3 предлагает свойство, позволяющее изменить порядок вычис- ления браузером экранной ширины (и высоты) элемента. Свойство box-sizing пре- доставляет три варианта. content-box устанавливает ранее рассмотренный способ, с помощью которого браузеры всегда определяют экранную ширину и высоту элемента. То есть брау- зер добавляет ширину рамки и толщину отступа к значениям, установленным для свойств ширины и высоты, чтобы определить экранную ширину и высоту заданного тегом элемента. Поскольку это поведение является исходным, ука- зывать что-нибудь для content-box не нужно. padding-box сообщает браузеру, что при установке для стиля свойства ширины или высоты они должны включать отступы как часть своего значения. Например, предположим, что есть элемент с отступами слева и справа, равными 20 пиксе- лам, ширина которого установлена равной 100 пикселам. Браузер будет рассмат- ривать часть, приходящуюся на отступы, частью этого 100-пиксельного значе- ния. То есть ширина области содержимого будет равна всего лишь 60 пикселам (100 – 20 [левый отступ] – 20 [правый отступ]). border-box сообщает браузеру о необходимости включения в качестве состав- ляющей части значений свойств ширины и высоты толщину как отступа, так и рамки. Эта настройка решает проблему использования значений, выражен- ных в процентном отношении, о которой говорилось выше. То есть, когда для свойства box-sizing установлено значение border-box , при задании ширины эле- мента, равной 50 %, этот элемент будет занимать до 50 % пространства, даже если к нему будут добавлены отступы и рамки. Если вам не нравится стандартный способ вычисления браузером элементов ширины и высоты, воспользуйтесь значением border-box . (Если, конечно, у вас нет какой-нибудь особой причины, по которой вы хотите включить в расчеты отступ, но не желаете включать туда еще и рамку.) Чтобы воспользоваться свойством box- sizing , просто предоставьте ему одно из трех значений из списка. Например: box-sizing: border-box; Кроме того, Firefox (по крайней мере на момент написания книги) еще не под- держивал стандартное название свойства, поэтому нужно воспользоваться ранее упоминавшейся версией с префиксом производителя, это же требование остается в силе и для устаревших версий Safari для iOS и Android (версии 3 и ниже). Чтобы обеспечить работу свойства box-sizing во всех этих браузерах, нужно создать три объявления: -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; Глава 7. Поля, отступы, границы 231 Многие веб-разработчики настолько оценили пользу настройки border-box , что создали универсальный селектор стиля, применяемый к каждому элементу на странице: * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } В гл. 13 будет показано, что особая польза от применения border-box будет при создании веб-дизайна, зависящего от использования CSS3, который меняет разме- ры с целью вписаться в размеры различных устройств (таких как iPhone, планшет- ный компьютер и настольный монитор). ПРИМЕЧАНИЕ Свойство box-sizing работает даже в Internet Explorer 8 и более старших версиях, то есть оно поддерживается более чем 95 % используемых браузеров. К сожалению, Internet Explorer 7 не понимает этого свойства, поэтому при использовании настройки border-box Internet Explorer 7 ее проигнорирует и нарисует по сравнению с другими браузерами более широкие (и более высокие) элементы. Если вам необходимо сохранить поддержку Internet Explorer 7, это свойство лучше не использовать. Управление поведением блочных элементов с помощью свойства overflow Когда содержимое стилизуемого тега имеет размеры больше определенных свой- ствами width и height , происходят странные вещи. На рис. 7.13 показано, что в брау- зерах содержимое отображается за пределами (выступает наружу) границ элемен- та, часто накладываясь на него. Браузер использует в этой ситуации свойство overflow . В качестве значения можно указать одно из четырех ключевых слов, определяющих, как должно ото- бражаться содержимое, которое выходит за пределы блочного элемента. Visible — это значение, принимаемое браузером по умолчанию. Указание этого ключевого слова имеет тот же эффект, что и отсутствие установки свойства overflow (рис. 7.14, вверху). Scroll — позволяет добавить полосы прокрутки (см. рис. 7.14, посередине). Па- раметр создает своего рода окно мини-браузера внутри веб-страницы, которое выглядит подобно HTML-рамкам (фреймам). Вы можете использовать ключевое слово scroll , чтобы вместить объемное содержимое в ограниченной области. К со- жалению, при таком варианте полосы прокрутки отображаются всегда, даже если содержимое по размерам помещается внутри блока. Auto — чтобы сделать полосы прокрутки необязательными, пользуйтесь данным значением. Оно выполняет ту же функцию, что и scroll , с одним исключением — полосы прокрутки добавляются только при необходимости. Hidden — скрывает любое содержимое, выходящее за пределы блочного элемен- та (см. рис. 7.14, внизу). Это значение небезопасно, поскольку может привести к тому, что часть содержимого будет не видна. Но иногда оно применяется при создании плавающих разметок. 232 Часть 2. Применение CSS Рис. 7.14. Свойство overflow предоставляет три простых способа отображения текста, размеры которого не позволяют браузеру показать его внутри блочного элемента Глава 7. Поля, отступы, границы 233 Задание максимальных и минимальных значений высоты и ширины Если вы еще не поняли, хочу вас заверить, что CSS предлагает множество гибких решений. Кроме стандартных свойств width и height , можно воспользоваться еще четырьмя вариантами. max-width задает максимальную ширину элемента. Этот элемент может быть уже установленного предела, но он не может быть шире его. Данный вариант при- годится в том случае, когда ваша страница должна менять свои размеры, чтобы поместиться на дисплеях разной ширины. Но при этом она не должна стано- виться настолько широкой, чтобы это затрудняло ее чтение на слишком боль- ших мониторах. Предположим, например, что к странице добавлен следующий стиль: body { max-width: 1200px; } Этот стиль позволяет странице переформатировать текст, чтобы поместиться по ширине на небольших дисплеях, встречающихся у смартфонов или у план- шетных компьютеров. Но на действительно больших настольных мониторах страница не должна быть шире 1200 пикселов, то есть страница не может раз- растаться в ширину, при которой ее уже невозможно читать. max-height работает во многом похоже на max-width , за исключением того, что max-height применяется к высоте элемента. Но, как уже упоминалось, с высотой элемента лучше все же не связываться. min-width устанавливает минимальную ширину элемента. Элемент может рас- тянуться шире значения минимальной ширины, но никогда не может стать уже этого значения. Если, например, вы заметили, что при изменении разме- ров окна вашего браузера элементы становятся настолько узкими, что раз- метка разваливается, можно с помощью следующего кода установить мини- мум: body { min-width: 760px; } Если посетитель уменьшит окно своего браузера, оставив только 500 пикселов ширины, браузер добавит полосу прокрутки, не делая элементы на странице слишком узкими. min-height работает точно так же, как и свойство min-width , но применительно к высоте. Это свойство может решить проблему, показанную на рис. 7.13. Ис- пользуя минимальную высоту, вы заставляете веб-браузер сделать элемент по крайней мере имеющим определенную высоту. Если содержимое элемента выше, то браузер сделает выше весь элемент. Свойства минимума и максимума можно также применять вместе. Напри- мер, если нужно гарантировать минимальную ширину страницы 760 пикселов, 234 Часть 2. Применение CSS но не дать ей расширяться более чем до 1200 пикселов, можно создать следу- ющий стиль: body { min-width: 760px; max-width: 1200px; } Управление обтеканием содержимого плавающих элементов HTML в обычном порядке отображается, начиная с верхнего края окна браузера по направлению к нижнему: один заголовок, абзац, элемент блочной структуры поверх другого. Такой способ представления неинтересен, но благодаря CSS пре- доставляется возможность изменить дизайн в лучшую сторону. В части 3 мы рас- смотрим много новых методов компоновки, размещения, упорядочения элементов, но уже сейчас вы можете добавить привлекательности своим веб-страницам по- средством единственного CSS-свойства float Свойство float перемещает любой элемент в нужное место, выравнивая его по левому или правому краю веб-страницы. В процессе перемещения содержи- мое, находящееся ниже позиционируемого плавающего элемента, смещается вверх и плавно обтекает сам плавающий элемент (рис. 7.15, внизу). Плавающие (или перемещаемые) элементы — идеальное средство для того, чтобы выделить дополнительную информацию из основного текста. Изображения могут сме- щаться к любому краю веб-страницы, обеспечивая перенос рядом стоящего тек- стового содержимого и его изящное обтекание вокруг изображений. Точно так же вы можете передвинуть боковую панель с относящейся к тексту информаци- ей и управляющие ссылки к одной из сторон веб-страницы. Свойство float , позволяющее избавиться от однообразия, является одним из самых мощных и полезных средств, которые предлагает CSS. Широкий диапазон его применения включает не только простое позиционирование, перемещение изображений к одной из сторон абзаца, но и обеспечивает полный контроль по управлению размещением баннеров, меню, панелей навигации и других элемен- тов веб-страниц. Несмотря на то что свойство float может быть использовано для сложного, комплексного форматирования (об этом вы прочитаете в гл. 13), применение это- го простого атрибута не представляет никаких сложностей. В качестве значения указывается одно из трех ключевых слов — left , right или none : left — перемещает стилизуемый элемент влево, при этом содержимое, находя- щееся ниже его, обтекает правый край элемента; right — перемещает элемент вправо; none — отменяет обтекание и возвращает объект в его обычную позицию. Например: float: left; Глава 7. Поля, отступы, границы 235 Рис. 7.15. Стандартная последовательность отображения HTML (вверху) и вид страницы при использовании свойства float (внизу) Плавающие элементы могут быть расположены у левого или правого края окна содержащего их элемента-контейнера. В некоторых случаях это просто означает, что элемент перемещается к левому или правому краю окна браузера. Однако если 236 Часть 2. Применение CSS вы перемещаете элемент, находящийся внутри другого тега, для которого установ- лены значения ширины или позиции на веб-странице, то перемещение будет осу- ществлено к левому или правому краю этого тега, который является контейнером для плавающего элемента. Например, на веб-странице может быть блочный эле- мент шириной 300 пикселов, который прилегает к правому краю окна браузера. Внутри может располагаться изображение, которое выровнено по левому краю. Иными словами, изо бражение примыкает к краю этого блока шириной 300 пиксе- лов, а не к окну браузера. Вы можете применять свойство float к линейным элементам, например Надо сказать, использование выравнивания по левому или правому краю для фо- тографий — самый обычный, даже наиболее распространенный способ примене- ния float . Браузер обрабатывает линейные элементы точно так же, как блочные. Поэтому, используя отступы и поля в линейных элементах, вы избежите проблем, которые обычно возникают в такой ситуации. Вы можете также использовать float для блочных элементов, таких как заголо- вок или абзац текста (или один из новых элементов HTML5, например , или |