Рамки - это такие линии, которые окружают элемент (содержащийся в нём контент и отступы вокруг него). Пример, с которым мы уже сталкивались - рамки ячеек внутри таблицы.
CSS предусматривает два типа рамок: внутренние границы и внешние линии. Свойства CSS, отвечающие за оформление рамок, начинаются со слова «border», которое как раз и можно перевести как «Рамка», «Граница». Наличие и формат внешнего контура задаются свойствами, начинающимися словом «outline». Outline, в отличие от border, не влияет на ширину и положение обрамляемого блока. Кроме того, его нельзя установить только с одной стороны, как border - только со всех сторон сразу.
Сначала поговорим об оформлении border, потом перейдём к outline .
border-width
Задаёт ширину границ. Понятно, что по умолчанию элемент окружён рамками с четырёх сторон. Свойство позволяет задать ширину границ как для всех сторон одинаковую, так и разную для каждой стороны. В зависимости от того, какую ширину каким границам нужно присвоить, в правиле можно указать от одного до четырёх значений.
Задавать ширину можно как с помощью привычных пикселей, процентов и других единиц длины CSS, так и зарезервированными словами thin (2px), medium (4px) и thick (6px).
Border-width: 16px 12px 4px 8px;
border-style
Определяет стиль рамки. Обратите внимание: если не задать это правило, но указать свойство border-width , то рамок вообще не будет, так что если хотите видимые границы, обязательно укажите border-style .
Значений у свойства может быть довольно много, все они наглядно продемонстрированы рисунком ниже.
Последний абзац показывает, что стиль, как и толщина, у рамки с каждой стороны может быть собственным:
border-style: solid double dotted none
border-color
Работает так же, как и предыдущие свойства, но отвечает за цвет границ. Ему тоже можно задавать от одного до четырёх значений, и результат вы уже знаете. Если правило не установить, рамки будут иметь цвет текста текущего элемента или, если не указан и он, цвет текста элемента-родителя.
Border-color: #C85EFA;
border
Упрощает запись и экономит код, позволяя установить все перечисленные свойства для границ со всех сторон элемента одной строкой:
P { border: 2px solid green; }
Для настройки разных правил рамкам с разных сторон можно использовать следующие значения:
- border-top - верхняя граница.
- border-right - правая.
- border-bottom - нижняя.
- border-left - левая.
P { border-left: 6px dotted yellow; }
outline-width
То же самое, что и border-width , только для внешней, а не внутренней рамки. Задаёт толщину контура в тех же значениях, что и border-width . Кроме толщины обрамления элемента нужно указать его стиль, иначе контура не будет.
outline-style
Значения свойства дублируют значения border-style . Правило задаёт стиль внешнего контура.
Border-image - свойство, которое позволяет задавать фоновое изображение для рамки элемента. Свойство заполняет рамку заданной картинкой, распределяя части изображения таким образом, чтобы угловые части находились в углах рамки, а пространства между ними заполнялись остальными частями изображения.
Это свойство позволяет легко делать невероятные штуки, для которых раньше требовалось от 3-х до 8-ми картинок и манипуляции с разметкой.
Upd: В Firefox работают начиная с 29-й версии .
Размер картинки равен толщине рамки. Цвет и стиль рамки игнорируются.
Если задать только border-image-source , картинка заполнит собой уголки, не зная что ей делать дальше:
Border: 80px solid transparent; border-image: url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_XL.png");
Border-image-slice
Важное свойство, которое определяет размер куска изображения, которое заполнит углы рамки. Остальные части будут использованы для заполнения пространства между углами по алгоритму, заданному в border-image-repeat .
Возможные значения:
<проценты> - рассчитываются относительно размера изображения. Горизонтальные относительно ширины, вертикальные - относительно высоты. <числа> - пиксели (для растрового изображения) или координаты (для векторного). Единицы измерения не указываются. fill - ключевое слово, дополняющее предыдущие значения. Если оно задано, изображение не обрезается внутренним краем рамки, а заполняет также область внутри рамки. Очень полезно для округлых рамок.
Чтобы определить значения для каждой стороны, несколько значений можно задать через пробел.
Сумма значений противоположных сторон должна быть меньше размера картинки, иначе будет нечем заполнять пространство между углами.
Border: 80px solid transparent; border-image: url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); border-image-slice: 100;
Border-image-repeat
Свойство определяет как будут заполняться промежутки между углами.
Возможные значения: stretch - растягивает заполняющий участок картинки. Значение по умолчанию; repeat - повторяет заполняющий участок, при этом видны места стыков с угловой картинкой; round - заполняет промежуток между углами. Может быть заметен стык в середине стороны. Самое аккуратное действие. space - действует похоже на repeat . Разницы не обнаружила.
Можно задать два значения сразу, первое будет отвечать за поведение картинки в верхней и нижней рамке, второе - за левую и правую.
Border-image: url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); border-image-slice: 100; border-image-repeat: repeat;
Слева repeat , справа round .
Если рамка сложная и стороны плохо стыкуются между собой, stretch сработает корректнее, вот пример .
Border-image-width
border-image-width
Свойство управляет шириной видимой части рамки, масштабирует её. Если это значение больше ширины border-width , картинка рамки заползет под содержимое, даже если не заданно свойство fill .
Возможные значения: <длина> - значения в px или em; <%> - значения в процентах относительно размера изображения; <числа> - числовое значение, на которое умножается border-width auto - ключевое слово. Если оно задано, значение равно соответственному border-image-slice . Если подходящего размера нет, используется значение border-width , при этом картинка заполняет весь угол рамки, заползая под контент. Немного странно работает.
Border: 60px solid transparent; border-image: url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); border-image-slice: 80; border-image-repeat: round; border-image-width: 160px;
Справа рамка с border-image-width . На примере слева видно, как картинка обрезалась внутренними краями рамки. Правая рамка засчет увеличенной ширины заползла под контент.
Border-image-outset
Интересное свойство, позволяющие отодвинуть рамку за пределы элемента. Отрицательные значения не поддерживаются.
Возможные значения: <длина> - значения в px или em; <числа> - числовое значение, на которое умножается border-width .
Border: 60px solid transparent; border-image: url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); border-image-slice: 120; border-image-repeat: round; border-image-outset: 60px 10px 50px 120px;
Справа пример с border-image-outset . Это свойство не влияет на размеры элемента, а рамка может перекрывать соседние элементы.
Описание
Универсальное свойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству. Для установки границы только на определенных сторонах элемента, воспользуйтесь свойствами border-top , border-bottom , border-left , border-right .
Синтаксис
Значения
Значение border-width определяет толщину границы. Для управления ее видом предоставляется несколько значений border-style . Их названия и результат действия представлен на рис. 1.
Рис.1. Стили рамок
border-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате.
inherit наследует значение родителя.
HTML5 CSS2.1 IE Cr Op Sa Fx
В данном примере вокруг слоя добавляется двойная граница. Результат показан на рис. 2.
Рис. 2. Применение свойства border
Объектная модель
document.getElementById("elementID ").style.border
Браузеры
Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed . При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed .
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .
Стиль границы в разных браузерах может несколько различаться при использовании значений groove , ridge , inset или outset .
Здравствуйте, уважаемые читатели блога сайт! Сегодня мы продолжим изучение каскадных таблиц стилей или CSS. В прошлых статьях мы уже рассмотрели в общих чертах блочную верстку сайта. В результате у нас стали получаться вполне профессиональные web-страницы, но чего-то им не хватает. А не хватает им скорей всего отступов и рамок. Сегодня мы и займемся рассмотрением стилевых правил margin, padding и border, которые позволяют задавать отступы и рамки для html-элементов.
Параметры отступов в CSS
С помощью каскадных таблиц стилей существует возможность задавать отступы двух видов.
1. Внутренний отступ — это расстояние от воображаемой границы элемента до его содержимого. Величина расстояния задается с помощью параметра padding . Такой отступ принадлежит самому элементу и находится внутри него.
2. Внешний отступ — расстояние между границей текущего элемента веб-страницы и границами соседних элементов, либо родительского элемента. Размер расстояния регулируется свойством margin . Такой отступ находится вне элемента.
Для наглядности картинка:
Например, рассмотрим ячейку заполненную текстом. Тогда внутренний отступ это расстояние между воображаемой границей ячейки и содержащимся в ней текстом. А внешний отступ это расстояние между границами соседних ячеек. Начнем с внутренних отступов.
Внутренние отступы в CSS с помощью padding (top, bottom, left, right)
Свойства стиля padding-left, padding-top, padding-right и padding-bottom позволяют задать величины внутренних отступов, соответственно, слева, сверху, справа и снизу элемента web-страницы:
padding-top | padding-right | padding-bottom | padding-left: значение | проценты | inherit
Величину отступа можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. При указании процентов, значение считается от ширины элемента. Значение inherit указывает, что оно наследуется от родителя.
Например, для текущего абзаца я применил правило стиля, задающий левый отступ 20 пикселей, верхний отступ 5 пикселей, справа отступ 35 пикселей и снизу 10 пикселей. Запись правила в будет выглядеть следующим образом:
p.test{
padding-left:20px;
padding-top:5px;
padding-right:35px;
padding-bottom:10px
}
Сборное правило padding позволяет указать отступы сразу со всех сторон элемента веб-страницы:
padding: <отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]
В сборном правиле разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. В этом случае эффект зависит от количества значений:
- если указать одно значение, то оно установит величину отступа со всех сторон элемента страницы;
- если указать два значения, то первое задаст величину отступа сверху и снизу, а второе - слева и справа;
- если указать три значения, то первое определит величину отступа сверху, второе - слева и справа, а третье - снизу;
- если указаны четыре значения, то первое установит величину отступа сверху, второе - справа, третье - снизу, а четвертое - слева.
Таким образом правило CSS приведенное выше можно максимально сократить и записать следующим образом:
p.test{ padding:5px 35px 10px 20px}
Свойство margin или внешние отступы в CSS
Атрибуты стиля margin-left, margin-top, margin-right и margin-bottom позволяют задать величины внешних отступов, соответственно, слева, сверху, справа и снизу:
margin-top | margin-right | margin-bottom | margin-left: <значение>|auto|inherit
Как уже упоминалось выше внешним отступом является расстояние от границы текущего элемента до границы соседнего элемента, либо, если соседних элементов нет, до внутренней границы родительского контейнера.
Величину отступа можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах:
p {
margin-left: 20px;
}
h1{
margin-right:15%;
}
Значение auto означает, что размер отступов будет автоматически рассчитан браузером. В случае использования процентной записи, то отступы рассчитываются в зависимости от ширины родительского контейнера . Причем это относится не только к margin-left и margin-right, но и для margin-top и margin-bottom отступы в процентах будут рассчитываться в зависимости от ширины, а не высоты контейнера.
В качестве значений внешних отступов допустимо применять отрицательные величины :
p{
margin-left:-20px;
}
Если при положительных значениях отступов соседние элементы отодвигаются, то при отрицательном значении соседний блок наедет на элемент для которого мы задали такой отрицательных отступ.
Внешние отступы мы также можем указать с помощью атрибута стиля margin . Он задает величины отступа одновременно со всех сторон элемента web-страницы:
margin: <отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]
Данное свойство в случае задания одного, двух, трех или четырех значений отступов подчиняется тем же законам, что и правило padding.
Параметры рамки с помощью свойства border
При настройке рамок существует три типа параметров:
- border-width — толщина рамки;
- border-color — цвет рамки;
- border-style — тип линии с помощью которой будет нарисована рамка.
Начнем с параметра толщины рамки:
border-width: [значение | thin | medium | thick] {1,4} | inherit
Толщину рамки можно задавать в пикселях, либо в других доступных в css единицах. Переменные thin, medium и thick задают толщину рамки в 2, 4 и 6 пикселей соответственно:
border-width:medium;
Как и для свойств padding и margin, для параметра border-width разрешается использовать одно, два, три или четыре значения, задавая таким образом толщину рамки для всех сторон сразу или для каждой по отдельности:
border-width: 5px 3px 5px 3px
Для текущего абзаца сделаем толщину верхней рамки 1px, правой 2px, нижней 3px, а левой 4px с помощью правила {border-width: 1px 2px 3px 4px;}
С помощью атрибутов стиля border-left-width, border-top-width, border-right-width и border-bottom-width можно задавать толщину, соответственно, левой, верхней, правой и нижней сторон рамки:
border-left-width|border-top-width|border-right-width|border-bottom-width: thin|medium|thick|<толщина>|inherit
Следующий параметр border-color с помощью которого можно управлять цветом рамки :
border-color: [цвет | transparent] {1,4} | inherit
Свойство позволяет задать цвет рамки сразу для всех сторон элемента или только для указанных. В качестве значения можно использовать принятые в html для цветов способы их задания: шестнадцатеричный код, ключевые слова и т.д.:
p {border-width: 2px; border-color: red}
Значение transparent устанавливает прозрачный цвет рамки, а inherit наследует значение родителя. По умолчанию, если цвет рамки не задан, то будет использоваться тот, который используется для шрифта внутри данного элемента.
С помощью атрибутов стиля border-left-color, border-top-color, border-right-color и border-bottom-color можно задать цвет, соответственно, левой, верхней, правой и нижней сторон рамки:
border-left-color|border-top-color|border-right-color|border-bottom-color: transparent|<цвет>|inherit
И последний параметр border-style задает тип рамки :
border-style: {1,4} | inherit
Тип рамки можно указывать сразу для всех сторон элемента или только для указанных. В качестве значений можно использовать несколько ключевых слов. Вид будет зависеть от используемого браузера и толщины рамки. Значение none используется по умолчанию и не отображает рамку и ее толщина задается нулевой. Значение hidden имеет тот же эффект. Получаемая рамка для остальных значений в зависимости от толщины приведена в таблице ниже:
Атрибуты стиля border-left-style, border-top-style, border-right-style и border-bottom-style задают стиль линий, которыми будет нарисована, соответственно, левая, верхняя, правая и нижняя сторона рамки:
border-left-style|border-top-style|border-right-style|border-bottom-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|inherit
Как и для параметров внешних и внутренних отступов, для рамки существует универсальное свойство border . Оно позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента:
border: | inherit
Значения могут идти в любом порядке, разделяясь пробелами:
td {border: 1px solid yellow}
Для установки границы только на определенных сторонах элемента существуют свойства border-top, border-bottom, border-left, border-right, которые позволяют задать параметры соответственно для верхней, нижней, левой и правой стороны рамок.
Осталось только подвести итоги:
- для задания внутренних отступов пользуемся свойством padding ;
- для настройки внешних отступов существует правило margin ;
- параметры рамок задаются с помощью атрибута border .
Отмечу, что все эти css свойства увеличивают размеры элемента web-страницы. Поэтому, если мы изменяем толщину рамки или размер отступов у блочных контейнеров, формирующих дизайн web-страницы, то должны будем соответственно изменить размеры этих контейнеров, иначе они могут сместиться, и дизайн будет нарушен.
На этом все, до новых встреч!
CSS также позволяет нам создать сплошную, пунктирную или точечную рамку по воображаемой границе элемента Web-страницы.
Атрибуты стиля border-left-width, border-top-width, border-right-width и border-bottom-width задают толщину, соответственно, левой, верхней, правой и нижней сторон рамки:
border-left-width|border-top-width|border-right-width|
border-bottom-width: thin|medium|thick|<толщина>|inherit
Мы можем указать либо абсолютное или относительное числовое значение толщины рамки, либо одно из предопределенных значений: thin (тонкая), medium (средняя) или thick (толстая). В последнем случае реальная толщина рамки зависит от Web-обозревателя. Значение толщины по умолчанию также зависит от Web-обозревателя, поэтому ее всегда лучше устанавливать явно.
В листинге 11.2 мы указали толщину рамки у ячеек таблицы, равную одному пикселу.
А вот стиль, создающий у всех заголовков первого уровня рамку из одной только нижней стороны толщиной 5 пикселов:
H1 { border-bottom-width: 5px }
Фактически все заголовки первого уровня окажутся подчеркнутыми.
Атрибут стиля border-width позволяет указать значения толщины сразу для всех сторон рамки:
border-width: <толщина 1> [<толщина 2> [<толщина 3> [<толщина 4>]]]
Если указано одно значение, оно задаст толщину всех сторон рамки.
Если указаны два значения, первое задаст толщину верхней и нижней, а второе - левой и правой сторон рамки.
Если указаны три значения, первое задаст толщину верхней, второе - левой и правой, а третье - нижней сторон рамки.
Если указаны четыре значения, первое задаст толщину верхней, второе - правой, третье - нижней, а четвертое - левой сторон рамки .
Пример:
TD, TH { border-width: thin }
Атрибуты стиля border-left-color, border-top-color, border-right-color и border-bottom-color задают цвет, соответственно, левой, верхней, правой и нижней сторон рамки:
border-left-color|border-top-color|border-right-color|
border-bottom-color: transparent|<цвет>|inherit
Значение transparent задает "прозрачный" цвет, сквозь который будет "просвечивать" фон родительского элемента.
ВНИМАНИЕ!
Цвет рамки всегда следует задавать явно - в противном случае она может быть не нарисована.
Пример:
H1 { border-bottom-width: 5px
border-bottom-color: red }
Атрибут стиля border-color позволяет указать цвет сразу для всех сторон рамки:
border-color: <цвет 1> [<цвет 2> [<цвет 3> [<цвет 4>]]]
Он ведет себя так же, как и аналогичный атрибут стиля border-width:
TD, TH { border-width: thin;
border-color: black }
Атрибуты стиля border-left-style, border-top-style, border-right-style и border-bottom-style задают стиль линий, которыми будет нарисована, соответственно, левая, верхняя, правая и нижняя сторона рамки :
border-left-style|border-top-style|border-right-style|
border-bottom-style: none|hidden|dotted|dashed|solid|double|groove|
ridge|inset|outset|inherit
Здесь доступны следующие значения:
None и hidden - рамка отсутствует (обычное поведение);
Dotted - пунктирная линия;
Dashed - штриховая линия;
Solid - сплошная линия;
Double - двойная линия;
Groove - "вдавленная" трехмерная линия;
Ridge - "выпуклая" трехмерная линия;
Inset - трехмерная "выпуклость";
Outset - трехмерное "углубление".
Пример:
H1 { border-bottom-width: 5px
border-bottom-color: red
border-bottom-style: double }
Атрибут стиля border-style позволяет указать стиль сразу для всех сторон рамки:
border-style: <стиль 1> [<стиль 2> [<стиль 3> [<стиль 4>]]]
Он ведет себя так же, как и аналогичные атрибуты стиля border-width и border-color.
Пример:
TD, TH { border-width: thin;
border-color: black;
border-style: dotted }
Атрибуты стиля border-left, border-top, border-right и border-bottom позволяют задать все параметры для, соответственно, левой, верхней, правой и нижней стороны рамки :
border-left|border-top|border-right|border-bottom:
<толщина> <стиль> <цвет> | inherit
Во многих случаях эти атрибуты стиля оказываются предпочтительнее:
H1 { border-bottom: 5px double red }
"Глобальный" атрибут стиля border позволяет задать все параметры сразу для всех сторон рамки:
border: <толщина> <стиль> <цвет> | inherit
TD, TH { border: thin dotted black }
ВНИМАНИЕ!
Рамки также увеличивают размеры элемента Web-страницы. Поэтому, если мы создадим рамки у блочных контейнеров, формирующих дизайн Web-страницы, то должны будем соответственно изменить размеры этих контейнеров, иначе они сместятся, и дизайн будет нарушен.
Представление для нашего Web-сайта
Сделаем отступы между контейнерами, формирующими дизайн наших Web-страниц, и между границами этих контейнеров и их содержимым.
Внешний отступ между краями окна Web-обозревателя и содержимым Web-страницы равен нулю. Пусть пространство в окне Web-обозревателя используется максимально полно.
НА ЗАМЕТКУ
По умолчанию каждый Web-обозреватель создает свои отступы между краями своего окна и содержимым Web-страницы.
Внутренние отступы в контейнере с заголовком Web-сайта (cheader) слева и справа - по 20 пикселов. Нам придется отодвинуть текст заголовка от краев окна Web-обозревателя, иначе заголовок будет выглядеть некрасиво.
Внешний отступ между контейнерами с полосой навигации (cnavbar) и с основным содержимым (cmain) - 10 пикселов.
Внутренние отступы у контейнера с основным содержимым (cmain) со всех сторон - по 5 пикселов.
Внутренний отступ у контейнера с основным содержимым (cmain) сверху - 10 пикселов. Так мы отделим его от контейнеров cnavbar и cmain.
Внутренние отступы в контейнере со сведениями об авторских правах (ccopyright) слева и справа - по 20 пикселов. Текст сведений об авторских правах также следует отодвинуть от краев окна Web-обозревателя.
Приведенные значения отступов получены автором в результате экспериментов. Вы можете задать другие.
Теперь разделим все четыре контейнера рамками.
Контейнер cheader получит рамку с одной нижней стороной.
Контейнер cmain - рамку с одной левой стороной.
Контейнер ccopyright - рамку с одной верхней стороной.
Рамки мы сделаем тонкими и точечными. В качестве цвета зададим для них #B1BEC6 (светло-синий).
В листинге 11.3 приведен исправленный фрагмент CSS-кода таблицы стилей main.css, реализующий выбранные нами параметры отступов и рамок.
Давайте разберем его.
Чтобы убрать отступ между границами окна Web-обозревателя и содержимым Web-страницы, мы использовали атрибут стиля margin. Его мы поместили в стиль переопределения тега
и дали ему значение 0 пикселов:BODY { color: #3B4043;
background-color: #F8F8F8;
font-family: Verdana, Arial, sans-serif;
margin: 0px }
В именованном стиле cheader, привязанном к одноименному контейнеру, мы задали внутренние отступы слева и справа, равные 20 пикселам, и рамку с одной только нижней стороной. Эта рамка отделит данный контейнер от нижележащих:
#cheader { width: 1010px;
padding: 0 20px;
border-bottom: thin dotted #B1BEC6 }
Кроме того, мы задали в качестве ширины этого контейнера абсолютное значение. Вспомним: при выводе на экран контейнера с относительной шириной Web-обозреватель сначала вычислит абсолютное значение его ширины, а потом добавит к нему величину отступов. В результате чего контейнер станет шире, чем окно Web-обозревателя, и в окне появятся полосы прокрутки, что нам совсем не нужно. Поэтому для ширины контейнера лучше задать абсолютное значение, подобрав его так, чтобы контейнер гарантированно поместился в окно Web-обозревателя по ширине.
В именованном стиле cnavbar мы указали внешний отступ справа 10 пикселов - он визуально отделит контейнер cnavbar от контейнера cmain:
#cnavbar { width: 250px;
height: 570px;
float: left;
margin-right: 10px }
В именованном стиле cmain мы задали внутренние отступы и рамку с одной левой стороной - она отделит контейнер cmain от контейнера cnavbar:
#cmain { width: 760px;
height: 570px;
float: left;
overflow: auto;
padding: 5px;
border-left: thin dotted #B1BEC6 }
В именованном стиле ccopyright мы задаем отступы слева и справа по 20 пикселов, а сверху - 10 пикселов. Кроме того, мы создаем рамку с одной верхней стороной, которая отделит контейнер ccopyright от вышерасположенных "соседей":
#ccopyright { width: 1010px;
clear: both;
padding: 10px 20px 0px 20px;
border-top: thin dotted #B1BEC6 }
Вот и все. Сохраним таблицу стилей main.css и откроем Web-страницу index.htm в Web-обозревателе. Автор не будет приводить здесь иллюстрацию, т. к. созданные нами тонкие рамки на ней практически незаметны. Но на экране компьютера они выглядят весьма эффектно.
Посмотрим теперь на полосу навигации. Невыразительные гиперссылки скучились в верхней части контейнера cnavbar, просто жалко на них смотреть!.. Давайте их сдвинем влево, немного "разредим", создав отступы, и заодно заключим каждую из них в рамки .
Как мы помним, наша полоса навигации представляет собой список, а отдельные ее гиперссылки - пункты данного списка.
Вот необходимые изменения:
Список, формирующий полосу гиперссылок, сдвинуть влево на 30 пикселов. Так мы ликвидируем образовавшееся после удаления маркеров свободное пространство слева, которое смотрится некрасиво.
Внешние отступы у пунктов списка сверху и снизу - 10 пикселов. Так мы отделим гиперссылки друг от друга.
Рамка пунктов списка - тонкая, сплошная, цвет #B1BEC6.
Внутренние отступы пунктов списка: сверху и снизу - по 5 пикселов, слева и справа - по 10 пикселов. Так мы отделим текст пунктов от рамок .
Осталось только соответственно исправить CSS-код таблицы стилей main.css (листинг 11.4).
Рассмотрим их подробнее.
В именованный стиль navbar, привязанный к тегу списка, который формирует полосу навигации, мы добавили отступ слева, равный –30 пикселов. Благодаря этому список сместится влево, заполняя пустое пространство:
#navbar { font-family: Arial, sans-serif;
font-size: 14pt;
text-transform: uppercase;
list-style-type: none;
margin-left: -30px }
Вновь созданный комбинированный стиль создаст у пунктов списка, формирующего полосу навигации, рамку и задаст соответствующие отступы:
#navbar LI { padding: 5px 10px;
margin: 10px 0px;
border: thin solid #B1BEC6 }
Сохраним исправленную таблицу стилей и обновим открытую в Web-обозревателе Web-страницу index.htm, нажав клавишу
