Erhalten Sie Zugang zu diesem und mehr als 300000 Büchern ab EUR 5,99 monatlich.
- Herausgeber: Питер
- Kategorie: Wissenschaft und neue Technologien
- Sprache: Russisch
Как вы понимаете что зашли на хороший сайт? Это происходит практически мгновенно, с первого взгляда. Такие сайты привлекают внимание картинкой - отлично выглядят, - а кроме этого они интерактивны и отзывчивы. Сразу видно, что такую страничку создавал CSS-профи, ведь именно каскадные таблицы стилей (CSS) отвечают за всё наполнение и оформление сайта от расположения элементов до неуловимых штрихов. Дело за малым - стать CSS-профи, а для этого придется разобраться в принципах CSS, научиться воплощать в жизнь идеи дизайнеров, не забывать о таких важных "мелочах", как красиво подобранный шрифт, плавные переходы и сбалансированная графика. Перед вами прямой путь в высшую лигу веб-разработки. Книга «CSS для профи» подарит вам не только свежие идеи, но и вдохновит на подвиги, а облегчить этот тернистый путь помогут новейшие технические достижения – адаптивный дизайн, библиотеки шаблонов и многое другое.
Sie lesen das E-Book in den Legimi-Apps auf:
Seitenzahl: 487
Veröffentlichungsjahr: 2023
Das E-Book (TTS) können Sie hören im Abo „Legimi Premium” in Legimi-Apps auf:
Ähnliche
Научный редактор С. Черников
Переводчик С. Черников
Технические редакторы Н. Гринчик, Н. Рощина
Литературный редактор Н. Рощина
Художник Н. Гринчик
Корректоры Е. Павлович, Е. Рафалюк-Бузовская
Верстка Г. Блинов
Кит Грант
CSS для профи. — СПб.: Питер, 2021.
ISBN 978-5-4461-0909-8
© ООО Издательство "Питер", 2021
Все права защищены. Никакая часть данной книги не может быть воспроизведена в какой бы то ни было форме без письменного разрешения владельцев авторских прав.
Оглавление
Предисловие
«Минута, чтобы научиться… Целая жизнь, чтобы овладеть». Эта фраза в наши дни может показаться немного банальной, но она отображает суть CSS. Фраза обрела популярность, став слоганом настольной игры «Реверси», в которой игроки по очереди перемещают белые и черные фигуры по клеткам на доске. Если, например, белая фигура захватывает ряд черных между двумя белыми, все черные фигуры переворачиваются и ряд становится полностью белым.
Правила CSS изучить так же несложно, как правила «Реверси». Вы создаете селектор, чтобы сопоставить элементы; затем вы пишете пары «ключ/значение», которые форматируют эти элементы. Даже начинающим разработчикам не составит большого труда понять основной синтаксис. Секрет того, как стать гуру в CSS, как и в «Реверси»: нужно точно знать, что делать и когда.
CSS (каскадные таблицы стилей) — это один из языков для веб-разработки, но работа с ним не совсем то же самое, что программирование. В CSS мало логики и циклов. Математика ограничивается одной функцией. Лишь недавно стало возможно использовать в нем переменные. Вы почти не будете думать о безопасности. Каскадные таблицы стилей ближе к живописи, чем к языку программирования Python. С помощью CSS вы вольны делать все, что нравится. Каскадные таблицы стилей не будут озадачивать вас какими-то ошибками или сбоями в компиляции.
На пути к тому, чтобы стать гуру в CSS, вы должны изучить все, на что способны каскадные таблицы стилей. Чем больше вы знаете, тем более легким покажется старт. Чем больше тренируетесь, тем легче получите идеальные компоновку и расстояния между блоками. Чем больше читаете, тем увереннее будете чувствовать себя при создании любого дизайна.
Действительно хорошие разработчики CSS не ограничиваются единым дизайном. Каждая работа может стать зубодробительной головоломкой, которую нужно решить. Опытные разработчики CSS имеют полный и широкий спектр знаний о том, на что способны каскадные таблицы стилей. Эта книга станет этапом на пути к тому, чтобы вы могли стать хорошим разработчиком CSS. Прочитав ее, вы узнаете, как создавать макеты любой сложности.
Разрешите еще одну метафору: несмотря на то что каскадные таблицы стилей разрабатываются уже пару десятилетий, можно провести некую аналогию с Диким Западом. Вы можете делать все, что захотите, до тех пор, пока CSS делает то, что вы хотите. Нет никаких жестких правил. Но, поскольку вы предоставлены сами себе и не ограничены строгими рамками, вы должны быть предельно аккуратны. Мельчайшие изменения могут иметь огромные последствия. Каскадные таблицы стилей способны расти и становиться громоздкими. Вы можете испугаться собственных стилей!
Кит описывает в этой книге почти все особенности CSS, и каждый, даже маленький ее фрагмент поможет вам стать отличным разработчиком CSS и приручить этот Дикий Запад. Вы глубоко погрузитесь в сам язык, поймете, на что способны каскадные таблицы стилей. Вы будете лучше писать код — работоспособный и понятный.
Книга будет полезна даже опытным разработчикам. Обнаружив, что читаете о чем-то уже известном, вы укрепите свои навыки, подтвердите знания и дополните их недостающими фрагментами, которые удивят вас и расширят вашу теоретическую базу.
Крис Койер (Chris Coyier), сооснователь компании CodePen
Введение
Впервые о каскадных таблицах стилей заговорили в 1994 году, и уже в 1996-м они были реализованы (частично) в браузере Internet Explorer 3. Примерно в то время я нажал прекрасную кнопку просмотра исходного кода и увидел, что все секреты веб-страницы расшифрованы в виде простого текста. Я сам изучил HTML и CSS, развлекаясь в текстовом редакторе и наблюдая за тем, что получалось. Это был приятный повод провести как можно больше времени в Интернете.
Тем временем мне нужно было найти настоящую работу. Я получил степень в области компьютерных наук. Но не знал, что в 2000-х годах это словосочетание потеряет смысл, так как появится профессия «веб-разработчик».
Я начал пользоваться каскадными таблицами стилей еще с момента их появления. Я работал и на стороне сервера, и с клиентскими интерфейсами, но в любой команде всегда оказывался экспертом в области CSS. Надо признать, что это часть Всемирной паутины, которой пренебрегают. Но как только вы поработаете над проектом с чистым кодом CSS, вы уже не захотите впредь обходиться без него. Увидев его в действии, даже опытные веб-разработчики спрашивают: «Как выучить CSS?»
На этот вопрос нет краткого и однозначного ответа. Недостаточно освоить один или два быстрых приема. Скорее, вам нужно разобраться в отдельных составляющих языка и понять, как они могут сочетаться. Одни книги дают общее представление о CSS, но многие разработчики уже что-то в нем понимают. В других книгах рассмотрено много полезных приемов, но предполагается, что читатель уже владеет языком.
В то же время темпы изменения CSS постоянно растут. Адаптивный дизайн сейчас стал стандартом де-факто. Веб-шрифты считаются банальщиной. В 2016 году мы наблюдали расцвет гибких контейнеров, а в 2017-м развитие получила CSS-сетка. Режимы смешивания, тени блоков, преобразования, переходы и анимация — все это нововведения в создании веб-страниц. Поскольку все больше и больше браузеров становятся «вечнозелеными», автоматически обновляясь до последней версии, новые возможности будут продолжать добавляться. Их достаточно, чтобы идти в ногу со временем.
Независимо от того, новичок вы в веб-дизайне или занимаетесь им уже некоторое время, вам нужно развивать или обновлять свои навыки работы с каскадными таблицами стилей. И я написал эту книгу, чтобы дать вам «волшебный пинок». Весь материал в нее отбирался по одному из трех оснований.
1. Он важен. Существует множество фундаментальных понятий языка, в которых, к сожалению, многие разработчики не до конца разбираются. К ним относятся каскадность, поведение элементов с обтеканием и позиционирование. Мы внимательно изучим их, и я объясню, как они работают.
2. Он актуален. За последние несколько лет появилось много новых функций. Я расскажу о последних улучшениях CSS и нескольких неочевидных возможностях. Это перспективная книга. Я укажу на проблемы обратной совместимости, когда это уместно, но я оптимистично отношусь к настоящему и будущему развития кросс-браузерности.
3. Он не раскрыт в большинстве книг,посвященных CSS. Мир каскадных таблиц стилей огромен. В современном мире разработки веб-приложений существуют важные передовые методы и общие подходы. Строго говоря, они являются частью не самого языка CSS, а скорее его культуры. И жизненно важны для современной веб-разработки.
Итак, как изучить CSS? Эта книга позиционируется как попытка ответить на данный вопрос.
Благодарности
Написание книги требует невероятных усилий. Я считаю, что это отличная книга, и надеюсь, вы согласитесь, но ее не было бы без помощи других людей.
Прежде всего я хотел бы поблагодарить свою супругу Кортни. Ты поддерживала и поощряла меня на протяжении всего процесса. Ты взяла на себя бремя написания этой книги вместе со мной. И даже помогла с редактурой в некоторых ключевых местах. Я не смог бы сделать это без тебя.
Я хотел бы поблагодарить своего начальника Марка Игла (Mark Eagle) и остальных членов моей команды в сети Intercontinental Exchange. Благодарю вас за то, что помогли мне на этом пути и позволили иногда отвлекаться от основной работы, чтобы писать книгу во время бесчисленных обеденных перерывов.
Благодарю редактора Грега Уайлда (Greg Wild), который нашел мои первые жалкие черновики в Интернете и убедил меня продолжать. Также благодарю главу издательства Manning Марьяна Баце (Marjan Bace), который почувствовал потенциал в этой идее. Всегда есть риск, связанный с изданием книги, особенно с новым автором. Спасибо, что дали шанс.
Хорошая книга не получится без редактора. Благодарю Кристен Уоттерсон (Kristen Watterson) за ее педантизм. Эта книга стала намного лучше благодаря вашим усилиям. И спасибо техническому редактору Робину Деусону (Robin Dewson), который играл роль защитника команды, за терпение и понимание на протяжении всего длительного процесса.
Благодарю Бирну Себарте (Birnou Sebarte') и Луиса Лазариса (Louis Lazaris) за то, что они тщательно откорректировали книгу от корки до корки. Спасибо Крису Койеру (Chris Coyier) за предисловие к ней.
Я также хотел бы поблагодарить технических рецензентов и друзей, которые нашли время, чтобы изучить мои проекты на разных этапах и отправить отзывы: Адама Раккиса (Adam Rackis), Ала Пезевски (Al Pezewski), Амита Ламба (Amit Lamba), Анто Аравинта (Anto Aravinth), Брайна Гайнеса (Brian Gaines), Дико Гольдони (Dico Goldoni), Джанкарло Массари (Giancarlo Massari), Гетца Хеллера (Goetz Heller), Арса Раваля (Harsh Raval), Джеймса Анайпакоса (James Anaipakos), Джеффри Лима (Jeffrey Lim), Джима Артура (Jim Arthur), Мэтью Хальверсона (Matthew Halverson), Митчелл Роблес-мл. (Mitchell Robles, Jr.), Нитина Варму (Nitin Varma), Патрика Гетца (Patrick Goetz), Фили Австрия (Phily Austria), Пьерфранческо Д’Орсогну (Pierfrancesco D’Orsogna), Рафаэля Кассемиро Фрейре (Rafael Cassemiro Freire), Рафаэля Фрейре (Rafael Freire), Сачина Синхи (Sachin Singhi), Таню Вильке (Tanya Wilke), Трента Уайтли (Trent Whiteley) и Уильяма Э. Уилера (William E. Wheeler). Ваши отзывы оказались очень полезны, так как книга попадет в руки разработчиков всех уровней квалификации.
Наконец, я хотел бы выразить огромную благодарность толковым людям из рабочей группы каскадных таблиц стилей W3C за работу над спецификациями CSS. Вы трудитесь над решением очень сложных задач, благодаря чему разработчикам не приходится с ними разбираться самостоятельно. Спасибо за ваши усилия по улучшению каскадных таблиц стилей и Всемирной паутины.
Об этой книге
Мир каскадных таблиц стилей непрерывно совершенствуется. Все больше и больше веб-разработчиков осознают, что, хотя они, как им кажется, знают CSS, до полного понимания им далеко. В последние годы язык сильно развился, поэтому даже те разработчики, которые когда-то были искусны в CSS, сегодня могут получить абсолютно новые навыки, чтобы наверстать упущенное. Данная книга призвана удовлетворить эти потребности: обеспечить глубокое владение языком и привести к успеху в новых разработках и применении новейших возможностей CSS.
Эта книга называется «CSS для профи», но это также всеобъемлющая книга. В тех случаях, когда какие-то понятия или принципы трудны либо, как правило, трактуются неправильно, я подробно объясняю, что они обозначают или как работают и почему именно так. Другие главы, возможно, не настолько исчерпывающи, но я дам достаточно сведений, чтобы вы могли эффективно работать и двигаться в правильном направлении, если захотите расширить свои знания. В целом эта книга заполнит пробелы в ваших теоретических познаниях.
Некоторые темы: анимация, типографика, гибкие контейнеры и даже CSS-стек — достойны отдельных книг. Мои цели — конкретизировать ваши знания, помочь ликвидировать пробелы в них и привить вам любовь к языку CSS.
Для кого предназначена книга
Прежде всего эта книга предназначена для разработчиков, которые устали сражаться с каскадными таблицами стилей и хотят действительно разобраться, как они работают. И неважно, они новички или имеют за плечами многолетний опыт.
Я рассчитываю, что у вас есть поверхностное знание языка HTML, CSS и отчасти JavaScript. Если вы знакомы с основами синтаксиса CSS, то, скорее всего, сможете понять эту книгу. Но в первую очередь она написана для разработчиков, которые некоторое время работали с CSS, столкнулись с проблемами и разочаровались. Код JavaScript я максимально упрощал, поэтому, изучая короткие листинги, вы все поймете.
Если вы дизайнер, который решил приоткрыть для себя мир веб-дизайна, то, подозреваю, тоже многое почерпнете из этой книги, хотя я не писал ее непосредственно для вас. По крайней мере вы научитесь лучше понимать разработчиков, с которыми будете сотрудничать.
Структура издания
Книга состоит из 16 глав, разделенных на четыре части. В части I мы поговорим об основах, сосредоточив внимание на некоторых деталях.
• Глава 1 охватывает каскадность и наследование. Эти понятия определяют, как стили применяются к элементам на странице.
• В главе 2 рассматриваются относительные единицы em и rem. Относительные единицы в CSS универсальны и важны, и эта глава научит вас работать с ними.
• В главе 3 рассматривается блочная модель, суть которой — управление размерами элементов на странице и объемом пространства между ними.
В части II я познакомлю вас с ключевыми инструментами для компоновки элементов на странице.
• Глава 4 погружает в принципы обтекания элементов макета. Мы создадим многоколоночную страницу и рассмотрим решения некоторых необычных проблем обтекания.
• В главе 5 говорится о Flexbox — способе гибкой верстки. Начнем мы с фундаментальных понятий, затем перейдем к практическим примерам.
• Глава 6 рассказывает о технологии верстки с помощью CSS-сетки. Она позволяет создавать макеты, которые ранее средствами каскадных таблиц стилей получить было невозможно.
• Глава 7 рассматривает позиционирование с использованием свойства position: абсолютное позиционирование, фиксированное позиционирование и многое другое. Это область, в которой многие разработчики сталкиваются с трудностями, поэтому им необходимо хорошо в ней разобраться.
• В главе 8 описывается адаптивный дизайн. Мы рассмотрим три ключевых принципа построения сайтов, работающих на экранах различных размеров и на широком спектре устройств.
В части III представлены некоторые передовые методы. Разместить элементы на странице желаемым образом — это одно, а организовать код так, чтобы его можно было понимать и поддерживать в будущем по мере развития веб-приложения, — совершенно другое. Из следующих двух глав вы узнаете о некоторых важных методах управления кодом.
• В главе 9 описано, как организовать каскадные таблицы стилей в модули, чтобы код стал многоразовым и удобным в сопровождении.
• В главе 10 рассказывается о создании библиотеки паттернов. Это важная часть использования и поддержки каскадных таблиц стилей в команде.
В части IV я познакомлю вас с миром дизайна. Мы рассмотрим важные соображения, касающиеся работы с дизайнером, и поговорим о том, как работать над дизайном самостоятельно, потому что иногда приходится и это делать.
• В главе 11 рассматриваются тени, градиенты и режимы смешивания. В совокупности эти эффекты позволяют создать элегантный пользовательский интерфейс.
• В главе 12 показано, как работать с контрастностью, цветом и пространством (воздухом). Эти детали — важный шаг на долгом пути от хорошего дизайна к отличному.
• Глава 13 посвящена типографике в Интернете — использованию веб-шрифтов для придания индивидуальности сайту или приложению.
• Глава 14 рассказывает, как наделить страницу переходами и анимацией, изменять форму, цвета и размеры элементов на странице.
• В главе 15 рассматриваются трансформации — важные инструменты, действующие совместно с переходами и анимацией. В этой главе обсуждаются также вопросы производительности анимации на странице.
• В главе 16 говорится об анимации ключевых кадров. Вы узнаете, как использовать сложную анимацию для взаимодействия с пользователем.
В конце книги приведены два приложения.
• Приложение А содержит перечень селекторов CSS всех типов.
• Приложение Б представляет собой введение в препроцессоры. Если вы еще не знакомы с ними, можете начать с этого приложения.
Я затаратил много усилий для того, чтобы подробно раскрыть все темы книги. Начну с самых основ, которые вам нужно знать. Далее темы опираются друг на друга. Во многих местах я ссылаюсь на ранние концепции и стараюсь связать их вместе, если это необходимо. Хотя я и добавил полезные справочные приложения, рекомендую читать главы по порядку.
Условные обозначения и файлы примеров
Эта книга содержит много примеров исходного кода как в пронумерованных листингах, так и в обычном тексте. В обоих случаях исходный код обозначается моношириннымшрифтом, чтобы отделить его от основного текста. Иногда он выделен полужирныммоношириннымшрифтом, чтобы показать код, который изменился с предыдущих шагов, приведенных в той же главе, например, если к строке кода добавляется новая функция или в нее вносятся какие-то изменения.
Во многих случаях исходный код был переформатирован: я добавил переносы и переделал отступы, чтобы сэкономить пространство страницы. Кроме того, во многих случаях из исходного кода были удалены комментарии, если он описан в тексте. Большинство листингов сопровождаются примечаниями, которые выделяют важные понятия.
Каскадные таблицы стилей работают в тандеме с HTML. Я всегда предоставляю листинги с кодом, один для HTML, а другой — для CSS. В большинстве разделов для нескольких листингов CSS используется один и тот же HTML-код. Я научу вас изменять каскадные таблицы стилей на многих этапах и рассчитываю, что вы будете менять свою таблицу стилей по мере перехода от одного листинга к другому.
Исходный код файлов примеров из этой книги размещен в репозитории git на странице github.com/CSSInDepth/css-in-depth и сайте издательства по адресу www.manning.com/books/css-in-depth. На первых порах может показаться, что некоторых листингов не хватает, так как примеры требуют указания как HTML-, так и CSS-кода. Учитывайте, что в большинстве примеров я поместил каскадные таблицы стилей в HTML-файлы, добавляя элементы style. Это означает, что оба листинга, HTML и CSS, в репозитории объединяются в один файл.
Например, в главе 1 листинг 1.1 — это HTML-код, а листинг 1.2 — CSS-код стилей, которые предназначены для применения к этому HTML-коду. В репозитории оба листинга объединены в один файл с именем listing-1.2.html. В листинге 1.3 в этот CSS-код вносятся изменения, он включен в файл listing-1.3.html вместе с соответствующим HTML-кодом из листинга 1.1.
Версии браузеров
Кросс-браузерное тестирование — важная часть веб-разработки. Бо'льшая часть кода в этой книге поддерживается браузерами Internet Explorer 10 и 11, Microsoft Edge, Chrome, Firefox, Safari, Opera и почти всеми мобильными браузерами. Новые функции будут работать не во всех этих браузерах, что я буду особо отмечать.
То, что функция не поддерживается в определенном браузере, не означает, что ее нельзя использовать. Часто можно включить альтернативное поведение для старых браузеров, которые не поддерживают какой-либо новый функционал. Я расскажу о таких случаях.
Если вы хотите придерживаться примеров кода, которые описаны в книге, на своем компьютере, рекомендую работать в последней версии браузера Firefox или Chrome.
Об авторе
Кит Дж. Грант (Keith J. Grant) в настоящее время трудится старшим веб-разработчиком в корпорации Intercontinental Exchange, Inc. (ICE), где пишет и поддерживает CSS-код для корпоративных клиентов, в том числе Нью-Йоркской фондовой биржи. У него за плечами 11-летний опыт создания и поддержки профессиональных веб-приложений и сайтов, сочетающих технологии HTML, CSS и JavaScript. Кит — классический самоучка в плане работы с HTML- и CSS-кодом: до того как его приняли в штат компании, он потратил несколько лет, самостоятельно приобретая опыт веб-разработчика.
Менеджер пригласил его в команду веб-разработчиков именно из-за опыта работы с CSS, когда компании ICE понадобился редизайн корпоративных сайтов. Каскадные таблицы стилей позволяют создавать уникальные креативные сайты, а также сложные веб-приложения с громоздкими макетами.
Хотя Кит в первую очередь занимался разработкой на языке JavaScript, для всех компаний, где он трудился, он становился крайне важным человеком, поскольку отлично разбирался в каскадных таблицах стилей.
Иллюстрация на обложке
Иллюстрация на обложке книги «CSS для профи» — это работа французского художника Октава Пингвилли Л’Харидона, которая называется La Flamande («Фламандка»). Картина входит в коллекцию произведений художников XIX века, собранную Луисом Курмером и впервые представленную в Париже в 1842 году. Название коллекции — Les Franais peints par eux-mmes, которое переводится как «Люди Франции, написанные самими собой». Каждая иллюстрация тонко прорисована и раскрашена вручную, а богатое разнообразие рисунков в коллекции напоминает нам о том, насколько культурно обособлялись районы, города, деревни и соседние области всего 200 лет назад. Изолированные друг от друга люди говорили на разных диалектах и языках. На улицах городов или в сельской местности было легко определить, где они жили, а об их профессии или месте в обществе говорила их одежда.
С тех пор такие кардинальные различия в одеяниях размылись и разнообразие, характеризующее регионы, столь богатое в прежние времена, исчезло. Сейчас трудно отличить друг от друга даже жителей разных континентов, не говоря уже о разных регионах страны и городах. Возможно, мы сменили культурные различия на более разнообразную личную и, безусловно, более многообразную и быстро развивающуюся технологическую жизнь.
В настоящее время, когда трудно отличить одну компьютерную книгу от другой, издательство Manning объединяет компьютерную литературу с выпущенными более двух столетий назад книгами, украшая обложки иллюстрациями, основанными на богатом разнообразии жизненного уклада людей тех времен.
Часть I. Обзор основных принципов
В части I подробно рассматриваются наиболее важные составляющие CSS — каскадность, относительные единицы и блочная модель. Из первых трех глав вы узнаете, как стили применяются к элементам на странице и как определяются размеры элементов. Всестороннее усвоение данных понятий — это база для всех последующих тем книги.
2. Работа с относительными единицами
В этой главе
• Гибкость относительных единиц.
• Как использовать единицы em и rem и не сойти с ума.
• Применение экранных единиц измерения.
• Введение в переменные CSS.
При указании значений CSS предоставляет широкий спектр возможностей для выбора единиц измерения. Одними из самых известных и, вероятно, самых простых для работы являются пикселы. Это абсолютные единицы — 5 пикселов всегда означают одно и то же. Другие единицы, такие как em и rem, не абсолютные, а относительные. Значение относительных единиц меняется под влиянием внешних факторов: размер 2 em меняется в зависимости от того, для какого элемента (а иногда даже свойства) вы его задаете. Естественно, это усложняет работу с относительными единицами.
Разработчикам CSS, даже опытным, не очень нравится работать с относительными единицами, включая пресловутую em. Значение em может меняться абсолютно по-разному, что делает ее непредсказуемой и менее четкой, чем пиксел. В данной главе я сниму завесу тайны вокруг относительных единиц. Сначала объясню, в чем их уникальная польза для CSS, затем помогу в них разобраться. Я расскажу, как они работают, и покажу, как укротить их сущность, на первый взгляд кажущуюся непредсказуемой. Вполне реально сделать так, чтобы относительные единицы работали на вас. Если правильно их применять, ваш код станет более простым и универсальным, а работа над ним упростится.
2.1. Мощь относительных значений
CSS позволяет динамически связывать
