CSS. Рецепты программирования

Книга может служить справочником для WEB-дизайнеров,использующих CSS в своей работе.

Шмитт К."CSS. Рецепты программирования", «БХВ-Петербург», 2011 стр, 672 стр, ил, (23,1 мб,djvu)

Книга посвящена работе с каскадными таблицами стилей.Освещаются основы и тонкости программирования CSS.

 

Отрывок из книги:

Web-типографика Обсуждение Одна из сильных сторон технологии CSS — ее способ управления Web-типографикой. Web-дизайнеры и разработчики больше не должны применять напоминающие головоломку наборы вложенных элементов font, и однопиксельные GIF-фокусы для привлекательного оформления текста. Технология CSS может справиться с легкостью с таким действием, как настройка расстояний между двумя буквами или разделение слов в абзаце.

Кернинг и трекинг Корректировка межбуквенных расстояний для улучшения эстетического впечатления — старая традиция в графическом дизайне. Есть два термина, описывающих разные влияния величины межбуквенных пробелов на текст: кернинг (kerning) и трекинг (tracking).
Кернинг— это дизайнерский термин, используемый для описания изменения расстояния между парой букв для улучшения визуального впечатления. Примером кернинга может служить изменение расстояния между заглавной буквой Т и строчной буквой i. Трекинг определяет настройку расстояний между буквами в большом фрагменте текста, а не между парой букв.

Свойство word-spacing поддерживается в Web-обозревателях Firefox, Internet Explorer 6 для Windows и более поздних версиях, Opera 3.5 и более поздних версиях и Safari. Проверенные практические рекомендации. Для повышения эффективности свойства letter-spacing и word-spacing следует задавать в относительных, а не в абсолютных единицах длины.

Поскольку пользователи могут изменять размеры шрифтов в своих Web-обозревателях, фиксированное значение расстояния— 5 пунктов, первоначально предназначенное для размера шрифта 12 пикселов, не изменится, даже если пользователь увеличит шрифт. Другими словами, расстояние между буквами 5 пунктов едва ли будет заметно, если будет задан размер шрифта 72 пиксела или больший.
В случае относительных единиц, таких как ет, значение 1.5 ет для свойства letter-spacing будет масштабироваться одновременно с изменением размера шрифта. Кроме того, лучший вариант визуальных эффектов, применяемых к тексту, — сохранение удобочитаемости текста вне зависимости от использованного стилевого оформления.

Если вам и вашему клиенту важно общение, слабое стилевое оформление лучше, чем создание текстовых элементов, понятных только посвященным. Если текст становится неразборчивым, вы можете утомить всех, с кем пытаетесь связаться. См. также Свойство letter-spacing в спецификации CSS2.1 на странице http://www.w3.org/TR/ CSS21/text.html#propdef-letter-spacing; свойство word-spacing на http://www.w3.org/ TR/CSS21/text.html#propdef-word-spacing; дополнительную информацию о кернинге и трекинге на странице http://desktoppub.about.eom/cs/typespacing/a/kerningtracking.htm. Cascading Style Sheets (каскадные таблицы стилей)-без этой технологии современного Web-дизайна не обходится ни одна Web-страница.

Данная книга как раз и рассказывает об этой синтаксической структуре. Если вы знакомы с возможностями CSS, но не владеете основами дизайна, эта книга будет полезна и вам. В ней описаны элементы дизайна, начиная от основ Web-типографики и заканчивая макетами страниц, а также включена глава, описывающая приемы образцового дизайна и способная подсказать вам удачное решение.

Оглавление
Предисловие .13
Введение 15
Для кого предназначена эта книга 16
Допущения, принятые в книге 16
Содержание книги .18
Соглашения, использованные в книге 20
Использование кода примеров .20
Как связаться с издательством O'Reilly 21
Safari® Books Online 22
Благодарности. .22

