- •Урок 3: Цвет и фон
- •Цвет переднего плана : свойство 'color'
- •Свойство 'background-color'
- •Фоновые изображения [background-image]
- •Повторение/мультипликация фонового изображения [background-repeat]
- •Блокировка фонового изображения [background-attachment]
- •Расположение фонового рисунка [background-position]
- •Сокращённая запись [background]
- •Урок 4: Шрифты
- •Семейство шрифта [font-family]
- •Стиль шрифта [font-style]
- •Вариант шрифта [font-variant]
- •Вес шрифта [font-weight]
- •Размер шрифта [font-size]
- •Сокращённая запись [font]
- •Урок 6: Ссылки
- •Что такое псевдокласс?
- •Псевдокласс: link
- •Урок 7: Идентификация и группирование элементов (class и id)
- •Группирование элементов с помощью class
- •Идентификация элемента с помощью id
- •Урок 8: Группирование элементов (span и div)
- •Урок 9: Боксовая модель
- •Боксовая модель в css
- •Урок 10: Поля и заполнение
- •Установим поля элемента
- •Установим заполнение элемента
- •Сокращённая запись [border]
- •Свойство clear
- •Урок 14: Позиционирование элементов
- •Принципы css-позиционирования
- •Абсолютное позиционирование
- •Относительное позиционирование
- •Урок 15: Наслоение с помощью z-index (Слои)
- •Урок 16: Web-стандарты и проверка кода
- •Css validator/проверщик
Урок 15: Наслоение с помощью z-index (Слои)
CSS оперирует в трёх измерениях - высота, ширина и глубина. Мы работали в двух измерениях на протяжении всех предшествующих уроков. В этом уроке мы научимся создавать слои/layers. Коротко говоря - упорядочивать элементы так, чтобы они перекрывались.
Для этого вы можете присвоит каждому элементу номер (z-index). Элемент с бóльшим номером перекрывает элемент с меньшим номером.
Скажем, мы играем в покер и у нас - royal flush. Наша "рука" должна быть представлена так, чтобы каждая карта имела z-index:
При этом номера идут подряд (1-5), но того же результата можно добиться и при использовании 5 различных номеров. Важна хронологическая последовательность номеров (порядок).
Вот код примера с картами:
#ten_of_diamonds {
position: absolute;
left: 100px;
top: 100px;
z-index: 1;
}
#jack_of_diamonds {
position: absolute;
left: 115px;
top: 115px;
z-index: 2;
}
#queen_of_diamonds {
position: absolute;
left: 130px;
top: 130px;
z-index: 3;
}
#king_of_diamonds {
position: absolute;
left: 145px;
top: 145px;
z-index: 4;
}
#ace_of_diamonds {
position: absolute;
left: 160px;
top: 160px;
z-index: 5;
}
Показать пример
Это относительно простой метод, но в нём заложены большие возможности. Вы можете размещать текст над изображением, изображение над текстом и т. д.
Резюме
Слои можно использовать в различных ситуациях. Например, попробуйте использовать z-indexдля эффектов с заголовками вместо создания этих заголовков как графических элементов. С одной стороны, текст загружается быстрее, а с другой - потенциально улучшается работа поисковых машин.
Урок 16: Web-стандарты и проверка кода
W3C это World Wide Web Consortium, независимая организация по разработке стандартов кодов Internet (например, HTML, CSS, XML и др.). Microsoft, The Mozilla Foundation и многие другие являются членами W3C и работают по соглашению о перспективах развития этих стандартов.
Если вы уже немного работаете в сфере web-дизайна, то, вероятно, знаете, что страницы могут выглядеть по-разному в различных браузерах. Это может причинять немалые неудобства и отнимать массу времени при создании страниц, которые будут просматриваться в Mozilla, Internet Explorer, Opera и во всех других существующих браузерах.
Идея стандартизации в том, чтобы заключить соглашение о развитии web-технологий. Это значит, что, действуя в рамках стандартов, web-разработчик может быть уверен, что он работает в стиле, который будет универсальным для различных платформ. Поэтому мы рекомендуем, чтобы вы следили за работой W3C и проверяли ваш CSS на соответствие стандарту.
Css validator/проверщик
Для облегчения проверки на соответствие CSS-стандарту, W3C создал так называемыйvalidator, который читает ваши таблицы стилей/stylesheet и возвращает список предупреждений о нарушениях и ошибок, если ваш CSS их содержит.
Чтобы облегчить проверку ваших таблиц стилей, можно делать это прямо с данной web-страницы. Просто замените указанный URL на URL вашей таблицы стилей и нажмите кнопку для проведения проверки. Затем W3C-сайт проинформирует вас, найдены ли ошибки.
Top of Form
Bottom of Form
Если validator не найдёт ошибок; будет показано изображение, которое вы можете разместить на вашем сайте для иллюстрации того, что вы проверяете код:
Этот validator можно также найти о этой ссылке: http://jigsaw.w3.org/css-validator/