Рассмотрим некоторый документ. На нем сформированы (отображены на экране в браузере) html-элементы. Они формируются на основании тегов. Вы расставляете теги, их обрабатывает парсер html (есть в любом браузере) и строит html-элементы. И как будут выглядеть эти элементы, определяет CSS.
У всех html-элементов есть 4 области: область внешних отступов, рамка, внутренние отступы и содержание элемента. Для чего они нужны?
Следует понимать, что каждый элемент лежит внутри какой-то области. Эта область для элемента, который лежит внутри нее, называется контейнером. Т.е. контейнер - это область контента родительского элемента. Эта область и определяет пространство для построения внутреннего элемента. Значит внутренний элемент будет подстраиваться под размер этой области.
Это когда наш элемент взаимодействует с границами контейнера и с границами соседних элементов (те, которые в коде расположены рядом с ним). Основные правила:
Значение “auto” - значит самостоятельный разбор браузером этих величин. Размер отступа можно указать в величинах: em, ex, px. Проценты (%) считаются от ширины контейнера (от области контента родительского элемента). Если указать отрицательное значение, то границы элементов внутри родительского контейнера наедут друг на друга.
Правило “margin” - сборное, здесь указываются значения всех 4-х отступов (начиная сверху и по часовой стрелке). Примеры:
Margin: 10px 20px 20px 30px; margin: 10px 20px 30px; - отступ слева справа одинаков margin: 10px 20px; - отступ сверху- снизу и слева- справа одинаков margin: 10px; - все отступы одинаковы
Здесь не может быть отрицательных значений, т.к. невозможно контент выдвинуть за пределы рамки элемента. Проценты считаются от ширины контейнера.
У всех рамок есть следующие характеристики:
Сами правила рамки:
Свойство для оформления текста и шрифта мы изучили, теперь пришла очередь переходить к другим элементам. В этом уроке мы рассмотрим, создание рамок средствами CSS . Данное свойство используется достаточно часто, поэтому ему стоит уделить немного больше внимания.
И так, давайте предположим, что вокруг какого-то элемента нужно сделать рамку. Например, создадим заголовок и вокруг него сделаем рамку.
Параметры характеризующие рамку: 1) Толщина рамки, 2) Стиль рамки и 3) Цвет рамки. И давайте по порядку:
Какие бывают стили рамок в CSS ? Ниже приведены все доступные стили рамок:
Теперь у нас есть все, чтобы создать рамку вокруг заголовка.
HTML
И сам стиль для рамки.
H2{ border-width: 2px; border-style: solid; border-color: #FF0000; }
В результате вокруг созданного заголовка появилась сплошная рамка красного цвета толщиной в 2px.
Рамка формируется из четырех сторон: Верхней , Правой , Нижней и Левой и, так как у нас указанно свойство border , то браузер по умолчанию рисует все четыре стороны рамки. Таким образом, если требуется задать рамку только с какой-то одной стороны, то используются приставки указывающие сторону, где создать рамку.
Таким образом если мы хотим рамку сделать только снизу абзаца то есть подчеркнуть его то к каждому свойству border добавляем приставку bottom . В результате получится следующая структура кода.
H2{
border-bottom-width: 2px;
border-bottom-style: double;
border-bottom-color: #FF0000;
}
Использование данных стилей для браузера будет означать, что нужно создать рамку только с нижней части, т.е. подчеркивающую заголовок. Точно так же можно и продублировать данный код, задав рамку уже с другой стороны, например верхней.
H2{ border-bottom-width: 2px; border-bottom-style: double; border-bottom-color: #FF0000; border-top-width: 2px; border-top-style: double; border-top-color: #FF0000; }
Теперь заголовок будет обводится красной рамкой сверху и снизу. Аналогично можно сделать и для других сторон.
Как Вы уже наверное заметили, запись получилась достаточно большая, поэтому существует сокращенный вид записи который за частую на практике и используется.
На картинке выше представлена структура сокращённой записи, где указывается свойство border и в качестве значений, через пробел, указывается ширина рамки - border-width , стиль рамки - border-style и цвет рамки - #ff0000 .
То есть браузер, увидев такую, сокращенную запись border:2px solid #ff0000 ; , так же создаст рамку со всех четырех сторон заголовка. Вот такая короткая запись эквивалентна той записи, что мы использовали выше (где применялось три свойства).
Если с помощью короткой записи нужно указать рамку только с одной стороны, то к свойству добавляем простаку указывающую сторону с которой создать рамку.
H2{ border-top:2px solid #ff0000; }
Вот так, с помощью короткой записи делается рамка с верху, где так же указаны толщина, стиль, и цвет рамки.
Вот таким образом с помощью свойства border делается рамка вокруг любого элемента. Так же с помощью рамки создается подчеркивание ссылок, когда нужен другой цвет подчеркивающей линии. Ну а на этом с рамками все, переходим к следующему важному уроку, где будем рассматривать
Устанавливает стиль границы вокруг элемента. Допустимо задавать индивидуальные стили для разных сторон элемента.
border-style: {1,4} | inherit
Для управления видом границы предоставляется несколько значений свойства border-style . Вид зависит от используемого браузера и заданной толщины границы. В табл. 1 приведены названия стилей и получаемая рамка при разных значениях толщины — 1, 3, 5 и 7 пикселов.
Кроме перечисленных в таблице значений используются следующие ключевые слова.
None Не отображает границу и ее толщина (border-width ) задается нулевой. hidden Имеет тот же эффект, что и none за исключением применения border-style к ячейкам таблицы, у которой значение свойства border-collapse установлено как collapse . В этом случае вокруг ячейки граница не будет отображаться вообще. inherit Наследует значение родителя.
Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества и указан в табл. 2.
HTML5 CSS2.1 IE Cr Op Sa Fx
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства border-style
document.getElementById("elementID ").style.borderStyle
Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed . При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed .
Internet Explorer до версии 7.0 включительно не поддерживает значения hidden и inherit .
Стиль границы в разных браузерах может несколько различаться при использовании значений groove , ridge , inset или outset .
Это свойство создаёт границу вокруг элемента. Подробнее про это свойство вы можете прочитать по ссылке, а в этой статье я в общих чертах опишу как оно работает. Данной информации будет достаточно для того, чтобы понять, как делать рамки при помощии CSS.
Синтаксис свойства border прост: border: 1px solid black; . Это свойство имеет три значения:
Вот пример использования свойства border для создания рамки шириной в один пиксел и чёрного цвета:
Этому абзацу присвоен класс example-1.
В этом примере мы также использовали свойство CSS padding , или внутренний отступ. Это свойство задаёт размер отступа от текста до обводки (границы элемента).
Давайте рассмотрим ещё один несложный пример, просто чтобы усвоить материал. Создадим рамку шириной три пиксела красного цвета и без внутреннего отступа (свойство CSS padding).
Этому абзацу присвоен класс example-2.
Как мы видим, без внутреннего отступа padding рамка текста выглядит рогато.
Рамки для картинок задаются аналогично при помощи свойства border . Давайте сделаем рамку зелёного цвета толщиной 4 пикселя для картинки.
Example-img { border: 4px solid green; }
Вот как сработает этот код:
Округление углов рамки в CSS делается при помощи свойства border-radius . Это свойство появилось в CSS3, и работает во всех современных браузерах.
Свойство border-radius может иметь от одного до четырёх значений. Если значение одно, то оно устанавливает степень закругления для всех углов. Давайте приведём пример, как будет работать это свойство с одним значением.
Example-3 { border: 1px solid black; border-radius: 15px; padding: 10px; }
Вот как он работает:
Свойство border-radius: 15px.>
Если у блока нет рамки, то есть граница border-width: 0; , то закруглена будет область залитая фоновым цветом (свойство background-color). Вот пример:
Example-4 { border-width: 0; // хотя это значение равно 0 по умолчанию background-color: #DDD; border-radius: 15px; padding: 10px; }
Вот как работает этот пример:
Свойство border-radius: 15px.>
Как я писал ранее, для свойства border-radius можно устанавливать от одного до четырёх значений. В таблице ниже описано как будут работать все комбинации значений.
Для свойсва border-radius значения можно указывать в процентах.
Давайте нарисуем круг на CSS. Для этого возьмём кватратный блок 100 на 100 пикселей и округлим углы CSS правилом border-radius: 50% .
Example-5 { width: 100px; height: 100px; background-color: #F00; border-radius: 50%; }
Вот как работает этот пример:
На этом тема "рамки в CSS" раскрыта полностью. Успехов в изучении CSS!
Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье вы узнали, как оформлять текст в CSS. В данной статье я бы хотел рассказать, что такое рамки в CSS и как их использовать. Правила, отвечающие за рамку состоят из трех элементов: толщина рамки, стиль и цвет. Давайте создадим файл index.html со следующим содержимым:
Рамки в CSS
На этой же странице зададим стили для блока с id = tester (внутри заголовка страницы добавим следующие строки):
Свойство border-width
отвечает за ширину рамки, свойство border-style
отвечает за стиль рамки, border-color
— за цвет рамки. С первым и третьим свойством всё понятно. Все значения, которые может принимать свойство border-style
показаны на рисунке ниже:
Если мы сейчас откроем нашу страницу в браузере, то увидим, что вокруг блока появилась сплошная рамка красного цвета шириной в 1px.
Это я вам показал длинную запись рамки в CSS (данная запись является очень громоздкой и её обычно никто не использует). Все инструкции можно уместить в одной строке. В нашем случае это будет выглядеть вот так:
Border:1px solid red;
Т.е. сначала указываем толщину рамки, затем указываем стиль рамки и цвет.
Вы наверняка обратили внимание, что рамка появилась со всех четырех сторон. Рамки можно задавать для любой из сторон в отдельности (на конкретном примере будет понятно):
Border-top: 2px solid red; border-bottom: 3px dotted green; border-left: 6px dashed yellow; border-right: 5px double #fe54e5;
Вы видите, что все 4 стороны имеют различные рамки. Если для какой-то стороны не задавать рамку, то там, соответственно, рамки не будет.
Рамки применяются абсолютно везде: практически сложно встретить дизайн сайта, на котором не использовались бы рамки. Очень часто пункты меню отделяются вертикальной линией, которая задаётся как раз свойством border-right , либо border-left . Также можно делать интересные эффекты у ссылок. Как раз на эту тему домашнее задание:
Необходимо создать страницу и разместить на ней 2 ссылки. Стиль оформления данных ссылок: сплошная линия, при наведении данная линия должна становиться пунктирной.
Также очень хорошо использовать рамки у элементов при верстке страницы, чтобы лучше понимать, где какой элемент находится. По крайней мере, мне так намного нагляднее и понятнее верстать.
