14. Рамки.
Рамки вокруг блочных элементов создаются по следующему правилу сокращенной записи:
Используя соответствующие префиксы, можно сделать так, чтобы рамка прорисовывалась только с определенных сторон.
И т.д., тут все зависит от богатства воображения конкретного дизайнера. Достигается такая возможность с помощью двух шагов:
Создадим для наших рамок несколько классов:
Теперь созданные классы в файле стилей CSS мы можем использовать в нашем учебном тестовом примере.
css_014_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_014_001.zip ← скачайте пример, чтобы установить на свой сайт...
Сокращенная запись для рамки:
Ширина рамки измеряется в пикселях, а стили могут быть следующими:
Рамка (border):
[<'border-width'>||<'border-style'>||<'border-color'>]
border:1px none #000000; - рамка вообще отсутствует...
border:5px dotted #00FF00; - рамка точечная, толщиной 5 пикселей...
border:5px dashed #00FF00; - рамка "тире", толщиной 5 пикселей...
border:5px solid #00FF00; - рамка "сплошная", толщиной 5 пикселей...
border:5px double #00FF00; - рамка "двойная", толщиной 5 пикселей...
border:5px groove #00FF00; - рамка стиля "грув", толщиной 5 пикселей...
Эффект зависит от установленного цвета рамки...
Эффект зависит от установленного цвета рамки...
border:5px ridge #00FF00; - рамка стиля "ридж", толщиной 5 пикселей...
Эффект зависит от установленного цвета рамки...
Эффект зависит от установленного цвета рамки...
border:5px inset #00FF00; - рамка стиля "инсет", толщиной 5 пикселей...
Эффект зависит от установленного цвета рамки...
Эффект зависит от установленного цвета рамки...
border:5px outset #00FF00; - рамка стиля "outset", толщиной 5 пикселей...
Эффект зависит от установленного цвета рамки...
Эффект зависит от установленного цвета рамки...
Используя соответствующие префиксы, можно сделать так, чтобы рамка прорисовывалась только с определенных сторон.
border-top:5px groove #00FF00; - рамка стиля "грув", толщиной 5 пикселей будет прорисована только сверху...
border-right:5px groove #00FF00; - рамка стиля "грув", толщиной 5 пикселей будет прорисована только справа...
border-bottom:5px groove #00FF00; - рамка стиля "грув", толщиной 5 пикселей будет прорисована только снизу...
border-left:5px groove #00FF00; - рамка стиля "грув", толщиной 5 пикселей будет прорисована только слева...
Возможность прорисовки рамки только снизу довольно часто используется дизайнерами для создания оригинальных необычных подчеркиваний для ссылок, например таких:
Наверх ↑
или таких:
Наверх ↑
И т.д., тут все зависит от богатства воображения конкретного дизайнера. Достигается такая возможность с помощью двух шагов:
- text-decoration:none; - с помощью данного свойства мы удаляем стандартное "скучное" подчеркивание...
- border-bottom:1px dotted #0000FF; - а уже с помощью данного свойства добавляем свое свойство для подчеркивания, "веселенькое"...
border-top:10px groove #00FF00; border-right:5px groove #0000FF; border-bottom:10px groove #00FFFF; border-left:10px groove #FF0000; - рамка "грув", толщиной 10 пикселей, с разноцветными границами...
Создадим для наших рамок несколько классов:
.border_none {
border:5px none #00FF00;
padding:5px;
width:90%;
height:60px;
background-color: #F0FFF0;
}
.border_dotted {
border:5px dotted #00FF00;
padding:5px;
width:90%;
height:60px;
background-color: #F0FFF0;
}
.border_dashed {
border:5px dashed #00FF00;
padding:5px;
width:90%;
height:60px;
background-color: #F0FFF0;
}
.border_solid {
border:5px solid #00FF00;
padding:5px;
width:90%;
height:60px;
background-color: #F0FFF0;
}
.border_double {
border:5px double #00FF00;
padding:5px;
width:90%;
height:60px;
background-color: #F0FFF0;
}
.border_groove {
border:5px groove #00FF00;
padding:5px;
width:90%;
height:60px;
background-color: #F0FFF0;
}
.border_ridge {
border:5px ridge #00FF00;
padding:5px;
width:90%;
height:60px;
background-color: #F0FFF0;
}
.border_inset {
border:5px inset #00FF00;
padding:5px;
width:90%;
height:60px;
background-color: #F0FFF0;
}
.border_outset {
border:5px outset #00FF00;
padding:5px;
width:90%;
height:60px;
background-color: #F0FFF0;
}
.border_top {
border-top:5px ridge #00FF00;
padding:5px;
width:90%;
height:60px;
background-color: #F0FFF0;
}
.border_right {
border-right:5px ridge #00FF00;
padding:5px;
width:90%;
height:60px;
background-color: #F0FFF0;
}
.border_bottom {
border-bottom:5px ridge #00FF00;
padding:5px;
width:90%;
height:60px;
background-color: #F0FFF0;
}
.border_left {
border-left:5px ridge #00FF00;
padding:5px;
width:90%;
height:60px;
background-color: #F0FFF0;
}
.border_link1 {
text-decoration:none;
border-bottom:1px dotted #0000FF;
}
.border_orig1 {
border-top:10px groove #00FF00;
border-right:5px groove #0000FF;
border-bottom:10px groove #00FFFF;
border-left:10px groove #FF0000;
padding:5px;
width:90%;
height:60px;
background-color: #F0FFF0;
}
Теперь созданные классы в файле стилей CSS мы можем использовать в нашем учебном тестовом примере.
css_014_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_014_001.zip ← скачайте пример, чтобы установить на свой сайт...
***** Машина-Функционал для передвижения по страничкам курса CSS *****
Вы кликнули поясняющий рисунок, который показывает, как работает тот или иной функционал. Кликать эти рисунки не надо, нет смысла.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
