В Части 1 этой статьи мы обсудили, как настроить шаблонный HTML-файл и использовать JavaScript для управления DOM. Этот блог будет немного короче и сфокусирован на некоторых основных функциях CSS и передовых методах стилизации приложения. Мы начнем с незначительных изменений в HTML, но сначала поговорим о CSS.
Каскадные таблицы стилей
CSS или каскадные таблицы стилей описывают, как наши HTML-элементы будут отображаться на веб-странице. Мы используем «селекторы» CSS для выбора определенных элементов HTML из нашей DOM и применения к ним стилей; это может быть цвет, размер шрифта, положение на странице и все, что вы можете придумать. В этом блоге мы возьмем наше веб-приложение из этого:
К этому:
Незначительные корректировки
Прежде чем мы перейдем к CSS, мы внесем некоторые незначительные изменения в JavaScript и HTML, чтобы упростить стилизацию. Начнем с файла index.js.
В последний раз, когда мы редактировали файл JavaScript, мы оставили его примерно таким:
Мы просто сделаем здесь небольшую корректировку. Обратите внимание, что в строках 23 и 24 мы создаем элементы li и button, затем добавляем элемент button к li в строке 36. Это было хорошо для базового приложения, но чтобы упростить добавление стилей, можно было бы сделать больше имеет смысл обернуть и элемент списка, и кнопку в div, а затем добавить div. Тогда наш JavaScript будет выглядеть так:
В дополнение к добавлению div мы даем каждому элементу атрибут className, что эквивалентно добавлению класса в тег HTML. Если бы это было записано в HTML, это выглядело бы так:
Также будет еще одна небольшая поправка в файле index.html. Мы собираемся обернуть теги label, input, и button внутри блока div и присвоить ему класс «new-todo-container».
Импорт CSS
Теперь, когда мы внесли некоторые изменения в наш HTML и JavaScript, чтобы упростить стилизацию, мы можем создавать стили! Мы создадим файл с именем styles.css в нашем основном каталоге и импортируем его в наш HTML. Как вы уже догадались, расширение .css указывает на то, что содержимое этого файла будет записано в CSS.
Чтобы импортировать этот файл в HTML, мы используем тег link, который будет определять связь между этим файлом и внешним источником. Тег link будет иметь атрибут rel, который описывает связь между этим документом и тем, на который мы ссылаемся, в этом случае он будет определен как таблица стилей. Тег link также будет иметь "href", который представляет собой URL-адрес документа, на который мы ссылаемся, styles.css. Теперь файл index.html должен выглядеть следующим образом:
Селекторы CSS
В CSS мы используем селекторы, чтобы указать, в какую часть документа мы хотим добавить стиль. Вы можете просмотреть список всех селекторов здесь, но мы рассмотрим некоторые из наиболее часто используемых селекторов, чтобы помочь вам начать стилизацию вашего приложения. Мы можем начать с самого простого селектора, который выбирается по имени тега HTML-элемента.
Глядя на наш HTML-файл, мы видим, что все наши элементы существуют в теге body. Набрав "body" и добавив фигурные скобки, мы используем тег body в качестве селектора, чтобы добавить любой стиль, который мы поместили в скобки! Давайте попробуем следующий код изменить цвет фона.
Обновите браузер, и вы увидите изменения!
Однако выбор по элементам не рекомендуется. Хотя мы можем работать с небольшим приложением, большинство веб-страниц очень большие и содержат множество различных компонентов, которые используют одни и те же элементы во многих разных местах. По этой причине у нас есть классы. Как я упоминал в части 1 этого блога, классы позволяют нам легко выбирать, на какой HTML-элемент мы хотим ссылаться в нашей таблице стилей. Набрав имя класса с расширением. (точка) перед ним, мы можем ссылаться на любой элемент независимо от имени, если он имеет это имя класса.
Здесь мы ссылаемся на элемент div с именем класса «new-todo-container», который обертывает наши метки label, input и button для добавления элемента todo. Свойство ‘text-align’, установленное на center, устанавливает текст в выбранном элементе, который создается в центре этого элемента. Поскольку тег div занимает всю ширину экрана, текст появляется в середине экрана!
Еще один распространенный селектор CSS - атрибут «id». Чтобы ссылаться на элемент с определенным идентификатором, просто поместите # (хэштег) перед именем идентификатора. Селекторы идентификаторов на самом деле имеют приоритет над другими селекторами, поэтому их использование не всегда является хорошей идеей. В общем, использование селекторов классов - лучший способ ссылаться на ваш HTML для стилизации.
Специфичность
Специфика CSS - это то, что определяет, какие стили будут применяться к каким элементам, особенно там, где стили накладываются друг на друга. Файлы CSS читаются сверху вниз, используя самый последний стиль в качестве приоритета для элемента. Если у нас есть файл CSS, который определяет все теги h1 как синий в строке 5, а затем переопределяет их как красный позже в строке 25, будет использоваться самое последнее объявление, а тег h1 будут красными.
Это довольно стандартное поведение для программирования в целом, но, допустим, у вас есть CSS, определяющий h1 как синий, но также селектор классов устанавливает для определенного класса красный цвет. Примерно так:
Если мы применим этот класс «an-h1-tag» к элементу h1, он переопределит общий стиль тега h1, и стиль выбранного класса будет иметь приоритет.
Другой способ продемонстрировать специфичность - сложить или комбинировать селекторы. Если мы возьмем HTML из нашего приложения в качестве примера, у нас будет div, который является родительским для тегов label, input и button. Мы не назначили метку с каким-либо типом класса или идентификатора, поэтому мы могли бы просто указать некоторый CSS, добавив стили ко всем тегам label, но что, если мы используем метку где-то еще в нашем приложении и захотим применяется другой стиль? Комбинируя селектор для div, который содержит метку, и сам label, мы можем указать, что мы хотим добавить стиль только к той конкретной метке (ам), которая существует внутри этот конкретный div.
Обратите внимание, что в приведенном выше тексте есть пробел между «.new-todo-container» и «label». Пробел указывает, что следующий селектор будет дочерним по отношению к первому, если бы мы удалили пробел, этот CSS искал бы элемент с классом «new-todo-container», который также является меткой. Мы можем связать вместе столько селекторов, сколько необходимо, и это может оказаться очень необходимым при работе с очень большими приложениями.
Использование изображений
Если у вас есть опыт работы с HTML, возможно, вы знакомы с использованием тега ‹img /› для отображения изображений в вашем представлении из URL-адресов. Но что, если мы захотим использовать свои собственные загруженные изображения? А что, если мы хотим установить фон как изображение? Для этого мы можем использовать CSS.
Во-первых, мы начинаем с создания папки под названием «assets» в главном каталоге нашего проекта. Имя папки может быть любым, но поскольку в ней будет храниться «актив» для нашего приложения, принято называть эту папку «активами».
Чтобы найти нужное изображение, мне нравится использовать веб-сайт unsplash.com, где можно получить бесплатные стоковые изображения. Я решил использовать найденную мной фотографию красивого голубого неба и пальмы. Еще один совет CSS, который я обнаружил, заключается в том, что изображения и цветовые схемы придают вашему приложению определенное ощущение, вызывающее эмоциональный отклик. Поскольку наше приложение представляет собой приложение To Do, я решил использовать это изображение голубого неба, потому что оно выглядит позитивным и воодушевляющим, кто знает, он может даже вдохновить пользователя на выполнение большего количества пунктов в своем списке! За цветовыми схемами также стоит много психологии, и я бы солгал вам, если бы сказал, что знаю все об этом, но если вам действительно интересно, я рекомендую потратить время на то, чтобы исследовать, какие цветовые схемы вызывают какие эмоции.
После загрузки изображения мы помещаем его в папку «assets». Теперь мы можем получить к нему доступ из любого места в нашем приложении! При повороте файла styles.css у нас есть фон простого оранжевого цвета. Учитывая, что это довольно некрасиво, мы с радостью изменим его, используя следующий синтаксис:
Здесь мы устанавливаем высоту фона на 100%, чтобы покрыть весь основной элемент, а наш стиль «background» принимает параметр «url», который передает относительный путь к файлу нашего изображения! «Размер фона» здесь говорит нам, что мы хотим, чтобы изображение было изменено, чтобы оно занимало 100% высоты тела, а не сохраняло исходные размеры из того места, где мы его загрузили.
CSS Grid и Flexbox
Есть еще два очень популярных и важных свойства в CSS, о которых я хочу здесь поговорить, - это CSS Grid и Flexbox. Мои способности к стилизации резко возросли, когда я узнал о CSS Grid и начал включать его в свои приложения. И Flexbox, и Grid - это инструменты в CSS, которые помогают упростить разработку макета страницы. Я написал целый блог о Grid и FlexBox вы можете прочитать здесь, но пока понимаю, что Flexbox предназначен для одномерного макета, а Grid - для двухмерного макета.
В нашем приложении мы собираемся сделать наш список дел в виде сетки, таким образом, каждое дело div может быть отдельной строкой в сетке. Мы устанавливаем свойство отображения на сетку, затем определяем строки и столбцы шаблона для нашей сетки, чтобы указать, сколько строк и столбцов нам понадобится. Здесь мы можем использовать практически любую единицу: пиксели, проценты или em, но мы собираемся использовать единицу «fr». Единица 'fr' - это часть всего пространства, поэтому, установив одну строку на '1fr', а вторую строку на '2fr', первая строка будет составлять 33,33% пространства, а вторая строка будет оставшимися 66,67. %, или 1/3 и 2/3 от общего пространства сетки. р
Приведенный выше аргумент не позволяет нам утверждать, что минимальный размер строки может быть 0, а максимальный - 1fr. Я не собираюсь перечислять все стили, примененные в этом приложении, это было бы излишне и долго читать. Многие стили CSS на самом деле говорят сами за себя, например, grid-row-gap определяет расстояние между каждой строкой в сетке. Скорее всего, вы могли бы сделать вывод, чего бы достичь «зазор между столбцами сетки», основываясь на этом…
Заключение
Вместо того, чтобы изучать каждый бит CSS для нашего приложения, я собираюсь опубликовать готовый файл с комментариями, чтобы описать некоторые из менее очевидных стилей. Мы рассмотрели здесь многое, и, самое главное, рассмотрели основы и некоторые концепции, которые помогут вам начать добавлять CSS в свои приложения. Большая часть CSS - это метод проб и ошибок, и многие экспериментируют с разными идеями, чтобы увидеть, что сделает ваше приложение лучше.
Если вы так далеко зашли в своем блоге, я предполагаю, что вы новичок в веб-разработке, и если это так, я вам советую сначала ознакомиться с основами! Получите опыт использования селекторов и селекторов вложенности, убедитесь, что ваши стили соответствуют именно тем элементам, которые вы хотите, чтобы они были, и работайте с сеткой и Flexbox для создания макета вашего приложения. Существует множество библиотек, которые вы можете использовать для стилизации своего приложения, но твердое понимание CSS и того, как он работает, необходимо для интерфейсной веб-разработки.
Когда видео будет готово, этот блог будет связан с видео на YouTube, в котором подробно рассматриваются те же концепции, о которых здесь говорится, а также добавлены стили, которые я не рассматривал. Не стесняйтесь оставлять здесь отзывы, задавать вопросы и смотреть видео. И, как всегда, удачного кодирования!
Ресурсы:
