Методические указания по использованию каскадных таблиц стилей css 2 Введение
 Скачать 0.8 Mb.
|
Глава 1 37 Глава 2.1Глава 2.1.2Это могут быть заголовки документа, разделѐнного на главы или параграфы. Естественным будет назначить id каждой главе: id="c1">Глава 1id="c1-1">Глава 1.1id="c1-2">Глава 1.2id="c2">Глава 2id="c2-1">Глава 2.1id="c2-1-2">Глава 2.1.2Заголовок, скажем, chapter 1.2, должен быть красным. Это делается в соответствии с CSS: 38 #c1-2 { color: red; } Как показано в предыдущем примере, вы можете определять свойства конкретного элемента с помощью #id в таблице стилей документа. Резюме В этом уроке мы разобрали, как, с помощью селекторов class и id , вы можете специфицировать свойства конкретных элементов. В следующем уроке мы разберѐм два HTML-элемента, которые широко используются в сочетании с CSS: и 39 Урок 8: Группирование элементов (span и div) Элементы и используются для структурирования документа, часто совместно с атрибутами class и id. В этом уроке мы подробно рассмотрим, как использовать и , поскольку эти элементы HTML имеют важнейшее значение в CSS. Группирование с помощью Группирование с помощью Группирование с помощью Элемент можно назвать нейтральным элементом, который ничего не добавляет к содержимому документа. Но, в сочетании с CSS, может использоваться для визуальных эффектов применимо к отдельным блокам текста. Пример - цитата из Бенджамина Франклина: Кто рано ложится и рано встаёт, тот будет здоровым, богатым и умным Скажем, мы хотим, чтобы Mr. Franklin увидел все преимущества бодрствования выделенные красным цветом. Для этого мы можем отметить эти преимущества с помощью . Каждому блоку span будет присвоен class , который затем можно определить в нашей таблице стилей: Кто рано ложится и рано встаёт, тот будет >здоровым, >богатым и умным. 40 В CSS: span.benefit { color:red; } Разумеется, вы можете также использовать id для определения стиля - элементов. Не забывайте только, что вы должны установить уникальный id каждому из трѐх -элементов, как мы говорили в прошлом уроке. Группирование с помощью В то время как используется в элементах уровня блока, как в предыдущем примере, применяется для группирования одного или более блок-элементов. Кроме этого отличия, группирование с помощью работает более или менее аналогично. Посмотрим на пример - два списка президентов США, сгруппированных по их политической принадлежности:
41
В нашей таблице стилей мы можем использовать такое же группирование, как и раньше: #democrats { background:blue; } #republicans { background:red; } В этих примерах мы использовали и для определения очень простых вещей - цвета текста и фона. Но оба элемента несут в себе потенциал для намного более сложных операций, таких как.... Однако это - не для нашего урока. Позднее мы рассмотрим этот вопрос в данном учебнике. 42 Резюме В Уроках 7 и 8, вы узнали о селекторах id и class и об элементах span и div Теперь вы должны уметь, более или менее, группировать и идентифицировать все части документа, что уже является большим шагом в освоении CSS. В Уроке 9 мы дадим понятие Боксовой модели. 43 Урок 9: Боксовая модель Боксовая модель в CSS описывает боксы, генерируемые для HTML-элементов. Боксовая модель также имеет детальные опции для определения полей, рамок, заполнения и содержимого каждого элемента. На диаграмме далее показано, как построена боксовая модель: Боксовая модель в CSS Эта иллюстрация может показаться слишком научной, поэтому попытаемся использовать эту модель на конкретном примере с заголовком и текстом. HTML нашего примера таков (из Всеобщей Декларации Прав Человека): |