Css учебник для начинающих: Учебник CSS для начинающих

Содержание

Подключение CSS

Прочитав каскадную таблицу стилей, браузер форматирует HTML документ в соответствии с правилами, заданными в этой таблице стилей.

Три способа добавить CSS на веб-страницу

Существует три способа подключения CSS к документу HTML:

  • Внутриэлементный или строчный
  • Внутридокументный или встроенный
  • Внешний

Внутриэлементные стили

При внутриэлементном или строчном подключении стиля, он задается непосредственно внутри определения HTML тега при помощи атрибута style. Атрибут style принимает любое CSS свойство. Данный способ используется для подключения уникального стиля к одному отдельно взятому элементу.

Это выглядит следующим образом:

<!DOCTYPE html>
<html>
<body>
<h2>Заголовок</h2>
<p>Текст. И еще текст.</p>
</body>
</html>

Однако, как вы, наверное, помните, лучший подход – это когда HTML документ полностью свободен от элементов и атрибутов визуального представления. Разделение содержимого и его визуального представления — это то, ради чего, собственно, и создавался CSS. Поэтому внутриэлементный способ определения стилей следует стараться избегать и использовать только при крайней необходимости.

Внутридокументные стили

Встроенные или внутридокументые стили используются для определения стилей элементов целой веб-страницы, если эта страница имеет свои уникальные стили. Для этого в теге <head> определяется тег <style>, в котором задаются все стили для данной веб-страницы.

Такое определение выглядит следующим образом:

<!DOCTYPE html>
<html>
<head>
<title>Пример CSS</title>
<style>
  h2 {
    color: red;
  }
  p {
    color: blue;
  }
</style>
</head>
<body>
<h2>Заголовок</h2>
<p>Текст. И еще текст.</p>
</body>
</html>

Следующее определение сделает все параграфы страницы синими, а все ссылки заголовки первого уровня красными.

Помня о разделении файлов HTML и CSS, внутриэлементные стили также нужно стараться избегать. Хотя иногда подобные стили бывают полезными. Например, для ускорения загрузки страницы.

Внешние стили

Внешние стили используются для подключения одновременно ко многим страницам сайта. Благодаря этому, изменив всего один файл CSS можно изменить внешний вид всего сайта!

Для определения таблицы стилей в любом текстовом редакторе создается отдельный CSS файл с определениями стилей. Содержимое такого файла может быть, например, таким:

p {
   color: red;
}
a {
   color: blue;
}

Если сохранить такой файл под именем «web.css» (расширение должно быть «.css»), то его подключают к HTML документу при помощи тега <link>:

<!DOCTYPE html>
<html>
<head>
<title>Пример CSS</title>
<link rel="stylesheet" href="web.css">
</head>
<body>
<h2>Заголовок</h2>
<p>Текст.  Еще текст.</p>
</body>
</html>

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

Несколько таблиц стилей на одной странице

Если какое-то свойство определяется для одного и того же селектора (элемента) в нескольких разных таблицах стилей, то использоваться будет значение того свойства, которое определяется в последней по подключению таблице стилей.

Допустим, что во внешней таблице стилей определен такой стиль для элемента <h2>:

h2 {
  color: navy;
}

Теперь допустим, что во внутридокументной таблице стилей также определен стиль для элемента <h2>:

h2 {
  color: orange;   
}

Если внутридокументная таблица подключается после внешней таблицы стилей, то цвет элемента <h2> будет «orange»:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h2 {
  color: orange;
}
</style>
</head>

Однако, если внутридокументная таблица подключается до внешней таблицы стилей, то цвет элемента <h2> будет «navy»:

