Главная » Frontend » 2.10. CSS-рамка
2018/07/04Метки:

2.10. CSS-рамка

CSS-рамка является неотъемлемым и очень важным визуальным компонентом как блоковых, так и инлайновых html-тегов. Рамка бывает 2-ух видов: border и outline. Каждая из них имеет свое стилистическое определение.

Согласно стилевому оформлению бордер характеризуется тремя величинами: толщиной, стилем и цветностью.

Навигация

Вернуться к навигации

1. Стиль рамки border-style

Данное правило отвечает за стиль визуального отображения бордера некоторого html-элемента. Следует отметить, что, если не задать рассматриваемое правило, то граница не будет видна, поскольку в дефолтном состоянии оно равно none (переводится, как «нет»). Может быть задано для разных частей границы. Является не наследуемым правилом.

border-style
Значения:
none Указание данного параметра приведет к выключению стилей бордера текущего элемента верстки. Является дефолтным значением.
hidden Похоже на предыдущее. Но по смыслу означает визуальное скрытие свойства.
dotted

отображение границы, по периметру которой расположено множество точек.
dashed

Задав такой параметр, бордер примет очертание штриховой линии.
solid

На вид — это сплошная однотонная черта.
double

На вид — это две параллельные тонкие линии (двойная).
groove

В виде вогнутого жёлоба.
ridge

В виде выступающей лицом к пользователю линии.
inset

Слева и сверху — темный оттенок, а справа и снизу — светлый.
outset

Также, как предыдущее, но наоборот.
initial Будет установлено в дефолтное значение.
inherit Задав так, текущий объект унаследует данное свойство у своего родителя.

Формат записи

p
{
	border-style: double;
}

Для установки нужного стилистического определения у частей границ, расположенных сверху, справа, снизу или слева, нужно прописать css-правила border-top-style, border-right-style, border-bottom-style, border-left-style (соответственно):

p
{
	border-left-style: solid;
}

Если для каждой из четырех частей бордера нужно присвоить каждой свой стиль, то следует прописать css-код так:

div
{
	border-style: solid double dotted dashed;
}

Вернуться к навигации

2. Цвет рамки border-color

Это цсс-правило дает возможность присвоить границе некоторого html-тэга нужный цвет c каждой из 4-х сторон: сверху, справа, снизу и слева. Есть возможность присвоить цвет какой-то конкретной части бордера — для этого применяются специальные подправила. Если данный параметр не установлен, то цветность границы будет равна цветности текста самого тэга. Является не наследуемым правилом.

border-color
Значения:
transparent Переводится, как «прозрачный» или «невидимый». То есть по сути граница есть, но она бесцветная. Является дефолтным значением.
цвет

