Первое знакомство с CSS: основы для новичков

Содержание статьи

Введение

Добро пожаловать в мир веб-разработки! Если вы уже знакомы с HTML и хотите узнать больше о том, как придать сайтам и веб-приложениям уникальный стиль и внешний вид, вы находитесь в правильном месте. В этой статье мы затронем основы CSS — ключевого инструмента веб-дизайна.

CSS (Cascading Style Sheets) — это язык, который описывает, как должны быть оформлены элементы веб-страниц, написанных на HTML. CSS появился в 1996 году и с тех пор прошел долгий путь развития, став более мощным и гибким.

Основные понятия и принципы работы CSS

CSS основывается на парах «селектор-свойство». Это базовое понятие, которое необходимо понимать при работе с CSS.

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

Универсальный селектор (*) применяет свойства ко всем элементам на странице.
Селекторы тегов (например, h1, p, div) применяют свойства к определенным HTML-тегам.
Селекторы классов (например, .myClass) применяют свойства к элементам с определенным классом.
Селекторы идентификаторов (например, #myID) применяют свойства к элементу с определенным идентификатором.
Свойства в CSS описывают различные аспекты внешнего вида элементов, к которым они применяются. Свойство состоит из имени свойства и значения, разделенных двоеточием. Например, в паре «селектор-свойство» h1 { color: blue; }, color — это имя свойства, а blue — это его значение.

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

CSS можно применять тремя основными способами:

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

<p style="color: red;">Это красный текст.</p>

Внутренний CSS: стили указываются в теге <style> внутри <head> HTML-документа. Этот способ подходит для небольших проектов или для тестирования, но он также может привести к повторениям и затруднить поддержку кода в больших проектах.

<head>
  <style>
    p {
      color: red;
    }
  </style>
</head>

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

<head>
  <link rel="stylesheet" href="styles.css">
</head>

Одно из ключевых понятий CSS — это каскадирование. CSS следует принципу «каскада», что означает, что если на один и тот же элемент применяется несколько стилей, то в итоге будет применен тот стиль, который имеет наибольший приоритет. Приоритет определяется несколькими факторами, включая тип селектора, порядок стилей в коде и наличие специальных инструкций, таких как !important.

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

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

Работа с цветом и текстом в CSS

CSS предоставляет богатые возможности для работы с цветом и текстом.

Работа с цветом

Цвет в CSS можно задавать разными способами:

С помощью ключевых слов (например, red, blue). Это самый простой и понятный способ, но он ограничен предустановленным набором цветов.
В формате RGB (Red Green Blue, красный зелёный синий), где каждый цвет представлен числом от 0 до 255. Например, rgb(255, 0, 0) — это красный цвет.
В формате RGBA, который аналогичен RGB, но с дополнительным параметром для прозрачности (alpha), который может быть от 0 (полностью прозрачный) до 1 (полностью непрозрачный). Например, rgba(255, 0, 0, 0.5) — это полупрозрачный красный цвет.
В формате HEX (Hexadecimal, шестнадцатеричный). Здесь каждый из цветов представлен двумя шестнадцатеричными цифрами от 00 до FF. Например, #FF0000 — это также красный цвет.
В формате HSL (Hue Saturation Lightness, оттенок насыщенность светлота), который описывает цвет в более «человеческом» формате, оттенок задаётся градусами (от 0 до 360), насыщенность и светлота — процентами. Например, hsl(0, 100%, 50%) — это тоже красный цвет.
В формате HSLA, который аналогичен HSL, но с дополнительным параметром для прозрачности, так же как и в RGBA.

Работа с текстом

Текст можно стилизовать различными способами:

Шрифт. Свойство font-family задаёт шрифт текста. Вы можете использовать любое имя шрифта, доступное на компьютере пользователя, или воспользоваться веб-шрифтами (например, Google Fonts).

p {
  font-family: "Arial", sans-serif;
}

Этот пример устанавливает шрифт Arial для всех параграфов. Если Arial не доступен, будет использоваться любой доступный без засечек (sans-serif).

Размер шрифта. Свойство font-size устанавливает размер шрифта. Значение может быть задано в различных единицах, таких как пиксели (px), проценты (%), или относительные единицы (em, rem).

p {
  font-size: 16px;
}

Этот пример устанавливает размер шрифта для всех параграфов в 16 пикселей.

Стиль шрифта. С помощью свойства font-style можно сделать текст курсивом (italic) или обычным (normal).

p {
  font-style: italic;
}

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

Выравнивание текста. Свойство text-align устанавливает горизонтальное выравнивание текста. Может принимать значения left, right, center, justify.

p {
  text-align: center;
}

Этот пример выравнивает текст всех параграфов по центру.

Межстрочный интервал. Свойство line-height устанавливает межстрочный интервал, то есть расстояние между строками текста.

p {
  line-height: 1.5;
}

Этот пример устанавливает межстрочный интервал в 1.5 для всех параграфов, что делает текст более читаемым.

Преобразование текста. Свойство text-transform позволяет изменить регистр текста. Может принимать значения uppercase (все буквы заглавные), lowercase (все буквы строчные), capitalize (первая буква каждого слова заглавная).

p {
  text-transform: uppercase;
}

Этот пример преобразует текст всех параграфов в верхний регистр.

Ширина текста. Свойство text-indent позволяет установить отступ первой строки текста. Может быть полезно, например, для стилизации параграфов.

p {
  text-indent: 50px;
}

Этот пример устанавливает отступ первой строки каждого параграфа в 50 пикселей.

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

Базовая работа с блочной моделью

Блочная модель — это ключевой принцип в CSS, который описывает расположение и размеры элементов на странице. Каждый элемент на веб-странице можно представить как прямоугольный блок, состоящий из четырех основных слоев: content, padding, border и margin.

Представьте себе коробку. Внутреннее пространство коробки — это content, это само содержимое элемента, например, текст внутри параграфа. Padding — это пространство между контентом и границей (border). Вы можете представить его как дополнительное пространство или «воздушную подушку» вокруг содержимого. Border — это, по сути, граница коробки. Наконец, margin — это пространство вокруг блока, которое отделяет его от других элементов.

Рассмотрим пример:

div {
  width: 200px;
  height: 100px;
  padding: 15px;
  border: 5px solid black;
  margin: 20px;
}

В данном случае, width и height задают размер области content, padding добавляет дополнительное пространство вокруг содержимого, border добавляет границу вокруг содержимого и padding, а margin добавляет пространство вокруг всего блока.

Важно понимать, что общий размер блока будет больше, чем указано в width и height, если заданы значения для padding, border или margin. Это называется «box model problem», и она была особенно заметна в более ранних версиях CSS.

В CSS3 было введено свойство box-sizing, которое позволяет изменить способ, которым браузер рассчитывает размеры элементов. Есть два основных значения для box-sizing:

content-box (значение по умолчанию): width и height задают размер области content, а padding, border и margin добавляются к этому размеру.
border-box: width и height задают размер области content вместе с padding и border, а margin добавляется к этому размеру.

Вот пример:

div {
  box-sizing: border-box;
  width: 200px;
  height: 100px;
  padding: 15px;
  border: 5px solid black;
  margin: 20px;
}

Теперь общий размер блока (включая padding и border, но без margin) будет 200px на 100px, а content будет меньше.

Блочная модель — это один из ключевых аспектов работы с CSS, и понимание ее работает является важным шагом в становлении профессиональным веб-разработчиком.

Работа с позиционированием элементов

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

Статическое позиционирование (static)

Это значение устанавливается по умолчанию для всех элементов HTML. Элементы с позиционированием static располагаются в потоке страницы в порядке, в котором они встречаются в коде.

Относительное позиционирование (relative)

Относительное позиционирование позволяет смещать элемент относительно его исходного местоположения в нормальном потоке документа. Свойства top, right, bottom и left определяют смещение относительно этих сторон элемента.

div {
  position: relative;
  left: 30px;
}

В этом примере блок <div> смещается вправо на 30px относительно его исходного положения.

Абсолютное позиционирование (absolute)

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

div {
  position: absolute;
  top: 50px;
  right: 0;
}

В этом примере блок <div> будет расположен на 50px ниже верхнего края ближайшего позиционированного предка и привязан к его правому краю.

Фиксированное позиционирование (fixed)

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

div {
  position: fixed;
  bottom: 0;
  right: 0;
}

В этом примере блок <div> всегда будет в нижнем правом углу окна браузера, независимо от прокрутки страницы.

Прилипающее позиционирование (sticky)

Это относительно новое значение position, которое работает как relative до тех пор, пока элемент не достигнет определенного смещения, при котором он становится fixed.

div {
  position: sticky;
  top: 0;
}

В этом примере при прокрутке страницы блок <div> вначале ведет себя как обычный элемент. Как только верхняя граница элемента достигает верхнего края окна просмотра, элемент «прилипает» и остается на месте, как при fixed позиционировании.

Особенностью работы свойства position является то, что в большинстве случаев оно требует использования дополнительных свойств для указания точного местоположения элемента: top, right, bottom и left. Эти свойства определяют смещение элемента относительно ближайших сторон его контейнера.

Помимо этого, при работе с позиционированием элементов стоит учитывать такой параметр, как z-index. Это свойство определяет, какие элементы находятся перед другими при перекрытии. z-index работает только с элементами, у которых position установлено в absolute, relative, fixed или sticky. Чем выше значение z-index, тем выше элемент расположен в стопке.

Например:

div {
  position: absolute;
  z-index: 1;
}

В этом случае, если есть другой элемент, который перекрывает <div>, и у этого элемента z-index равен или меньше 1, <div> будет отображаться поверх этого элемента.

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

Работа с CSS Flexbox

Flexbox, официально известный как CSS Flexible Box Layout, — это мощный инструмент в CSS, который облегчает управление расположением, размерами и относительным выравниванием элементов внутри контейнера. Flexbox значительно упрощает создание адаптивных макетов, поскольку позволяет элементам автоматически подстраиваться под доступное пространство.

В основе работы Flexbox лежат два ключевых понятия: flex-контейнер и flex-элементы. Flex-контейнер — это родительский элемент, внутри которого располагаются flex-элементы (дочерние элементы).

Создание flex-контейнера тривиально — достаточно задать свойство display со значением flex или inline-flex:

.container {
  display: flex;
}

Как только вы устанавливаете display: flex, все прямые дочерние элементы становятся flex-элементами и начинают вести себя согласно правилам flexbox.

Важными свойствами flex-контейнера являются flex-direction, justify-content, align-items и flex-wrap.

flex-direction определяет основную ось контейнера, вдоль которой располагаются элементы. Оно может принимать значения row (по умолчанию), row-reverse, column и column-reverse.
justify-content управляет расположением элементов вдоль основной оси. Оно может принимать значения, такие как flex-start, flex-end, center, space-between, space-around и space-evenly.
align-items управляет расположением элементов вдоль поперечной оси. Оно может принимать значения flex-start, flex-end, center, baseline и stretch.
flex-wrap определяет, должны ли элементы переноситься на новую строку, когда пространство исчерпано. Может принимать значения nowrap (по умолчанию), wrap и wrap-reverse.

Flex-элементы также имеют свои свойства: flex-grow, flex-shrink и flex-basis, которые управляют их способностью растягиваться и сжиматься внутри контейнера.

flex-grow определяет способность элемента растягиваться, чтобы заполнить доступное пространство. Значение по умолчанию — 0.
flex-shrink определяет способность элемента сжиматься, если пространство ограничено. Значение по умолчанию — 1.
flex-basis определяет размер элемента перед тем, как применяются flex-grow и flex-shrink. Значение по умолчанию — auto.

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

Заключение и рекомендации для новичков

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

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

Практика, практика и еще раз практика. Важно понимать, что теоретические знания — это только начало. Чтобы научиться писать хороший CSS, вам нужно много практиковаться. Создавайте свои собственные проекты, экспериментируйте с CSS, старайтесь воссоздать интересные дизайны, которые вы видите на других сайтах. Чем больше вы практикуетесь, тем увереннее вы будете чувствовать себя.
Используйте онлайн-ресурсы. Есть множество онлайн-ресурсов и курсов, которые могут помочь вам углубить свое понимание CSS. Некоторые из них включают в себя MDN Web Docs, CSS-Tricks, Codecademy и FreeCodeCamp. Эти ресурсы предоставляют подробные руководства, примеры кода и упражнения для практики.
Следите за новостями и трендами. Веб-разработка — это быстро меняющаяся область, и всегда важно оставаться в курсе последних новостей и трендов. Следите за блогами и подкастами по веб-разработке, подписывайтесь на новостные рассылки и участвуйте в сообществах разработчиков.
Учите другие технологии. Хотя CSS очень важен, он является только одним из инструментов в арсенале веб-разработчика. Чтобы стать более универсальным разработчиком, стоит изучить и другие технологии, такие как JavaScript, Git, фреймворки вроде React или Vue и т.д.
Учите себя «читать» CSS. Способность «читать» CSS, то есть понимать, как работает чужой код, крайне важна. Присматривайтесь к стилям популярных сайтов, попробуйте понять, как они добились определенных эффектов.
Создавайте портфолио. По мере изучения CSS и создания своих проектов, начните создавать свое портфолио. Это поможет вам показать свои навыки потенциальным работодателям и клиентам в будущем.
Не бойтесь ошибок. Как и в любом процессе обучения, ошибки неизбежны. Не позволяйте ошибкам остановить вас или подорвать вашу уверенность. Считайте их возможностью для обучения.

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

Первое знакомство с CSS: язык для стилизации html-страниц