Книга css3 3е издание Серия Бестселлеры OReilly
 Скачать 20.28 Mb.
|
|
HSL означает hue — тон, saturation — насыщенность и lightness — осветленность (последняя буква иногда расшифровывается как luminance — светимость). Это еще один способ задания цвета. Он не поддерживается в Internet Explorer 8 и более ранних версиях, но работает во всех остальных браузерах. Если вы привыкли ис- пользовать RGB- или Hex-цвета, синтаксис HSL может показаться немного не- привычным. Вот как выглядит задание ярко-красного цвета: hsl(0, 100%, 50%); Первое число (hue) является углом от 0 до 360°, представляющим цветовой спектр на круге оттенков, где и 0, и 360° представляют красный, а 180° — зеле- Приложение 1. Справочник свойств CSS 571 ный цвет. Второе число задает насыщенность, или степень чистоты цвета, и вы- ражается процентами от 0 (тусклый серый цвет) до 100 % (яркий и живой цвет). Последнее значение задает осветленность и также выражается процентами от 0 (полностью черный цвет) до 100 % (полностью белый цвет). Как и у RGB- цвета, существует версия HSL, поддерживающая прозрачность. Она называет- ся HSLA: hsla(0, 100%, 50%, .5) Неважно, какой метод вы используете, — все они работают. Для последователь- ности вы должны выбрать один способ определения RGB-значения и придержи- ваться этого способа. Но проще и удобнее может быть применение ключевых слов, например white и black . В операционных системах Windows и Mac есть средства выбора цвета, которые позволяют подобрать идеально подходящий цвет из всей палитры цветов, а затем показывают вам его RGB-значение. В качестве альтерна- тивы можно применять бесплатное средство выбора цвета с сайта www.ficml.org/ jemimap/style/color/wheel.html или более совершенное средство, позволяющее созда- вать и сохранять палитру цветов, которое находится на сайте http://kuler.adobe.com Длины и размеры CSS предоставляет множество различных способов определить размер шрифта, ширину поля или толщину границы. Чтобы указать размер шрифта, вы можете использовать дюймы, цицеро, точки, сантиметры, миллиметры, единицы измере- ния em и ex, пикселы и проценты. Однако при всем многообразии единиц измерения многие из них не относятся к миру экранного отображения по причинам, обсуждаемым в разделе «Установка размера шрифта» гл. 6. На самом деле вам стоит задуматься только о трех: пиксе- лах, em и процентах. Пикселы. Пиксел — это одна точка на экране компьютера. Пикселы дают по- следовательный метод идентификации длин и размеров шрифта от компьютера к ком- пьютеру: 72 пиксела на одном мониторе составляют 72 пиксела на другом мониторе. Это тем не менее не означает, что фактическая длина в реальном мире будет одной и той же для всех. Поскольку пользователи устанавливают для своих мониторов различные разрешения — 800 × 600, 1024 × 768, 1600 × 1200 и др., — 72 пиксела могут занять 1 дюйм на одном мониторе и всего 0,5 дюйма на другом. Однако пик- селы дают вам наиболее последовательный контроль над отображением. ПРИМЕЧАНИЕ Есть только один недостаток в использовании пикселов: пользователи Internet Explorer версий 6 или ниже не могут изменить размеры элемента, если они заданы в пикселах. Если ваш текст ока- жется слишком маленьким для кого-то, то посетитель будет не в состоянии увеличить его, чтобы сделать более приемлемым для чтения (см. раздел «Установка размера шрифта» гл. 6). Единица измерения em. В типографике em — это единица измерения, которая представляет высоту заглавной буквы М для определенного шрифта. В веб-дизай- не 1 em — это высота базового шрифта в браузере, которая обычно составляет 16 пикселов. Однако любой может изменить эту базовую установку размера, так что 1 em будет равняться 16 пикселам в одном браузере и 24 пикселам — в другом. Другими словами, em — это относительная единица измерения. Вдобавок к исходной установке размера шрифта в браузере, em может унас- ледовать информацию о размере от тегов. Размер .9em установит высоту текста 572 Приложения приблизительно 14 пикселов в большинстве браузеров с основным размером шриф- та 16 пикселов. Но если у вас есть тег с размером шрифта .9ems , а затем тег с размером шрифта .9ems внутри этого тега , то em-размер тега составит не 14, а 12 пикселов (16 × 0,9 × 0,9). Так что помните о наследовании, когда приме- няете em-значения. Проценты. CSS использует проценты в различных целях, таких как установка размеров текста, определение ширины или высоты элемента, размещение изобра- жения в фоне стиля и т. д. Для размеров шрифта проценты вычисляются на осно- вании унаследованного значения текста. Скажем, общий размер шрифта для аб- заца — 16 пикселов. Если вы создали стиль для отдельного абзаца и установили размер его шрифта равным 200 %, то этот текст отображается высотой 32 пиксела. Однако при применении к ширине проценты вычисляются на основе ширины стра- ницы или другого родительского элемента с заданной шириной. Ключевые слова У многих свойств есть собственные специфические значения, которые влияют на то, как проявляют себя свойства. Они представлены ключевыми словами. Свойство text-align , выравнивающее текст на экране, может принять одно из четырех клю- чевых слов: right , left , center и justify . Поскольку ключевые слова изменяются от свойства к свойству, читайте описания свойств, которые идут далее, чтобы узнать, какие ключевые слова им соответствуют. Есть одно ключевое слово, которое используется всеми свойствами, — inherit Оно заставляет стиль унаследовать значение от родительского элемента. Ключевое слово inherit дает возможность заставить стили унаследовать свойства, которые обычно не наследуются от родительских тегов. Например, вы используете свойство border , чтобы добавить границу вокруг абзаца. Остальные теги, такие как и внутри тега , не наследуют это значение, но вы можете указать им сделать это с помощью ключевого слова inherit : em, strong { border: inherit; } Таким образом, в данном случае теги em и strong отображают одно и то же зна- чение border , как и их родительский тег . Так, элементы и абзаца получают собственные границы, как и весь текст абзаца. Если бы они изначально наследовали значение свойства border , то у вас получились бы одни границы внут- ри других (а это серьезное основание, чтобы не наследовать данное свойство). Если вы изменяете значение border тега на другой цвет или толщину линии, теги и также наследуют это значение и отображают такой же вид границы. ПРИМЕЧАНИЕ Границы — не очень полезный пример, главным образом потому, что inherit — не очень полезное значение. Но это не было бы полным руководством, если бы я не рассказал обо всех этих фактах. URL-адреса Значения URL позволяют указывать на другой файл в Сети. Например, свойство background-image принимает URL — путь к файлу в Интернете — в качестве своего Приложение 1. Справочник свойств CSS 573 значения, которое позволяет вам назначать графический файл как фон для элемен- та страницы. Эта методика удобна при добавлении повторяющегося изображения в фон страницы или при использовании собственной графики для маркированных списков (см. раздел «Добавление фоновых изображений» гл. 8). В CSS вы определяете URL так: url(images/tile.gif) . Стиль, который добавля- ет изображение, названное tile.gif , к фону страницы, выглядел бы следующим образом: body { background-image: url(images/tile.gif); } В отличие от HTML, в CSS кавычки вокруг URL являются необязательными, так что url ("images/tile.gif") , url('images/tile.gif') и url(images/tile.gif) экви- валентны. ПРИМЕЧАНИЕ Сам URL такой же, как и HTML-атрибут href, используемый для ссылок. Это означает, что вы може- те использовать абсолютный URL (например, http://www.missingmanuals.com/images/tile.gif), путь относительно корня (например, /images/tile.gif) или URL относительно документа (например, ../../ images/tile.gif). Прочитайте врезку «Информация для новичков. Типы URL» в разделе «Добавление фоновых изображений» гл. 8 для получения полной информации об этих видах путей. Свойства текста Следующие свойства влияют на форматирование текста на веб-странице. Посколь- ку большинство свойств этой категории наследуются, вам не обязательно применять их к тегам, специально предназначенным для текста (таким как тег ). Вы можете применить эти свойства к тегу так, чтобы остальные теги унаследовали и ис- пользовали те же самые настройки. Задействование этой методики — быстрый спо- соб создать всеохватывающий шрифт, цвет и т. д. для страницы или раздела. color (наследуется) Устанавливает цвет текста. Поскольку оно наследуется, то, если вы задаете крас- ный цвет для тега , например, у всего текста на странице — и у всех других тегов внутри тега — также будет красный цвет. Значения: любое корректное значение цвета. Пример: color: #FFFF33; ПРИМЕЧАНИЕ Заранее установленный цвет ссылок для тега отменяет наследование цвета. В вышеупомянутом примере любые ссылки в теге все еще были бы стандартного синего цвета. Чтобы узнать, как изменить заранее установленный цвет ссылок, читайте раздел «Выборка стилизуемых ссылок» гл. 9. font (наследуется) Используя это свойство, вы можете сокращенно определить следующие текстовые свойства в отдельном объявлении стиля: font-style , font-variant , font-weight , font- size , line-height и font-family В этом свойстве между значениями нужно ставить пробелы и включить по крайней мере font-size и font-family , причем они должны быть последними двумя элементами в объявлении. Остальные являются дополнительными. Если вы не 574 Приложения установите свойство, браузер будет использовать предустановленное значение, потенциально отменяя унаследованные свойства. Значения: любое значение, корректное для определенного свойства шрифта. Если вы включаете значение line-height , то задавайте высоту линии, слеш ( / ), а за- тем размер шрифта, например: 1.25em/150% Пример: font: italic small-caps bold 1.25em/150% Arial, Helvetica, sans- serif; font-family (наследуется) Указывает шрифт, который браузер должен использовать при отображении текста. Шрифты обычно определяются как наборы трех-четырех параметров, учитывая тот факт, что конкретный шрифт может быть не установлен на компьютере посе- тителя. Значения: названия шрифтов, разделенные запятыми. Когда название шрифта состоит из нескольких слов, между которыми стоит пробел, это название нужно указывать в кавычках. Последний перечисленный шрифт — обычно общий тип шрифта, указывающий браузерам выбрать подходящий шрифт, если остальные недоступны: serif , sans-serif , monotype , fantasy или cursive Пример: font-family: "Lucida Grande", Arial, sans-serif; ПРИМЕЧАНИЕ Все браузеры позволяют указывать дополнительные шрифты, которые либо хранятся на вашем веб-сервере, либо загружаются браузерами ваших посетителей со службы веб-шрифтов. Подробное описание веб-шрифтов дано в разделе «Использование веб-шрифтов» гл. 6. font-size (наследуется) Устанавливает размер текста. Это свойство наследуется, что может привести к не- которому странному поведению при использовании относительных единиц изме- рения, таких как проценты и em. Значения: любая корректная единица измерения CSS (см. подраздел «Длины и размеры» раздела «Значения CSS» этого приложения), а также следующие ключе- вые слова: xx-small , x-small , small , medium , large , x-large , xx-large , larger и smaller ; medium представляет обычный, заранее заданный размер шрифта браузера, а остальные раз- меры — кратные ему. Каждое из них увеличивает или уменьшает текст в определенной степени. Несмотря на то что все изменения цвета, как предполагается, должны быть последовательными увеличениями или уменьшениями от предыдущего значения, на самом деле это не так. По существу, xx-small эквивалентен 9 пикселам (берем в расчет то, что вы не корректировали базовый размер шрифта браузера); x-small — 10 пиксе- лам, small — 13, large — 18, x-large — 24 и xx-large — 32 пикселам. Из-за неуверенности в том, как каждый браузер обрабатывает эти ключевые слова, многие дизайнеры ис- пользуют вместо них пикселы, em или проценты. Пример: font-size: 1.25em; ПРИМЕЧАНИЕ Когда свойство font-size наследуется от другого тега, эти ключевые слова умножают унаследован- ный размер шрифта на тот же самый коэффициент (1,2 в большинстве браузеров). Приложение 1. Справочник свойств CSS 575 font-style (наследуется) Делает текст курсивным. Если свойство применено к курсивному тексту, то воз- вращает его вновь к обычному. Значения italic и oblique функционально одина- ковы. Значения: italic , oblique , normal Пример: font-style: italic; font-variant (наследуется) Делает буквы в тексте прописными, например: SPECIAL PRESENTATION. Зна- чение normal задает шрифт, не содержащий прописных букв. Значения: small-caps , normal Пример: font-variant: small-caps; font-weight Делает текст полужирным или отменяет это начертание для текста, который уже был отформатирован таким образом. Значения: CSS на самом деле предоставляет 14 различных ключевых слов для свойства font-weight , но только два из них фактически работают с сегодняшними браузерами и компьютерными системами: bold и normal Пример: font-weight: bold; letter-spacing (наследуется) Регулирует расстояние между буквами, чтобы растянуть слова (добавляя рассто- яние между буквами) или сжать их (удаляя расстояние). Значения: любая корректная единица измерения CSS, хотя em и пикселы рас- пространены больше всего. Проценты для этого свойства не работают в большинс- тве браузеров. Используйте положительное значение, чтобы увеличить расстояние между буквами, и отрицательное значение, чтобы убрать промежутки. Значение normal сбрасывает letter-spacing в стандартное значение в браузере — 0 Примеры: letter-spacing: -1px; letter-spacing: 2em; line-height (наследуется) Регулирует расстояние между строками текста в абзаце (в программах для обработки текста часто называется межстрочным интервалом). Нормальная высота линии состав- ляет 120 % от размера текста (см. раздел «Форматирование абзацев текста» гл. 6). Значения: большинство корректных размеров CSS (см. подраздел «Длины и размеры» раздела «Значения CSS» этого приложения), хотя em, пикселы и про- центы наиболее распространены. Пример: line-height: 200%; text-align (наследуется) Выравнивает блок текста по левому, правому краю или по центру страницы либо элемента-контейнера. Значения: left , center , right , justify (значение justify часто затрудняет чтение текста на мониторах). Пример: text-align: center; 576 Приложения text-decoration (наследуется) Добавляет линии над или под текстом, а также посередине. Подчеркивание рас- пространено для ссылок, так что не стоит подчеркивать текст, который не являет- ся ссылкой. Цвет линии такой же, как цвет шрифта тега, к которому применен стиль. Свойство также поддерживает значение blink , которое делает текст мерца- ющим (но большинство браузеров так или иначе игнорируют значение blink ). Значения: underline , overline , line-through , blink , none . Значение none отключает все оформление. Используйте его, чтобы скрыть подчеркивание, которое обычно появляется под ссылками. Вы также можете добавить множество способов оформ- лений, перечисляя значения (кроме none ) через пробел. Пример: text-decoration: underline overline line-through; text-indent (наследуется) Устанавливает размер отступа для первой строки блока текста. Первая строка мо- жет иметь отступ (как во многих печатных книгах) или выступать над левым кра- ем остального текста. Значения: любая корректная единица измерения CSS. Пикселы и em наиболее распространены; проценты ведут себя иначе, чем со свойством font-size . Здесь проценты основываются на ширине области, содержащей текст, которая может быть шириной всего окна браузера. Таким образом, 50 % сделают отступ первой строки на половину окна. Чтобы первая строка выступала за левый край, исполь- зуйте отрицательное значение. Эта методика хорошо работает в связке с положи- тельным свойством margin-left , которое добавляет отступ/выступ с левой стороны других строк текста на установленную величину. Пример: em; text-shadow (наследуется) Позволяет добавлять любому тексту тень. Значения: к тексту применяются два измеряемых значения (в em или пикселах) для горизонтального и вертикального смещения: значение, определяющее степень размытости тени, и значение цвета тени. Отрицательное значение для горизонталь- ного смещения помещает тень слева от текста, а положительное значение — справа. Отрицательное значение для вертикального смещения помещает тень сверху от текста, а положительное значение — снизу. Каждое значение отделяется от преды- дущего пробелом. Можно также добавить несколько теней, добавляя значения дополнительной тени через запятую. Примеры: text-shadow: -4px 4px 3px #999999; text-shadow: -4px 4px 3px #999999 2px 3px 10px #000; text-transform Изменяет регистр букв в тексте так, что все буквы в тексте становятся строчными или только первая буква каждого слова остается прописной. Значения: uppercase , lowercase , capitalize , none . Значение none возвращает текст к какому бы то ни было регистру из фактического кода HTML. Если aBCDefg — бук- |