Цвет бордера задается одним из кодов: HEX, RGB или RGBA. Например, у этого бордера такой: {border-color: #84cd1b;}
initial Установив такой параметр, правило будет установлено в дефолтное значение.
inherit При таком параметре рассматриваемое свойство у текущего html-блока наследуется от родителя.

Формат записи

div
{
	border-color: #84cd1b;
}

При необходимости управлять какой-то конкретной частью рамки хтмл-тэга (верхней, правой, нижней или левой), то для этого есть возможность указать правила (соответственно): border-top-color, border-right-color, border-bottom-color, border-left-color:

div
{
	border-top-color: #84cd1b;
}

Если возникла необходимость задать свой цвет для каждой из частей бордера, то нужно записать css-правило следующим образом (соблюдая очередность границ: сверху, справа, снизу и слева):

div
{
	border-color: #84cd1b #1E824C #ff8073 #f1c40f;
}

Вернуться к навигации

3. Ширина рамки border-width

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

border-width
Значения:
thin / medium / thick Данные акронимы являются закрепленными мерами измерения ширины рамки в браузерах: thin — тонкая, medium — средняя, thick — толстая. Дефолтным значением является — medium
ширина

Помимо встроенных акронимов существует возможность задания толщины бордера с помощью единиц измерения: пикселей (px), процентов, относительных единиц (em) и так далее. Например, у этого тега «p» толщина бордера такая: {border-width: 3px;}
initial Будет установлено в дефолтное значение.
inherit При задании такого параметра будет происходить наследование правила от родителя.

Формат записи

p
{
	border-width: 6px;
}

Для установки нужной толщины у частей границы, расположенных сверху, справа, снизу или слева, нужно прописать css-правила: border-top-width, border-right-width, border-bottom-width, border-left-width:

p
{
	border-top-width: 6px;
}

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

p
{
	border-width: 6px 2px 1px 3px;
}

Вернуться к навигации

4. Рамка одной строкой

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

div
{
	border: 3px solid #84cd1b;
}

Если один из параметров границы присвоен не будет, то он принимает дефолтное значение (смотрите таблицы значений выше).

По аналогии с записью стиля для конкретных частей границы их также можно описать одной строкой:

a
{
	border-bottom: 3px solid #84cd1b;
}

Вернуться к навигации

5. Внешний контур outline

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

Чаще всего применяется для обозначения активности или выделения фокуса на hml-блоке: ссылке (<a>), кнопке формы (<button>, <input>). Следует отметить, что на аутлайн не оказывает влияния свойство скругления углов border-radius, то есть она в любом случае будет иметь девяностоградусные углы.

Как и бордер, характеризуется тремя величинами: стилем, цветом и толщиной.

Вернуться к навигации

5.1. Стиль внешнего контура outline-style

Аналогично пункту 1 (выше) задает оформление внешнего аутлайна некоторого блокового или инлайнового элемента. Также, как и бордер, является не наследуемым.

outline-style
Значения:
none Установка данного параметра приведет к выключению стилей границ (аутлайна) текущего html-блока. Является дефолтным значением.
hidden Похоже на предыдущее. Но по смыслу означает визуальное скрытие свойства.
dotted

отображение внешней границы в виде точек.
dashed

Задав так, аутлайн будет представлять собой штриховую линию.
solid

В виде сплошной однотонной линии.
double

Аутлайн представляет из себя две параллельны тонкие линии.
groove

В виде вогнутого жёлоба.
ridge

В виде выступающей лицом к пользователю линии.
inset

Слева и сверху — темный оттенок, а справа и снизу — светлый.
outset

Также, как предыдущее, но наоборот.
initial Будет установлено в дефолтное значение.
inherit При таком значении рассматриваемое свойство будет унаследовано от родителя.

Формат записи

p
{
	outline-style: double;
}

Вернуться к навигации

5.2. Цвет внешнего контура outline-color

Данное правило упрвляет цветностью внешней рамки. Работает вкупе с предыдущим правилом.  Является не наследуемым.

outline-color
Значения:
invert Переводится, как «инвертировать». Выделяет контур . Является дефолтным значением.
цвет

Цвет аутлайн задается одним из кодов: HEX, RGB или RGBA. Например, у этой рамки следующий: {outline-color: #84cd1b;}
initial Установив такой параметр, правило будет установлено в дефолтное значение.
inherit При таком параметре рассматриваемое свойство у текущего html-блока наследуется от родителя.

Формат записи

p
{
	outline-color: #84cd1b;
}

Вернуться к навигации

5.3. Толщина внешнего контура outline-width

Позволяет задать толщину контура в разных единицах измерения. Также является не наследуемым правилом.

outline-width
Значения:
thin / medium / thick Данные акронимы — это закрепленные меры измерения толщины рамки в браузерах: thin — утонченное начертание; medium — более крупное по сравнению с предыдущим, но меньше следующего; thick — толстая. Дефолтным значением является — medium
ширина

Помимо встроенных акронимов существует возможность указания толщины внешнего контура с помощью единиц измерения: пикселей (px), процентов, относительных единиц (em) и так далее. Например, у этого блока толщина контура следующая: {outline-width: 3px;}
initial Будет установлено в дефолтное значение.
inherit При таком значении рассматриваемое свойство будет унаследовано от родителя.

Формат записи

p
{
	outline-width: 4px;
}

Аналогично бордеру есть возможность задания данного правила одной строчкой. Формат написания будет точно таким же, за исключением названия самого свойства.

По результатом изучения этого материала станет более полное представление о возможностях линий границы и какое влияние они оказывают на позиционирование блока элемента относительно других на странице документа. Данная глава является очень важным «кусочком пазла» в общей «мозаике» фронтенд-разработки (верстки) сайтов.

Метки: Метки:
Понравилась статья? — Ставь лайк!
2 Комментарии на “2.10. CSS-рамка”
  1. Екатерина:
    05.08.2018 в 5:24 пп

    Добрый день. Я дорабатываю сайт на WordPress. Среди списка задач, есть вот такая:

    5) Привести внешний вид 4 блоков на сайте к такому виду: https://clip2net.com/s/3VRTyzW

    Подскажите как можно с помощью стилей оформить вот такие блоки? Что можете посоветовать? Не могли бы Вы сверстать свой вариант, чтобы, опираясь на него я смогла разобраться в реализации?

    Ответить
    • admin:
      08.08.2018 в 10:58 дп

      Добрый день. Привожу один из вариантов, как можно сверстать такой блок.

      <style type="text/css">
    html, body {
        font-family: sans-serif;
    }
    /* Раскладка */
    .services {
        margin: 50px 0;
        list-style-type: none;
        padding: 0;
        display: flex;
    }
    .services__item {
        width: 20%;
        margin: 0 2.5%;
    }
    /* Оформление самого блока */
    .block {
        display: flex;
        background: #eee;
        /* Этот внутренний отступ даёт внешнюю рамку цвета фона блока */
        padding: 4px;
        /* Потребуется, что относительно блока спозиционировать псевдоэлемент after */
        position: relative;
    }
    /* Верхняя цветная полоска. Проще всего и правильнее сделать пседвоэлементом
       без каких-либо рамок, просто задать фон. */
    .block::after {
        content: '';
        display: block;
        position: absolute;
        height: 4px;
        /* Смещаем чуть больше, чем высота полоски, если требуется разделитель */
        top: -6px;
        /* Задаём произвольную ширину */
        width: 90%;
        /* Центрируем */
        left: 50%;
        transform: translateX(-50%);
        /* Цвет верхней полоски по умолчанию */
        background: #eee;
    }
    .block--red::after {
        background: red;
    }
    .block--yellow::after {
        background: yellow;
    }
    .block__inner {
        width: 100%;
        border: 4px solid #fff;
        padding: 20px;
    }
    .block__header {
        border: 4px solid #fff;
        padding: 10px;
    }
    .block__title {
        display: inline;
        /* Самый простой вариант сделать бордер dotted, но выглядит это немного иначе чем в макете —
           получаются кружки, а не квадратики. Поэтому возможно стоит использовать background-image*/
        border-bottom: 4px dotted #000;
    }
    .block__content {
        padding: 10px 0;
        margin: 0;
    }
    .block__more {
        text-align: right;
    }
    .block__more a {
        display: inline-block;
        padding: 0 5px;
        color: #000;
        text-decoration: none;
        border-bottom: 2px dotted #000;
    }
    .block__more a:hover {
        color: #000;
        text-decoration: none;
    }
</style>

      <ul class="services">
    <li class="services__item block block--red">
        <div class="block__inner">
            <div class="block__header">
                <h3 class="block__title">Убрать жир</h3>
            </div>
            <p class="block__content">Текст</p>
            <div class="block__more">
                <a href="#" rel="nofollow">весь текст</a>
            </div>
        </div>
    </li>
    <li class="services__item block block--yellow">
        <div class="block__inner">
            <h3 class="block__title"></h3>
            <p class="block__content">Текст</p>
            <div class="block__more">
                <a href="#" rel="nofollow">весь текст</a>
            </div>
        </div>
    </li>
</ul>
      Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Читайте также
×
Новости и обзор новинок рынка строительной техники.
Подпишитесь на обновления нашей группы!
Спасибо, я уже подписан