Многие деревенские парни, у которых в деревне проблемы с Интернетом, давно просили меня обновить локальный справочник CSS, чтобы изучать веб-технологии в любой ситуации. К сожалению, мой любимый формат CHM, который замечательно подходит для всякого рода справочников, безнадёжно устарел и как с ним быть пока не знаю. Видимо, никак. Так что сделал справочник в виде набора HTML-файлов. Для просмотра нужен любой современный браузер и он у вас есть, раз вы это читаете.
Вот форма сразу для оплаты. Справочник стоит 50 рублей, считайте это вложением в новые уроки и книги по веб-технологиям.
Новый учебный курс от Джереми Томаса, посвящённый позиционированию элементов. Курс ориентирован на тех, кто уже прошёл предыдущие темы и освоил HTML и CSS.
Как обычно, каждый урок сопровождается интерактивными заданиями для закрепления материала, в конце приводится проверка знаний в виде тестовых вопросов.
Очередной учебный курс от Джереми Томаса, где рассказывается о блочной модели элемента. Как обычно, в конце курса небольшой тест для проверки знаний, в конце каждого урока интерактивные задания на закрепление материала.
Следующий учебный курс от Джереми Томаса для тех, кто хочет узнать чуть больше о CSS. Посвящён свойствам шрифта и текста. Как обычно, каждый урок сопровождается интерактивными заданиями для закрепления материала, в конце проверочный тест.
На сайте webref.ru новый курс по CSS от Джереми Томаса. К каждому уроку идут интерактивные задания для закрепления знаний, в конце курса проверочный тест. Желательно пройти предыдущие курсы по HTML, потому что без знания азов дальше продвигаться бессмысленно.
Очередная глава из книги Шэя Хоу с продвинутыми уроками по HTML и CSS. На этот раз посвящена разным селекторам, псевдоклассам и псевдоэлементам.
Новая глава в книге Уроки по HTML и CSS от Шэя Хоу. На этот раз посвящена теме типографики, а это подключение своих шрифтов, управление видом текста и букв. Читать.
Добавилось новое небольшое руководство Магия CSS. Оно никак не для новичков, а скорее для пользователей среднего или даже высокого уровня. Так что перед ознакомлением убедитесь, что вы знаете правила CSS и что такое селекторы.
Множество идей и знание проблем окажутся полезными, сам взял на вооружение несколько приёмов.
Эта книга, написанная создателями css-live.ru (Максимом Усачёвым aka psywalker и Ильёй Стрельцыным aka SelenIT), посвящена одной из самых важных и вместе с тем самой загадочной, неизученной, неоднозначной и полной неочевидных сюрпризов стороне действующей спецификации CSS — визуальному форматированию текста.
Поле для игры в так-тикс имеет размер 5х5 клеток, в каждой клетке содержится круглая фишка (рис. 1).
Рис. 1. Исходное поле для игры в так-тикс
При наведении курсора мыши на любую клетку подсвечивается ряд, строка и сама фишка (рис. 2).
Рис. 2. Вид поля при наведении на клетку курсора мыши
Периодически поднимается спор о целесообразности использования идентификаторов в вёрстке. Основной довод состоит в том, что идентификаторы предназначены для доступа и управления элементами веб-страницы с помощью скриптов, а для изменения стилей элементов должны применяться исключительно классы. В действительности нет разницы, через что задавать стили, но следует помнить о некоторых особенностях идентификаторов и классов, а также подводных камнях, которые могут поджидать разработчиков.
Валидацией называется проверка CSS-кода на соответствие спецификации CSS2.1 или CSS3. Соответственно, корректный код, не содержащий ошибок, называется валидный, а не удовлетворяющий спецификации — невалидный. Наиболее удобно делать проверку кода через сайт http://jigsaw.w3.org/css-validator/, с помощью этого сервиса можно указать адрес документа, загрузить файл или проверить набранный текст. Большим плюсом сервиса является поддержка русского и украинского языка.
Используя приведенный код HTML, оформите его с помощью стилей, как показано на рис. 1.
Рис. 1. Нумерация страниц
Самоучитель CSS доступен теперь в формате PDF. Практически это тот же текст, что и на сайте, но слегка доработан и дополнен. Также добавлено две новые главы «Валидация CSS» и «Идентификаторы и классы», которые не представлены на сайте. Еще один довод скачать файл.
Файл распространяется по лицензии Attribution-NonCommercial-NoDerivs 2.5 Generic (CC BY-NC-ND 2.5), так что вы можете свободно копировать, пересылать и публиковать этот справочник у себя.
При редактировании CSS-файла возникает противоречивая задача. С одной стороны код должен быть удобным для восприятия и редактирования, быстрого отыскания нужного селектора, для чего активно применяются отбивки, комментарии, пробелы и символы табуляции. С другой стороны, объем кода должен быть компактным и не содержать в себе ничего лишнего. Компактность позволяет несколько ускорить загрузку сайта и повысить его производительность.
Данное противоречие решается наличием двух версий CSS-файла: один для редактирования, а второй для загрузки на сервер. Сам же процесс сокращения кода называется минимизацией и вполне автоматизирован с помощью специализированных программ или сетевых сервисов. Но если приходится часто вносить изменения в CSS-файл, то процесс минимизации становится неудобным. Сами посудите, вначале надо отредактировать файл, затем его минимизировать и полученный код сохранить в файл, который нужно залить на сервер. Слишком много действий приходится совершать ради одного изменения. Логичнее было бы возложить задачу минимизации на сайт. Загрузили файл на сервер, и вот он уже в компактном виде отдается посетителям. Одно из таких универсальных решений называется minify, это библиотека на PHP5. Она минимизирует, объединяет и кэширует CSS-файлы, а также JavaScript.