Использование базовых элементов HTML, посвящена анализу возможных решений на основе семантической разметки контента.
- Выбор текстового редактора
- Кодирование простейшей HTML-страницы
- О DOCTYPE и его влиянии на макет страниц в Web-обозревателе
- Разметка заголовков
- Подобающее цитирование
- Вставка изображения
- Вставка звуковых файлов средствами HTML5
- Встраивание видео средствами HTML5
- Эффективное применение strong и em
- Создание списков
- Формирование ссылки на Web-страницу
- Разметка таблиц
- Создание vCard (hCard) средствами HTML
- Разметка события (hCalendar)
- Проверка правильности HTML-разметки
Основы CSS, содержит обсуждение основ CSS, а также некоторых средств, обеспечивающих наилучшие методы практической разработки.
- Применение правил CSS к Web-странице
- Применение базовых селекторов для стилевого оформления
- Применение селекторов прямого потомка
- Применение селекторов соседнего элемента
- Применение селекторов атрибута
- Применение псевдоклассов
- Применение псевдоэлементов
- Когда использовать селекторы класса и селекторы ID
- О свойствах CSS
- Представление о блочной модели
- Связь стилей с Web-страницей
- Об источниках CSS
- Порядок сортировки правил в CSS
- Применение !important для переопределения отдельных правил CSS
- Определение специфичности
- Как применять разные типы таблиц стилей
- Вставка комментариев в таблицы CSS
- Организация информации в таблице стилей
- Работа со свойствами с сокращенной формой записи
- Задание альтернативной таблицы стилей
- Применение плавающей модели
- Применение автовыравнивания плавающих элементов
- Применение абсолютного позиционирования
- Применение относительного позиционирования
- Применение сцепленного позиционирования
- Создание стека элементов с помощью z-index
- Проверка правил CSS
Web-типографика, расскажет вам про способы применения CSS для задания шрифтов на веб-странице, заголовков, врезок, абзацных отступов и про многое другое.
- Задание шрифтов
- Применение Web-безопасных шрифтов
- Задание стилизованного амперсанда
- Внедрение файлов шрифтов
- Принудительная разбивка действительно длинных слов
- Задание размеров шрифта
- Достижение большего соответствия размеров шрифтов в разных Web-обозревателях
- Установка дефисов, длинных и коротких тире
- Центрирование текста
- Задание выравнивания текста по ширине
- Обозначение избыточного текста многоточием
- Удаление свободного пространства между заголовками и абзацами
- Задание простой буквицы
- Формирование центрированной приподнятой буквицы большего размера
- Декоративное оформление приподнятой буквицы с помощью изображения
- Создание заголовка со стилизованным текстом
- Создание заголовка со стилизованным текстом и рамкой
- Стилевое оформление заголовка с помощью текста и изображения
- Создание врезки в HTML-тексте
- Расположение врезки сбоку от колонки
- Создание врезки с рамкой
- Создание врезки с изображениями
- Задание отступа в первой строке абзаца
- Задание отступа для всего абзаца
- Создание обратного отступа
- Стилевое оформление первой строки абзаца
- Стилевое оформление первой строки абзаца с помощью изображения
- Создание эффекта выделенного текста
- Изменение цвета при выделении текста
- Изменение межстрочных интервалов
- Добавление графической обработки HTML-текста
- Вставка тени за текстом
- Корректировка межбуквенных и межсловных пробелов
- Достижение ритмичности базовых линий в Web-типографике
- Стилевое оформление верхних и нижних индексов без нарушения базовой линии
- Отображение нескольких колонок текста
Изображения, описывает средства CSS, непосредственно связанные с применением стилей и свойств, относящихся к веб-графике.
- Преобразование средствами CSS цветных изображений в черно-белые в IE
- Вывод рамки вокруг изображения
- Установка вокруг изображения рамки со скругленными углами
- Удаление рамок, устанавливаемых по умолчанию вокруг изображений в некоторых Web-обозревателях
- Установка фонового изображения
- Создание полосы фоновых изображений
- Размещение фонового изображения
- Применение нескольких фоновых изображений в одном HTML-элементе
- Расположение изображений на рамке блока
- Создание закрепленного фонового изображения
- Изменение размеров изображений при изменении размеров окна Web-обозревателя
- Растяжение изображения на все окно Web-обозревателя
- Создание масштабируемых изображений
- Задание способа визуализации изображений в Web-обозревателе
- Поворот изображений средствами CSS
- Задание градиентов средствами CSS
- Создание прозрачных PNG-изображений для IE6 и более поздних версий
- Применение PNG-файлов с прозрачностью с помощью JavaScript
- Наложение HTML-текста на изображение
- Замещение HTML-текста изображением
- Создание панорамного представления изображения
- Комбинирование разных графических форматов
- Скругленные углы колонок с фиксированной шириной
- Скругленные углы (метод раздвижных дверей)
- Скругленные углы (метод горной вершины)
- Скругление углов с помощью JavaScript
- Вставка тени от элемента средствами CSS
- Вставка тени за изображением
- Вставка сглаженной тени за изображением
- Создание выносок с текстом
- Как помешать людям похищать ваши изображения
- Автоматическая вставка отражений в изображения
- Применение изображений-спрайтов
- Обрезка фоновых изображений
- Применение масок к изображениям и рамкам
Элементы страницы, собрала в себе набор несвязанных друг с другом тем, которые влияют на дизайн страницы в целом. Представленные здесь решения включают центрирование элементов, установку фонового изображения,
размещение рамок и другие средства оформления.
- Удаление полей страницы
- Сброс стилей, назначаемых Web-обозревателем по умолчанию
- Раскрашивание полосы прокрутки в IE
- Методы центрирования элементов на Web-странице
- Создание рамки страницы
- Вывод рамки вокруг окна просмотра Web-обозревателя
- Настройка горизонтального разделителя
- Добавление просмотра изображения в режиме Lightbox
- Изменение непрозрачности элементов
- Регулировка непрозрачности цвета фона
Списки, описывает различные варианты стилевого оформления элементов списка. Решения включают вопросы совместимости разных веб-обозревателей при отображении отступов в тексте, создание обратных отступов, включение пользовательских изображений в качестве маркеров списка и многое другое.
- Изменение формата списка
- Изменение цвета маркера списка
- Задание в списке отступов, одинаково отображаемых в разных Web-обозревателях
- Установка разделителей между элементами списка
- Создание пользовательских текстовых маркеров в списках
- Создание пользовательских маркеров-изображений в списках
- Вставка больших пользовательских маркеров-изображений в списки
- Улучшение представления списка с помощью графики
- Создание внутристрочных списков
- Создание обратных отступов в списке
- Смещение маркера внутрь списка
- Стилевое оформление списка определений
- Традиционное отображение киносценария с помощью элемента языка HTML5 dialog
- Превращение списка в дерево каталогов
- Создание системы "звездного" рейтинга
Ссылки и навигация. Здесь показано, как использовать CSS для управления представлением ссылок и наборов ссылок. Рассматриваются как простые решения, например удаление подчеркивания ссылок, так и более сложные, такие как создание динамического визуального меню.
- Легкое создание текстовых меню и подменю
- Удаление подчеркивания ссылок и другие приемы стилевого оформления
- Изменение цвета ссылок
- Удаление пунктирных линий при щелчке мышью по ссылкам в Internet Explorer
- Изменение цвета ссылок в разных секциях страницы
- Вывод пиктограмм в конце ссылок разных типов
- Меняющиеся курсоры
- Изменение внешнего вида ссылки при наведении указателя мыши без применения JavaScript
- Анимация ссылок с помощью свойств CSS3 transition при наведении указателя мыши
- Создание навигационных текстовых меню и визуальных эффектов при наведении указателя мыши на его пункты
- Вставка подменю в вертикальные меню
- Создание горизонтальных навигационных меню
- Построение горизонтальных навигационных меню с раскрывающимися меню
- Создание навигационного меню с клавишами доступа
- Создание переходов с помощью ссылок-цепочек
- Создание с помощью изображений визуальных эффектов наведения указателя мыши на ссылку
- Создание сворачиваемых меню
- Создание контекстных меню
- Создание всплывающих подсказок с помощью атрибута title
- Разработка динамического меню из закладок
- Изменяющиеся стили ссылок-якорей
Формы, посвящена обсуждению приемов преодоления недостатков стандартных методов визуализации форм в веб-обозревателях. Предлагаемые решения включают среди прочего установку стилей для элементов формы, установку кнопки Submit с одноразовым нажатием и стилевое оформление регистрационной формы.
- Изменение пробельной зоны вокруг формы
- Удаление пробельной зоны вокруг формы
- Задание стилей для элементов ввода
- Изменение стилей элементов формы при щелчке по ним кнопкой мыши
- Применение разных стилей к разным элементам ввода в одной форме
- Назначение стилей элементам textarea
- Задание стилей элементов select и option
- Создание поля поиска в стиле Macintosh
- Стили кнопок формы
- Создание изображения кнопки Submit
- Установка кнопки Submit-Once-Only
- Создание кнопки Submit в виде HTML-текста
- Как заставить текстовую HTML-ссылку действовать как кнопка Submit
- Разработка Web-формы без таблиц
- Разработка формы из двух колонок без применения таблиц
- Включение в форму информации для пользователей
- Стилевое оформление клавиш доступа в Web-формах
- Группировка общих элементов формы
- Ввод данных в форму в виде электронной таблицы
- Пример дизайна: простая регистрационная форма
- Пример дизайна: бланк регистрации
Таблицы, показывает, как задавать стили в HTML-таблицах. Несмотря на то, что CSS помогает исключить необходимость применения дизайн-проектов на базе HTML-таблиц, иногда все же требуется стилевое оформление табличных данных, таких как календари или статистические сведения.
- Задание границ и отступов в ячейках и таблицах
- Задание объема свободного пространства вокруг ячейки
- Задание стиля заголовка
- Задание стилей в ячейках таблицы
- Задание стилей для элементов шапки таблицы
- Удаление зазоров у изображений, помещенных в ячейки таблицы
- Устранение зазоров между ячейками таблицы
- Создание чередующихся цветов фона в строках таблицы
- Создание эффекта выделения цветом строки таблицы
- Пример проекта: элегантный календарь
Проектирование Web-страниц, предназначенных для печати. Здесь предоставлена информация о стилях, применяемых при печати веб-страниц. Обсуждаемые решения включают формирование отдельной таблицы стилей для печати веб-страницы, задание стилей для веб-форм и вставку URL после ссылок.
- Применение к Web-странице таблицы стилей для печати
- Замена цветного логотипа черно-белым при печати Web-страниц
- Создание готовой к печати Web-формы
- Отображение URI после ссылок
- Вставка специальных символов перед ссылками
- Вставка в документ для печати разрывов страниц
- Пример дизайна: версия страницы для печати, созданная средствами CSS
Макеты страниц, рассказывает о том, как можно использовать
технологию CSS для создания макетов. Здесь рассматриваются различные варианты формирования как одноколоночных, так и многоколоночных макетов.
- Построение одноколоночного макета
- Создание двухколоночного макета
- Построение двухколоночного макета с колонками фиксированной ширины
- Создание "резинового" многоколоночного макета с помощью плавающей модели
- Создание с помощью плавающей модели макета с тремя колонками фиксированной ширины
- Создание с помощью позиционирования "резинового" многоколоночного макета
- Создание с помощью позиционирования многоколоночного макета с колонками фиксированной ширины
- Использование плавающей модели для отображения колонок в произвольном порядке
- Проектирование асимметричного макета
- Проектирование макетов, не зависящих от разрешения
Программистские трюки, искусственные приемы и выявление неисправностей. Здесь вы найдете способы скрывания таблиц стилей, которые не могут быть обработаны определенными веб-обозревателями. Приведены примеры
скрывания таблиц стилей от Internet Explorer для Windows и других версий.
- Переопределение встроенных стилей
- Диагностика ошибок CSS и проблем Web-обозревателей
- Применение букмарклетов для поиска ошибок
- Применение расширений Web-обозревателя для поиска ошибок
- Исправление Internet Explorer 6
- Исправление Internet Explorer 6 с помощью JavaScript
- Использование условных комментариев для передачи стилей в разные версии Internet Explorer
- Применение фильтров CSS для передачи правил в практически любой Web-обозреватель
- Установка интеллектуальной системы передачи CSS для современных Web-обозревателей
- Тестирование дизайна сайта на нескольких платформах с помощью единственного компьютера
- Проверка Web-сайта с помощью текстового Web-обозревателя
Проектирование с помощью CSS, является определяющей. Подчеркивая, что технология CSS – лишь средство воплощения дизайна, она описывает роль текста увеличенного размера, значение контраста и способы создания панорамного отображения.
- Существенное увеличение размера шрифта
- Создание неожиданного сочетания
- Комбинирование разнородных элементов для создания контраста
- Привлечение взгляда с помощью контраста
- Проверка достаточности цветового контраста
- Выделение цитаты с помощью эффектных кавычек
- Задание перемещающейся фоновой сцены при изменении пользователем размеров окна
- Вставка анимации в элементы на странице
- Создание отображения фейерверков при прокрутке страницы пользователем
- Настройка таблицы стилей для просмотра исходного кода в Firefox
- Проектирование с помощью сетки (наборы CSS)
- Пример дизайна: связный Web-дизайн
- Пример дизайна: флаг США
Взаимодействие с JavaScript, показывает, как для получения сложных визуальных эффектов применять JavaScript библиотеку jQuery.
- Проверка, включен ли JavaScript в Web-обозревателе
- Применение разных таблиц стилей в зависимости от времени суток
- Перенаправление на сайт для мобильных устройств в зависимости от ширины экрана Web-обозревателя
- Вставка в Web-страницу библиотеки JavaScript
- Применение селекторов CSS3 в IE6 и IE7
- Создание с помощью JavaScript HTML-таблицы с окраской зебры
- Выделение цветом строки таблицы при наведении указателя мыши
- Визуальное оформление простого наведения указателя мыши
- Формирование строки одной высоты из элементов с разным объемом контента
- Задание ссылки, открывающей новое окно
- Превращение элемента div целиком в элемент, активируемый щелчком мыши
- Поддержка средствами JavaScript формата PNG в IE6
- Предоставление кода на HTML5 и свойств CSS3 Web-обозревателям, способным их обрабатывать
- Источники
- Свойства CSS 2.1 и специализированные дополнения
- Селекторы, псевдоклассы и псевдоэлементы CSS 2.1
- Селекторы и псевдоклассы CSS3
- Стилевое оформление элементов форм
