Справочник свойств CSS
Владение на профессиональном уровне каскадными таблицами стилей (CSS) озна- чает знание того, как использовать огромное количество свойств CSS, которые управляют внешним видом текста, изображений, таблиц и форм. Чтобы помочь вам в ваших поисках, я собрал в этом приложении свойства и их значения, которые вы будете использовать для создания собственных стилей. Этот список охватывает практически все стандартные свойства CSS 2.1 — те, которые поддерживает боль- шинство браузеров, а также ряд наиболее полезных и поддерживаемых браузерами свойств CSS3.
ПРИМЕЧАНИЕ Самая последняя CSS-спецификация имеет довольно большой объем. Фактически, чтобы лучше справиться с разрастанием CSS, консорциум W3C разбил CSS на множество модулей — каждый модуль описывает конкретное свойство или набор родственных свойств. Чтобы получить полную информацию из первых рук, просмотрите самые последние спецификации CSS от World Wide Web Consortium по адресу www.w3.org/Style/CSS/current-work.
Значения CSS
У каждого свойства CSS есть соответствующее ему значение. Свойство color, которое форматирует цвет шрифта, требует установки значения, чтобы определить, какой цвет вы хотите использовать. Свойство color: #FFF; задает белый текст. Разные свойства требуют указания различных значений, каждое из которых относится к одной из четырех основных категорий: цвета, размеры, ключевые слова и адреса URL. Цвета Вы можете назначать цвета многим свойствам, включая свойства для шрифта, фона и границ. CSS предоставляет несколько различных способов определения цвета. Ключевые слова. Ключевое слово, обозначающее цвет, — это просто название цвета, например white или black (белый или черный). В настоящее время суще- ствует 17 признанных ключевых слов, обозначающих цвета: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white и yellow. Некоторые браузеры принимают больше ключевых слов, а CSS3 обещает предложить их еще больше в будущем https://www.w3.org/TR/css3-color
Значения RGB. Мониторы компьютеров определяют оттенки, используя красный, зеленый и синий цвета. Эти RGB-значения могут создать почти весь спектр цветов. Практически каждый дизайн, рисунок и графическая программа позволяют вам определить цвета, применяя RGB, так что можно легко передавать цвет из одной из этих программ CSS-свойству. CSS представляет значения RGB несколькими способами.
Hex-значения. Это метод, обычно используемый в Сети для идентификации цвета. Hex-значения цветов состоят из трех двухсимвольных чисел в шестнадцатеричной (то есть с основанием 16) системе счисления. #FF0033 представляет RGB-значение, составленное из красного (FF, что равняется 255 в десятичной системе счисления), зеленого (00) и синего (33). Символ # указывает CSS, что впереди следует ожидать шестнадцатеричное число, и является обязательным. Если вы пропустите #, браузер не отобразит нужный цвет. СОВЕТ Если во всех трех значениях цифры повторяются, можно сократить Hex-значение, используя только первое число каждой пары. Например, #361 означает то же самое, что и #336611. Проценты RGB. Вы также можете определить цвет, используя значения в процентах, например: rgb (100%, 0%, 33%). Вы можете получить эти числа из программ редактирования изображений и дизайна, которые могут определять цвета, используя проценты. Целочисленные значения. И наконец, для задания RGB-цвета можно использовать целочисленные значения. Формат такой же, как и для процентных значений, но для указания каждого цвета применяется число от 0 до 255: rgb (255, 0, 33).
RGBA. RGBA добавляет к смешанным цветам прозрачность. То есть можно сделать цвет, через который просматриваются расположенные ниже фоновые цвета, изображения или текст. Последним к цвету RGB добавляется значение от 0 (полная невидимость) до 1 (полная непрозрачность). Для задания цветовых составляющих можно использовать либо процентные, либо десятичные значения, а для прозрачности можно применять только десятичные значения. Например, оба следующих объявления создают светло-серый цвет, с 50-процентной прозрачностью: rgba(50%,50%,50%,.5) rgba(122,122,122,.5)
HSL означает hue — тон, saturation — насыщенность и lightness — осветленность (последняя буква иногда расшифровывается как luminance — светимость). Это еще один способ задания цвета. Он не поддерживается в InternetExplorer 8 и более ранних версиях, но работает во всех остальных браузерах. Если вы привыкли использовать RGB- или Hex-цвета, синтаксис HSL может показаться немного непривычным. Вот как выглядит задание ярко-красного цвета: hsl(0, 100%, 50%); Первое число (hue) является углом от 0 до 360°, представляющим цветовой спектр на круге оттенков, где и 0, и 360° представляют красный, а 180° — зеленый цвет. Второе число задает насыщенность, или степень чистоты цвета, и выражается процентами от 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 или более совершенное средство, позволяющее создавать и сохранять палитру цветов, которое находится на сайте https://kuler.adobe.com.
Длины и размеры
CSS предоставляет множество различных способов определить размер шрифта, ширину поля или толщину границы. Чтобы указать размер шрифта, вы можете использовать дюймы, цицеро, точки, сантиметры, миллиметры, единицы измерения em и ex, пикселы и проценты. На самом деле вам стоит задуматься только о трех: пикселах, em и процентах.
Пикселы. Пиксел — это одна точка на экране компьютера. Пикселы дают последовательный метод идентификации длины размеров шрифта от компьютера к компьютеру: 72 пиксела на одном мониторе составляют 72 пиксела на другом мониторе. Это тем не менее не означает, что фактическая длина в реальном мире будет одной и той же для всех. Поскольку пользователи устанавливают для своих мониторов различные разрешения — 800 × 600, 1024 × 768, 1600 × 1200 и др., — 72 пиксела могут занять 1 дюйм на одном мониторе и всего 0,5 дюйма на другом. Однако пикселы дают вам наиболее последовательный контроль над отображением.
ПРИМЕЧАНИЕ Есть только один недостаток в использовании пикселов: пользователи Internet Explorer версий 6 или ниже не могут изменить размеры элемента, если они заданы в пикселах. Если ваш текст окажется слишком маленьким для кого-то, то посетитель будет не в состоянии увеличить его, чтобы сделать более приемлемым для чтения.
Единица измерения em. В типографике em — это единица измерения, которая представляет высоту заглавной буквы М для определенного шрифта. В веб-дизайне 1 em — это высота базового шрифта в браузере, которая обычно составляет 16 пикселов. Однако любой может изменить эту базовую установку размера, так что 1 em будет равняться 16 пикселам в одном браузере и 24 пикселам — в другом. Другими словами, em — это относительная единица измерения. Вдобавок к исходной установке размера шрифта в браузере, em может унаследовать информацию о размере от тегов. Размер.9em установит высоту текста приблизительно 14 пикселов в большинстве браузеров с основным размером шрифта 16 пикселов. Но если у вас есть тег <p> с размером шрифта.9ems, а затем тег <strong> с размером шрифта.9ems внутри этого тега <p>, то em-размер тега <strong> составит не 14, а 12 пикселов (16 × 0,9 × 0,9). Так что помните о наследовании, когда применяете em-значения.
Проценты. CSS использует проценты в различных целях, таких как установка размеров текста, определение ширины или высоты элемента, размещение изображения в фоне стиля и т. д. Для размеров шрифта проценты вычисляются на основании унаследованного значения текста. Скажем, общий размер шрифта для абзаца — 16 пикселов. Если вы создали стиль для отдельного абзаца и установили размер его шрифта равным 200 %, то этот текст отображается высотой 32 пиксела. Однако при применении к ширине проценты вычисляются на основе ширины страницы или другого родительского элемента с заданной шириной.
Ключевые слова У многих свойств есть собственные специфические значения, которые влияют на то, как проявляют себя свойства. Они представлены ключевыми словами. Свойство text-align, выравнивающее текст на экране, может принять одно из четырех ключевых слов: right, left, center и justify. Поскольку ключевые слова изменяются от свойства к свойству, читайте описания свойств, которые идут далее, чтобы узнать, какие ключевые слова им соответствуют. Есть одно ключевое слово, которое используется всеми свойствами, — inherit. Оно заставляет стиль унаследовать значение от родительского элемента. Ключевое слово inherit дает возможность заставить стили унаследовать свойства, которые обычно не наследуются от родительских тегов. Например, вы используете свойство border, чтобы добавить границу вокруг абзаца. Остальные теги, такие как <em> и <strong> внутри тега <p>, не наследуют это значение, но вы можете указать им сделать это с помощью ключевого слова inherit: em, strong { border: inherit; } Таким образом, в данном случае теги em и strong отображают одно и то же значение border, как и их родительский тег <p>. Так, элементы <em> и <strong> абзаца получают собственные границы, как и весь текст абзаца. Если бы они изначально наследовали значение свойства border, то у вас получились бы одни границы внутри других (а это серьезное основание, чтобы не наследовать данное свойство). Если вы изменяете значение border тега <p> на другой цвет или толщину линии, теги <em> и <strong> также наследуют это значение и отображают такой же вид границы.
ПРИМЕЧАНИЕ Границы — не очень полезный пример, главным образом потому, что inherit — не очень полезное значение. Но это не было бы полным руководством, если бы я не рассказал обо всех этих фактах.
URL-адреса Значения URL позволяют указывать на другой файл в Сети. Например, свойство background-image принимает URL — путь к файлу в Интернете — в качестве своего значения, которое позволяет вам назначать графический файл как фон для элемента страницы. Эта методика удобна при добавлении повторяющегося изображения в фон страницы или при использовании собственной графики для маркированных списков. В 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 (например, https://www.missingmanuals.com/images/tile.gif), путь относительно корня (например, /images/tile.gif) или URL относительно документа (например,../../ images/tile.gif).
Свойства текста
Следующие свойства влияют на форматирование текста на веб-странице. Поскольку большинство свойств этой категории наследуются, вам не обязательно применять их к тегам, специально предназначенным для текста (таким как тег <p>). Вы можете применить эти свойства к тегу <body> так, чтобы остальные теги унаследовали и использовали те же самые настройки. Задействование этой методики — быстрый способ создать всеохватывающий шрифт, цвет и т. д. для страницы или раздела.
color (наследуется) Устанавливает цвет текста. Поскольку оно наследуется, то, если вы задаете красный цвет для тега <body>, например, у всего текста на странице — и у всех других тегов внутри тега <body> — также будет красный цвет. Значения: любое корректное значение цвета. Пример: color: #FFFF33;.
ПРИМЕЧАНИЕ Заранее установленный цвет ссылок для тега<a> отменяет наследование цвета. В вышеупомянутом примере любые ссылки в теге <body> все еще были бы стандартного синего цвета.
font (наследуется) Используя это свойство, вы можете сокращенно определить следующие текстовые свойства в отдельном объявлении стиля: font-style, font-variant, font-weight, fontsize, line-height и font-family. В этом свойстве между значениями нужно ставить пробелы и включить по крайней мере font-size и font-family, причем они должны быть последними двумя элементами в объявлении. Остальные являются дополнительными. Если вы не установите свойство, браузер будет использовать предустановленное значение, потенциально отменяя унаследованные свойства. Значения: любое значение, корректное для определенного свойства шрифта. Если вы включаете значение line-height, то задавайте высоту линии, слеш (/), а затем размер шрифта, например: 1.25em/150%. Пример: font: italic small-caps bold 1.25em/150% Arial, Helvetica, sansserif;.
font-family (наследуется) Указывает шрифт, который браузер должен использовать при отображении текста. Шрифты обычно определяются как наборы трех-четырех параметров, учитывая тот факт, что конкретный шрифт может быть не установлен на компьютере посетителя. Значения: названия шрифтов, разделенные запятыми. Когда название шрифта состоит из нескольких слов, между которыми стоит пробел, это название нужно указывать в кавычках. Последний перечисленный шрифт — обычно общий тип шрифта, указывающий браузерам выбрать подходящий шрифт, если остальные недоступны: serif, sans-serif, monotype, fantasy или cursive. Пример: font-family: "Lucida Grande", Arial, sans-serif;.
ПРИМЕЧАНИЕ Все браузеры позволяют указывать дополнительные шрифты, которые либо хранятся на вашем веб-сервере, либо загружаются браузерами ваших посетителей со службы веб-шрифтов.
font-size (наследуется) Устанавливает размер текста. Это свойство наследуется, что может привести к некоторому странному поведению при использовании относительных единиц измерения, таких как проценты и em. Значения: любая корректная единица измерения 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 в большинстве браузеров).
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 % от размера текста. Значения: большинство корректных размеров CSS, хотя em, пикселы и проценты наиболее распространены. Пример: line-height: 200%;.
text-align (наследуется) Выравнивает блок текста по левому, правому краю или по центру страницы либо элемента-контейнера. Значения: left, center, right, justify (значение justify часто затрудняет чтение текста на мониторах). Пример: text-align: center;.
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, которое добавляет отступ с левой стороны других строк текста на установленную величину. Пример: text-indent: 3em;.
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 — буквы, которые в действительности напечатаны в HTML, то none отменит другие унаследованные установки регистра от тега-предка и отобразит на экране aBCDefg. Пример: text-transform: uppercase;.
vertical-align Устанавливает базовую линию внутреннего элемента относительно базовой линии окружающего содержимого. С ним вы можете сделать так, чтобы символ появился немного выше или ниже окружающего текста. Используйте его для создания символов верхнего индекса, таких как TM, ® или ©. При применении к ячейке таблицы значения top, middle, bottom и baseline управляют вертикальным размещением содержимого внутри ячейки. Значения: baseline, sub, super, top, text-top, middle, bottom, text-bottom, процентное или абсолютное значение (например, пикселы или em). Проценты вычисляются на основании значения line-height элемента. Примеры: vertical-align: top; vertical-align: -5px; vertical-align: 75%;.
white-space Управляет тем, как браузер отображает пробелы в коде HTML. Обычно если вы включаете более одного пробела между словами, например "Hello Dave", браузер отображает только один пробел — "Hello Dave". При использовании значения pre вы можете сохранить пробелы точно так же, как в HTML. Это значение делает то же, что и HTML-тег <pre>. Кроме того, браузеры разобьют строку текста на месте пробела, если строка не будет соответствовать ширине окна. Чтобы препятствовать обтеканию текста, примените значение nowrap. Однако это значение вынуждает весь текст абзаца оставаться на одной строке, так что не используйте его с длинными абзацами (если вам, конечно, не хочется заставить посетителей бесконечно прокручивать страницу вправо). Значения: nowrap, pre, normal. Еще два значения — pre-line и pre-wrap — не работают во многих браузерах. Пример: white-space: pre;.
word-spacing (наследуется) Работает, как свойство letter-spacing, но регулирует расстояние между словами, а не между буквами. Значения: любая правильная единица измерения CSS, хотя em и пикселы наиболее распространены; проценты не работают в большинстве браузеров. Используйте положительное значение, чтобы увеличить расстояние между словами, и отрицательное значение, чтобы убрать интервал (сжать слова). Значение normal устанавливает стандартное расстояние между словами (word-spacing), принимаемое за 0. Примеры: word-spacing: -1px; word-spacing: 2em;.
Свойства списков
Следующие свойства затрагивают форматирование маркированных (<ul>) и нумерованных списков (<ol>).
list-style (наследуется) Применение этого свойства — сокращенный метод определения трех свойств, перечисленных далее. Вы можете включить значение для одного или более этих свойств, разделяя каждое пробелом. Вы можете даже использовать это свойство как кратчайший путь для написания отдельного свойства и сэкономить время при наборе кода: list-style: outside вместо list-style-position: outside. Если вы определите и тип, и изображение, браузер покажет стандартный маркер (кружок, квадрат и т. д.), только если не сможет найти изображение. Таким образом, если путь к изображению, определенному для маркера, не работает, маркированный список все равно будет с маркерами. Значения: любое подходящее значение для list-style-type, list-style-image и/или list-style-position. Пример: list-style: disc url (images/bullet.gif) inside;.
list-style-image (наследуется) Определяет изображение, которое используется для маркера в маркированном списке. Значения: URL или none. Пример: list-style-image: url (images/bullet.gif);. СОВЕТ Свойство background-image также позволяет определить для маркера изображение и предоставляет больше возможностей управления.
list-style-position (наследуется) Позиционирует маркеры или числа в списке. Эти маркеры могут появиться за пределами текста, выступая за левый край, или внутри текста (прямо там, где обычно начинается первая буква первой строки). Значение outside определяет стандартное отображения маркеров и чисел. Значения: inside, outside. Пример: list-style: inside;.
list-style-type (наследуется) Устанавливает тип маркера для списка: круг, квадрат, римские цифры и т. д. Вы можете даже превратить неупорядоченный (маркированный) список в упорядоченный (нумерованный), изменяя свойство list-style-type, но это работает не во всех браузерах (включая Internet Explorer для Windows). Используйте значение none, чтобы полностью удалить маркеры или числа из списка. Значения: disc, circle, square, decimal, decimal-leading-zero, upper-alpha, loweralpha, upper-roman, lower-roman, lower-greek, none. Пример: list-style-type: square;.
Отступы, границы и поля
Следующие свойства управляют пространством вокруг элемента.
box-shadow Добавляет тень вокруг блочного элемента. Значения: к блочному значению применяется необязательное значение inset, добавляющее тень внутри элемента. За ним следуют четыре измеряемых значения и цвет. Первые два измеряемых значения (в em или пикселах) задают горизонтальное и вертикальное смещения. Третье значение определяет степень размытости тени, четвертое, необязательное значение указывает «расширение» тени, делая ее шире. Отрицательное значение для горизонтального смещения помещает тень слева от блока, а положительное значение — справа. Отрицательное значение для вертикального смещения помещает тень сверху от блока, а положительное значение — снизу. Каждое значение отделяется от предыдущего пробелом. Можно также добавить несколько теней, добавляя значения дополнительной тени через запятую.
Примеры: box-shadow: -4px 4px 3px #999999;
box-shadow: inset 4px 4px 3px 5px #999999;
box-shadow: inset 4px 4px 3px 5px #999999
2px 2px 5px black;
border Чертит линию вокруг четырех сторон элемента. Значения: толщина границы задается в любой корректной единице измерения CSS (кроме процентов). Вы также можете определить стиль для линии: solid, dotted, dashed, double, groove, ridge, inset, outset, none и hidden. Значения none и hidden делают одно и то же — удаляют любую границу. Наконец, вы можете определить цвет, используя любой корректный тип цвета CSS (ключевое слово, например, green, или Hex-значение, такое как #33fc44). Пример: border: 2px solid #f33;.
border-radius Скругляет углы элемента. Визуальный эффект проявляется, только если у элемента есть граница, цвет фона или изображение. Значения: одно, два, три или четыре значения (в px, em или %), задающие размер радиуса окружности, рисуемой в углах блока элемента. Если предоставлено только одно значение, один и тот же размер скругленного угла применяется ко всем четырем углам. Если предоставлено два значения, первое определяет радиус скругления верхнего левого и нижнего правого углов, а второе — верхнего правого и нижнего левого углов. Если используются три значения, первое определяет радиус скругления верхнего левого угла, второе — верхнего правого и нижнего левого угла, а третье — нижнего правого угла. Если задействуются четыре значения, то каждое из них применяется по порядку к верхнему левому, верхнему правому, нижнему правом и нижнему левому углам. Для создания вместо углов в форме окружности углов в форме эллипса можно добавить слеш /, после которого указать второе значение радиуса.
Примеры: border-radius:.5em;
border-radius: 15px 10px 25px 5px;
border-radius: 15px / 5px;
border-top, border-right, border-bottom, border-left Добавляют границу к одному краю. Например, border-top добавляет границу к вершине элемента. Значения: те же, что и для border. Пример: border-left: 1em dashed red;.
border-color Определяет цвет, используемый для всех четырех границ. Значения: любой корректный тип цвета CSS (ключевое слово, например, green, или Hex-значение, такое как #33fc44). Пример: border-color: rgb(255,34,100);. У этого свойства есть еще и сокращенная запись, позволяющая присваивать различные цвета каждой из четырех границ. Значения: любой корректный тип цвета CSS для каждой границы: верхней, правой, нижней и левой. Если вы укажете только два значения, то первое будет присвоено верхней и нижней, а второе — правой и левой границам. Пример: border-color: #000 #F33 #030 #438F3C;.
border-top-color, border-right-color, border-bottom-color, border-left-color Функционируют так же, как свойство border-color, но устанавливают цвет только для одной границы. Используйте эти свойства, чтобы отменить цвет, заданный свойством border. Таким образом, вы можете настроить цвета для отдельных границ, притом, что вы используете более общий стиль border, чтобы определить базовый размер и стиль для всех четырех сторон. Значения: как и для свойства border-color. Пример: border-left-color: #333;.
border-style Определяет стиль, используемый для всех четырех границ. Значения: одно из ключевых слов: solid, dotted, dashed, double, groove, ridge, inset, outset, none и hidden. Значения none и hidden действуют одинаково — удаляют любую границу. Пример: border-style: inset;. У этого свойства есть также сокращенная запись, позволяющая присваивать различные стили для каждой из четырех границ: верхней, правой, нижней и левой. Значения: одно из ключевых слов, упомянутых выше, для каждой из четырех границ. Если вы укажете только два значения, первое будет присвоено верхней и нижней, а второе — правой и левой границам. Пример: border-style: solid dotted dashed double;.
border-top-style, border-right-style, border-bottom-style, border-left-style Функционируют точно так же, как свойство border-style, но применяются только к одному краю (границе). Значения: как и для свойства border-style. Пример: border-top-style: none;.
border-width Определяет толщину линии, используемой для рисования всех четырех границ. Значения: любая корректная единица измерения CSS, кроме процентов. Наиболее распространенные — em и пикселы. Пример: border-width: 1px;. У этого свойства есть также сокращенная запись, позволяющая присваивать различную толщину линии каждой из четырех границ. Значения: любая корректная единица измерения CSS, кроме процентов, — для каждой из четырех границ. Если вы укажете только два значения, первое будет присвоено верхней и нижней, а второе — правой и левой границам. Пример: border-width: 3em 1em 2em 3.5em;.
border-top-width, border-right-width, border-bottom-width, border-left-width Функционируют точно так же, как свойство border-width, но применяются только к одному краю. Значения: как и для свойства border-width. Пример: border-bottom-width: 3em;.
box-sizing Предписывает браузеру порядок измерения высоты и ширины элемента. Обычно браузеры для определения количества экранного пространства, занимаемого элементом, объединяют свойства border, padding и width. Такая система может привести к запутанной ситуации, когда для ширины элемента указывается значение 300 пикселов, но если у элемента также есть отступы и границы, браузер отображает элемент на экране в пространстве, превышающем по ширине 300 пикселов. Значения: content-box, padding-box (устарело, не применяйте его) или border-box. Вариант content-box задает обычный порядок работы браузера. Padding-box предписывает браузеру включать в расчет наряду со значениями width и height еще и значение padding. Вариант border-box заставляет браузер включать в расчет еще и значение border. Например, если у вас есть тег <div>, для которого установлена ширина 300 пикселов, отступы по 20 пикселов и граница толщиной 2 пиксела, браузер обычно покажет этот div-элемент в 344 пикселах экранного пространства (300 + 20 + 20 + 2 +2), но, если для свойства box-sizing установлено значение padding-box, браузер покажет этот div-элемент в 304 пикселах экранного пространства (300 + 2 +2), потому что отступы считаются частью этих 300 пикселов, а если установлено значение border-box, то браузеру будет просто предписано сделать div-элемент шириной 300 пикселов. Вариант border-box широко используется для упрощения отслеживания ширины элемента. К сожалению, Internet Explorer 7 и более ранние версии не понимают этого свойства.
Пример: box-sizing: border-box;.
outline Применение этого свойства — краткий способ объединить outline-color, outlinestyle и outline-width (перечислены далее). Контур, задаваемый этим свойством, работает точно так же, как граница, за исключением того, что он не занимает места (то есть не увеличивает ширину или высоту элемента) и относится ко всем четырем краям. Оно больше применяется как средство выделения чего-нибудь на странице, чем как элемент дизайна. Свойство outline работает в Firefox, Safari, Chrome, Opera и только в 8-й или более поздней версии Internet Explorer. Значения: те же самые, что относятся к border. Пример: outline: 3px solid #F33;.
outline-color Определяет цвет для контура (см. описание свойства outline). Значения: любой корректный цвет CSS плюс значение invert, которое просто изменяет цвет контура (цвет, на котором расположен контур) на противоположный. Если контур нарисован на белом фоне, значение invert сделает его черным. Работает точно так же, как свойство border-color. Пример: outline-color: invert;.
outline-style Определяет тип линии для контура: пунктирная, сплошная, штриховая и т. д. Значения: те же самые, что и для свойства border-style, описанного выше. Пример: outline-style: dashed;.
outline-width Определяет толщину контура. Работает так же, как и свойство border-width. Значения: любая корректная единица измерения CSS, кроме процентов. Наиболее распространенные — em и пикселы. Пример: outline-width: 3px;.
padding Устанавливает размер области между содержимым, границей и краем фона. Используйте его, чтобы добавить пустое пространство вокруг текста, изображений или другого содержимого. Значения: любая корректная единица измерения CSS, такая как пикселы или em. Значения в процентах основываются на ширине содержащего элемента. Заголовок, являющийся потомком тега <body>, использует ширину окна браузера, чтобы вычислить значение в процентах, так что отступ шириной 20 % добавляет 20 % ширины окна. Если посетитель изменяет размеры своего браузера, размер отступа изменяется пропорционально. Вы можете определить отступ для всех четырех краев, используя одно значение, или установить отдельные размеры отступа для каждого края в таком порядке: top, right, bottom, left. Примеры: padding: 20px; padding: 2em 3em 2.5em 0;.
padding-top Работает точно так же, как свойство padding, но устанавливает отступ только для верхнего края. Пример: padding-top: 20px;.
padding-right Работает точно так же, как свойство padding, но устанавливает отступ лишь для правого края. Пример: padding-right: 20px;.
padding-bottom Работает точно так же, как свойство padding, но устанавливает отступ только для нижнего края. Пример: padding-bottom: 20px;.
padding-left Работает точно так же, как свойство padding, но устанавливает отступ лишь для левого края. Пример: padding-left: 20px;.
margin Устанавливает размер области между границей элемента и краями других элементов. Свойство позволяет добавлять пустое пространство между двумя элементами: между двумя изображениями или между боковой панелью и областью главного содержимого страницы.
ПРИМЕЧАНИЕ. Вертикальные поля между элементами могут исчезать. Иными словами, браузеры используют толь- ко верхнее или нижнее поле и игнорируют остальные, создавая меньший промежуток, чем ожидается.
Значения: любая корректная единица измерения CSS, такая как пикселы или em. Значения в процентах основаны на ширине содержащего элемента. Заголовок, который является потомком дочернего тега <body>, использует ширину окна браузера, чтобы вычислить значение в процентах, так что поле шириной 10 % добавляет 10 % ширины окна к краям заголовка. Если посетитель изменяет размеры своего браузера, изменяется размер поля. Как и в случае с отступом, вы определяете поля для всех четырех границ, используя одно значение, или устанавливаете отдельные поля в таком порядке: top, right, bottom, left. Примеры: margin: 20px;
margin: 2em 3em 2.5em 0;.
margin-top Работает точно так же, как свойство margin, но устанавливает поле только для верхней стороны. Пример: margin-top: 20px;.
margin-right Работает точно так же, как свойство margin, но устанавливает поле лишь для правой стороны. Пример: margin-right: 20px;.
margin-bottom Работает точно так же, как свойство margin, но устанавливает поле только для нижней стороны. Пример: margin-bottom: 20px;.
margin-left Работает точно так же, как свойство margin, но устанавливает поле лишь для левой стороны. Пример: margin-left: 20px;.
Фоны
CSS предоставляет несколько свойств для управления фоном элемента, включая изменение цвета фона, размещение изображения позади элемента и управление тем, как позиционировано это фоновое изображение.
background Обеспечивает краткий метод определения свойств, которые проявляются в фоне элемента, таких как цвет, изображение и размещение этого изображения. Оно объединяет пять свойств фона (описаны далее) в одну компактную строку так, что вы можете получить тот же самый результат с меньшим количеством кода. Однако если вы не установите одно