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

Граница располагается между полем и отступом. Это значит, что margin находится за границей. Границу можно задавать как со всех четырех сторон (как бы заключая блок в рамку), так и с одной, двух или трех сторон. В CSS можно управлять толщиной, цветом и стилем границ. Изучим это подробнее.

Border-width: ширина границы

С помощью свойства border-width задается ширина границы. Наиболее часто этот размер указывается в пикселях. Можно задать одинаковую либо различную ширину для всех четырех границ, например:

/* все 4 границы имеют ширину 2px: */ border-width: 2px; /* верхняя и нижняя границы имеют ширину 2px, левая и правая - 4px: */ border-width: 2px 4px; /* верхняя граница - 2px, левая и правая - 6px, нижняя - 3px: */ border-width: 2px 6px 3px; /* верхняя граница - 2px, правая - 3px, нижняя - 4px, левая - 5px: */ border-width: 2px 3px 4px 5px;

Кроме этого, существуют ключевые слова для обозначения ширины границы:

• thin - граница шириной 2px;
• medium - граница шириной 4px;
• thick - граница шириной 6px.

Border-color: цвет границы

Свойство border-color задает цвет для границ. Цвета можно указывать в любом формате CSS: ключевыми словами, в шестнадцатеричном виде либо в RGB - зависит от того, как вам удобнее. По аналогии с предыдущим свойством, можно устанавливать как один цвет для всех границ, так и выбирать разные цвета для каждой границы.

Border-color: #FFFF00;

Также можно задать прозрачный цвет, записав:

Border-color: transparent;

Border-style: стиль границы

Благодаря свойству border-style вы можете делать из обычной границы пунктирную, двойную, объемную - существует много различных значений. Для этого воспользуйтесь следующими ключевыми словами:

• solid - сплошная граница;
• dotted - граница из точек;
• dashed - пунктирная граница;
• double - двойная граница;
• groove - объемная граница-выемка;
• ridge - объемная граница с толстой кромкой (по сути, инверсия предыдущего стиля);
• outset - выдавленная граница;
• inset - вдавленная граница (по сути, инверсия предыдущего стиля).

Как и в случае со свойствами border-width и border-color , для каждой границы блока можно задавать отдельный стиль - например, вы можете сделать верхнюю и нижнюю границы пунктирными, а правую и левую - двойными. Здесь уже все зависит лишь от фантазии.

Border-style: double dotted;

Обратите внимание: в разных браузерах внешний вид границ может немного отличаться.

Общее CSS-свойство border: 3 в 1

Чтобы задать стиль для границы, не обязательно по очереди использовать все три вышеперечисленных свойства. Достаточно знать об общем универсальном свойстве border CSS, с помощью которого вы гораздо быстрее напишете стиль и сэкономите место. Для этого в произвольном порядке запишите значения для всех трех свойств:

Border: 2px dotted #FF0000;

Границы для отдельных сторон

При помощи дополнительных свойств border в CSS вы можете создавать стиль для каждой границы блока по отдельности. В этом вам помогут следующие свойства:

• border-top - стиль для верхней границы;
• border-right - для правой границы;
• border-bottom - для нижней границы;
• border-left - для левой границы.

border-top: 2px solid #0000FF; border-bottom: 7px double #000080;

Итоги

Теперь, когда вы знаете, как делать границы для блоков, вы можете потренироваться в их создании. Существует масса способов кратко описать стиль, избежав чрезмерного количества строк в файле CSS. Немаловажную роль здесь играет знание принципов каскадности таблиц стилей. Рассмотрим пример.

Допустим, вы хотите создать рамку для блока div с тремя сплошными серыми границами, а нижнюю границу сделать пунктирной зеленой. Можно записать этот стиль таким образом:

