Необходимые условия для изучения Tailwind CSS

В этой статье мы рассмотрим минимальные знания CSS, которые необходимо иметь перед началом работы с Tailwind CSS. Я предполагаю, что вы уже знаете основы HTML. Но если вы не знаете, я написал серию блогов об этом здесь.

Что такое CSS?

CSS расшифровывается как каскадные таблицы стилей. CSS не является языком программирования. CSS применяет стиль к элементам HTML и изменяет их внешний вид на экране.

Синтаксис CSS

Вот пример синтаксиса CSS:

h1{
  color: red;
  font-size: 16px;
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Давайте разложим это на части, чтобы лучше понять. У нас есть h1, который является селектором. Селектор указывает на элемент, который мы хотим стилизовать, в данном случае на все элементы h1. Каждая строка в фигурных скобках {} содержит объявление (каждое объявление содержит property: value;). В первом объявлении свойство color установлено в значение red. Во втором объявлении свойство font-size установлено в значение 16px. В конце каждого объявления стоит точка с запятой ;.

С помощью приведенного выше кода CSS все элементы <h1> на странице получат красный цвет текста и размер шрифта 16 пикселей.

Как использовать CSS?

Давайте создадим на рабочем столе папку «website» и откроем ее в текстовом редакторе. Внутри папки создайте файл index.html.

Добавьте следующий код на страницу index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Zero CSS to Tailwind CSS</title>
  </head>
  <body>

  </body>
</html>
Вход в полноэкранный режим Выйти из полноэкранного режима

Мы можем добавить CSS на нашу страницу тремя способами:

Встроенный CSS

В этом методе мы устанавливаем значение атрибута style в элементе на нужные нам CSS объявления.

<h1 style="color:red;">Code Pro Max</h1>
Вход в полноэкранный режим Выйти из полноэкранного режима

Вставьте приведенный выше элемент <h1> внутрь <body> страницы и проверьте результат.

Не рекомендуется использовать встроенный CSS, потому что вам нужно указать все стили, необходимые для каждого отдельного элемента, и нет возможности повторного использования кода.

Внутренний CSS

Мы можем вставить внутренний CSS внутрь элемента head нашей страницы. Мы обернем код CSS тегом <style>. Давайте добавим на страницу абзац и применим к нему стиль с помощью внутреннего CSS.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Zero CSS to Tailwind CSS</title>
    <style>
      p{
        color: green;
      }
    </style>
  </head>
  <body>
    <h1 style="color:red;">Code Pro Max</h1>
    <p>This is the main website for Code Pro Max.</p>
  </body>
</html>
Вход в полноэкранный режим Выход из полноэкранного режима

Вы видите, что синтаксис внутреннего CSS немного отличается, и это потому, что применяемые CSS декларации требуют селектора для указания на элемент. Первая часть синтаксиса (p) указывает на все элементы <p> в пределах страницы. Тогда все CSS объявления, которые мы заключили в фигурные скобки {}, будут применены к элементам <p>.

Ограничение этого метода заключается в том, что вам придется заново создавать раздел <style> для каждой отдельной страницы, чтобы повторно использовать стили на других страницах.

Внешний CSS

Метод внешнего CSS похож на метод внутренних стилей, но с той разницей, что стили записываются в отдельный файл .css, чтобы было легче повторно использовать стили на любой странице.

Добавьте следующее после элемента <p> в наш файл index.html:

<h2>Blog Posts</h2>
<h3>Recent Blog Posts</h3>
Вход в полноэкранный режим Выйти из полноэкранного режима

Создайте файл style.css и напишите следующий код:

h2{
    color: blue;
}
h3{
    font-size: 50px;
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Написанный нами стиль CSS устанавливает цвет текста всех тегов <h2> на blue и применяет размер шрифта 50 пикселей ко всем элементам <h3>.

Но как мы можем сообщить html-странице об этом внешнем CSS-файле? Мы сделаем это, добавив элемент <link> внутри раздела <head> нашей HTML-страницы.

<link rel="stylesheet" href="style.css">
Вход в полноэкранный режим Выход из полноэкранного режима

Атрибут rel определяет связь между файлом index.html и связанным документом (style.css), и мы установили его в stylesheet. Атрибут href указывает на расположение связанного документа.

Проверьте результат, и мы увидим, что стили внешнего файла CSS были применены.

Метод внешнего CSS хорош тем, что если мы добавим еще одну страницу и захотим, чтобы те же стили были применены к нашим тегам <h2> и <h3>, нам нужно будет только импортировать файл style.css на эту страницу.

Tailwind CSS использует внешний CSS-файл, содержащий все CSS-классы, которые мы можем применять к элементам на наших страницах.

Инструменты разработчика Chrome (DevTools)

Давайте воспользуемся инструментами разработчика Chrome (DevTools) для проверки стилей, примененных к нашей странице. Мы можем использовать Chrome DevTools для проверки CSS, примененного к элементам на странице. <#Щелкните правой кнопкой мыши на странице и выберите Inspect. Если страница открывается с правой стороны, нажмите на значок «три точки» в правом верхнем углу и измените «Сторона дока» на нижнюю.

На вкладке «Элементы» нажмите на любой элемент, и справа на вкладке стилей будут показаны стили, примененные к элементу.

Если вы хотите отладить свою страницу или что-то работает не так, как ожидалось, Chrome DevTools поможет вам быстрее найти проблему.

Селекторы CSS

До сих пор мы рассмотрели только один тип селектора — выбор элемента на основе имени тега элемента, но мы можем использовать и другие способы.

Селектор типов

В наших примерах мы использовали селекторы типов. В качестве селектора мы записываем имя тега элемента. Этот пример изменит размер шрифта всех элементов <h1> на 40 пикселей:

h1{
  font-size: 40px;
}
Вход в полноэкранный режим Выйдите из полноэкранного режима

Сохраните файл и проверьте результат.

В Chrome DevTools мы видим, что к нашему тегу <h1> были применены как встроенные, так и внешние стили CSS. Мы также видим имя файла style.css, из которого пришел CSS. Chrome DevTools позволяет нам изменять применяемые стили и пробовать различные стили до того, как мы добавим их в наш код.

Селектор типов полезен, если мы хотим применить один и тот же стиль ко всем элементам одного типа. Допустим, у нас есть два элемента <h1>, и мы хотим установить размер шрифта одного из них на 40 пикселей, а другого — на 20 пикселей.

Добавьте следующий тег <h1> под тем, который у нас есть сейчас.

<h1>Never Stop Learning</h1>
Вход в полноэкранный режим Выйдите из полноэкранного режима

Сохраните файл и проверьте результат.

Вы видите, что размер шрифта 40px был применен к обоим тегам <h1>, но мы хотим, чтобы это было только для первого h1, а для второго h1 мы хотим, чтобы размер шрифта был 20px. Нам нужен другой способ нацелиться на определенный элемент и применить к нему стили.

Селектор идентификаторов

Мы можем установить уникальный атрибут id для элемента, а затем применить к нему CSS с помощью селектора id. Чтобы браузер знал, что это селектор id, а не селектор типов, мы добавляем к id знак #. Итак, сначала давайте добавим два разных id к элементам h1.

<h1 id="mainHeading" style="color:red;">Code Pro Max</h1>
<h1 id="subHeading">Never Stop Learning</h1>
Вход в полноэкранный режим Выйти из полноэкранного режима

Теперь, когда каждый из элементов h1 имеет атрибут id, мы можем нацелить первый элемент, установив селектор на #mainHeading, а второй — на #subHeading. Я удалил предыдущий селектор h1, поскольку теперь у нас есть селектор id для него.

#mainHeading{
  font-size: 40px;
}
#subHeading{
  font-size: 20px;
}
Вход в полноэкранный режим Выйдите из полноэкранного режима