<head>
<style>
h2 {
  color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle. css">
</head>

Каскадный порядок

А какой стиль будет использоваться, если для HTML элемента задано больше одного стиля?

Все стили на веб-странице будут «каскадно» транслированы в новую «виртуальную» таблицу стилей в следующем порядке (цифра 1 имеет наивысший приоритет):

  1. Внутриэлементный стиль (внутри HTML элемента)
  2. Внешние и внутридокументные таблицы стилей (в секции head)
  3. Стили браузера по умолчанию

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

CSS Справочник и примеры элементы

HTML5CSS.ru

ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ

❮ Главная
Дальше ❯

A

align-contentЗадает выравнивание между линиями внутри гибкого контейнера, если элементы не используют все доступное пространство
align-itemsЗадает выравнивание для элементов внутри гибкого контейнера
align-selfЗадает выравнивание для выбранных элементов внутри гибкого контейнера
allСбрасывает все свойства (за исключением Unicode-двунаправленного письма и направления)
animationСокращенное свойство для всех свойств анимации
animation-delayУказывает задержку начала анимации
animation-directionУказывает, следует ли воспроизвести анимацию вперед, назад или в альтернативных циклах
animation-durationУказывает, как долго должна проходить анимация для завершения одного цикла
animation-fill-modeЗадает стиль элемента, если анимация не воспроизводится (до начала, после завершения или и то, и другое)
animation-iteration-countУказывает, сколько раз должна воспроизводиться анимация
animation-nameЗадает имя для анимации @keyframes
animation-play-stateУказывает, запущена ли анимация или приостановлена
animation-timing-functionЗадает кривую скорости анимации

B

backface-visibilityОпределяет, должна ли быть видна задняя грань элемента при обращении к пользователю
backgroundСокращенное свойство для задания всех свойств фона в одном объявлении
background-attachmentОпределяет, прокручивается ли фоновое изображение с остальной частью страницы, или зафиксировано
background-blend-modeЗадает режим наложения для каждого слоя фона (цвет/изображение)
background-clipОпределяет, насколько фон (цвет или изображение) должен расширяться в элементе
background-colorЗадает цвет фона элемента
background-imageЗадание одного или нескольких фоновых изображений для элемента
background-originЗадает исходную позицию фонового изображения
background-positionОпределяет положение фонового изображения
background-repeatУстанавливает, если/как фоновое изображение будет повторяться
background-sizeОпределяет размер фоновых изображений
borderСокращенное свойство для ширины границы, стиля границы и цвета границы
border-bottomСокращенное свойство для задания всех свойств нижней границы в одном объявлении
border-bottom-colorЗадает цвет нижней границы
border-bottom-left-radiusОпределяет радиус границы нижнего левого угла
border-bottom-right-radiusОпределяет радиус границы нижнего правого угла
border-bottom-styleЗадает стиль нижней границы
border-bottom-widthЗадает ширину нижней границы
border-collapseУстанавливает, должны ли границы таблицы сворачиваться в одну границу или быть разделены
border-colorЗадает цвет четырех границ
border-imageСокращенное свойство для установки всех свойств Border-Image-*
border-image-outsetОпределяет величину, на которую область изображения границы выходит за границы рамки
border-image-repeatУказывает, должно ли изображение границы повторяться, округляться или растягиваться
border-image-sliceОпределяет способ среза изображения границы
border-image-sourceУказывает путь к изображению, которое будет использоваться в качестве границы
border-image-widthЗадает ширину изображения границы
border-leftСокращенное свойство для задания всех свойств левой границы в одном объявлении
border-left-colorЗадает цвет левой границы
border-left-styleЗадает стиль левой границы
border-left-widthЗадает ширину левой границы
border-radiusСокращенное свойство для установки всех четырех границ-*-свойства RADIUS
border-rightСокращенное свойство для задания всех свойств правой границы в одном объявлении
border-right-colorЗадает цвет правой границы
border-right-styleЗадает стиль правой границы
border-right-widthЗадает ширину правой границы
border-spacingУстанавливает расстояние между границами соседних ячеек
border-styleЗадает стиль четырех границ
border-topСокращенное свойство для задания всех свойств верхнего края в одном объявлении
border-top-colorЗадает цвет верхней границы
border-top-left-radiusОпределяет радиус границы верхнего левого угла
border-top-right-radiusОпределяет радиус границы верхнего правого угла
border-top-styleЗадает стиль верхней границы
border-top-widthЗадает ширину верхней границы
border-widthЗадает ширину четырех границ
bottomУстанавливает положение элементов в нижней части родительского элемента
box-decoration-breakЗадает поведение фона и границы элемента при разрыве страницы или, для линейных элементов, при разрыве строки.
box-shadowПрикрепление одной или нескольких теней к элементу
box-sizingОпределяет, как вычисляется ширина и высота элемента: должны ли они включать отступы и границы, или нет
break-afterЗадает поведение разрыва страницы, столбца или региона после созданного поля
break-beforeЗадает поведение разрыва страницы, столбца или региона перед созданным полем
break-insideОпределяет поведение разрыва страницы, столбца или региона в созданном поле

C

caption-sideЗадает размещение заголовка таблицы
caret-colorОпределяет цвет курсора (стрелка) в входах, текстового ввода или любого элемента, редактируемого
@charsetЗадает кодировку символов, используемую в таблице стилей
clearУказывает, на каких сторонах элемента плавающие элементы не могут плавать
clipЗажимы абсолютно позиционированного элемента
colorЗадает цвет текста
column-countУказывает количество столбцов, элемент должен быть разделен на
column-fillУказывает, как заполнять столбцы, сбалансированные или нет
column-gapУказывает зазор между столбцами
column-ruleСокращенное свойство для установки всех свойств столбца-Rule-*
column-rule-colorЗадает цвет правила между столбцами
column-rule-styleЗадает стиль правила между столбцами
column-rule-widthЗадает ширину правила между столбцами
column-spanУказывает, сколько столбцов элемент должен охватывать поперек
column-widthЗадает ширину столбца
columnsСокращенное свойство для задания ширины столбца и счетчика столбцов
contentИспользуется с: before и: After псевдо-элементы, чтобы вставить сгенерированное содержимое
counter-incrementУвеличивает или уменьшает значение одного или нескольких счетчиков CSS
counter-resetСоздает или сбрасывает один или несколько счетчиков CSS
cursorУказывает курсор мыши, отображаемый при наведении на элемент

D

directionЗадает направление текста/направление письма
displayУказывает, как должен отображаться определенный элемент HTML

E

empty-cellsУказывает, отображать ли границы и фон на пустых ячейках таблицы

F

filterОпределяет эффекты (например, размытие или сдвиг цвета) на элементе перед отображением элемента
flexСокращенное свойство для Flex-расти, Flex-сжатия и Flex-основы свойства
flex-basisЗадает начальную длину гибкого элемента
flex-directionУказывает направление гибких элементов
flex-flowСокращенное свойство для свойств Flex-Direction и Flex-Wrap
flex-growУказывает, сколько будет расти номенклатура относительно остальных
flex-shrinkУказывает, как элемент будет сжиматься относительно остальных
flex-wrapУказывает, следует ли обернуть гибкие элементы
floatУказывает, должно ли поле плавать
fontЗадает все свойства шрифта в одном объявлении
@font-faceПравило, позволяющее веб-сайтам загружать и использовать шрифты, не являющиеся «web-safe» шрифтами
font-familyЗадает семейство шрифтов для текста
font-feature-settingsПозволяет контролировать расширенные типографские функции шрифтов OpenType
@font-feature-valuesПозволяет авторам использовать общее имя в шрифт-вариант-альтернативный для функции, активированной по-разному в OpenType
font-kerningУправляет использованием информации о кернинге (как буквы расположены в пространстве)
font-language-overrideУправляет использованием глифов, специфичных для языка, в шрифте
font-sizeЗадает размер шрифта текста
font-size-adjustСохраняет читаемость текста, когда происходит откат шрифта
font-stretchВыбор нормальной, сжатой или расширенной грани из семейства шрифтов
font-styleЗадает стиль шрифта для текста
font-synthesisЭлементы управления, отсутствующие шрифты (полужирный или курсив) могут быть синтезированы обозревателем
font-variantУказывает, должен ли текст отображаться в шрифте с малыми прописными буквами
font-variant-alternatesУправляет использованием альтернативных глифов, связанных с альтернативными именами, определенными в @font-функция-значения
font-variant-capsУправление использованием альтернативных глифов для заглавных букв
font-variant-east-asianУправляет использованием альтернативных глифов для восточно-азиатских скриптов (например, японского и китайского)
font-variant-ligaturesОпределяет, какие лигатуры и контекстные формы используются в текстовом содержимом элементов, к которым он относится
font-variant-numericУправляет использованием альтернативных глифов для чисел, дробей и порядковых маркеров
font-variant-positionУправляет использованием альтернативных глифов меньшего размера, которые расположены в виде наложения или подстрочных символов относительно базовой линии шрифта
font-weightОпределяет вес шрифта

G

gridСокращенное свойство
grid-areaЛибо задает имя элемента сетки, либо это свойство является сокращенным свойством для свойств сетка- начало строки, Сетка-столбец-начало, Сетка-конец строкии Сетка-конец столбца
grid-auto-columnsЗадает размер столбца по умолчанию
grid-auto-flowУказывает, как автоматически размещаемые элементы вставляются в сетку
grid-auto-rowsЗадает размер строки по умолчанию
grid-columnСокращенное свойство для свойств Сетка-столбец-начало и Сетка-конец столбца
grid-column-endУказывает, где закончить элемент сетки
grid-column-gapОпределяет размер зазора между столбцами
grid-column-startУказывает, где начать элемент сетки
grid-gapСокращенное свойство для свойств Сетка-строка-зазор и Сетка-столбец-зазор
grid-rowСокращенное свойство для свойств Сетка-строка-начало и Сетка-конец строки
grid-row-endУказывает, где закончить элемент сетки
grid-row-gapОпределяет размер зазора между строками
grid-row-startУказывает, где начать элемент сетки
grid-templateСокращенное свойство для свойств Сетка-шаблон-строки, сетка -шаблон-столбцы и области сетки
grid-template-areasУказывает, как отображать столбцы и строки с использованием именованных элементов сетки
grid-template-columnsОпределяет размер столбцов и количество столбцов в макете сетки
grid-template-rowsОпределяет размер строк в макете сетки

H

hanging-punctuationУказывает, может ли знак пунктуации размещаться вне поля строки
heightЗадает высоту элемента
hyphensЗадание разбиения слов для улучшения макета абзацев

I

image-renderingДает подсказку браузеру о том, какие аспекты изображения наиболее важны для сохранения при масштабировании изображения
@importПозволяет импортировать таблицу стилей в другую таблицу стилей
isolationОпределяет, должен ли элемент создавать новое содержимое стека

J

justify-contentЗадает выравнивание между элементами внутри гибкого контейнера, если элементы не используют все доступное пространство

K

@keyframesУказывает код анимации

L

leftЗадает левое положение позиционного элемента
letter-spacingУвеличивает или уменьшает расстояние между символами в тексте
line-breakУказывает, как/если разбить линии
line-heightУстановка высоты линии
list-styleЗадает все свойства для списка в одном объявлении
list-style-imageЗадает изображение в качестве маркера элемента списка
list-style-positionОпределяет положение маркеров элементов списка (маркеров)
list-style-typeУказывает тип маркера элемента списка

M

marginУстанавливает все свойства полей в одном объявлении
margin-bottomУстанавливает нижнее поле элемента
margin-leftЗадает левое поле элемента
margin-rightЗадает правое поле элемента
margin-topЗадание верхнего поля элемента
max-heightЗадает максимальную высоту элемента
max-widthЗадает максимальную ширину элемента
@mediaУстанавливает правила стиля для различных типов носителей/устройств/размеров
min-heightЗадает минимальную высоту элемента
min-widthЗадает минимальную ширину элемента

O

object-fitУказывает, как содержимое заменяемого элемента должно быть установлено в поле, установленное его используемой высотой и шириной
object-positionЗадает выравнивание заменяемого элемента внутри его поля
opacityЗадает уровень непрозрачности для элемента
orderЗадает порядок гибкого элемента по отношению к остальным
orphansЗадает минимальное число строк, которые должны быть оставлены в нижней части страницы при возникновении разрыва страницы внутри элемента
outlineЗадает все свойства структуры в одном объявлении
outline-colorЗадает цвет контура
outline-offsetСмещение контура и его выводит за пределы края границы
outline-styleЗадает стиль контура
outline-widthЗадает ширину контура
overflowУказывает, что происходит, если содержимое переполнено полем элемента
overflow-wrapУказывает, может ли обозреватель разрывать строки в словах, чтобы предотвратить переполнение (если строка слишком длинная, чтобы вместить ее содержащее поле)
overflow-xУказывает, следует ли обрезать левый/правый край содержимого, если оно переполнено областью содержимого элемента
overflow-yУказывает, следует ли обрезать верхний/нижний край содержимого, если оно переполнено областью содержимого элемента

P

paddingЗадает все свойства заполнения в одном объявлении
padding-bottomУстанавливает нижнее заполнение элемента
padding-leftЗадает левое заполнение элемента
padding-rightЗадает правое заполнение элемента
padding-topЗадает верхнее заполнение элемента
page-break-afterЗадает поведение разбиения страницы после элемента
page-break-beforeЗадает поведение разбиения страницы перед элементом
page-break-insideЗадает поведение разбиения страниц внутри элемента
perspectiveПридает элементу с трехмерной позицией некоторую перспективу
perspective-originОпределяет, в какой позиции пользователь смотрит на 3D-позиционный элемент
pointer-eventsОпределяет, реагирует ли элемент на события указателя
positionУказывает тип метода позиционирования, используемого для элемента (статический, относительный, абсолютный или фиксированный)

Q

quotesЗадает тип кавычек для внедренных предложений

R

resizeОпределяет, является ли (и как) элемент изменяемым по размерам пользователем
rightЗадает правильное положение позиционного элемента

T

tab-sizeЗадает ширину символа табуляции
table-layoutОпределяет алгоритм, используемый для компоновки ячеек таблицы, строк и столбцов
text-alignЗадает выравнивание текста по горизонтали
text-align-lastОписывает, как последняя строка блока или строки перед принудительным разрывом строки выравнивается при выравнивании текста «justify»
text-combine-uprightЗадает комбинацию нескольких символов в пространстве одного символа
text-decorationУказывает украшение, добавляемое в текст
text-decoration-colorОпределяет цвет текста-украшение
text-decoration-lineУказывает тип линии в тексте-украшение
text-decoration-styleЗадает стиль линии в оформлении текста
text-indentЗадает отступ первой строки в текстовом блоке
text-justifyЗадает метод выравнивания, используемый при выравнивании текста «justify»
text-orientationОпределяет ориентацию текста в строке
text-overflowУказывает, что должно происходить при переполнении содержащегося в тексте элемента
text-shadowДобавление тени к тексту
text-transformУправляет капитализацией текста
text-underline-positionОпределяет положение подчеркивания, которое задается с помощью свойства Text-декорирование
topОпределяет верхнюю позицию позиционного элемента
transformПрименяет 2D или 3D преобразование к элементу
transform-originПозволяет изменить положение на преобразованных элементах
transform-styleОпределяет способ визуализации вложенных элементов в трехмерном пространстве
transitionСокращенное свойство для задания четырех свойств перехода
transition-delayУказывает, когда начнется эффект перехода
transition-durationУказывает, сколько секунд или миллисекунд требуется для выполнения эффекта перехода
transition-propertyЗадает имя свойства CSS, для которого используется эффект перехода
transition-timing-functionОпределяет кривую скорости эффекта перехода

U

unicode-bidiИспользуется вместе со свойством direction для установки или возврата текста, который должен быть переопределен для поддержки нескольких языков в одном документе
user-selectУказывает, можно ли выбрать текст элемента

V

vertical-alignЗадание вертикального выравнивания элемента
visibilityУказывает, является ли элемент видимым

W

white-spaceУказывает, как обрабатываются пробелы внутри элемента
widowsЗадает минимальное число строк, которые должны быть оставлены в верхней части страницы при возникновении разрыва страницы внутри элемента
widthЗадает ширину элемента
word-breakУказывает, как слова должны прерываться при достижении конца строки
word-spacingУвеличивает или уменьшает расстояние между словами в тексте
word-wrapПозволяет длинные, неразрывные слова, которые будут сломаны и обернуть к следующей строке
writing-mode

Z

z-indexЗадает порядок стека позиционного элемента

❮ Главная
Дальше ❯

Популярное CSS

css текст
блоки css
css картинки
как сделать css
цвета css
шрифты css
css стили
елементы css
фон css
кнопки css
таблица css
размер css
ссылки css
изображение css
выравнивание css
внешние отступы css
внутренние отступы css
списки css
css ширина
css при наведении
css формы

Copyright 2018-2020 HTML5CSS. ru

Правила и Условия Политика конфиденциальности
О нас
Контакты

Руководство по началу работы в 2023 году

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

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

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

📚 Содержание:
  1. Фон: Atomic CSS #
  2. Почему атомарный CSS? №
  3. Что такое Tailwind CSS? №
  4. Начало работы в режиме разработчика Tailwind #
  5. Использование служебных классов Tailwind #
  6. Изучение «языка» Tailwind #
  7. Группировка повторяющихся стилей с Tailwind #
  8. Установка полного набора инструментов Tailwind #
  9. Настройка проектов Tailwind #
  10. Генерация сборки Tailwind #

Наверх

Предыстория: Atomic CSS

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

Концепции Tailwind основаны на том, что обычно называют Atomic CSS , иногда называемом служебными классами CSS . Это концепция CSS, в которой один класс HTML применяет к элементу одну пару свойство/значение CSS. Вот несколько примеров:

   .font-weight-bold {
  вес шрифта: полужирный;
}

.color-ярко-розовый {
  цвет: ярко-розовый;
}
  
  Кодовый язык: CSS (css)

Затем в своем HTML вы должны использовать классы:

   
Пример текста.

  
  Язык кода: HTML, XML (xml)

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

Наверх

Почему Atomic CSS?

Когда у вас есть доступ ко всем возможным парам свойство/значение с помощью специализированных служебных классов, подобных показанным в предыдущем примере, у вас есть несколько преимуществ:

  • Вам не нужно беспокоиться о специфике CSS. Каждая «утилита» — это имя класса, поэтому все они имеют одинаковый уровень специфичности.
  • Нет необходимости писать CSS вообще; вы только создаете элементы с именами классов в HTML.
  • Вы можете построить что угодно, используя только HTML.

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

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

Наверх

Что такое Tailwind CSS?

Tailwind — это библиотека атомарных правил CSS (т. е. одноцелевых служебных классов), которая помогает создавать HTML-страницы, не затрагивая CSS. Но Tailwind — это не только CSS. Помимо самого фреймворка, Tailwind включает в себя интерфейс командной строки и различные параметры конфигурации и оформления. Это позволяет автоматизировать и масштабировать сборки, максимально используя возможности Tailwind без ущерба для производительности и удобства обслуживания.

Прежде чем я перейду к объяснению CLI и параметров сборки в этом руководстве по Tailwind CSS для начинающих, давайте сначала рассмотрим особенности самой библиотеки (то есть атомарных классов). Это продемонстрирует, как легко создавать вещи с помощью Tailwind.

Перейти к началу

Начало работы в режиме разработчика Tailwind

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

Для целей этого руководства по CSS Tailwind, чтобы изучить и поэкспериментировать с библиотекой, вы можете использовать следующий код в вашего HTML, чтобы включить все служебные классы Tailwind:

   < голова>
  <мета-кодировка="UTF-8">
    
  
  Язык кода: HTML, XML (xml)

Вышеприведенный код включает скрипт, называемый CDN Tailwind Play. Этот скрипт предназначен только для обучения и экспериментов, но не для живого сайта . Позже я расскажу, как правильно включить Tailwind в ваши проекты в процессе сборки. Пока этого достаточно, чтобы опробовать Tailwind и начать добавлять классы для стилей HTML-элементов.

Наверх

Использование служебных классов Tailwind

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

Вот пример CodePen с несколькими элементами страницы, включая кнопку, оформленную с помощью некоторых классов Tailwind:

HTML-код выглядит следующим образом (текст удален для краткости):

   

  
...

  
  
...


  <кнопка>...

  
  Язык кода: HTML, XML (xml)

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

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

Наверх

Изучаем «язык» Tailwind

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

В документации Tailwind содержится много информации об именах классов. Вы можете начать с раздела «Макет» и продолжить работу. Каждый раз, когда вы хотите добавить определенное свойство CSS к элементу и не уверены в значении, вы можете использовать функцию интерактивного поиска на странице. Он доступен в верхней части левой панели навигации или с помощью CTRL-K (CMD-K) на клавиатуре.

Введите ключевое слово, которое вы хотите (например, свойство CSS, которое вы хотите использовать), и модальное окно поиска покажет вам релевантные результаты из документов.

Некоторые примеры общих шаблонов, встречающихся в синтаксисе служебного класса Tailwind, включают:

  • Сокращения, такие как w , h , sm , md и lg , для проклейки
  • Почти буквальные эквиваленты CSS, такие как float-left , clear-both , переполнение-авто и т. д.
  • Вертикальные и горизонтальные индикаторы с использованием x и y
  • Индикаторы размера Min/Max, такие как min-w и max-h
  • Аббревиатуры набора шрифтов, например font-sans и font-mono

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

Конечно, вы никогда не запомните все названия классов, поэтому вот несколько инструментов, которые могут вам помочь:

  • Шпаргалка Tailwind на веб-сайте Tailwind Components.
  • Tailwind CSS Cheatsheet, печатная шпаргалка по классам Tailwind
  • Tailwindcss-шпаргалка от Umesh Kadam

Перейти к началу

Группировка повторяющихся стилей с помощью Tailwind

Ранее я показывал вам пример HTML с служебными классами Tailwind, разбросанными повсюду. Вы, возможно, были обеспокоены тем, насколько неэффективно было бы стилизовать каждый отдельный элемент таким образом, даже если одни и те же стили повторяются!

Например, что если бы у меня было пять кнопок на одной странице, и все они выглядели бы так:

   
  
  Язык кода: HTML, XML (xml)

Если бы кнопки появлялись одна за другой, то я мог бы воспользоваться мультикурсорным редактированием в текстовом редакторе, если бы мне нужно было внести какие-либо изменения. В качестве альтернативы я мог бы использовать язык шаблонов (либо во внешнем, либо во внутреннем интерфейсе) для динамического включения повторяющихся элементов, что означает, что мне нужно было бы изменить их только в одном месте. Но что, если элементы расположены не так близко друг к другу или находятся на разных страницах, а приведенные выше решения не помогают?

Для повторяющихся разделов в проектах в документации Tailwind настоятельно рекомендуется создавать страницы с использованием компонентов в таких библиотеках, как React, или частичных шаблонов в таких библиотеках, как Twig. Это означает, что ваши стили будут на 100% построены только с помощью служебных классов, что идеально.

При этом в Tailwind есть директивы @tailwind , @layer и @apply , которые позволяют создавать меньшие повторно используемые наборы служебных классов. Это будут компоненты (часто один элемент), которые слишком малы для полноценной абстракции на уровне библиотеки, но слишком громоздки, чтобы их можно было повторять в другом месте (аналогично приведенному выше примеру с кнопкой).

Используя вышеупомянутые директивы, я могу преобразовать пример кнопки в следующий простой HTML:

   
  
  Язык кода: HTML, XML (xml)

Этот единственный класс HTML представляет все служебные классы, которые я ранее включил в свою кнопку. Это достигается с помощью следующего в моем CSS:

   @tailwind base;
компоненты @tailwind;
утилиты @tailwind;

@компоненты слоя {
  .btn-основной {
    @apply bg-sky-600 hover:bg-sky-700 px-5 py-3 text-white rounded-lg;
  }
}

Обратите внимание, как я переместил все служебные классы в строку, начинающуюся с @apply . Приведенный выше код выполняет следующие действия:

  • Вставляет стили Tailwind base , компонентов и утилит в CSS

    • .

  • Включает класс btn-main в компоненты «корзина» с использованием @layer
  • Назначает выбранные служебные классы имени класса btn-main

При этом я могу использовать . btn-main где угодно, и все кнопки будут наследовать одинаковые стили. Вы можете увидеть это в действии на этой демонстрации, которую я создал с помощью официальной игровой площадки Tailwind. Щелкните вкладку CSS , чтобы просмотреть код, инкапсулирующий все классы кнопок в .btn-main .

Наверх

Установка полного набора инструментов Tailwind

Как уже упоминалось, примеры, которые я показывал до этого момента, не идеальны. CodePen, например, использует CDN Tailwind Play, что означает, что все классы Tailwind включены в страницу, хотя я использую лишь некоторые из них.

Чтобы правильно использовать Tailwind, давайте установим его и настроим для создания только тех CSS, которые мне нужны. В папке моего проекта я собираюсь запустить следующие две команды в своем терминале:

   npm install -D tailwindcss

Это устанавливает Tailwind вместе со всеми его зависимостями в папке моего проекта. Затем я хочу инициировать Tailwind для создания файла конфигурации:

   npx tailwindcss init

Это создает файл с именем tailwind.config.js в корне папки моего проекта со следующим содержимым внутри:

   module.exports = {
  содержание: [],
  тема: {
    продлевать: {},
  },
  плагины: [],
}
  
  Язык кода: JavaScript (javascript)

Добавлять что-либо в этот файл необязательно. Если вы оставите какие-либо части пустыми, Tailwind будет использовать параметры конфигурации по умолчанию, которые вы можете просмотреть здесь. Документы Tailwind рекомендуют заполнять только те параметры, которые вы хотите изменить, а не включать полный файл конфигурации по умолчанию (что вы можете сделать, используя npx tailwindcss init --full при запуске проекта).

Перейти к началу

Настройка проектов Tailwind

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

  • content — определите пути к вашим HTML-шаблонам, компонентам JavaScript и другим файлам, в которых используются имена классов Tailwind.
  • тема — определите параметры темы по умолчанию (цвета, шрифты и т. д.), связанные с дизайном ваших страниц и компонентов.
  • плагины — Включить плагины, расширяющие Tailwind.
  • предустановки — Определите собственную базовую конфигурацию вместо использования по умолчанию Tailwind.
  • префикс — определите пользовательский префикс, который будет отображаться перед каждым классом утилит Tailwind. Это может быть полезно для преодоления конфликтов имен классов.
  • Important — Принудительно помечает все служебные классы Tailwind с помощью !important , что может помочь, если вы добавляете Tailwind в устаревший проект, в котором используется множество высокоспецифичных селекторов.

Полную информацию о доступных параметрах конфигурации см. в документации Tailwind.

В демонстрационных целях предположим, что есть простой файл конфигурации, определяющий расположение моего контента:

   module. exports = {
  содержание: [
    './страницы/**/*.{html,js}',
    './компоненты/**/*.{html, js}'
  ],
  тема: {
    продлевать: {},
  },
  плагины: [],
}
  
  Язык кода: JavaScript (javascript)

Это сообщает Tailwind, что я включаю классы Tailwind в файлы .html и .js в двух папках: страниц и компонентов . Я включаю файлы JavaScript, потому что Tailwind распознает классы, добавленные и удаленные динамически с помощью JavaScript, некоторые из которых будут присутствовать только в файлах .js , а не в HTML.

В некоторых случаях я мог бы использовать 9Папка 0050 src , распространенная во многих проектах, с общедоступной точкой входа HTML. Это будет выглядеть так:

   module.exports = {
  содержание: [
    './public/index.html',
    './src/**/*. {html,js}',
  ],
  тема: {
    продлевать: {},
  },
  плагины: [],
}
  
  Язык кода: JavaScript (javascript)

Все зависит от того, как вы структурировали свой проект и связанные с ним файлы содержимого. Вы также можете использовать процессор, такой как PostCSS, о котором вы можете прочитать здесь.

В качестве предупреждения: убедитесь, что вы не слишком общительны при определении страниц содержимого в своей конфигурации. Например, вы не хотите везде использовать подстановочные знаки, что заставит Tailwind заглянуть внутрь node_modules или в другие папки, которые он не должен проходить.

Перейти к началу

Создание сборки Tailwind

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

Для моего примера я собираюсь запустить следующую команду в корневой папке моего проекта:

   npx tailwindcss -o . /css/styles.min.css --minify

При этом используется команда -o , чтобы указать Tailwind вывести мой CSS в уменьшенном формате в указанной папке. Это гарантирует, что в моем проекте не будет неиспользуемого CSS. Если я использовал только 30 классов Tailwind в своем HTML, то только эти утилиты будут сгенерированы в моем CSS. Оттуда мне просто нужно убедиться, что все HTML-страницы, использующие классы Tailwind, содержат ссылку на мою таблицу стилей.

Конечно, это только один пример сборки и структуры папок. В зависимости от того, используете ли вы библиотеку, такую ​​​​как React или Vue, или каждый раз создаете определенную пользовательскую настройку, вы будете вносить необходимые изменения в свой файл конфигурации и любые связанные команды npm на этапе сборки.

Перейти к началу

Tailwind Заключение по учебнику CSS

Этого должно быть достаточно, чтобы вы начали работать с Tailwind, прежде чем переходить к более сложным сборкам. У вас есть возможность использовать Play CDN только для разработчиков, чтобы экспериментировать и изучать язык служебного класса Tailwind. Когда придет время для этапа сборки, вы можете настроить Tailwind на чтение файлов HTML и JavaScript для создания только того CSS, который вы используете.

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

Если вам понравился этот учебник по Tailwind CSS для начинающих, вам также могут понравиться следующие:

  • 👉 Руководство для начинающих по CSS-переменным
  • 👉 Учебник по Webpack для начинающих

Макет и презентация Кароля К.

Learn CSS — Best CSS Tutorials (2023)

  1. Главная
  2. / Учебники по кодированию
  3. / CSS

Генератор резюме разработчика

Качественное резюме за 5 минут — автоматически генерируется из вашего профиля gitconnected