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 *****
Вы кликнули поясняющий рисунок, который показывает, как работает тот или иной функционал. Кликать эти рисунки не надо, нет смысла.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.