Загрузка

RUS | ANG | |

StepkinBlog.ru

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap

Главная » Основы CSS » Рамка в CSS. Основы CSS для начинающих. Урок №12

03.03.2017


15:04


2191


пока нет


Рамка в CSS. Основы CSS для начинающих. Урок №12

Рамка в CSS. Основы CSS для начинающих. Урок №12

Всем привет!
В сегодняшнем уроке я расскажу о том, как в CSS создать рамку. Рамку можно создавать для картинок, для блоков, для текста, для ссылок.
А если есть рамка на каком-то элементе, то с помощью CSS ее можно вообще убрать.
В CSS можно задавать размер, цвет, вид рамки.

Размер рамки (толщина)

Свойство «BORDER-WIDTH»
Чтобы создать для картинок, блоков, текста, ссылок рамку, воспользуйтесь свойством «border-width».

Значение:
значение задается в px.

Для визуального понимания посмотрите на схему, где я указал размер рамок в px:

Рамка в CSS. Основы CSS для начинающих. Урок №12

Пример:

H2
{
border-width:5px; /* рамка заголовка H2 */
}

Результат:
Результат пока что будет не виден, так как нужно еще создать стиль (вид) рамки  :smile:

Стиль рамки (вид)

Свойство «BORDER-STYLE»
Чтобы указать стиль (вид) рамки, укажите свойство «border-style».
Существует восемь разновидностей рамок. По крайне мере я знаю только восемь.

Разновидности рамок (значение):

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

На схеме рамки выглядят так:

Рамка в CSS. Основы CSS для начинающих. Урок №12

Пример:

H2
{
border-width:2px; /* рамка заголовка H2 */
border-style:dotted; /* стиль рамки */
}

Цвет рамки

Свойство «BORDER-COLOR»
Если вам нужно поменять цвет рамки, воспользуйтесь правилом «border-color».

Значение:
значение задается по названию цвета, по шестнадцатеричному значению, с помощью RGB (если подзабыли, прочитаете вот эту статью):

border-color:red; /* цвет рамки */

Пример:

H2
{
border-width:2px; /* рамка заголовка H2 */
border-style:dotted; /* стиль рамки */
border-color:red; /* цвет рамки */
}

Результат:

Рамка в CSS. Основы CSS для начинающих. Урок №12

Сокращенная форма записи

Свойство «BORDER»
Если вам нужно перечислить, употребить все вышеупомянутые свойства, то можно не писать каждое по отдельности, а заменить правилом сокращенной формы. Это правило «border».

Синтаксис:

border: толщина_рамки вид_рамки цвет_рамки;

Простой способ:

H2
{
border-width:2px; /* рамка заголовка H2 */
border-style:dotted; /* стиль рамки */
border-color:red; /* цвет рамки */
}

Сокращенная форма записи:

H2
{
border:2px dotted red; /* рамка заголовка H2, стиль рамки, цвет рамки */
}

Результат:

Рамка в CSS. Основы CSS для начинающих. Урок №12

Как убрать рамку

Свойство «BORDER»
Если вам нужно убрать рамку, достаточно в правиле «border» указать свойство «0».

H2
{
border:0px; /* рамки не будет */
}

Сторона рамки

Свойство «BORDER-TOP» | «BORDER-BOTTOM»| «BORDER-LEFT»| «BORDER-RIGHT»
Если вам нужно указать только одну сторону рамки, укажите специально предназначенные правила «border-top» | «border-bottom» | «border-left» | «border-right»:

Правила:

  • border-top – рамка сверху
  • border-bottom – рамка внизу
  • border-left – рамка слева
  • border-right – рамка справа

Надеюсь, вы заметили, что просто к правилу «border» добавляется сторона «top», «bottom», «left», «right»:

Синтаксис:

border-сторона_рамки: толщина_рамки вид_рамки цвет_рамки;

Пример:

H2
{
border-top:2px dotted red; /* рамка сверху */
border-bottom:2px dotted #999911; /* рамка снизу */
}

Результат:

Рамка в CSS. Основы CSS для начинающих. Урок №12

Вроде все сказал, даже больше чем планировал :coffe:.
Учите CSS – это весело и занятно!
Не забудьте подписаться на обновление блога, если вы еще не подписаны.



Случайные записи:

  1. Как сделать фон в HTML-странице. Основы HTML для начинающих. Урок №12
  2. Цикл Foreach. Основы PHP с нуля. Урок №14
  3. Основы CMS WordPress. Урок №1
  4. Модальное окно (всплывающее окно). Основы bootstrap 3 для начинающих. Урок №17
  5. Полезные функции php List, Isset, Unset, Empty, Date, Count и Exit. Основы PHP с нуля. Урок №18

Последние записи рубрики:

  1. Бесплатный курс по основам CSS
  2. Создание сайта с нуля на HTML + CSS. Практика по пройденному материалу
  3. Тесты CSS онлайн. Основы CSS для начинающих
  4. Слои в CSS. Основы CSS для начинающих. Урок №16
  5. Плавающие блоки в CSS. Основы CSS для начинающих. Урок №15

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Подписаться на обновления:

Подпишись на обновления моего блога через e-m@il:

@

Реклама на блоге:

Мои цели на
2017 год:

Довести количество статей до 150

Доделать этот блог

Закончить тему «Основы CSS»

Закончить тему «Основы PHP»

Начать тему «Основы JavaScript»

Добиться посещаемости 500 чел/сутки

Статистика:

Записей: 104
Страниц: 3
Рубрик: 9
Меток: 11
Комментариев: 245