CSS-рамка элемента представляет собой одну или несколько линий, окружающих содержимое элемента и его отступы padding . Рамка задаётся с помощью краткого свойства border . Стиль рамки задается с помощью трех свойств: стиль , цвет и ширина .
Оформление рамок и границ HTML-элементов с помощью CSS-свойств
1. Стиль рамки border-style
По умолчанию рамки всегда отрисовываются поверх фона элемента, фон распространяется до внешнего края элемента. Стиль рамки определяет ее отображение, без этого свойства рамки не будут видны вообще. Для элемента можно задавать рамку для всех сторон одновременно с помощью свойства border-style или для каждой стороны отдельно с помощью уточняющих свойств border-top-style и т.д. Не наследуется.
border-style (border-top-style, border-right-style, border-bottom-style, border-left-style) |
|
---|---|
Значения: | |
none | Значение по умолчанию, означает отсутствие рамки. Также убирает рамку элемента из группы элементов с установленным значением данного свойства. |
hidden | Эквивалентно none . |
dotted |
dotted |
dashed |
dashed |
solid |
solid |
double |
double |
groove |
groove |
ridge |
ridge |
inset |
inset |
outset |
outset |
{1,4} |
Одновременное перечисление четырех разных стилей для рамок элемента, только для свойства border-style:
|
initial | |
inherit |
Синтаксис
P {border-style: solid;} p {border-top-style: solid;}
2. Цвет рамки border-color
Свойство задаёт цвет рамок всех сторон одновременно. С помощью уточняющих свойств можно установить свой цвет для рамки каждой стороны элемента. Если для рамки цвет не задан, то он будет таким же, как и цвет текста элемента. Если в элементе нет текста, то цвет рамки будет таким же, как и цвет текста родительского элемента. Не наследуется.
border-color (border-top-color, border-right-color, border-bottom-color, border-left-color) |
|
---|---|
Значения: | |
transparent | Устанавливает прозрачный цвет для рамки. При этом ширина рамки остается. Можно использовать для смены цвета рамки при наведении курсора мыши на элемент, чтобы избежать смещение элемента. |
цвет | Цвет рамок задается при помощи значений свойства .
{border-color: #cacd58;} |
{1,4} |
Одновременное перечисление четырех разных цветов для рамок элемента, только для свойства border-color:
|
initial | Устанавливает значение свойства в значение по умолчанию. |
inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
P {border-color: #cacd58;}
3. Ширина рамки border-width
Ширина рамки задается с помощью единиц измерения длины или ключевых слов. Если для свойства border-style задано значение none , и для рамки элемента установлена какая-то ширина, то в данном случае ширина рамки приравнивается к нулю. Не наследуется.
Синтаксис
P {border-width: 2px;}
4. Задание рамки одним свойством
Свойство border позволяет объединить в себе следующие свойства: border-width , border-style , border-color , например:
Div { width: 100px; height: 100px; border: 2px solid grey; }
При этом заданные свойства будут применяться ко всем границам элемента одновременно. Если какое-то из значений не указано, его место займет значение по умолчанию.
5. Задание рамки для одной границы элемента
В случае, когда необходимо задать разный стиль границ элемента, можно воспользоваться краткой записью для соответствующей границы.
Перечисленные ниже свойства объединяют в одно объявление следующие свойства: border-width , border-style и border-color . Перечень свойств указывается в заданном порядке, при этом одно или два значения могут быть пропущены, в этом случае их значения примут значения по умолчанию.
Стиль верхней границы задается с помощью свойства border-top , нижней — border-bottom , левой — border-left , правой — border-right .
Синтаксис
P {border-top: 2px solid grey;}
6. Внешний контур outline
Свойство задаёт внешнюю границу вокруг элементов (т.е. за пределами обычной границы). Основная цель данного свойства — выделить какой-либо элемент. В отличие от свойства border , применение данного свойства не влияет на размер или местоположение элемента, т.к. контур отображается поверх блока элемента, что в свою очередь, может привести к перекрыванию внешних отступов элемента и соседних областей.
Также, внешний контур, в отличие от рамки элемента, окружает элемент со всех сторон, обрамляя его целиком.
Внешний контур всегда имеет прямоугольную форму, он не повторяет границы блока, для которого задан border-radius .
Свойство outline позволяет объединить в себе следующие свойства: outline-color , outline-style , outline-width . Если какое-то из значений не указано, его место займет значение по умолчанию.
Div { width: 100px; height: 100px; outline: #cacd58 solid 2px; }
6.1. Стиль внешнего контура outline-style
Вид линии внешнего контура задаётся аналогично со стилем рамки элемента. Не наследуется.
Синтаксис
P {outline-style: ridge;}
6.2. Цвет внешнего контура outline-color
Цвет внешнего контура можно прописывать только при установленном значении outline-style . Не наследуется.
Синтаксис
P { outline-style: ridge; outline-color: silver; }
6.3. Толщина внешнего контура outline-width
Толщина линии внешнего контура задается аналогично с толщиной рамки элемента. Не наследуется.
Синтаксис
P { outline-style: dotted; outline-width: 5px; }
Свойство CSS border слажит для создания границы объекта, а именно за толщину рамки, за ее цвет и стиль. Это свойство широко используется в HTML. Можно создавать различные эффекты для лучшего восприятия контента на странице. Например, оформить сайдбар, шапку сайта, меню и т.п.
1. Синтаксис CSS border
border : border-width border-style border-color | inherit ;
- border-width - толщина рамки. Можно задавать в пикселях (px) или воспользоваться стандартными значениями thin, medium, thick (они отличаются только шириной в пикселях)
- border-style
- стиль выводимой рамки. Может принимать следующие значения
- none или hidden - отменяет границу
- dotted - рамка из точек
- dashed - рамка из тире
- solid - простая линия (применяется чаще всего)
- double - двойная рамка
- groove - рифленая 3D граница
- ridge , inset , outset - различные 3D эффекты рамки
- inherit - применяется значение родительского элемента
- border-color - цвет рамки. Можно задавать с помощью конкретного названия цвета или в формате RGB (см. названия html цветов для сайта)
Значения в свойстве CSS border можно задавать в любой последовательности. Чаще всего используют последовательность "толщина стиль цвет".
2. Примеры с различными границами рамок CSS border
2.1. Пример. Разные стили оформления границы рамки border-style
border-style: dashedborder-style: dashedborder-style: solidborder-style: doubleborder-style: grooveborder-style: ridgeborder-style: insetborder-style: outsetЧетыре разных рамки
border-style: dotted
border-style: dashed
border-style: solid
border-style: double
border-style: groove
border-style: ridge
border-style: inset
border-style: outset
Четыре разных рамки
2.2. Пример. Изменения цвета рамки при наведении курсора мыши
Этот пример очень простой, но интересный. Он показывает, как можно использовать псевдокласс :hover и рамку CSS border для создания простых эффектов (например, для меню).
При наведении курсора мыши на блок цвет рамки изменится
Вот как это выглядит на странице:
2.3. Пример. Как сделать прозрачную рамку border
Рамку можно сделать прозрачной. Этот эффект редко, но иногда может быть очень полезен для веб-дизайнеров. Для задания прозрачности надо воспользоваться заданием цвета в виде RGBA (R, G, B, P) , где последним параметром задается прозрачность (вещественное число от 0.0 до 1.0)
Вот как это выглядит на странице:
3. Толщина границы: свойство border-width
Задает толщину линии. Ранее мы задавали ее в едином описании border.
Синтаксис CSS border-width
border-width : thin | medium | thick | значение ;
- thin - тонкая толщина линии
- medium - средняя толщина линии
- thick - толстая толщина линии
Ниже приведены несколько примеров. Самым необычным будет - это разная толщина границы у каждой стороны.
border-width: thinborder-width: mediumborder-width: thickРазная толщина у границ
Вот как это выглядит на странице:
border-width: thin
border-width: medium
border-width: thick
Разная толщина у границ
4. Как сделать рамку border только с одного края (границы)
У свойства CSS border есть производные свойства для задания односторонних границ у элемента:
- border-top - для задания рамки сверху (верхняя граница)
- border-bottom - для задания рамки снизу (нижняя граница)
- border-right - для задания рамки справа (правая граница)
- border-left - для задания рамки слева (левая граница)
Эти границы можно совмещать, т.е. прописать для каждого направления свою рамку. Синтаксис точно такой же как и у border.
Также есть свойства
- border-top-color - задание цвета верхний границы
- border-top-style - задание стиля верхней границы
- border-top-width - задание толщины верхней границы
- и т.д. для каждого направления
На мой взгляд проще писать все в строчку, чем плодить лишний текст в стилях. Например, следующие свойства будут одинаковыми
/* Описание двух одинаковых стилей: */
4.1. Пример. Красивая рамка для выделения цитат
Пример рамки для цитаты
Вот как это выглядит на странице:
Пример рамки для цитаты
Примечание
Можно задать отдельную границу для каждой из сторон.
5. Как сделать несколько границ border у элемента html
Иногда требуется сделать несколько границ. Приведем пример
5.1. Первый вариант с несколькими границами
Вот как это выглядит на странице:
Есть второй способ через наложение теней.
5.2. Наложение теней для создания нескольких границ
Вот как это выглядит на странице:
6. Скругление углов у границ (border-radius)
Для создания красивых рамок используют свойство CSS border-radius (доступно только в CSS3). С помощью него можно делать скругления углов, что создает совсем другой вид. Например
7. Вдавленная линия CSS
Вдавленные линии эффектно могут смотреться на темном фоне, что подходит далеко не каждому сайту.
Вот как это выглядит на странице:
Для обращения к border из JavaScript нужно писать следующую конструкцию:
document.getElementById("elementID").style.border ="VALUE "21.01.06 5.9K
Любому веб-мастеру, ввиду своей профессиональной деятельности, приходится создавать те или иные сложные элементы на сайте
(Например: оптекание текстом графики, создание колонок с текстом, фиксация элементов сайта).
Однако, стандарт html имеет небольшое количество стандартных элементов оформления страницы, и не все элементы одинаково отображаются в разных браузерах. Каждая компания пытается разработать свой собственный html, порой уходя далеко от основной концепции html, разработанной консорциумом WWW.
Поэтому веб-мастеру приходится эксперементировать с элементами, которые являются общими для всех браузеров.
Наиболее удачно подходят таблицы т.к в ячейках таблицы удобно размещать информацию.
Кроме того, таблицы в html имеют атрибут "border="0" — этот атрибут со значением "0" скрывает границы таблицы т.е остаётся видно содержимое ячейки а сама рамка не видна.
Давайте теперь рассмотрим пример разработки табличного дизайна.
Цветная граница рамки таблицы.
Сразу отмечу, что в html, по умолчанию, встроен атрибут, который отвечает за цвет рамки таблицы. (bordercolor). Однако, нам он не подойдёт, потому что данный атрибут поддерживается только браузером Internet Explorer. В других браузерах этот элемент не работает. Но нам необходимо, чтобы страница одинаково отображалась в любом браузере. К нам на помощь приходят таблицы. Давайте сначала создадим обычную таблицу.
Атрибут "border" должен быть равен "0". cellspacing приравняем к "2" (чем больше число, тем шире получится рамка таблицы).
Атрибут "cellspacing" служит для того, чтобы указать расстояние между двумя ячейками. В данном случае, он будет указывать расстояние между двумя таблицами.
Зальём таблицу черным цветом, используя атрибут "bgcolor" Вообще вы можете выбрать любой другой цвет, в зависимости от того, какого цвета будет ваша рамка.
С помощью этого тега указывается, откуда следует располагать информацию. В данном примере нам понадобится расположить информацию, начиная с верхнего края таблицы.
Вставляем в ячейку нашей таблицы другую таблицу.
Текст |
Указываем цвет фона таблицы. В данном случае, нам понадобится белый фон.
Вот и всё. Наша таблица готова. Теперь мы имеем таблицу, рамка которой будет отображаться во всех браузерах одинаково.
Напоследок, приведу весь код, который мы создали.
|
Здравствуйте, сегодня мы поговорим о таком важном атрибуте в CSS как создание рамки. Рамка очень часто используется для того чтобы обрамить текст, отделить один элемент дизайна от другого и для каждого вебмастера полезно знать как задать рамку в CSS.
Задаем стиль оформления рамки в CSS.
Первым что нужно задать вам при создании рамки на своем сайте это стиль рамки для CSS. Благодаря этому вы дадите понять браузеру какой линией выводить рамку. Давайте для примера для одного заголовка просто зададим сплошную линию, как на обычных рамках. Для этого нам конечно же нужен файл стилей который вы можете создать самостоятельно и как это сделать я рассказывал уже на других статьях своего блога.
Я не буду создавать новый файл а буду использовать старый, кроме того здесь сохранились заголовки разного уровня для которых мы будем создавать рамки. Давайте зададим разные виды рамки для заголовка первого уровня и который задается тегом h1. Для этого в файл стилей прописываем такой текст: h1 {border-style:solid;} и коротко рассмотрим что мы написали. h1 это мы определили для какого элемента мы будем задавать рамку, border-style команда которая означает что для данного элемента нужно задать рамку определенного стиля ну а solid обозначает стиль отображения рамки, в данном случае это сплошная черта.
Мы можем менять стиль отображения рамки и для этого нам просто нужно задавать новые параметры и сейчас я покажу какие имеются команды и как они отображаются на сайте.
Параметры рамки:
solid или сплошная линия.
Dotted-пунктирная линия.
dashed-штрихованная линия.
double-двойная сплошная линия.
Это основные стили которые вы можете задать стиль рамки в CSS , более подробно о всех командах вы можете узнать с спецификации по CSS.
До этого мы задавали стиль полностью для всей рамки но мы можем задать также параметр конкретно для любой из сторон и таблицы стилей дает нам такую возможность. В этом нам помогут четыре команды: border-left-style (левая линия) border-top-style (верхняя линия) border-right-style (правая линия) и border-bottom-style (нижняя линия).
Давайте теперь зададим для нашего заголовка стиль для каждой стороны свой. Напишем команду для всех четырех сторон:
h1 {
border-left-style:groove;
border-top-style:solid;
border-right-style:double;
border-bottom-style:dotted;}
И на практике мы увидим вот такой результат.
Для задания рамки нам нужно использовать атрибут стиля border-width для которого мы можем задать несколько параметров: первый это задать размер рамки в пикселах или задать толщину командами thin (тонкая линия), medium (средняя линия) или thick (толстая линия). Толщину линии мы также можем задать для любой стороны рамки независимо от того какой стиль задан для остальных.
Давайте для начала изучим как задать толщину линии рамки непосредственно для всех сторон. Для этого нам просто нужно взять и задать команду border-width и определить для него размер линии. Для того чтобы задать толщину текст будет выглядеть так:
h1 {
border-style:solid;
border-width:thin;
}
Команду thin можно заменить на medium или thick или же задать толщину в пикселях обязательно указав единицу измерения, например размер в четыре пикселя-4px.
Теперь мы будем задавать параметры толщины для каждой стороны нашей рамки. Также как и с заданием стиля нам помогут параметры border-left-width (толщина левой линии), border-top-width (толщина верхней линии), border-right-width (толщина правой линии) и border-bottom-width (толщина нижней линии). Для этого мы в файл стилей добавим четыре строчки следующего содержания:
h1 {
border-style:solid;
border-left-width:medium;
border-top-width:thin;
border-right-width:thick;
border-bottom-width:7px;
}
И теперь все четыре стороны нашей рамки будут иметь свою толщину.
Как задать цвет рамки в CSS.
Давайте теперь зададим цвет рамки в CSS и в этом нам поможет команды border-left-color, border-top-color, border-right-color и border-bottom-color для задания цвета для левой,верхней,правой и нижней линии рамки соответственно. Для этого мы прописываем команды и к каждой команде добавляем по параметру цвета.
h1 {
border-style:solid;
border-left-color:#00CCCC;
border-top-color:#6633CC;
border-right-color:#CCCCCC;
border-bottom-color:#66CC99;
}
И теперь посмотрим результат применения данного параметра.
Задание глобальной переменной для сокращения записи.
Теперь давайте разберем как нам можно избавиться от таких громоздких конструкций и записей. Для этого нам нужно будет задать глобальный атрибут border в который мы зададим такие параметры как толщина рамки,стиль рамки и цвет и все это поместиться не в три строчки как минимум а всего лишь в одну строчку.
Для этого мы пишем строчку:
h1 {
border:5px solid #3399FF;
}
в строчке сначала мы указываем толщину линии рамки потом пробел и указываем стиль оформления рамки и снова через пробел указываем цвет рамки. Вот и все мы сократили запись до одной строчки.
Надеюсь что благодаря данной статье вы сможете задавать рамки для всех элементов в CSS. Я постарался остановить ваше внимание на самых необходимых командах и подробно вам рассказать о том как задать рамку в CSS, задать стиль рамки в CSS и задать цвет рамки в CSS.
Стал популярен, web-дизайнеры в основном использовали метод табличной вёрстки и получали очень хороший результат.
Теги, используемые для построения таблицы в html
table
- обязательный тег, открывающий и закрывающий таблицу
caption
- необязательный тег, обозначающий заголовок таблицы
th
- необязательный тег, в открывающий и закрывающий теги которого вписывается название столбца. Как правило, выделяется жирным
tr
- обязательный тег, с которого открывается и закрывается строка
td
- обязательный тег, обозначающий открытие и закрытие ячейки в строке
Пример кода простой таблицы
Стобец 1 | Стобец 2 |
---|---|
Текст в первой ячейке | Текст во второй ячейке |
В браузере отобразится
Назначение таблиц в html
Урок по таблицам очень важен! Благодаря таблицам Вы можете расположить не только текст, но и изображения, ссылки и много другое. В таблице можно задавать фон (или его цвет), отступ , ширину , границу и другие параметры , что придаст ей красивый внешний вид. Таблица - Ваш первый шаг к понимаю web-дизайна ! Ранее многие сайты были целиком свёрстаны как таблицы, то есть всё, что видел пользователь (боковое меню, верхнее меню, содержание) - было содержанием ячеек большой таблицы.На этой ноте перейдём непосредственно к атрибутам, которые делают таблицу красивой...
Свойства и параметры html таблиц: отступ, ширина, цвет фона, граница (рамка)
У тега table есть следующие атрибуты:width
- ширина таблицы. может быть в пикселях или % от ширины экрана.
bgcolor
- цвет фона ячеек таблицы
background
- заливает фон таблицы рисунком
border
- рамка и границы в таблице. Толщина указывается в пикселях
cellpadding
- отступ в пикселях между содержимым ячейки и её внутренней границей
Как и ранее, значение атрибута прописываем в кавычках.