сохраните файл и проверьте результат.

Вы можете видеть, что каждый из элементов h1 получил свои собственные стили с помощью селектора id.

Селектор id решает проблему с селекторами типов, но что если у нас есть страница с 5 различными типами тегов <p> и мы хотим показать два из них красным цветом, два — оранжевым, а еще один — синим? Если мы хотим использовать селектор id, то мы повторимся.

Внутри файла index.html, после элемента h3, добавьте следующие абзацы.

<p id="paragraph-red-1">First paragraph</p>
<p id="paragraph-red-2">Second paragraph</p>
<p id="paragraph-orange-1">Third paragraph</p>
<p id="paragraph-orange-2">Forth paragraph</p>
<p id="paragraph-blue">Fifth paragraph</p>
Вход в полноэкранный режим Выйти из полноэкранного режима

А для CSS нам нужно будет добавить следующее, чтобы выделить каждый абзац и задать их цвет:

#paragraph-red-1{
  color: red;
}
#paragraph-red-2{
  color: red;
}
#paragraph-orange-1{
  color: orange;
}
#paragraph-orange-2{
  color: orange;
}
#paragraph-blue{
  color: blue;
}
Войти в полноэкранный режим Выйти из полноэкранного режима

У нас все работает, но один и тот же color: red; или color: orange применяется несколько раз. Если у нас есть еще 20 абзацев, которые мы хотим показать красным цветом, нам придется создать еще 20 стилей в нашем CSS-файле для их выделения. Причина повторения одних и тех же стилей заключается в том, что мы не можем использовать один и тот же атрибут id для другого элемента. Значение атрибута id должно быть уникальным на каждой странице. Именно здесь может быть полезен селектор классов.