Глава 1. Использование базовых элементов HTML .25
1.1. Выбор текстового редактора .26
1.2. Кодирование простейшей HTML-страницы .28
1.3. О DOCTYPE и его влиянии на макет страниц в Web-обозревателе .30
1.4. Разметка заголовков 34
1.5. Подобающее цитирование .36
1.6. Вставка изображения 37
1.7. Вставка звуковых файлов средствами HTML5 .39
1.8. Встраивание видео средствами HTML5 .40
1.9. Эффективное применение strong нет .42
1.10. Создание списков .43
1.11. Формирование ссылки на Web-страницу .45
1.12. Разметка таблиц. 47
1.13. Создание vCard (hCard) средствами HTML .49
1.14. Разметка события (hCalendar) .51
1.15. Проверка правильности HTML-разметки .51

Глава 2. Основы CSS .54
2.1. Применение правил CSS к Web-странице .55
2.2. Применение базовых селекторов для стилевого оформления .58
2.3. Применение селекторов прямого потомка 67
2.4. Применение селекторов соседнего элемента .68
2.5. Применение селекторов атрибута .70
2.6. Применение псевдоклассов .72
2.7. Применение псевдо элементов .73
2.8. Когда использовать селекторы класса и селекторы ID .75
2.9. О свойствах CSS 80
2.10. Представление о блочной модели .81
2.11. Связь стилей с Web-страницей .87
2.12. Об источниках CSS. 90
2.13. Порядок сортировки правил в CSS 91
2.14. Применение !important для переопределения отдельных правил CSS .93
2.15. Определение специфичности. 94
2.16. Как применять разные типы таблиц стилей ..96
2.17. Вставка комментариев в таблицы CSS .101
2.18. Организация информации в таблице стилей 102
2.19. Работа со свойствами с сокращенной формой записи .104
2.20. Задание альтернативной таблицы стилей 106
2.21. Применение плавающей модели 107
2.22. Применение автовыравнивания плавающих элементов 109
2.23. Применение абсолютного позиционирования .112
2.24. Применение относительного позиционирования 114
2.25. Применение сцепленного позиционирования .116
2.26. Создание стека элементов с помощью z-index 118
2.27. Проверка правил CSS 118

Глава 3. Web-типографика 121
3.1. Задание шрифтов 122
3.2. Применение Web-безопасных шрифтов .125
3.3. Задание стилизованного амперсанда 128
3.4. Внедрение файлов шрифтов 130
3.5. Принудительная разбивка действительно длинных слов 134
3.6. Задание размеров шрифта .135
3.7. Достижение большего соответствия размеров шрифтов в разных Web-обозревателях 137
3.8. Установка дефисов, длинных и коротких тире .141
3.9. Центрирование текста 142
3.10. Задание выравнивания текста по ширине 142
3.11. Обозначение избыточного текста многоточием 144
3.12. Удаление свободного пространства между заголовками и абзацами 145
3.13. Задание простой буквицы 146
3.14. Формирование центрированной приподнятой буквицы большего размера .147
3.15. Декоративное оформление приподнятой буквицы с помощью изображения 149
3.16. Создание заголовка со стилизованным текстом 151
3.17. Создание заголовка со стилизованным текстом и рамкой 153
3.18. Стилевое оформление заголовка с помощью текста и изображения 155
3.19. Создание врезки в HTML-тексте .157
3.20. Расположение врезки сбоку от колонки 159
3.21. Создание врезки с рамкой 160
3.22. Создание врезки с изображениями .162
3.23. Задание отступа в первой строке абзаца 165
3.24. Задание отступа для всего абзаца 166
3.25. Создание обратного отступа .169
3.26. Стилевое оформление первой строки абзаца .171
3.27. Стилевое оформление первой строки абзаца с помощью изображения 173
3.28. Создание эффекта выделенного текста 174
3.29. Изменение цвета при выделении текста 175
3.30. Изменение межстрочных интервалов 176
3.31. Добавление графической обработки HTML-текста 178
3.32. Вставка тени за текстом 180
3.33. Корректировка межбуквенных и межсловных пробелов 183
3.34. Достижение ритмичности базовых линий в Web-типографике 186
3.35. Стилевое оформление верхних и нижних индексов без нарушения базовой линии 188
3.36. Отображение нескольких колонок текста .189

