Возможности CSS, которые вам нужно знать

21.05.24 в 23:16

191

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

Введение

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

Именование классов и селекторы

Всегда используйте осмысленное имя класса. При присвоении имени классу важно выбрать осмысленное название, которое точно описывает назначение класса. Осмысленное название класса должно быть кратким, описательным и простым для понимания. Оно должно отражать назначение класса и его предполагаемое использование. Например, если вы создаете класс, представляющий человека, вы можете назвать его Person или Human. Если вы создаете класс, представляющий автомобиль, вы можете назвать его Car или Vehicle. Осмысленное название класса может помочь сделать ваш код более читаемым, поддерживаемым и понятным. Это также может помочь другим разработчикам, которые, возможно, работают над вашим кодом, быстро понять, что делает ваш код и как он работает.

.xxx{
  color:blue; /* Что это xxx ? */
}

.title{
  color:blue; /* title это отличное название. */
 }

Важные селекторы

Селектор элементов: выбирает все элементы с указанным именем тега. Например, p выбирает все элементы <p>
Выбор идентификатора: выбирает элемент с определенным атрибутом ID. Например, #my-id выбирает элемент с id="my-id".
Выбор класса: выбирает все элементы с определенным атрибутом класса. Например, .my-class выбирает все элементы с параметром class="my-class".
Селектор потомков: выбирает все элементы, которые являются потомками указанного элемента. Например, div p выбирает все элементы <p>, которые являются потомками элемента <div>.
Дочерний селектор: выбирает все прямые дочерние элементы указанного элемента. Например, div > p выбирает все элементы <p>, которые являются прямыми дочерними элементами элемента <div>.
Селектор смежных элементов: выбирает первый элемент, который следует сразу за указанным элементом. Например, h1 + p выбирает первый элемент <p>, который следует сразу за элементом <h1>.
Общий выбор родственных элементов: выбирает все родственные элементы, которые идут после указанного элемента. Например, h1 ~ p выбирает все элементы <p>, которые идут после элемента <h1>.
Селектор атрибутов: выбирает элементы на основе значений их атрибутов. Например, [type="text"] выбирает все элементы с параметром type="text".
Селектор псевдоклассов: выбирает элементы на основе их состояния или положения в дереве документа. Например, a:hover выбирает все элементы <a> при наведении на них курсора мыши
Селектор псевдоэлемента: выбирает части элемента, которых на самом деле нет в HTML-коде. Например, ::before создает псевдоэлемент перед содержимым элемента.

Примеры

/* Селектор элемента */
p {
  color: red;
}

/* ID селектор*/
#my-id {
  font-size: 24px;
}

/* Селектор класса */
.my-class {
  background-color: yellow;
}

/* Селектор потомков */
div p {
  font-weight: bold;
}

/* Дочерний селектор */
div > p {
  text-decoration: underline;
}

/* Селектор смежных дочерних элементов */
h1 + p {
  margin-top: 0;
}

/* Общий выбор родственных элементов */
h1 ~ p {
  margin-left: 20px;
}

/* Селектор атрибутов */
[type="text"] {
  border: 1px solid black;
}

/* Селектор псевдоклассов */
a:hover {
  color: blue;
}

/* Селектор псевдоэлементов */
p::before {
  content: ">> ";
}

Метрика

Абсолютные единицы измерения

Эти единицы измерения являются фиксированными и не меняются в зависимости от размера окна просмотра. Они включают:

cm: в сантиметрах
mm: в миллиметрах
in: в дюймах
px: в пикселях
pt: в точках
pc: в пиках

Относительные единицы измерения:

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

em: относительно размера шрифта элемента
rem: относительно размера шрифта корневого элемента
vw: относительно 1% ширины области просмотра
vh: относительно 1% высоты области просмотра
vmin: относительно 1% меньшего размера области просмотра
vmax: относительно 1% большего размера области просмотра

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

Верстка

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