Селектор классов

Мы используем селекторы классов, если у нас есть несколько элементов, использующих одинаковые стили. В последнем примере у нас было несколько абзацев, использующих один и тот же цвет. Чтобы использовать селектор классов, сначала нужно добавить атрибут class к нашему элементу. Я сначала удалю все идентификаторы абзацев, а затем добавлю к ним класс.

<p class="text-red">First paragraph</p>
<p class="text-red">Second paragraph</p>
<p class="text-orange">Third paragraph</p>
<p class="text-orange">Forth paragraph</p>
<p class="text-blue">Fifth paragraph</p>
Вход в полноэкранный режим Выход из полноэкранного режима

Значение атрибута class может быть одинаковым для нескольких элементов. В нашем CSS удалите предыдущие стили и добавьте следующие стили с селектором class. Чтобы указать браузеру, что мы нацеливаемся на класс элемента, в нашем CSS-файле имя класса должно быть дополнено точкой «.«.

.text-red{
  color: red;
}
.text-orange{
  color: orange;
}
.text-blue{
  color: blue;
}
Вход в полноэкранный режим Выйдите из полноэкранного режима

Сохраните файл и проверьте результат

Результат тот же, но теперь у нас меньше строк CSS, и мы можем добавить классы text-red, text-orange или text-blue к любым другим элементам и изменить их цвет текста. Еще одним преимуществом использования селекторов классов является то, что мы можем добавить несколько классов к элементу, разделенных пробелом, и это приведет к применению всех стилей к элементу.

Давайте добавим следующие классы в конец файла style.css:

.text-small{
  font-size: 20px
}
.text-medium{
  font-size: 40px
}
.text-large{
  font-size: 60px
}
Вход в полноэкранный режим Выход из полноэкранного режима

Добавьте второй класс к любому из абзацев, разделенных пробелом, чтобы изменить размер шрифта в них.

<p class="text-red text-large">First paragraph</p>
<p class="text-red text-medium">Second paragraph</p>
<p class="text-orange text-small">Third paragraph</p>
<p class="text-orange text-large">Forth paragraph</p>
<p class="text-blue text-small">Fifth paragraph</p>
Войти в полноэкранный режим Выйти из полноэкранного режима

Это применит оба стиля к нашим абзацам.

Tailwind CSS работает с классами, и мы применяем эти классы к нашим элементам с помощью атрибута class.

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

Комментарии CSS

Вы также можете добавить комментарии к вашему CSS. Это полезно, если вы хотите пояснить написанный вами CSS. Комментарий будет виден только в вашем коде, он не будет отображаться в браузере или влиять на макет страницы. Комментарий CSS начинается с /* и заканчивается */:

/* This text will not show in the browser or affect the layout of the page */

/* We can have
multiline
comments
*/

/*
CSS styles in the comments will not be applied
.text-very-large{
  font-size: 100px;
}
*/
Вход в полноэкранный режим Выход из полноэкранного режима

Список свойств CSS

В примерах, которые мы рассмотрели до сих пор, у нас было только два основных CSS-свойства color и font-size, но существует множество свойств, которые мы можем использовать. Вы можете зайти на w3schools.com/cssref и посмотреть все доступные свойства CSS с примерами кода. Причина, по которой я не рассказал о них, заключается в том, что Tailwind CSS использует их по-другому. Мы используем классы Tailwind CSS для применения стилей к нашим элементам.

Что дальше?

Теперь, когда вы знаете, как работает CSS, вы можете перейти к установке Tailwind CSS и начать изучать предоставляемые им классы CSS.

Оцените статью
devanswers.ru
Добавить комментарий