Div { border-right: 8px double #FF0000; border-left: 8px double #FF0000; border-bottom: 8px double #FF0000; border-top: 4px dotted #FDD201; }

Но это слишком длинная запись. Всё это можно записать короче:

Div { border: 8px double #FF0000; border-top: 4px dotted #FDD201; }

Как упоминалось выше, здесь мы воспользуемся свойствами каскадности CSS. Сначала мы записываем стиль для всех четырех сторон рамки, после чего указываем стиль отдельно для нижней границы, тем самым частично перезаписывая предыдущий стиль. Очень важно соблюдать эту последовательность строк.

Мини-задание

Попробуйте создать рамку для блока div с размерами 200×200 пикселей. Стили для рамки должны быть такими:

• Верхнюю и нижнюю границы сделайте сплошнымиsolid , задайте им одинаковый цвет на выбор и ширину 5 пикселей.
• Левую границу сделайте пунктирнойdashed , шириной 3 пикселя, цвет выберите отличный от предыдущего.
• Правую границу сделайте двойнойdouble , шириной 7 пикселей, цвет отличный от двух предыдущих.

В конечном итоге ваша работа должна выглядеть так (за исключением цвета, который вы выбираете сами):

Результат задания (вид в Chrome)

Для управления границей элемента применяется универсальное свойство border . Это свойство позволяет установить в одном объявлении толщину, стиль и цвет границы элемента.

Эти три свойства (толщину, стиль и цвет границы) можно установить в одном объявлении. Вот пример:

Можно указать стиль границы только на одной стороны элемента. Для этого применяют свойства border-top (верхняя граница), border-right (правая граница), border-bottom (нижняя граница), border-left (левая граница).

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

Подумайте, как при помощи CSS можно создать такую фигуру:

Значения границы - толщину, стиль и цвет - можно задать отдельно используя специальные свойства.

• border-style - стиль границы.
• border-width - ширина границы.
• border-color - цвет границы.

Рассмотрим каждое из значений по отдельности.

Свойство border-style. Стиль границы.

Свойство border-style устанавливает стиль рамки. В CSS, в отличии HTML, граница элемента может быть не только сплошной. Допустимы следующие значения для стиля границы:

1. none - граница отсутствует (по умолчанию).
2. solid - сплошная граница.
3. double - двойная граница.
4. dashed - пунктирная граница.
5. dotted - граница из ряда точек.
6. ridge - граница "гребень".
7. groove - граница "бороздка".
8. inset - вдавленная граница.
9. outset - выдавленная граница.

Примеры того, как они выглядят.

граница отсутствует (none)

сплошная граница (solid)

двойная граница (double)

граница из ряда точек (dotted)

пунктирная граница (dashed)

граница "бороздка" (groove)

граница "гребень" (ridge)

вдавленная граница (inset)

выдавленная граница (outset)

Кстати, если для рамки ridge задать цвет границы чёрный, то получится вот такой результат.

Блок div с рамкой чёрного цвета и стиля ridge.

Рамка выглядит как solid , но это потому что стиль ridge создаётся добавлением чёрного эффекта тени, а чёрный эффект на чёрной рамке не виден.

При помощи свойства border-style стиль границы может быть задан не только для всех сторон блока. Есть возможность задавать несколько значений одному свойству border-style , в зависимости от числа значений стиль границы будет присвоен разному числу сторон блока. Можно задать одно, два, три и четыре значения. Давайте рассмотрим примеры для каждого случая.

Одно значение (solid) - стиль границы установлен для всех сторон блока.

Два значения (solid double) - первое значение установило стиль для верхней и нижней сторон, второе для боковой.

Три значения (solid double dotted) - первое значение для верхней стороны, второе для боковых, стретье для нижней.

Четыре значения (solid double dotted dashed) - каждое значение для одной стороны по часовой стрелке начиная с верхней.

Свойство border-width. Толщина границы.

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

Как и для свойства border-style , для свойства также можно задавать от одного до четырёх значений. Рассмотрим примеры для каждого случая.

Код примера:

Также для свойства border-width существуют значения в виде ключевых слов. Всего их три:

• thin - тонкая граница;
• medium - средняя толщина;
• thick - толстая граница;

Толщина границы: thin.

Толщина границы: medium.

Толщина границы: thick.

Свойство border-color. Цвет границы.

Для управления цветом границы используется средство border-color . Цвета для этого свойства можно задать используя любой способ, описанный в статье "Цвета в CSS ", а именно:

• Шестнадцатеричная запись (#ff00aa ) цвета.
• Формат RGB - rgb(255,12,110) . Формат RGBA для CSS3.
• Форматы HSL и HSLA для CSS3.
• Название цвета, например black (чёрный). Полный список названий цветов приведён в таблице названий цветов CSS .

Свойство border-color также может иметь от одного до четырёх значений и обрабатывает их аналогично предыдущим свойствам.

Одно значение (red).

Два значения (red black).

Три значения (red black yellow).

Четыре значения (red black yellow blue).

Теперь вернёмся к задаче, озвученной выше, и нарисуем фигуру:

Вот код, который рисует такую фигуру, только побольше размером:

Установка значений для сторон отдельно

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

• border-top (верхняя граница)
• border-right (правая граница)
• border-bottom (нижняя граница)
• border-left (левая граница)

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

Параметры верхней границы (border-top ).

• border-top-color - задаёт цвет верхней границы элемента.
• border-top-width - задаёт толщину верхней границы элемента.
• border-top-style - задаёт стиль верхней границы элемента.

Параметры правой границы (border-right ).

• border-right-color - задаёт цвет правой границы элемента.
• border-right-width - задаёт толщину правой границы элемента.
• border-right-style - задаёт стиль правой границы элемента.

Параметры нижней границы (border-bottom ).

• border-bottom-color - задаёт цвет нижней границы элемента.
• border-bottom-width - задаёт толщину нижней границы элемента.
• border-bottom-style - задаёт стиль нижней границы элемента.

Параметры левой границы (border-left ).

• border-left-color - задаёт цвет левой границы элемента.
• border-left-width - задаёт толщину левой границы элемента.
• border-left-style - задаёт стиль левой границы элемента.

Пример использования этих свойств:

Свойство border-radius. Округление углов границы.

Свойство border-radius предназначено для округления углов границ элемента. Это свойство появилось в CSS3 и корректно работает во всех современных браузерах, за исключением Internet Explorer 8 (и более старых версий).

Значениями могут быть любые числа, используемые в CSS.

Свойство border-radius: 15px.

Если рамка блока не задана, то скругление происходит с фоном. Вот пример закругления блока без рамки, но с фоновым цветом:

Свойство border-radius: 15px.

Существуют свойства для скругленя каждого отдельно угла элемента. В этом примере использованы они все:

Border-top-left-radius: 15px; border-top-right-radius: 0; border-bottom-right-radius: 15px; border-bottom-left-radius: 0;

Свойство border-radius: 15px.

Хотя этот код можно записать одним объявлением: border-radius : 15px 0 15px 0 . Дело в том, что для свойства border-radius можно задавать от одного до четырёх значений. В таблице ниже приведены правила, которые определяют такие объявления.

Внимательно изучив эту таблицу можно понять, что самая короткая запись нужного стиля будет такой: border-radius : 15px 0 . Всего два значения.

Немного практики

Рисуем лимон средствами CSS.

Вот код такого блока:

Margin: 0 auto; /* Размещаем блок по центру */ width: 200px; height: 200px; background: #F5F240; border: 1px solid #F0D900; border-radius: 10px 150px 30px 150px;

Мы уже рисовали фигуру:

Теперь оставим от неё треугольник:

Код треугольника такой:

Margin: 0 auto; /* Размещаем блок по центру */ padding: 0px; width: 0px; height: 0; border: 30px solid white; border-bottom-color: red;

Здравствуйте, уважаемые читатели блога сайт. Сегодня я хочу продолжить тему изучения и рассмотреть те стилевые правила, которые позволяют задать отступы и границы для Html элементов: border, margin и padding.

До этого мы успели изучить довольно-таки простые свойства, которые управляли шрифтами (), текстом () и рассмотрели модель

Да, еще мы и принципы использования успели рассмотреть во всех подробностях (растянувшихся на несколько статей). Теперь пора переходить к правилам, которые составляют основу построения документов (вебстраниц), и начнем мы именно с блочной модели (взаимоотношения Html элементов).

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

Блочная модель в CSS — padding, margin и border

В-третьих, могут использоваться проценты. От чего же они считаются? Оказывается, что от ширины контейнера (то есть от области контента родительского элемента). Причем, это относится не только к margin-right и left, что было бы логично, но и для margin-top и bottom проценты будут рассчитываться именно от ширины (а не высоты) контейнера.

Надо отметить, говоря про задание размерных значений, что Margin может быть еще и отрицательным . Т.е. при задании положительного значения для внешнего отступа мы отодвигаем соседний элемент на указанное расстояние, а в случае указания отрицательного — соседний блок просто-напросто заедет на тот, для которого мы этот отрицательный отступ задали. И это очень часто используется в CSS.

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

Т.е. перечисление начинается с верхнего (top) и продолжается по часовой стрелке вплоть до завершения круга правым отступом (right). Выглядеть это может примерно так:

Margin:20px 10px 40px 30px;

И это будет означать, что браузер сверху от нашего блока должен сделать отступ в 20 пикселей, справа — в 10, снизу — в 40, а слева — в 30. Т.е. эта запись будет эквивалентна такой:

Сокращение CSS кода видно невооруженным глазом. Но и это еще не предел. Вполне допустимо использовать в сборном правиле не только четыре, но и три, два и даже всего одно значение. Что еще больше поможет уменьшить размер кода. Однако, уменьшать количество значений можно будет только в определенных случаях:

1. Если величины внешних отступов слева и справа будет одинаковыми, например, так: margin:20px 30px 40px 30px;

   То последнее можно будет опустить:

   Margin:20px 30px 40px;

   Эти две записи сборного правила делают одно и то же. Поэтому, если вы видите запись с тремя величинами в Margin, то величину четвертого (справа) можно будет подсмотреть во втором (слева).

   В случае равенства отступов сверху и снизу такой фокус уже не пройдет, ибо по логике можно уменьшать структуру записи сборного правила, лишь отсекая дублирующее значения с ее конца (а значение нижнего отступа будет стоять предпоследним).

2. Если кроме равенства внешних отступов слева и справа имеет место быть равенство их величин сверху и снизу: margin:20px 30px 20px 30px;

   или, что то же самое (в силу пункта 1):

   Margin:20px 30px 20px;

   То такое сборное правило можно записать всего с двумя значениями, отбросив последнее, которое совпадает с первым:

   Margin:20px 30px; В этом случае первая величина описывает внешние отступы по вертикали, а вторая — по горизонтали.

3. Ну и, наконец, если все значения в сборном правиле будут одинаковыми: margin:20px 20px 20px 20px;

   или, что то же самое (в силу пункта 2):

   Margin:20px 20px;

   То можно будет использовать максимально сокращенный тип записи (отбросив последнее значение совпадающее с первым):

   Margin:20px; Что будет означать одинаковый внешний отступ со всех сторон от нашего Html элемента.

Говоря про внешние отступы, стоит упомянуть про такую схему как «Margin-colloapse» или, по другому, «схлопывание марджинов». В двух словах суть этого явления заключается в следующем.

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

Например, если для верхнего блока задано следующее:

Margin:20px 20px 200px 20px;

А для нижнего:

Margin:100px 20px 20px 20px;

То нижний марджин верхнего блока (200px) поглотит в себе верхний марджин нижнего (100px, да и даже если он станет равен 199px ничего не изменится) и результирующий внешний отступ между этими двумя блоками все равно будет равен 200px. Т.е. в расчет принимается только лишь больший по модулю Margin, и он никак не складывается со встречным значением соседнего по вертикали элемента.

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

Например, в этом случае:

Верхний margin:20px 20px -20px 20px; Нижний margin:10px 20px 20px 20px;

Результирующий отступ между блоками будет равен -10px, т.е. нижний на 10px наедет на верхний Html элемент.

Еще одной особенностью использования правила Margin в CSS является то, что прописанное значение по вертикали для строчных элементов игнорируется . Задав:

Margin:20px;

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

Забегая чуть вперед скажу, что Padding у строчных тегов по вертикали сработает, но увеличившийся внутренний отступ никак не скажется на его общем положении относительно других соседних элементов.

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

Ну и рамка (Border), а точнее ее ширина, тоже не сможет отодвинуть по вертикали от строчного тега другие соседние блоки. Для строчных элементов движуха возможна только в одном направлении — по горизонтали и все.

Padding и border — внутренние отступы и рамки

Давайте теперь перейдем к заданию внутренних отступов с помощью правила Padding и посмотрим, какие именно значения оно может принимать:

Как вы можете видеть, тут нет упоминания Auto, а также это CSS правило не допускает использование отрицательных значений (они могут быть только положительными — от нуля и выше). Т.е. с помощью Padding контент за пределы рамки выдвинуть никак не получится. Максимум что можно сделать, это контент вплотную приблизить к рамке.

Проценты в нем считаются точно так же, как в Margin — относительно ширины контейнера (области контента родительского элемента), в котором заключен наш элемент. Сборное правило Padding в Css формируется и подчиняется тем же законам, что и рассмотренное чуть выше:

Padding:20px 10px 40px 30px;

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

И последнее, что сегодня я хотел бы рассмотреть — это рамки, которые задаются с помощью Border . У них есть три типа параметров:

1. Border-width — задает толщину рамки
2. Border-color — задает ее цвет
3. Border-style — тип рамки или же тип линии, которой она будет отрисована

У всех этих трех CSS правил имеется допустимый набор значений:

Ширина линии для рамки (Border-width ) может задаваться как с помощью цифр в Em, Ex или Px, так и словами:

1. Thin — тонкая линия;
2. Medium — средняя (данное значение используется по умолчанию);
3. Thick — толстая.

border-width:2px;

В качестве значения для цвета рамки (Border-color ) можно использовать принятые для способы их задания (шестнадцатеричный код, слова и т.д.):

Border-color:red;

По умолчанию, если цвет для рамки явно не задан, то будет использоваться тот, который используется для шрифта внутри данного элемента.
CSS свойство Border-style позволяет задать словами тип рамки:

1. None — без рамки (используется по умолчанию)
2. Dotted — линия отрисовывается точками
3. Dashed — пунктиром
4. Solid — сплошной линией
5. Double — двойной линией
6. Groove — вдавленная рамка
7. Ridge — выпирающая
8. Inset и outset — игры с тенью

Естественно, что раз есть четыре стороны любого блока, то можно использовать как общие правила, так и отдельные для каждой из сторон:

Тоже самое будет касаться и сборного правила Border — оно может быть прописано как для всех сторон одновременно (Border), так и для каждой из сторон в отдельности (Border-top, left, bottom и right). Порядок следования значений не важен:

Border:1px solid red;

Если что-то пропустить, то вместо него будет использоваться значение по умолчанию.

Удачи вам! До скорых встреч на страницах блога сайт

посмотреть еще ролики можно перейдя на

");">

Вам может быть интересно

Height, width и overflow - CSS правила для описания области контента при блочной верстке
Position (absolute, relative и fixed) - способы позиционирования Html элементов в CSS (правила left, right, top и bottom) Разное оформление для внутренних и внешних ссылок через CSS
Float и clear в CSS - инструменты блочной верстки
Display (block, none, inline) в CSS - задаем тип отображения Html элементов на вебстранице

Влад Мержевич

С помощью CSS можно добавить рамку к элементу несколькими способами. В основном, конечно же, применяется свойство border , как наиболее универсальное, а также outline и, как ни удивительно, box-shadow , основная задача которого - создание тени. Далее рассмотрим эти методы и их различия между собой.

Свойство outline

Самое простое свойство для создания рамок. Имеет те же параметры, что и border , но существенно отличается от него некоторыми деталями:

• outline выводится вокруг элемента (border внутри);
• outline не влияет на размеры элемента (border добавляется к ширине и высоте элемента);
• outline можно установить только вокруг элемента целиком, но никак не на отдельных сторонах (border можно использовать для любой стороны или всех сразу);
• на outline не действует радиус скругления, заданный свойством border-radius (на border действует).

Возникает вопрос - в каких случаях нужен outline , когда его роль, несмотря на перечисленные отличия, вполне берёт на себя border ? Ситуаций не так и много, но они встречаются:

• создание сложных разноцветных рамок;
• добавление рамки к элементу при наведении на него курсора мыши;
• сокрытие рамки, добавляемой браузером автоматически для некоторых элементов при получении фокуса;
• для outline можно задать расстояние от края элемента до рамки с помощью свойства outline-offset , для создания .

Разноцветные рамки

Надо понимать, что outline ни в коей мере не заменяет border и вполне может существовать вместе с ним, как показано в примере 1.

Пример 1. Создание рамки

В данном примере вокруг элемента добавляется чёрная рамка, которая отделена от фона белой каймой (рис. 1).

Рис. 1. Рамка вокруг элемента

Рамка при использовании:hover

При добавлении рамки через border происходит увеличение ширины элемента, что довольно заметно при сочетании border и псевдокласса :hover . Есть два способа, как это «победить». Самое простое - заменить border на outline , которое, как мы знаем, не оказывает влияния на размеры элемента (пример 2).

Пример 2. Рамка при наведении

outline не всегда годится, хотя бы потому, что на него скругление уголков не действует. Здесь подойдёт второй метод - добавляем невидимую рамку или рамку, совпадающую с цветом фона, а затем меняем её параметры при наведении (пример 3). Тогда никакого смещения элемента происходить не будет, поскольку рамка изначально уже есть. Но всегда помним, что ширина элемента при этом складывается из значений width , border слева и border справа. Аналогично обстоит и с высотой.

Пример 3. Рамка при наведении

Рамка вокруг полей формы

В некоторых браузерах (Chrome, Safari, последние версии Opera) вокруг полей формы при получении ими фокуса отображается небольшая цветная рамка (рис. 2). Чтобы её убрать, достаточно в стилях добавить к свойству outline значение none , как показано в примере 4.

Рис. 2. Рамка вокруг полей

Пример 4. Убираем рамку

Рамки через box-shadow

Хотя свойство box-shadow предназначено для добавления тени вокруг элемента, с его помощью можно и создавать рамки, причём такие, которые невозможно сделать через border или outline . Всё благодаря тому, что число теней может быть неограниченным, параметры которых перечисляются через запятую.

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

В примере 4 показано добавление двух рамок и одной границы справа с помощью одного свойства box-shadow .

Пример 4. Использование box-shadow

Результат данного примера показан на рис. 3.

Рис. 3. Рамки, созданные свойством box-shadow