Глава 4. Изображения 192
4.1. Преобразование средствами CSS цветных изображений в черно-белые в IE 192
4.2. Вывод рамки вокруг изображения 193
4.3. Установка вокруг изображения рамки со скругленными углами 195
4.4. Удаление рамок, устанавливаемых по умолчанию вокруг изображений в некоторых Web-обозревателях 197
4.5. Установка фонового изображения. 199
4.6. Создание полосы фоновых изображений .200
4.7. Размещение фонового изображения 201
4.8. Применение нескольких фоновых изображений в одном HTML-элементе 204
4.9. Расположение изображений на рамке блока 206
4.10. Создание закрепленного фонового изображения .209
4.11. Изменение размеров изображений при изменении размеров окна Web-обозревателя. 212
4.12. Растяжение изображения на все окно Web-обозревателя .214
4.13. Создание масштабируемых изображений 215
4.14. Задание способа визуализации изображений в Web-обозревателе 217
4.15. Поворот изображений средствами CSS .218
4.16. Задание градиентов средствами CSS .220
4.17. Создание прозрачных PNG-изображений для IE6 и более поздних версий .222
4.18. Применение PNG-файлов с прозрачностью с помощью JavaScript 224
4.19. Наложение HTML-текста на изображение 227
4.20. Замещение HTML-текста изображением 229
4.21. Создание панорамного представления изображения 232
4.22. Комбинирование разных графических форматов .233
4.23. Скругленные углы колонок с фиксированной шириной 239
4.24. Скругленные углы (метод раздвижных дверей) 241
4.25. Скругленные углы (метод горной вершины) .245
4.26. Скругление углов с помощью JavaScript 248
4.27. Вставка тени от элемента средствами CSS 252
4.28. Вставка тени за изображением 253
4.29. Вставка сглаженной тени за изображением 256
4.30. Создание выносок с текстом 260
4.31. Как помешать людям похищать ваши изображения .263
4.32. Автоматическая вставка отражений в изображения .265
4.33. Применение изображений-спрайтов .267
4.34. Обрезка фоновых изображений 269
4.35. Применение масок к изображениям и рамкам .271

Глава 5. Элементы страницы 274
5.1. Удаление полей страницы 274
5.2. Сброс стилей, назначаемых Web-обозревателем по умолчанию 277
5.3. Раскрашивание полосы прокрутки в IE .281
5.4. Методы центрирования элементов на Web-странице .284
5.5. Создание рамки страницы .289
5.6. Вывод рамки вокруг окна просмотра Web-обозревателя 291
5.7. Настройка горизонтального разделителя 293
5.8. Добавление просмотра изображения в режиме Lightbox 295
5.9. Изменение непрозрачности элементов 300
5.10. Регулировка непрозрачности цвета фона 302

Глава 6. Списки 306
6.1. Изменение формата списка 307
6.2. Изменение цвета маркера списка 309
6.3. Задание в списке отступов, одинаково.отображаемых в разных Web-обозревателях..310
6.4. Установка разделителей между элементами списка 311
6.5. Создание пользовательских текстовых маркеров в списках .313
6.6. Создание пользовательских маркеров-изображений в списках .315
6.7. Вставка больших пользовательских маркеров-изображений в списки .318
6.8. Улучшение представления списка с помощью графики .320
6.9. Создание внутри строчных списков 324
6.10. Создание обратных отступов в списке .326
6.11. Смещение маркера внутрь списка .327
6.12. Стилевое оформление списка определений .329
6.13. Традиционное отображение киносценария с помощью элемента языка HTML5 dialog 335
6.14. Превращение списка в дерево каталогов 336
6.15. Создание системы "звездного" рейтинга 340

