Робин Никсон | HTML5 и CSS3. Мастер-класс (2024) [PDF]

Оглавление
Предисловие ................................................................................................................... 15
Об авторе.......................................................................................................................... 17
ГЛАВА 1. Начальные сведения о HTML5 и CSS3.................................................. 19
Введение .......................................................................................................................... 19
Структура......................................................................................................................... 21
Цели.................................................................................................................................. 21
Знакомство с HTTP и HTML.......................................................................................... 21
Знакомство с CSS ............................................................................................................ 24
Использование атрибутов id и class............................................................................... 25
Чем обусловлена необходимость применения HTML5 и CSS3 ................................. 28
Заключение ...................................................................................................................... 29
ГЛАВА 2. Установка веб-сервера .............................................................................. 31
Вступление ...................................................................................................................... 31
Структура......................................................................................................................... 31
Цели.................................................................................................................................. 31
Представление о WAMP, MAMP и LAMP ................................................................... 32
Установка под Windows ................................................................................................. 32
Работа с корнем документа ............................................................................................ 36
Установка под MacOS .................................................................................................... 39
Работа с корнем документа ............................................................................................ 41
Установка под Linux ....................................................................................................... 43
Работа с корнем документа ............................................................................................ 44
Заключение ...................................................................................................................... 44
ГЛАВА 3. Visual Studio Code....................................................................................... 45
Вступление ...................................................................................................................... 45
Структура......................................................................................................................... 45
Цели.................................................................................................................................. 45
Популярность VS Code................................................................................................... 46
Установка VS Code под Windows.................................................................................. 47
Установка VS Code под MacOS ..................................................................................... 49
Установка VS Code под Linux........................................................................................ 51
Начало работы с VS Code............................................................................................... 52
Заключение ...................................................................................................................... 54
ГЛАВА 4. Консоль разработчика............................................................................... 55
Вступление ...................................................................................................................... 55
Структура......................................................................................................................... 55
Цели.................................................................................................................................. 55
Доступ к консоли разработчика..................................................................................... 56
Польза, извлекаемая из работы с консолью ................................................................. 60
Автозавершение .............................................................................................................. 61
Просмотр элементов ....................................................................................................... 63
Заключение ...................................................................................................................... 65
ГЛАВА 5. Введение в HTML5..................................................................................... 67
Введение .......................................................................................................................... 67
Структура......................................................................................................................... 67
Цели.................................................................................................................................. 68
HTML5 гораздо серьезнее, чем просто HTML4 + 1..................................................... 68
SVG и MathML ................................................................................................................ 79
Заключение ...................................................................................................................... 80
ГЛАВА 6. Использование холста в HTML5............................................................. 81
Введение .......................................................................................................................... 81
Структура......................................................................................................................... 81
Цели.................................................................................................................................. 81
Ускоренный курс JavaScript........................................................................................... 82
Размещение кода внутри тегов <script> ........................................................................ 82
Размещение кода в отдельном файле ............................................................................ 85
Функция getElementByID()............................................................................................. 87
Превращение холста в изображение ............................................................................. 88
Заключение ...................................................................................................................... 90
ГЛАВА 7. Прямоугольники и заливки ..................................................................... 91
Введение .......................................................................................................................... 91
Структура......................................................................................................................... 91
Цели.................................................................................................................................. 91
О примерах работы с холстом ....................................................................................... 92
Рисование прямоугольников.......................................................................................... 93
Использование переменных........................................................................................... 94
Применение стилей рисования ...................................................................................... 95
Изменение толщины линии............................................................................................ 96
Очистка прямоугольника ............................................................................................... 97
Применение градиентной заливки................................................................................. 98
Применение радиального градиента ........................................................................... 100
Разноцветные градиентные заливки............................................................................ 101
Использование заполнения узором ............................................................................. 103
Использование перемещения....................................................................................... 106
Заключение .................................................................................................................... 109
ГЛАВА 8. Надписи на холсте .................................................................................... 111
Введение ........................................................................................................................ 111
Структура....................................................................................................................... 111
Цели................................................................................................................................ 111
Создание надписей........................................................................................................ 112
Изменение способа отображения текста..................................................................... 112
Выравнивание текста .................................................................................................... 113
Изменение толщины обводки ...................................................................................... 115
Надписи с заполнением ................................................................................................ 118
Использование узора для заполнения надписи .......................................................... 121
Заключение .................................................................................................................... 122
ГЛАВА 9. Рисование на холсте................................................................................. 123
Введение ........................................................................................................................ 123
Структура....................................................................................................................... 123
Цели................................................................................................................................ 123
Рисование линий с использованием путей ................................................................. 124
Применение заполнений............................................................................................... 128
Ограничения областей холста...................................................................................... 128
Рисование кривых линий.............................................................................................. 131
Выбор направления....................................................................................................... 132
Рисование дуги к конкретной точке............................................................................ 136
Использование аттракторов ......................................................................................... 138
Завершение и схождение линий .................................................................................. 141
Заключение .................................................................................................................... 144
ГЛАВА 10. Работа с холстом..................................................................................... 145
Введение ........................................................................................................................ 145
Структура....................................................................................................................... 145
Цели................................................................................................................................ 145
Рисование с использованием изображений ................................................................ 146
Извлечение частей изображений ................................................................................. 148
Использование холста в качестве исходного изображения ...................................... 149
Прикрепление теней ..................................................................................................... 151
Тени прикрепляются не только к изображениям ....................................................... 153
Непосредственное редактирование пикселей............................................................. 154
Как хранятся данные о цвете ....................................................................................... 156
Последовательный перебор данных............................................................................ 157
Обработка данных изображения.................................................................................. 157
Усреднение данных о цвете ......................................................................................... 158
Другие эффекты ............................................................................................................ 158
Создание собственных данных изображения............................................................. 162
Заключение .................................................................................................................... 162
ГЛАВА 11. Расширенные возможности работы с холстом ................................. 163
Введение ........................................................................................................................ 163
Структура....................................................................................................................... 163
Цели................................................................................................................................ 163
Выстраивание композиции и прозрачность ............................................................... 164
Использование цикла.................................................................................................... 167
Рисование изображения................................................................................................ 167
Изменение прозрачности.............................................................................................. 168
Применение преобразований ....................................................................................... 169
Использование поворотов ............................................................................................ 171
Применение перемещений ........................................................................................... 172
Применение сразу нескольких преобразований......................................................... 173
Заключение .................................................................................................................... 173
ГЛАВА 12. Применение геолокации ....................................................................... 175
Введение ........................................................................................................................ 175
Структура....................................................................................................................... 175
Цели................................................................................................................................ 176
Что такое GPS................................................................................................................ 176
Альтернативы применению GPS ................................................................................. 176
Проверка доступности геолокации ............................................................................. 177
Использование консоли разработчика ........................................................................ 179
Перенаправление пользователей ................................................................................. 180
Получение сведений о местоположении пользователя ............................................. 182
Именованные функции................................................................................................. 184
Когда получено разрешение......................................................................................... 185
Заключение .................................................................................................................... 186
ГЛАВА 13. Работа с формами................................................................................... 187
Введение ........................................................................................................................ 187
Структура....................................................................................................................... 187
Цели................................................................................................................................ 187
Атрибуты формы HTML5 ............................................................................................ 188
Атрибут autofocus.......................................................................................................... 188
Атрибут autocomplete.................................................................................................... 190
Атрибут form ................................................................................................................. 191
Атрибут formaction........................................................................................................ 193
Другие переопределения формы ................................................................................. 194
Атрибут multiple............................................................................................................ 195
Атрибут novalidate ........................................................................................................ 196
Атрибуты width и height ............................................................................................... 196
Атрибут list и теги <datalist> и <option> ..................................................................... 197
Атрибуты min, max и step............................................................................................. 198
Другие типы ввода даты и времени............................................................................. 200
Атрибут pattern .............................................................................................................. 200
Атрибут placeholder ...................................................................................................... 201
Атрибут required............................................................................................................ 202
Тип ввода color .............................................................................................................. 203
Числа и диапазоны ........................................................................................................ 204
Тип ввода search ............................................................................................................ 206
Заключение .................................................................................................................... 207
ГЛАВА 14. Локальное хранилище и многое другое............................................. 209
Введение ........................................................................................................................ 209
Структура....................................................................................................................... 209
Цели................................................................................................................................ 209
Использование локального хранилища....................................................................... 210
Хранение и извлечение локальных данных................................................................ 210
Удаление и очистка локальных данных...................................................................... 213
Использование взамен этого хранилища сеансов ...................................................... 214
Микроданные ................................................................................................................ 214
Веб-воркеры................................................................................................................... 217
Автономные веб-приложения ...................................................................................... 220
Как работают автономные веб-приложения............................................................... 220
Перетаскивание ............................................................................................................. 222
Обмен сообщениями между документами ................................................................. 223
Заключение .................................................................................................................... 223
ГЛАВА 15. Аудио и видео .......................................................................................... 225
Введение ........................................................................................................................ 225
Структура....................................................................................................................... 225
Цели................................................................................................................................ 225
Аудио в HTML5 ............................................................................................................ 226
Аудиокодеки.................................................................................................................. 226
Воспроизведение аудио ................................................................................................ 227
Видео в HTML5............................................................................................................. 229
Видеокодеки .................................................................................................................. 230
Воспроизведение видео ................................................................................................ 230
Заключение .................................................................................................................... 236
ГЛАВА 16. Введение в CSS3...................................................................................... 237
Введение ........................................................................................................................ 237
Структура....................................................................................................................... 237
Цели................................................................................................................................ 237
Разработка CSS3 продолжается ................................................................................... 238
Новое в CSS3 ................................................................................................................. 239
Селекторы атрибутов.................................................................................................... 239
Фоновые решения ......................................................................................................... 240
Границы ......................................................................................................................... 242
Тени блоков ................................................................................................................... 244
Столбцы и перетекания ................................................................................................ 246
Цвета и прозрачность.................................................................................................... 247
Текстовые эффекты и шрифты .................................................................................... 248
Перемещения и преобразования.................................................................................. 250
Flexbox-разметка ........................................................................................................... 252
Flexbox как отдельный модуль .................................................................................... 252
CSS grid .......................................................................................................................... 255
Заключение .................................................................................................................... 258
ГЛАВА 17. Селекторы атрибутов CSS3.................................................................. 259
Введение ........................................................................................................................ 259
Структура....................................................................................................................... 259
Цели................................................................................................................................ 259
Селекторы атрибутов CSS............................................................................................ 260
Селектор по имени атрибута........................................................................................ 260
Селектор по значению атрибута .................................................................................. 261
Селектор по слову из списка........................................................................................ 262
Селектор по дефису ...................................................................................................... 263
Селектор по начальным символам .............................................................................. 264
Селектор по конечным символам................................................................................ 265
Глобальный селектор.................................................................................................... 267
Флажок невосприимчивости к регистру символов.................................................... 268
Флажок восприимчивости к регистру символов........................................................ 269
Заключение .................................................................................................................... 270
ГЛАВА 18. Создание фона......................................................................................... 271
Введение ........................................................................................................................ 271
Структура....................................................................................................................... 271
Цели................................................................................................................................ 271
Обрезка и начало фона ................................................................................................. 272
Литералы шаблонов ...................................................................................................... 272
Использование свойства background-clip.................................................................... 274
Использование свойства background-origin ................................................................ 275
Совместное использование обрезки и начала фона................................................... 275
Раздел сценария JavaScript ........................................................................................... 278
Размер фона ................................................................................................................... 280
Использование градиентов........................................................................................... 282
Точки остановки цвета ................................................................................................. 284
Удаленность точек остановки цвета и повторения.................................................... 284
Радиальные и конические градиенты.......................................................................... 285
Заключение .................................................................................................................... 286
ГЛАВА 19. Построение границ................................................................................. 287
Введение ........................................................................................................................ 287
Структура....................................................................................................................... 287
Цели................................................................................................................................ 287
Радиус границы ............................................................................................................. 288
Цвета границ.................................................................................................................. 290
Градиентные границы................................................................................................... 291
Использование нескольких фонов............................................................................... 293
Использование одного изображения........................................................................... 295
Заключение .................................................................................................................... 298
ГЛАВА 20. Свойства блока и текста ....................................................................... 299
Введение ........................................................................................................................ 299
Структура....................................................................................................................... 299
Цели................................................................................................................................ 299
Добавление теней.......................................................................................................... 299
Переполнение элементов.............................................................................................. 302
Макет, составленный из нескольких колонок ............................................................ 303
Заключение .................................................................................................................... 309
ГЛАВА 21. Цвета и прозрачность............................................................................ 311
Введение ........................................................................................................................ 311
Структура....................................................................................................................... 311
Цели................................................................................................................................ 311
RGB-цвета...................................................................................................................... 312
Использование цветового круга .................................................................................. 315
RGBA-цвета................................................................................................................... 316
HSL-цвета ...................................................................................................................... 318
Применение прозрачности ........................................................................................... 321
Заключение .................................................................................................................... 323
ГЛАВА 22. Текстовые эффекты и шрифты ........................................................... 325
Введение ........................................................................................................................ 325
Структура....................................................................................................................... 325
Цели................................................................................................................................ 326
Задание размеров блока................................................................................................ 326
Текстовое переполнение............................................................................................... 328
Перенос длинных слов.................................................................................................. 329
Изменение размеров элементов пользователем ......................................................... 331
Выделение фокуса......................................................................................................... 333
Текстовые тени.............................................................................................................. 334
Веб-шрифты................................................................................................................... 335
Заключение .................................................................................................................... 339
ГЛАВА 23. Двумерные преобразования ................................................................. 341
Введение ........................................................................................................................ 341
Структура....................................................................................................................... 341
Цели................................................................................................................................ 342
Преобразования............................................................................................................. 342
Переходы ....................................................................................................................... 344
Перемещения ................................................................................................................. 347
Ожидаемое вскоре свойство translate .......................................................................... 347
Масштабирование ......................................................................................................... 347
Вращение ....................................................................................................................... 349
Наклон............................................................................................................................ 350
Использование матриц.................................................................................................. 352
Заключение .................................................................................................................... 354
ГЛАВА 24. Трехмерная графика и анимация ....................................................... 355
Введение ........................................................................................................................ 355
Структура....................................................................................................................... 355
Цели................................................................................................................................ 355
3D-преобразования ....................................................................................................... 356
Задание перспективы .................................................................................................... 358
Два способа изменения перспективы.......................................................................... 360
Задание стиля преобразования..................................................................................... 362
Изменение исходной точки преобразования .............................................................. 363
Работа в 3D-пространстве ............................................................................................ 364
Управление кубом......................................................................................................... 366
3D-перемещение............................................................................................................ 367
3D-масштабирование.................................................................................................... 367
3D-вращение.................................................................................................................. 367
Видимость обратных сторон граней ........................................................................... 369
Заключение .................................................................................................................... 370
ГЛАВА 25. Макет Flexbox ......................................................................................... 371
Введение ........................................................................................................................ 371
Структура....................................................................................................................... 371
Цели................................................................................................................................ 371
Сведения о Flexbox ....................................................................................................... 372
Создание интерактивной среды Flexbox..................................................................... 372
Как работает пример..................................................................................................... 375
Работа с примером ........................................................................................................ 378
Flex-направление........................................................................................................... 379
Перенос flex-элементов ................................................................................................ 382
Выравнивание всего содержимого по главной оси.................................................... 382
Выравнивание элементов по поперечной оси ............................................................ 386
Выравнивание всего содержимого по поперечной оси ............................................. 389
Другие свойства ............................................................................................................ 393
Заключение .................................................................................................................... 394
ГЛАВА 26. CSS Grid ................................................................................................... 395
Введение ........................................................................................................................ 395
Структура....................................................................................................................... 395
Цели................................................................................................................................ 395
Сведения о CSS Grid ..................................................................................................... 396
Как работает пример..................................................................................................... 399
Работа с примером ........................................................................................................ 400
Задание потока Grid-элементов ................................................................................... 401
Выравнивание содержимого ........................................................................................ 402
Выравнивание элементов ............................................................................................. 407
Задание промежутков ................................................................................................... 412
Изменение местоположения и размеров..................................................................... 412
Заключение .................................................................................................................... 417
ГЛАВА 27. Знакомство с Sass ................................................................................... 419
Введение ........................................................................................................................ 419
Структура....................................................................................................................... 419
Цели................................................................................................................................ 420
Sass — достойное решение .......................................................................................... 420
Сведения о Sass ............................................................................................................. 420
Различные версии Sass.................................................................................................. 421
Установка под Windows ............................................................................................... 421
Другие установщики под Windows ............................................................................. 424
Установка под MacOS .................................................................................................. 424
Установка под Linux ..................................................................................................... 426
Альтернативные установки под Linux ........................................................................ 427
Препроцессинг в CSS.................................................................................................... 428
Заключение .................................................................................................................... 429
ГЛАВА 28. Переменные и потоки выполнения в Sass......................................... 431
Введение ........................................................................................................................ 431
Структура....................................................................................................................... 431
Цели................................................................................................................................ 431
Переменные в CSS ........................................................................................................ 432
Переменные в Sass ........................................................................................................ 434
Значения переменных, используемые по умолчанию ............................................... 435
Область видимости переменных ................................................................................. 437
Принудительное задание глобальной видимости ...................................................... 438
Управление потоком выполнения ............................................................................... 439
Sass-операторы .............................................................................................................. 439
Sass-выражения (Sass-сценарий) ................................................................................. 440
@if … @else................................................................................................................... 441
Влияние скобок ............................................................................................................. 443
@else if ........................................................................................................................... 443
@each … in..................................................................................................................... 444
@for … from … through ................................................................................................ 445
@for … from … to ......................................................................................................... 447
@while ............................................................................................................................ 448
Заключение .................................................................................................................... 448
ГЛАВА 29. Расширенный Sass.................................................................................. 449
Введение ........................................................................................................................ 449
Структура....................................................................................................................... 449
Цели................................................................................................................................ 450
Вложенность, используемая в Sass.............................................................................. 450
Вложенные свойства..................................................................................................... 452
Наследование в Sass...................................................................................................... 453
Использование миксинов ............................................................................................. 455
Модули Sass................................................................................................................... 456
Будущие версии............................................................................................................. 457
Заключение .................................................................................................................... 458
Метаданные.................................................................................................................. 459
Описание........................................................................................................................ 459
Чему вы сможете научиться......................................................................................... 460
Для кого эта книга......................................................................................................... 460
Содержание.................................................................................................................... 461
Биография автора .......................................................................................................... 462