Введение в CSS

Что такое CSS?

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

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

Распространенная аналогия, которая используется для объяснения совместной работы этих трех компонентов, - это строительство дома. HTML - это фундамент, кирпич и раствор, CSS - краска и внутренняя отделка, а JavaScript - электричество и водопровод, которые работают, когда вы включаете выключатель или включаете раковину на кухне.

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

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

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

Как добавить CSS на сайт

Как уже говорилось, CSS применяется к содержимому HTML, которое содержится в элементе. Элемент состоит из тегов, атрибутов и содержимого.

<h1> This is my heading </h1>

Элемент = открывающий тег, содержимое и закрывающий тег.

Существует три способа применения CSS-стилей к HTML-элементу: Встроенный, Внутренний и Внешний.

Inline

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

<h1 style="color:red">This is my heading</h1>

-Вы применяете CSS-стиль внутри открывающего тега элемента.

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

Внутренний

Этот метод предполагает размещение всех правил CSS-стилей в разделе заголовка HTML-файла.

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Site</title>
  <style>
    h1 {
    color: red;
    }
  </style>
</head>

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

Внешний

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

Чтобы связать HTML-файлы с таблицей стилей, используйте элемент link с атрибутами rel и href. Эта команда указывает файлу, откуда брать правила стилизации CSS.

<link rel="stylesheet" href="style.css">

Атрибут rel обозначает связь, а href - расположение таблицы стилей.

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

Синтаксис CSS

Формат CSS-стилей включает в себя CSS-селектор, фигурные скобки, отношения "свойство/значение", разделенные двоеточием, и точку с запятой для завершения строки инструкций.

CSS-селектор - это то, к чему мы применяем CSS-стиль. Это может быть элемент, класс или идентификатор.

h3 {
  background-color: blanchedalmond;
  font-size: 24px;
  border-radius: 10%;
}

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

.container {
  display: grid;
  gap: 20px;
  row-gap: 40px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

Чтобы использовать класс в качестве селектора, обязательно поставьте точку перед именем класса. Примечание: Класс должен быть набран точно так, как он представлен в HTML-файле.

#intro {
  height: 200px;
  width: 200px;
}

Чтобы использовать ID в качестве селектора, обязательно поставьте знак фунта перед именем ID. Примечание: Идентификатор не может начинаться с цифры.

Фигурные скобки

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

{...}

Свойство/значение

Правила стилизации CSS задаются с помощью отношения "свойство/значение". Пара разделяется двоеточием.

color:red;

Цвет - это свойство элемента, который вы хотите стилизовать, а красный - значение, которое вы хотите придать элементу.

Двоеточие

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

Параметры стилизации CSS

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

Цвета

CSS позволяет задавать цвет всего, от цвета текста до цвета фона. В синтаксисе CSS существует три способа обозначения цветов. Это именованные цвета, шестнадцатеричные и RGB.

Именованные цвета являются наиболее простым методом, поскольку они позволяют стилизовать CSS, просто указывая название цвета. Однако в настоящее время существует 147 именованных цветов, которые распознаются большинством браузеров.

color:blanchedalmond;

Шестнадцатеричные цвета Цвета представляются в шестнадцатеричной системе счисления, начинающейся со знака фунта. Существует более 16 миллионов вариантов цветов.

color: #874f87;

RGB означает красный, зеленый и синий цвета. Каждый цвет представлен числом от 0 до 255, которое отражает интенсивность каждого оттенка. Чем выше число, тем интенсивнее цвет.

color:rgb(73, 124, 23);

Шрифт

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

p {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 12pt;
  font-weight: 700;
  font-style: italic;
  text-align: center;
}

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

Посетите сайт fonts.google.com и выберите один из тысяч различных стилей шрифтов. Выберите стиль шрифта и скопируйте ссылку в свой HTML-файл.

Это сообщит вашему сайту, какой стиль шрифта вы выбрали и где найти выбранный вами шрифт.

Заключение

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

Введение в CSS

Что такое CSS?

Как добавить CSS на сайт

Синтаксис CSS

Параметры стилизации CSS

Заключение

Стоит ли изучать PHP в 2023-2024 годах?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

Приемы CSS-макетирования - floats и Flexbox

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

Концепция локализации и ее применение в приложениях React ⚡️

Пользовательский скаляр GraphQL