Глава 7. Ссылки и навигация 345
7.1. Легкое создание текстовых меню и подменю .345
7.2. Удаление подчеркивания ссылок и другие приемы стилевого оформления 347
7.3. Изменение цвета ссылок 350
7.4. Удаление пунктирных линий при щелчке мышью по ссылкам в Internet Explorer 351
7.5. Изменение цвета ссылок в разных секциях страницы 352
7.6. Вывод пиктограмм в конце ссылок разных типов .353
7.7. Меняющиеся курсоры .354
7.8. Изменение внешнего вида ссылки при наведении указателя мыши без применения JavaScript 356
7.9. Анимация ссылок с помощью свойств CSS3 transition при наведении указателя мыши 358
7.10. Создание навигационных текстовых меню и визуальных эффектов при наведении указателя мыши на его пункты .362
7.11. Вставка подменю в вертикальные меню 366
7.12. Создание горизонтальных навигационных меню. 369
7.13. Построение горизонтальных навигационных меню с раскрывающимися меню 375
7.14. Создание навигационного меню с клавишами доступа .377
7.15. Создание переходов с помощью ссылок-цепочек 379
7.16. Создание с помощью изображений визуальных эффектов наведения указателя мыши на ссылку .382
7.17. Создание сворачиваемых меню 387
7.18. Создание контекстных меню .389
7.19. Создание всплывающих подсказок с помощью атрибута title .392
7.20. Разработка динамического меню из закладок .393
7.21. Изменяющиеся стили ссылок-якорей .395

Глава 8. Формы .400
8.1. Изменение пробельной зоны вокруг формы .400
8.2. Удаление пробельной зоны вокруг формы 401
8.3. Задание стилей для элементов ввода .402
8.4. Изменение стилей элементов формы при щелчке по ним кнопкой мыши .405
8.5. Применение разных стилей к разным элементам ввода в одной форме 406
8.6. Назначение стилей элементам textarea 407
8.7. Задание стилей элементов select и option .409
8.8. Создание поля поиска в стиле Macintosh .411
8.9. Стили кнопок формы 413
8.10. Создание изображения кнопки Submit 417
8.11. Установка кнопки Submit-Once-Only 418
8.12. Создание кнопки Submit в виде HTML-текста .419
8.13. Как заставить текстовую HTML-ссылку действовать как кнопка Submit .421
8.14. Разработка Web-формы без таблиц. .422
8.15. Разработка формы из двух колонок без применения таблиц .424
8.16. Включение в форму информации для пользователей. .427
8.17. Стилевое оформление клавиш доступа в Web-формах 429
8.18. Группировка общих элементов формы .431
8.19. Ввод данных в форму в виде электронной таблицы 432
8.20. Пример дизайна: простая регистрационная форма 436
8.21. Пример дизайна: бланк регистрации 442

Глава 9. Таблицы 454
9.1. Задание границ и отступов в ячейках и таблицах 454
9.2. Задание объема свободного пространства вокруг ячейки 457
9.3. Задание стиля заголовка 458
9.4. Задание стилей в ячейках таблицы .459
9.5. Задание стилей для элементов шапки таблицы 461
9.6. Удаление зазоров у изображений, помещенных в ячейки таблицы .463
9.7. Устранение зазоров между ячейками таблицы .465
9.8. Создание чередующихся цветов фона в строках таблицы .466
9.9. Создание эффекта выделения цветом строки таблицы .469
9.10. Пример проекта: элегантный календарь 470

Глава 10. Проектирование Web-страниц, предназначенных для печати 480
10.1. Применение к Web-странице таблицы стилей для печати 480
10.2. Замена цветного логотипа черно-белым при печати Web-страниц .482
10.3. Создание готовой к печати Web-формы 484
10.4. Отображение URI после ссылок .489
10.5. Вставка специальных символов перед ссылками .490
10.6. Вставка в документ для печати разрывов страниц. 492
10.7. Пример дизайна: версия страницы для печати, созданная средствами CSS .493

