и на- жмите
Enter
Этот HTML-код отмечает начало блока боковой панели и применяет к нему стилевой класс. Мы создадим сам стилевой класс
.sidebar
, но сначала нужно определить завершение блока боковой панели, закрыв
3. Перейдите к закрывающему тегу
, который следует сразу за тегом
(это тот
, который появляется прямо перед
Who Knew CSS Had Such Power?
).
Нажмите после него
Enter и введите
Мы только что заключили заголовок и маркированный список в тег
. Те- перь создадим для него стиль.
4. Прокрутите страницу вверх к таблице стилей и добавьте после созданного ранее стиля для следующий код:
.sidebar {
width: 30%;
float: right;
margin: 10px;
}
Этот стиль устанавливает ширину области содержимого (в которой отобража- ется текст) равной 30 %. Вам не нужно использовать абсолютное значение, на- пример пикселы, для ширины. В этом случае ширина боковой панели состав- ляет 30 % от ширины ее контейнера. Свойство float перемещает боковую панель в правую часть блока, а свойство margin добавляет 10 пикселов пространства вокруг панели.
Если вы просмотрите веб-страницу в браузере, то увидите, что форма и поло- жение блока боковой панели определены, но есть одна проблема: границы тегов
отображаются под самим блоком. Несмотря на то что плавающая боковая панель смещает текст заголовков, границы остаются на том же месте. Они про- ступают в качестве фона плавающей боковой панели. Один из способов решить эту проблему — просто добавить фоновый цвет для боковой панели, чтобы не
248 Часть 2. Применение CSS
видеть границ h2
(но есть и другой способ, который вы будете использовать в шаге 8).
5. Добавьте другое свойство к стилю
.sidebar
, чтобы он выглядел следующим об- разом (изменения выделены полужирным шрифтом):
.sidebar {
width: 30%;
float: right;
margin: 10px;
background-color: rgb(250,235,199); padding: 10px 20px; }
Это свойство добавляет светло-оранжевый цвет к боковой панели и оттесняет текст от границ боковой панели,
чтобы он не касался границ, которые вы со- бираетесь добавить.
6. Добавьте еще два свойства к стилю
.sidebar
, чтобы он выглядел следующим образом (изменения выделены полужирным шрифтом):
.sidebar {
width: 30%;
float: right;
margin: 10px;
background-color: rgb(250,235,199);
padding: 10px 20px;
border: 1px dotted rgb(252,101,18); border-top: 20px solid rgb(252,101,18); }
Это пример удобной методики, описанной ранее. Если вы хотите, чтобы боль- шая часть границ вокруг элемента была одинаковой, можно сначала определить границу для всех четырех краев — в данном случае однопиксельную пунктир- ную оранжевую линию вокруг всей боковой панели. Затем можно применить новые
свойства границы для отдельных краев, которые вы хотите изменить, — в данном примере верхняя граница будет сплошной и будет иметь высоту
20 пикселов. Этот способ позволяет использовать всего две строки кода CSS, а не четыре (
border-top
, border-bottom
, border-left и border-right
).
Затем мы добавим скругленные углы и тени, чтобы выделить эту боковую па- нель по-настоящему.
7. Добавьте еще два свойства к стилю
.sidebar
, придав ему следующий вид (изме- нения выделены полужирным шрифтом):
.sidebar {
width: 30%;
float: right;
margin: 10px;
background-color: rgb(250,235,199);
padding: 10px 20px; border: 1px dotted rgb(252,101,18);
Глава 7. Поля, отступы, границы
249 border-top: 20px solid rgb(252,101,18);
border-radius: 10px; box-shadow: 5px 5px 10px rgba(0,0,0,.5); }
Свойство border-radius позволяет создать скругленные углы. В данном случае
10-пиксельная установка предоставляет заметное скругление. Свойство box- shadow добавляет тень,
отбрасываемую вниз и вправо от блока, придавая ему вид парящего над страницей. Теперь мы близки к завершению работы.
Заголовок внутри боковой панели выглядит не совсем так, как должен. К нему применяются те же свойства, что и к другим тегам
(из-за стиля тега h2
, который мы создали в шаге 4). Границы отвлекают внимание, а верхнее поле слишком отталкивает заголовок вниз от верхней части боковой панели. К сча- стью, вы можете использовать селектор потомка, чтобы переопределить эти свойства.
8. После стиля
.sidebar во внутренней таблице стилей добавьте селектор потомка:
.sidebar h2 {
border: none;
margin-top: 0;
padding: 0;
}
Из-за
.sidebar этот стиль является доминирующим, то есть имеет большую зна- чимость по сравнению с обычным стилем h2
. Он стирает границу, полученную от оригинального стиля тега
Скачать 20.28 Mb.