Box model: Каждый HTML-элемент представляет собой прямоугольную рамку. Прямоугольная модель состоит из четырех частей: поля, границы, отступы и содержимого. Вы можете использовать CSS для настройки размера и положения каждой части.
Свойство display: Свойство display определяет, как должен отображаться элемент. Некоторые распространенные значения включают block, inline и inline-block.
Свойство Position: Свойство position определяет, как должен располагаться элемент на странице. Некоторые распространенные значения включают static, relative, absolute и fixed.
Свойство Float: Свойство float позволяет перемещать элемент влево или вправо от его контейнера. Это обычно используется для создания макетов с несколькими столбцами.
Flexbox: Flexbox - это режим верстки в CSS, который позволяет создавать гибкие и адаптивные макеты. Он обычно используется для создания сложных макетов с несколькими столбцами и строками.
Grid: grid-это еще один режим компоновки в CSS, который позволяет создавать сложные макеты с несколькими столбцами и строками. Он похож на Flexbox, но обеспечивает больший контроль над макетом.

Flexbox

Flexbox - это режим верстки в CSS, который позволяет создавать гибкие и адаптивные макеты. Он обычно используется для создания сложных макетов с несколькими столбцами и строками. Макет Flexbox состоит из гибкого контейнера и гибких элементов. Контейнер - это родительский элемент, в котором хранятся элементы, в то время как элементы являются дочерними элементами, расположенными с использованием макета Flexbox. Вы можете использовать различные свойства, такие как display, flex-direction, justify-content, align-items и flex-wrap, для управления макетом гибкого контейнера и его элементов.

Grid

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

Макет Grid состоит из контейнера сетки и элементов сетки. Контейнер является родительским элементом, в котором хранятся элементы, в то время как элементы являются дочерними элементами, расположенными с использованием макета Grid. Вы можете использовать различные свойства, такие как display, grid-template-columns, grid-template-rows и grid-gap для управления расположением контейнера сетки и его элементов.

Позиционирование (position)

Статическое расположение (static): это расположение по умолчанию для всех HTML-элементов. Элементы со статическим расположением располагаются на странице в соответствии с их обычным расположением.
Относительное позиционирование (relative): этот тип позиционирования позволяет расположить элемент относительно его обычного положения на странице. Вы можете использовать такие свойства, как top, bottom, left и right, чтобы настроить его положение.
Абсолютное позиционирование (absolute): этот тип позиционирования позволяет вам позиционировать элемент относительно его ближайшего позиционируемого предка (т.е. предка с позицией, отличной от статической) или относительно исходного содержащего блока, если у него нет позиционируемого предка.
Фиксированное позиционирование (fixed): этот тип позиционирования позволяет расположить элемент относительно области просмотра (например, окна браузера). Элементы с фиксированным позиционированием остаются на месте даже при прокрутке веб-страницы вниз или вверх.

Box модель

Content: Содержимое элемента - это то, где отображаются текст и изображения. Это самая внутренняя часть модели Box.
Padding: внутренний отступ - это прозрачная область вокруг содержимого. Она очищает область вокруг содержимого и отделяет ее от границы. Вы можете использовать свойство padding для настройки размера заполнения элемента.
Border: граница - это линия, проходящая вокруг отступов и содержимого. Она отделяет содержимое от полей. Вы можете использовать свойство border для настройки размера, стиля и цвета границы.
Margin: внешний отступ - это прозрачная область за пределами границы. Оно очищает область за пределами границы и отделяет ее от других элементов на странице. Вы можете использовать свойство margin для настройки размера поля.

Анимация

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

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

animation-name: указывает имя правила @keyframes, которое описывает анимацию.
animation-duration: определяет продолжительность анимации.
animation-timing-function: определяет кривую скорости анимации.
animation-delay: указывает задержку перед началом анимации.
animation-iteration-count: указывает, сколько раз должна быть воспроизведена анимация.
animation-direction (направление анимации): указывает, должна ли анимация воспроизводиться вперед, назад или маятником
animation-fill-mode: определяет, какие стили следует применять к элементу до и после воспроизведения анимации.
animation-play-state: указывает, запущена ли анимация или приостановлена.

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

