Основы CSS и селекторы

Введение

Добро пожаловать в мир CSS!

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

Далее мы пройдем 5 практических занятий, чтобы создать CSS для сайта "Pet's House".

Селекторы CSS

Мы открываем веб-страницу, нажимаем F12 на клавиатуре, чтобы открыть инструменты разработчика, и видим два раздела: "Elements" (Элементы) и "Styles" (Стили).

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

Мы можем использовать CSS для изменения цвета, размера, формы и т.д. HTML-элементов, а также для создания анимаций.

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

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

Начнем с самых базовых селекторов CSS.

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

Существует много типов селекторов CSS, и самые базовые из них:

• Селекторы по типу (Type selectors)
• Селекторы по классу (Class selectors)
• Селекторы по идентификатору (ID selectors)
• Селекторы потомков (Descendant Selector)
• Универсальный селектор (Universal Selector)

Селекторы по типу

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

Например, если вы хотите установить цвет шрифта для всех тегов <p> на странице в красный, вы используете следующее правило CSS:

Селекторы по классу

При определении селектора по классу вы должны определить его с точкой и именем класса, а при использовании этого селектора по классу вы должны добавить атрибут class="class-name" (без точки) к тегу элемента, который использует этот селектор по классу, чтобы указать, что тег использует указанный селектор по классу.

Например, если вы хотите установить размер шрифта HTML-элемента с class="text-paragraph" в 50 пикселей, вы используете следующее правило CSS:

Селекторы по идентификатору

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

При определении селектора по идентификатору вы должны определить селектор с символом "#" и именем идентификатора, а при использовании селектора по идентификатору вы должны добавить атрибут id="id name" (без символа "#") к HTML-тегу элемента, чтобы указать идентификатор этого HTML-элемента, который является уникальным в HTML-документе.

Например, если вы хотите установить цвет шрифта HTML-элемента с id="list-option" в синий, вы используете следующее правило CSS:

Селекторы потомков

Селектор потомков выбирает все элементы определенного тега внутри другого тега, включая дочерние элементы и другие потомки.

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

Например, мы устанавливаем цвет текста в бирюзовый для <span>, который является дочерним элементом <div>.

Универсальный селектор

Универсальный селектор выбирает все элементы в HTML-документе. При использовании универсального селектора вы должны использовать символ "*".

Например, установим размер текста в 50 пикселей для всех элементов.

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

Цвет фона и цвет текста

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

На веб - сайте для услуг по уходу за домашними животными цвета фона в заголовке, разделе "О нас", разделе "Контакты" и футере равны rgb(233, 174, 87) и rgb(239, 206, 157), а цвет шрифта в разделах "О нас", "Контакты" и футере равен #fff. Поэтому нам нужно установить цвета фона и шрифта ниже.

• background-color используется для установки цвета фона.
• color используется для установки цвета шрифта.

header {
  background-color: rgb(233, 174, 87);
}
.story-sect {
  background-color: rgb(233, 174, 87);
  color: #fff;
}
.contact-section {
  background-color: rgb(233, 174, 87);
  color: #fff;
}
footer {
  color: #fff;
  background-color: rgb(239, 206, 157);
}

Высота и ширина

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

.logo-section {
  width: 10%;
}
.logo {
  max-width: 60%;
}

.box-feature {
  width: 60%;
  max-height: auto;
}

.box-feature img {
  width: 100%;
}
.service {
  width: 100%;
  color: black;
}
.service img {
  max-width: 100%;
  max-height: auto;
}

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

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

Стиль списка

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

ul {
  list-style: none;
}

Свойства текста

Текстовое оформление (Text Decoration)

По умолчанию элемент a подчеркнут. Мы используем свойство text-decoration для удаления подчеркивания.

a {
  color: grey;
  text-decoration: none;
}

Преобразование текста (Text Transform)

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

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

h2 {
  text-transform: uppercase;
}
header {
  background-color: rgb(233, 174, 87);
  text-transform: uppercase;
}
footer {
  color: #fff;
  background-color: rgb(239, 206, 157);
  text-transform: uppercase;
}

Размер текста (Text Size)

Мы используем свойство font-size для изменения размера текста. Как вы можете видеть, размер текста отличается от размера текста на странице о питомцах.

body {
  font-size: 1.2vw;
}
h1 {
  font-size: 4em;
}
h2 {
  font-size: 2.8vw;
  text-transform: uppercase;
}

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

Выравнивание текста (Text Align)

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

h1 {
  text-align: center;
  font-size: 4em;
}
section h2 {
  text-align: center;
}
.title-text {
  width: 40%;
  text-align: center;
  color: black;
}
.section-text h2 {
  text-align: center;
}
.samples {
  text-align: center;
}
form.btn {
  text-align: center;
  background-color: #e6e8e8;
  color: #000;
}
footer span {
  text-align: center;
}

Насыщенность текста (Text Weight)

Свойство font-weight используется для установки насыщенности текста.

body {
  font-weight: 400;
  font-size: 1.2vw;
}
form.btn {
  text-align: center;
  background-color: #e6e8e8;
  color: #000;
  font-weight: 700;
}

Интервал между буквами (Letter Spacing)

На странице о питомцах можно заметить, что между символами есть определенное расстояние. Используя свойство letter-spacing, мы можем установить интервал между символами текста.

Свойство CSS letter-spacing устанавливает горизонтальное поведение интервала между символами текста. Это значение добавляется к естественному интервалу между символами при отображении текста.

body {
  letter-spacing: 2px;
  font-weight: 400;
  font-size: 1.2vw;
}
form.btn {
  text-align: center;
  background-color: #e6e8e8;
  color: #000;
  font-weight: 700;
  letter-spacing: inherit;
}

Резюме

В этом практическом занятии вы отправились в путешествие по созданию веб - сайта для "Pet's House" вместе с Алексом. Вы настроили рабочее пространство проекта, применили основные стили CSS и поэкспериментировали с различными селекторами CSS для улучшения навигации на веб - сайте. Благодаря этим шагам вы приобрели практический опыт работы с основами CSS и селекторами, которые являются важными навыками для любого начинающего веб - разработчика. Это практическое занятие заложило основу для более продвинутых концепций и технологий веб - разработки, которые вы будете изучать в будущих проектах.