Собирать все стили в одном внешнем файле и вставлять этот файл во все нужные документы довольно удобно. Читать далее
Итак, мы узнали о тенях все, и теперь вы, вероятно, захотите создать тени для всех элементов в своем документе. Свойство box-shadow специально предназначено для добавления теней к полям. Читать далее
В нашем шаблоне использованы элементы <h1> и <h2> для объявления заголовков и подзаголовков различных разделов документа. Стили по умолчанию для этих элементов всегда далеки от того, что нам хотелось бы видеть на экране. Читать далее
Иногда возникает необходимость одновременно применить к элементу несколько трансформаций. Для того чтобы получить составное свойство transform, нужно всего лишь разделить функции пробелом.
Описание тела нашего документа готово. Базовая структура определена, но необходимо еще поработать над содержанием. Пока мы изучили только элементы HTML5, помогающие определять разделы макета и указывать их назначение, однако все самое важное находится внутри этих разделов.
Пока что мы всего лишь применили гибкую блочную модель к нашему шаблону, однако для того, чтобы полностью раскрыть ее потенциал, необходимо хорошо понимать, как эта модель работает, а также внимательно изучить ее свойства.
Одной из главных причин создания гибкой блочной модели была необходимость иметь возможность эффективно распределять экранное пространство между элементами. Приходилось увеличивать или уменьшать элементы в зависимости от того, сколько свободного места было в соответствующем контейнере. Чтобы понимать, какое количество пространства доступно для распределения, нужно было точно определять размер контейнера, и это привело к возникновению понятия родительских блоков. Родительские блоки определяются свойством display, и их можно описывать как блочные элементы, используя значение box, либо как строчные элементы, если задать значение inline-box.
Parentbox
|
Box-1 |
Box-2 |
Box-3 |
Box-4 |
рис. 2.4. Родительский блок с четырьмя потомками
HTML-код для генерации блоков, изображенных на рис. 2.4, может выглядеть примерно так, как показано в листинге 2.45.
Листинг 2.45. Базовый HTML-код, с которым мы будем работать
<!DOCTYPE html>
<html lang="en">
<head>
<title>Flexible Box Model sample</title> <link rel="stylesheet" href="test. css">
</head>
<body>
<section id="parentbox">
<div id="box-1">Box 1</div>
<div id="box-2">Box 2</div>
<div id="box-3">Box 3</div>
<div id="box-4">Box 4</div>
</section>
</body>
</html>
Создайте еще один пустой текстовый файл с любым названием и расширением. html. Скопируйте в него код из листинга 2.45. Используя этот файл, мы поэкспериментируем со свойствами гибкой блочной модели. Правила CSS будут подключаться из внешнего файла под названием test. css. Создайте и этот файл тоже и добавляйте в него правила из следующих листингов. Проверяйте результаты применения каждого правила, открывая HTML-файл в окне браузера.
Свойство display
Как уже говорилось, свойство display может принимать два значения: box и inline-box. Мы определим родительский блок как блочный элемент, используя значение box.
Не забывайте о том, что пока все эти свойства находятся на этапе разработки. Для того чтобы применять их, объявлять каждое из свойств необходимо с добавлением префикса — moz — или — webkit — в зависимости от того, с каким браузером вы работаете. Например, пока что display: box следует записывать как display: — moz-box для механизма Gecko и display: — webkit-box для механизма WebKit. Посмотрите, как это делается, в предыдущих листингах или зайдите на наш вебсайт, чтобы загрузить полные версии этих примеров. Мы решили не добавлять префиксы в листинги из этого раздела, для того чтобы вам было проще читать код.
Листинг 2.46. Объявление элемента parentbox в качестве родительского блока
#parentbox { display: box;
}
Свойство box-orient
По умолчанию родительский блок определяет горизонтальную ориентацию для всех своих потомков. С помощью свойства box-orient можно объявить определенную ориентацию элементов.
Листинг 2.47. Объявление ориентации дочерних элементов
#parentbox { display: box; box-orient: horizontal;
}
Свойство box-orient может принимать одно из четырех значений: horizontal, vertical, inline-axis или block-axis. По умолчанию устанавливается значение inline-axis, поэтому блоки выстраиваются в ряд по горизонтали (как показано на рис. 2.4). Аналогичного эффекта можно добиться с помощью значения horizontal, которое мы применили в листинге 2.47.
Этот и последующие примеры будут работать в браузере, только если вы будете объявлять каждый новый стиль с добавлением префикса — moz — или — webkit — в соответствии с тем, какой браузер используете (соответственно, Firefox или Google Chrome).
Как говорилось ранее, код JavaScript обычно выполняется после того, как пользователь выполняет какие-то действия. Эти действия и другие события обрабатываются обработчиками событий и связанными с ними функциями JavaScript.
Объявление правила CSS с упоминанием ключевого слова элемента позволяет изменить все соответствующие элементы в документе. Например, следующее правило (листинг 2.4) меняет стиль элементов <p>.
Текстовая тень — отличный трюк, который, кстати, было непросто реализовать методами предыдущего поколения. Однако он всего лишь добавляет эффект объема, а не меняет сам текст. Создание тени — как покраска старого автомобиля: в результате у вас остается все та же старая машина. А у нас — все тот же шрифт.
Еще одно базовое правило, которое необходимо добавить в самом начале, — это определение структурных элементов HTML5 по умолчанию. Некоторые браузеры не распознают их или обрабатывают как строчные элементы. Читать далее