transform: Свойство transform позволяет поворачивать, масштабировать, наклонять или перемещать элемент. Это может быть использовано для создания интересных визуальных эффектов, таких как переворачивание изображения или создание 3D-эффекта.
transition: Свойство transition позволяет вам указать, как свойство должно изменяться с течением времени. Это можно использовать для создания плавной анимации при изменении состояния элемента.
3D Effects: CSS также предоставляет несколько свойств для создания 3D-эффектов, таких как perspective, rotateX, rotateY и rotateZ. Эти свойства можно использовать для создания реалистичной 3D-анимации и переходов

Примеры:

/* определяем правило @keyframes */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

/* применяем анимацию к элементу */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 2s;
}

/* применяем трансформацию к элементу */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  transform: rotate(45deg);
}

/* применяем переход к элементу */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: background-color 2s ease-in-out;
}

/* изменить цвет фона при наведении курсора */
div:hover {
  background-color: yellow;
}

/* применяем perspective к контейнеру */
.container {
  perspective: 1000px;
}

/* применяем transform к элементу img */
img {
  width: 300px;
  height: 200px;
  transform-style: preserve-3d;
  transform: rotateX(30deg) rotateY(30deg);
}

Изменение размера

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

Медиа-запросы

Медиа-запросы позволяют задавать разные стили для разных размеров экрана. Они работают, проверяя ширину экрана устройства и применяя разные стили в зависимости от результата. Например, вы можете использовать медиа-запросы для изменения размера шрифта или макета вашего веб-сайта для экранов меньшего размера. Вот несколько примеров медиа-запросов для разных размеров экрана:

/* Мобильные устройства (телефоны) */
@media only screen and (max-width: 600px) {
  /* стили */
}

/* Средние устройства (планшеты) */
@media only screen and (min-width: 601px) and (max-width: 1024px) {
  /* стили */
}

/* Большие устройства (ноутбуки и компьютеры) */
@media only screen and (min-width: 1025px) {
  /* стили */
}

Адаптивные изображения

Когда дело доходит до изменения размера изображений в CSS, есть несколько свойств, которые вы можете использовать. Одним из наиболее распространенных является свойство width. Вы можете установить ширину изображения на определенное значение в пикселях или использовать процентное значение, чтобы сделать его адаптивным. Например, если вы хотите, чтобы изображение было на 50% меньше своего первоначального размера, вы можете задать свойству width значение 50%. Еще одним полезным свойством является max-width, которое позволяет задать максимальную ширину изображения. Это особенно полезно для адаптивного дизайна, так как гарантирует, что изображения не будут слишком большими на небольших экранах.

img {
  max-width: 100%;
  height: auto;
}

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

Вы также можете использовать свойство object-fit для управления тем, как изображение помещается в контейнер. Это свойство позволяет вам указать, как следует изменять размер изображения и его расположение в контейнере. Например, вы можете использовать object-fit: cover, чтобы гарантировать, что весь контейнер будет заполнен изображением, даже если для этого потребуется обрезать некоторые части изображения

img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

Вы можете использовать свойство aspect-ratio, чтобы задать соотношение сторон элемента. Это свойство определяет предпочтительное соотношение сторон для рамки, которое будет использоваться при вычислении автоматических размеров и некоторых алгоритмах компоновки. Вы также можете использовать видовые экраны (vw и vh), чтобы сделать ваши изображения адаптивными в зависимости от размера экрана. Вот пример того, как вы можете использовать aspect-ratio:

img {
  width: 100%;
  aspect-ratio: 16/9;
}

Заключение

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

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

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

Вот несколько проектов для начинающих, которые вы можете создать, чтобы улучшить свои навыки:

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

Статья была адаптирована по материалам с ресурса Medium.

css web верстка веб стили styles