Октябрь 22, 2019 Запись была обновлена
Урок 7. Рамки
Здравствуй, уважаемый читатель.
Это седьмой урок изучения CSS. В этом уроке мы рассмотрим как задать рамку на CSS, какие бывают рамки и что можно сделать с рамкой.
Перед изучением CSS пройдите предыдущие уроки:
Урок 1. Что такое CSS?
Урок 2. Базовые селекторы
Урок 3. Групповые селекторы и селекторы потомков
Урок 4. Псевдоселекторы ссылок
Урок 5. Шрифты
Урок 6. Оформление текста
Теория и практика
Рамки являются очень важным атрибутом для того чтобы раскрасить html страницу. Чтобы появилась рамка вокруг какого-то элемента, в CSS необходимо задать свойство которое начинается со слова border. Приведу пример использования данного свойства.
Пример html кода:
1 2 3 4 5 6 7 8 9 10 | <html> <head> <title>Главная</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <p>Praesent ipsum tellus, pellentesque vel enim vel, pharetra pulvinar magna. Suspendisse potenti. Morbi vestibulum rhoncus massa et interdum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut imperdiet luctus sodales. Nullam mollis, leo ut eleifend commodo, diam felis porta urna, eu fringilla justo nibh ac ante. Sed ac ligula tellus. Phasellus vehicula aliquam leo nec malesuada.</p> </body> </html> |
Пример CSS кода:
1 2 3 4 5 | p{ border-width:2; /* отвечает за толщину границы */ border-style:solid; /* отвечает за вид границы */ border-color:#00ff00; /* отвечает за цвет границы */ } |
Чтобы создать таблицу необходимо написать три свойства. Позже я расскажу как можно сократить запись.
border-width — отвечает за толщину границы. Подобно тому как мы указывали толщину таблице(border="2") в html;
border-style — отвечает за вид границы. Она может быть сплошная(solid), двойная(double), точечная(dotted), штриховая(dashed) и т.д.;
border-color — отвечает за цвет границы. Он обозначается как обычный текст в html, через решетку;
Пример в браузере нашей границы:
Бывает такая необходимость сделать границу только слева, или только справа, или сверху и снизу. На этот случай в CSS также есть решение. Для этого при написании свойства необходимо указывать где должна присутствовать данная граница. Посмотрим пример на нашей html странице. Выделим абзац сверху и снизу:
1 2 3 4 5 6 7 8 9 | p{ border-top-width:2; /* отвечает за верхнюю толщину границы */ border-top-style:solid; /* отвечает за верхний вид границы */ border-top-color:#00ff00; /* отвечает за верхний цвет границы */ border-bottom-width:2; /* отвечает за нижнюю толщину границы */ border-bottom-style:solid; /* отвечает за нижний вид границы */ border-bottom-color:#00ff00; /* отвечает за нижний цвет границы */ } |
Как это выглядит в браузере:
Также можно выделить три стороны:
1 2 3 4 5 6 7 8 9 10 11 12 13 | p{ border-top-width:2; /* отвечает за толщину границы вверху */ border-top-style:solid; /* отвечает за вид границы вверху */ border-top-color:#00ff00; /* отвечает за цвет границы вверху */ border-bottom-width:2; /* отвечает за толщину границы внизу */ border-bottom-style:solid; /* отвечает за вид границы внизу */ border-bottom-color:#00ff00; /* отвечает за цвет границы внизу */ border-left-width:2; /* отвечает за толщину границы слева */ border-left-style:solid; /* отвечает за вид границы слева */ border-left-color:#00ff00; /* отвечает за цвет границы слева */ } |
Как это выглядит в браузере:
Но данный код занимает очень много места и в файл CSS будет иметь размер больше Кб. Но его можно сократить:
Также можно сократить запись, где мы указываем какую границу выделяем:
Обычно все кто верстают сайты используют именно сокращенную запись, она экономит время и место. Я решил проверить какой объем файла будет при разных формах записи:
Хоть объем и не очень отличается, ко когда CSS файл будет иметь большой размер, тогда эти мелочи будут играть важную роль.
Итак, сегодня мы рассмотрели создание, оформление рамок и важность написания сокращенного кода. Чтобы лучше запомнить материал пробуйте всё написать руками.
Больше практикуйтесь!
Еще материалы по этой теме
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)
Добрый день, Юрий!
Подскажите как сделать или как CSS применить чтобы расположение текста и формат был также как у вас во всех уроках — расположение текста в центре, длина строки не более 70 символов