Глава 11. Макеты страниц .503
11.1. Построение одноколоночного макета .503
11.2. Создание двухколоночного макета .505
11.3. Построение двухколоночного макета с колонками фиксированной ширины .509
11.4. Создание "резинового” многоколоночного макета с помощью плавающей модели .512
11.5. Создание с помощью плавающей модели макета с тремя колонками фиксированной ширины .515
11.6. Создание с помощью позиционирования ’’резинового” многоколоночного макета...518
11.7. Создание с помощью позиционирования многоколоночного макета с колонками фиксированной ширины .521
11.8. Использование плавающей модели для отображения колонок в произвольном порядке 522
11.9. Проектирование асимметричного макета .541
11.10. Проектирование макетов, не зависящих от разрешения .544

Глава 12. Программистские трюки, искусственные приемы и выявление неисправностей 548
12.1. Переопределение встроенных стилей .549
12.2. Диагностика ошибок CSS и проблем Web-обозревателей .549
12.3. Применение букмарклетов для поиска ошибок .551
12.4. Применение расширений Web-обозревателя для поиска ошибок .552
12.5. Исправление Internet Explorer 6 ..553
12.6. Исправление Internet Explorer 6 с помощью JavaScript .555
12.7. Использование условных комментариев для передачи стилей в разные версии Internet Explorer. .556
12.8. Применение фильтров CSS для передачи правил в практически любой Web-обозреватель .558
12.9. Установка интеллектуальной системы передачи CSS для современных Web-обозревателей .559
12.10. Тестирование дизайна сайта на нескольких платформах с помощью единственного компьютера 561
12.11. Проверка Web-сайта с помощью текстового Web-обозревателя .562

Глава 13. Проектирование с помощью CSS .564
13.1. Существенное увеличение размера шрифта 564
13.2. Создание неожиданного сочетания .566
13.3. Комбинирование разнородных элементов для создания контраста .569
13.4. Привлечение взгляда с помощью контраста 570
13.5. Проверка достаточности цветового контраста .572
13.6. Выделение цитаты с помощью эффектных кавычек 574
13.7. Задание перемещающейся фоновой сцены при изменении пользователем размеров окна .576
13.8. Вставка анимации в элементы на странице .578
13.9. Создание отображения фейерверков при прокрутке страницы пользователем .583
13.10. Настройка таблицы стилей для просмотра исходного кода в Firefox .584
13.11. Проектирование с помощью сетки (наборы CSS) 585
13.12. Пример дизайна: связный Web-дизайн .588
13.13. Пример дизайна: флаг США. .605

Глава 14. Взаимодействие с JavaScript .618
14.1. Проверка, включен ли JavaScript в Web-обозревателе .618
14.2. Применение разных таблиц стилей в зависимости от времени суток .619
14.3. Перенаправление на сайт для мобильных устройств в зависимости от ширины экрана Web -обозревателя 621
14.4. Вставка в Web-страницу библиотеки JavaScript .622
14.5. Применение селекторов CSS3 в IЕ 6 и IE 7. .623
14.6. Создание с помощью JavaScript HTML-таблицы с окраской зебры .625
14.7. Выделение цветом строки таблицы при наведении указателя мыши 627
14.8. Визуальное оформление простого наведения указателя мыши .629
14.9. Формирование строки одной высоты из элементов с разным объемом контента. 630
14.10. Задание ссылки, открывающей новое окно .633
14.11. Превращение элемента div целиком в элемент, активируемый щелчком мыши...634
14.12. Поддержка средствами JavaScript формата PNG в IE6. 636
14.13. Предоставление кода на HTML5 и свойств CSS3 Web-обозревателям, способным их обрабатывать. .638

Приложение 1. Источники .641
Основные обучающие материалы, относящиеся к языку HTML и технологии CSS 641
Дизайнерские ресурсы .642
Дискуссионные группы. .643
Справочные материалы .644
Программные средства. 645

Приложение 2. Свойства CSS 2.1 и специализированные дополнения .647
Приложение 3. Селекторы, псевдоклассы и псевдоэлементы CSS 2.1 ..661
Приложение 4. Селекторы и псевдоклассы CSS3. ..664
Приложение 5. Стилевое оформление элементов форм. .667
Предметный указатель .668
Скачать