ГЛ А В А 2 2 Текстовые эффекты и шрифты Введение Когда создавался CSS3, стилизация текста уже была достаточно развитой, но, чтобы Интернет мог серьезно конкурировать с возможностями печатных СМИ, предстояло еще очень многое сделать. В плане развития было представлено множество новых функций и способов стилизации текста и шрифтов, в частности, касательно применения теней, наложения текста, разнотипных переносов слов, а также была устранена зависимость от использования только тех шрифтов, которые предлагались браузерами или операционными системами за счет поддержки веб-шрифтов, ко многим из которых такие компании, как Google, теперь открыли бесплатный доступ. Также пересмотрели блочную модель с целью добавления поддержки изменения размеров блока, позволяющей решать, к чему применяются размеры, задаваемые объекту: к элементу, включая любые отступы и (или) границы, или только к содержимому элемента, чтобы отступы и границы считались дополнениями к этим размерам. И чтобы помочь пользователям управлять областями ввода, размер которых им не по нраву, появилась возможность разрешать им изменять размер элементов, а чтобы усилить визуализацию текущей позиции фокуса в документе, было улучшено выделение фокуса с разрешением его стилевого оформления. Структура В этой главе рассматриваются следующие темы: Изучение всех тонкостей изменения размеров блока и соотнесения этих размеров с его содержимым. Изучение способов управления текстом в случаях его выхода и невыхода за границы элемента. Приобретение возможности работы с очень длинными словами и поддержки изменения размеров пользовательских элементов. Получение полного представления о применении теней и использовании вебшрифтов.
326 | Глава 22 Цели Цель главы заключается в изучении различных функций, связанных с текстом, помогающих в создании наиболее привлекательных макетов CSS. В их числе — тонкое управление шириной и высотой элементов в соответствии с их содержимым, отступами и границами, управление слишком длинными словами, разбиением и переполнением слов, прикрепление к тексту привлекательных теней, а также загрузка и использование любого из многих тысяч веб-шрифтов, наиболее соответствующего тематике реализуемого проекта. Задание размеров блока Вопросы стилизации текста относятся не только к тексту как таковому, поскольку принципиальное значение для процесса проектирования имеет также расположение текста и содержащих его элементов на странице (или экране). Поэтому, прежде чем перейти к возможностям работы со шрифтами и с самим текстом, давайте посмотрим на контейнеры для шрифтов, иными словами, на их элементы и на то, как задается их стилевое оформление. Вам приходилось когда-нибудь при разработке CSS ошибаться, забывая рассчитать отступы и границы? Теперь все это осталось в прошлом, поскольку уже в самом начале можно указать способы применения заданных вами размеров. По умолчанию для свойства box-sizing используется значение content-box, при этом CSS-размеры ширины и высоты относятся к области содержимого элемента, и любые отступы и границы игнорируются. Это эквивалентно следующей установке: box-sizing: content-box; Но при использовании значения border-box, заставляющего все отступы и границы помещаться в заданном пространстве, элементу можно указать конкретную ширину и высоту, для чего используют такую установку: box-sizing: border-box; При этом любая толщина границы или отступа должна быть сжата внутри указанной области, уменьшая, в силу необходимости, часть содержимого. В примере 22.1 создается пара одинаковых элементов с той лишь разницей, что для свойства boxsizing одного из них выбрано значение content-box, а другого — border-box. Пример 22.1 1. <!DOCTYPE html> 2. <html> 3. <head> 4. <title>Box sizing</title> 5. <style> 6. .box { font : bold 14pt serif; 7. border : 10px solid red;
Текстовые эффекты и шрифты | 327 8. width : 200px; 9. height : 100px; 10. padding : 20px; 11. margin-right : 20px; 12. float : left; 13. display : flex; 14. justify-content : center; 15. align-items : center; 16. text-align : center; 17. color : blue; 18. background : lime; 19. background-clip : content-box; } 20. #box1 { box-sizing : content-box; } 21. #box2 { box-sizing : border-box; } 22. </style> 23. </head> 24. <body> 25. <div class='box' id='box1'>Living in a box</div> 26. <div class='box' id='box2'>Living in a box</div> 27. </body> 28. </html> Для обоих элементов, отнесенных к классу box, заданы цвет и стиль шрифта, 10-пиксельная красная граница, а также 20-пиксельный внутренний отступ. Другие установки CSS элементам с этим классом задают размер 200 × 100 пикселей и гарантию, что элементы будут размещены на одной линии, а содержимое — располагаться по центру. Кроме того, свойство background-clip для этого класса устанавливается только на область содержимого content-box, поэтому лаймовый фон в каждом случае точно указывает на границы области. На рис. 22.1 можно увидеть, что у первого элемента действительно есть 10-пиксельная красная граница, внутри которой 20 пикселей отступа, а затем область содержимого размером 200 × 100 пикселей с текстом. Рис. 22.1. Задание размеров блока по умолчанию и по границе
328 | Глава 22 А вот второй элемент, включая отступы и границы, точно соответствует размеру области содержимого первого. Это связано с тем, что для свойства box-sizing второго элемента установлено значение border-box, стало быть, все границы и отступы должны помещаться по ширине и высоте в заданные 200 × 100 пикселей. В результате область содержимого уменьшается до оставшегося пространства, которое в данном случае составляет 140 × 40 пикселей после вычитания 20 пикселей отступа и 10 пикселей границы с каждой стороны, что в сумме дает уменьшение на 60 пикселей в каждом направлении. Наиболее полезным это свойство может оказаться в условиях, когда отступы и (или) границы элементов в макете изменяются независимо. Если заставить эти части элемента находиться в пределах ширины и высоты, предоставляемых вашим макетом, установив для свойства box-sizing таких элементов значение border-box, то эти события могут изменить или, что еще хуже, сломать дизайн макета. Текстовое переполнение Иногда могут возникать потребности в сокращении текста, например в случаях, подобных применению поисковой системы Google, в которой часто цитируется текст с веб-сайтов, обрезаемый многоточием, означающим «и так далее», например … Результат показан на рис. 22.2. Рис. 22.2. Текстовое переполнение, усеченное двумя разными способами Это лаконичный способ создания отрывков определенного размера, разъясняющий читателям ситуацию. Без этой функции окончания отрывков могут показаться грубыми и неприглядными. В примере 22.2 создается пара элементов с одинаковым содержимым, но, как показано на рис. 22.2, с разной обработкой переполнения, где во втором элементе текст аккуратно обрезается в подходящем месте слова многоточием. Пример 22.2 1. <!DOCTYPE html> 2. <html> 3. <head>
Текстовые эффекты и шрифты | 329 4. <title>Text Overflow</title> 5. <style> 6. .box { font : bold 16pt serif; 7. border : 2px solid blue; 8. width : 640px; 9. padding : 5px; 10. margin : 5px 0; 11. float : left; 12. color : yellow; 13. background : olive; 14. white-space : nowrap; 15. overflow : hidden; } 16. #box1 { text-overflow : clip; } 17. #box2 { text-overflow : ellipsis; } 18. </style> 19. </head> 20. <body> 21. <div class=’box’ id=’box1’>Straw, no too stupid a fad, 22. I put soot on warts – now read that backwards.</div> 23. <div class=’box’ id=’box2’>Straw, no too stupid a fad, 24. I put soot on warts – now read that backwards.</div> 25. </body> 26. </html> Чтобы свойство text-overflow возымело какой-либо эффект, сначала для свойства white-space нужно установить значение nowrap, а для свойства overflow — hidden. Без установки для свойства white-space значения nowrap текст будет просто перетекать со строки на строку, а без установки для свойства overflow значения hidden текст, если ему понадобится, будет выходить за пределы элемента, создавая хаос на странице. Перенос длинных слов В главе 20 «Свойства блока и текста» был показан способ автоматического разрыва слов и их переноса на следующую строку при выходе за границы элемента. Но есть особый, неучтенный случай, когда имеется слово, которое само по себе шире элемента, в котором оно находится. В подобных случаях можно воспользоваться свойством word-wrap со значением break-word, принуждающим длинные слова к переносу: word-wrap : break-word; В примере 22.3 создаются два элемента, в каждом из которых в качестве образа отображается одно и то же длинное слово Antidisestablishmentarianism. Это слово явно длиннее своих элементов, поэтому получившееся переполнение, как показано на рис. 22.3, обрабатывается по-разному.
330 | Глава 22 Рис. 22.3. Слишком длинное слово обрабатывается двумя разными способами Пример 22.3 1. <!DOCTYPE html> 2. <html> 3. <head> 4. <title>Wrapping Very Long Words</title> 5. <style> 6. .wrap { border : 2px solid olive; 7. font : bold 24pt monospace; 8. width : 300px; 9. height : 150px; 10. background : lime; 11. color : purple; } 12. #wrap1 { word-wrap : normal; } 13. #wrap2 { word-wrap : break-word; } 14. </style> 15. </head> 16. <body> 17. <div class=’wrap’ id=’wrap1’> 18. Antidisestablishmentarianism 19. is one of the longest words 20. </div> 21. <br> 22. <div class=’wrap’ id=’wrap2’> 23. Antidisestablishmentarianism
ГЛ А В А 2 7 Знакомство с Sass Введение Итак, после изучения всех новых возможностей, предоставляемых CSS3, у вас, наверное, уже сложилось впечатление, что технология CSS — весьма эффективная и похожая на компьютерный язык технология. Именно похожая, поскольку классифицировать ее в качестве пригодного для использования языка программирования не позволяет отсутствие минимального набора функций. Во-первых, языки должны где-то хранить временные (и финальные) результаты, в виде переменных или массивов (которые, как известно, представляют собой не переменные с одним именем, а наборы переменных, к которым можно обращаться по их индексу). Затем нужны будут структуры принятия решений, которые могут выполнять операции типа if... then... else. Языку также нужны циклы, осуществляющие перебор данных или элементов массивов и т. д. До сих пор для реализации функциональных возможностей программирования в CSS в этой книге использовался язык JavaScript, но есть способ получше, и он называется предварительной обработкой или препроцессингом. Хороший препроцессор CSS позволяет для описания желаемого стилевого оформления создаваемого веб-документа использовать такой же синтаксис, как у языков программирования, после чего он на основе предоставленных инструкций проведет предварительную обработку, превращая их в чистый CSS, который вставит в ваш проект. Препроцессор, как вы понимаете, открывает совершенно новый мир возможностей CSS. Структура В этой главе рассматриваются следующие темы: Что такое Sass, зачем он был разработан, и что он может делать. Установка и использование Sass на различных платформах. Как работают пути к файлам и зачем они используются. Как Sass-препроцессинг превращает содержимое файлов в обычный код CSS.
420 | Глава 27 Цели Здесь можно получить сведения о том, что такое Sass, зачем этот препроцессор был разработан и почему он существенно облегчает задание веб-стиля. Изучение материалов главы позволит разобраться в основах препроцессора и подготовиться к освоению порядка использования переменных, вложенного кода, миксинов и многого другого в следующих главах. Sass — достойное решение Первоначально разработанная в 2006 году с использованием языка программирования Ruby технология Syntactically Awesome Style Sheets (Sass) постоянно развивалась, и к настоящему моменту она де-факто стала используемой в повседневной практике системой предварительной обработки, которая по-прежнему полностью поддерживается ее командой разработчиков. Популярность этой системы, помимо наличия специально предназначенной для ее поддержки основной команды, обусловлена следующими причинами: Полной постоянной совместимостью со всеми версиями CSS. Наличием большего количества функций и возможностей по сравнению с любыми другими языками расширений CSS. Принятием его использования многими ведущими мировыми веб-разработчиками, что превратило Sass в отраслевой стандарт. Причем хорошее знание Sass существенно увеличивает шансы на получение более выгодной работы в области веб-разработки. Более того, теперь Sass сам по себе служит основой для растущего числа платформ разработки, построенных на основе его технологии, в числе которых Compass, Bourbon и Susy. Итак, давайте все же выясним, как работает Sass, что он делает и как его использовать. Сведения о Sass Система Sass фактически состоит из двух разных синтаксисов. Есть оригинальный синтаксис Indented (похожий на систему шаблонов Haml) и более новый синтаксис SCSS (также известный как Sassy CSS), использующий блочное форматирование, как и сам CSS. Indented Sass использует расширение имен файлов .sass, а Sassy CSS — .scss. Sass используется для расширения CSS за счет предоставления ряда функций, присущих традиционным языкам программирования. Это требует навыков создания сценариев на SassScript, которые затем интерпретируются в блоки правил CSS. В SassScript предоставляются переменные, вложенности, миксины и наследование, подробно рассматриваемые в этой и последующих главах.
Знакомство с Sass | 421 Для использования систему Sass сначала нужно настроить под свои проекты, установив соответствующее программное обеспечение. Базовая программа работает с использованием инструкций командной строки, но при желании можно получить и приложения (как платные, так и бесплатные), предоставляющие более удобный интерфейс. Дополнительную информацию на этот счет можно найти по следующему URL-адресу: sass-lang.com/install Различные версии Sass На данный момент существует три версии Sass, включая исходную версию Ruby Sass, LibSass, версию, переписанную на C/C++, и нынешнюю основную, рекомендованную к использованию реализацию DartSass. Ниже приводится краткое описание этих версий: Ruby Sass была первоначальной реализацией Sass, но ее жизнь подошла к концу, и она больше не поддерживается. И тем не менее, она все еще довольно широко используется. LibSass — это реализация Sass на C/C++, разработанная с прицелом на легкую интеграцию во множество различных языков. Но по прошествии времени эта версия стала отставать от Dart Sass по функциональным возможностям и совместимости с CSS, и поэтому теперь она считается устаревшей, и в новых проектах вместо нее следует использовать Dart Sass. Dart Sass теперь стала основной реализацией Sass, т. е. именно она получает новые функции раньше любой другой реализации. Она работает быстро, проста в установке и компилируется в чистый JavaScript, что позволяет легко интегрировать получаемый код в современные рабочие процессы веб-разработки. Установка под Windows Самый простой способ загрузить и установить Sass под Windows — зайти в его GitHub-репозиторий по следующему URL-адресу: tinyurl.com/getsass Под списком активов будет набор файлов, показанный на рис. 27.1. Из этих файлов ниже показаны только файлы для Windows (имена файлов в зависимости от номера версии могут отличаться): dart-sass-1.49.9-windows-ia32.zip dart-sass-1.49.9-windows-x64.zip Теперь нужно загрузить соответствующий файл и воспользоваться стандартными средствами используемой операционной системы для распаковки его содержимого. И наконец, в системный путь нужно добавить подпапку dart-sass (или указать другое имя извлеченной папки).
422 | Глава 27 Рис. 27.1. GitHub-репозиторий Sass Как известно, путь — это набор имен папок, сохраненных в качестве настроек на вашем компьютере. Когда вводится имя программы, отсутствующей в текущей папке, компьютер может пройти по этому пути, выполняя поиск местоположения запускаемого файла. То есть программа может не находиться в текущей используемой папке, что позволяет хранить системные программы отдельно от документов проекта. Рассмотрим один из способов добавления названия папки к пути Windows: 1. Наберите в поле поиска меню «Пуск» advanced (Дополнительно). 2. Из предлагаемых вариантов выберите View Advanced System Settings (Просмотреть дополнительные параметры системы). 3. Убедитесь, что в появившемся окне выбрана вкладка Advanced (Дополнительно). 4. Щелкните мышью на кнопке Environment Variables (Переменные среды). В этом разделе выделите Path (Путь) в подразделе User variables for… (Пользовательские переменные для…) и нажмите кнопку Edit (Изменить). На рис. 27.2 показано окно System Properties (Свойства системы) с кнопкой Environment Variables (Переменные среды), и окно переменных среды, показывающее текущий путь и значения других переменных. Теперь можно добавить путь, для чего нужно щелкнуть на кнопке Edit (Редактировать), а затем на кнопке New (Создать) и ввести дополнение к пути. Например, если распакованная папка dart-sass помещена в корень диска C, можно ввести c:\dartsass, как показано на рис. 27.3, а затем нажать кнопку OK (Готово).
Метаданные НАЗВАНИЕ КНИГИ: Мастер-класс по HTML5 и CSS3 ПОДЗАГОЛОВОК: От новичка к эксперту за 29 простых шагов ИМЯ АВТОРА: Робин Никсон (Robin Nixon) КАТЕГОРИИ: Веб-разработка, Веб-дизайн, Программирование РЕКЛАМНЫЙ СЛОГАН: Все, о чем нужно знать, чтобы стать мастером вебразработки ОСНОВНЫЕ МОМЕНТЫ: Изучение или освежение в памяти основ HTML и CSS Освоение лучших инструментов разработки веб-дизайна Приобретение навыков создания надписей и рисунков на холстах HTML5 Освоение приемов использования геолокации и картографирования для улучшения пользовательского восприятия Изучение способов вставки аудио- и видеоинформации в веб-страницы и приложения Приобретение навыков создания усовершенствованных форм ввода информации с простой обработкой ошибок Освоение приемов доступа к локальному хранилищу с целью создания веб-страниц с моментальным откликом Приобретение навыков создания усовершенствованных макетов с двумерными и трехмерными преобразованиями и анимацией Изучение эффективных приемов веб-дизайна с применением CSS Grid Освоение возможностей, предоставляемых макетом Flexbox Изучение порядка использования Sass, чтобы поднять приемы разработки CSS на следующий уровень Описание Мастер-класс по HTML5 и CSS3 — исчерпывающее руководство, предполагающее лишь наличие поверхностных знаний HTML и CSS и желание перевести имеющие-
460 | Метаданные ся навыки веб-разработки на новый уровень. Каждый шаг на этом пути выполняется последовательно с готовыми рабочими примерами и многочисленными рисунками, четко иллюстрирующими то, чему здесь учат. Написанная в дружественном и легком для восприятия стиле, с большим количеством авторских наблюдений и наработок, эта книга отправит вас в путешествие по всему, что нужно узнать, чтобы наиболее эффективно воспользоваться новейшими инструментами, доступными в настоящее время в арсенале передовых веб-разработчиков. Разбирая приводимые в книге примеры, вы поочередно изучите, а затем освоите каждый новый прием, и только после этого состоится переход к следующим. По мере изучения материалов книги будет складываться все более четкое представление о типах функций, доступных вам благодаря новым мощным технологиям, добавленным как в HTML, так и в CSS. В начале каждой главы подробно рассказывается о ключевых элементах, подлежащих изучению, и ставится цель, к которой нужно стремиться с позиции тех знаний и навыков, которые следует приобрести к моменту завершения изучения главы. Учитывая объем знаний, подлежащих усвоению, и уровень глубокого понимания, которого следует достичь, эта книга станет мощным шагом на пути повышения ваших возможностей по трудоустройству, а также гораздо более успешного и быстрого продвижения по избранной вами карьерной лестнице. Чему вы сможете научиться Вы получите полноценное представление о текущем уровне технологий и инструментов, предоставляемых как в HTML5, так и в CSS3. Вы приобретете навыки, необходимые для создания веб-сайтов, не уступающих по своим стандартам лучшим доступным в настоящее время в Интернете образцам. Вы овладеете приемами, всего лишь несколько лет назад считавшимися особо трудоемкими и сложными при разработке на JavaScript, но в настоящее время вполне доступными и готовыми к простому применению во всех современных браузерах. Для кого эта книга Книга предназначена для тех, кто уже занимается веб-разработкой или только ступил на эту стезю, а также для всех желающих сделать успешную карьеру в области интерфейсного веб-дизайна.
Метаданные | 461 Содержание Глава 1: Начальные сведения о HTML5 и CSS3 Глава 2: Установка веб-сервера Глава 3: Visual Studio Code Глава 4: Консоль разработчика Глава 5: Введение в HTML5 Глава 6: Использование холста в HTML5 Глава 7: Прямоугольники и заливки Глава 8: Надписи на холсте Глава 9: Рисование на холсте Глава 10: Работа с холстом Глава 11: Расширенные возможности работы с холстом Глава 12: Применение геолокации Глава 13: Работа с формами Глава 14: Локальное хранилище и многое другое Глава 15: Аудио и видео Глава 16: Введение в CSS3 Глава 17: Селекторы атрибутов CSS3 Глава 18: Создание фона Глава 19: Построение границ Глава 20: Свойства блока и текста Глава 21: Цвета и прозрачность Глава 22: Текстовые эффекты и шрифты Глава 23: Двумерные преобразования Глава 24: Трехмерная графика и анимация Глава 25: Макет Flexbox Глава 26: CSS Grid Глава 27: Знакомство с Sass Глава 28: Переменные и потоки выполнения в Sass Глава 29: Расширенный Sass
462 | Метаданные КЛЮЧЕВЫЕ СЛОВА (7): Веб-разработка HTML и CSS HTML5 и CSS3 Геолокация Веб-аудио и видео Холсты HTML5 2D и 3D CSS-преобразования КЛЮЧЕВЫЕ СЛОВА (15): Веб-разработка HTML и CSS HTML5 и CSS3 Геолокация Веб-аудио и видео Холсты HTML5 2D и 3D CSS-преобразования Веб-дизайн Доступ к локальному хранилищу Стилевые таблицы Sass Flexbox-макет CSS Grid Текстовые эффекты CSS Работа с фоном в CSS Работа с формами в CSS Биография автора Робин Никсон — веб-разработчик и преподаватель, активно занимающийся программированием с 1980-х годов. Ранее он редактировал компьютерный журнал, был директором нескольких компаний-разработчиков программного обеспечения, а в последнее время стал автором ряда самых продаваемых книг о компьютерах и компьютерных технологиях. Области интересов Робина — фронтенд-разработка с использованием HTML, CSS и JavaScript, а также управление серверной частью с помощью PHP и MySQL. Он также активный исследователь в области искусственного интеллекта.
Метаданные | 463 СЛОГАНЫ И БРОСКИЕ ФРАЗЫ: Станьте мастером веб-разработки. Запустите на взлет свою карьеру веб-разработчика. Здесь все, что нужно знать о современной веб-разработке. Создавайте ошеломляющие веб-страницы и приложения. Существенно расширьте перспективы своего заработка. Станьте экспертом на ниве веб-дизайна. Превратите свой веб-дизайн в выдающийся образец творчества.