4. Каскадные таблицы стилей

Объявление

Для объявления файла каскадных таблиц в HTML нужно использовать элемент <link>, который связывает HTML-документ с внешним файлом стилей. Этот элемент помещается внутри секции <head> в HTML-документе.

<link rel="stylesheet" href=" Абсолютный/относительный путь " type="text/css">

Селекторы

  1. Универсальные (*)
    Пример: *
    Означает, что селектор * выбирает все элементы страницы.

  2. По типу (element)
    Пример: div
    Означает, что селектор div выбирает все элементы <div>, которые существуют на странице.
  3. По классу (.)
    Пример: .browser
    Означает, что селектор .browser выбирает элементы с атрибутом class="browser".
  4. По идентификатору (#)
    Пример: #uploads Означает, что селектор #uploads выбирает уникальный элемент с атрибутом id="uploads".

Комбинаторы и разделители

1. Комбинаторы

Комбинаторы определяют отношения между элементами HTML.

  1. Потомок ( )
    Пример: div p
    Означает, что селектор p выбирает все элементы <p>, которые находятся внутри <div>, неважно, на каком уровне вложенности.
  2. Дочерний элемент (>)
    Пример: div > p
    Означает, что селектор p выбирает все <p>, которые являются прямыми дочерними элементами <div>.
  3. Соседний элемент (+)
    Пример: h1 + p
    Означает, что селектор p выбирает элемент <p>, который находится сразу после <h1>.
  4. Общий брат/сестра (~)
    Пример: h1 ~ p
    Выбирает все элементы <p>, которые следуют после <h1>, но не обязательно сразу (они могут быть на одном уровне). Селектор брат/сестра (~) в CSS используется для выбора элементов, которые находятся на одном уровне вложенности и идут после указанного элемента, независимо от того, сразу они идут или через несколько других элементов.
<div>
    <h2>Заголовок 1</h2>
    <p>Параграф 1</p>
    <p>Параграф 2</p>
    <span>Текст</span>
    <p>Параграф 3</p>
</div>
h2 ~ p {
    color: green;
}

Объяснение:

Этот код выберет все элементы <p>, которые находятся на том же уровне, что и <h2>, и следуют за ним. В данном случае, это будут:

  • <p>Параграф 1</p>
  • <p>Параграф 2</p>
  • <p>Параграф 3</p>

Все они будут окрашены в зелёный цвет. Селектор не затронет элементы, которые идут перед <h2>, и элементы, находящиеся на других уровнях вложенности.

2. Разделители

Разделители используются для группировки селекторов или назначения разных стилей.

  1. Запятая (,)
    Пример: h1, h2, p
    Выбирает все указанные элементы: <h1>, <h2>, <p>. Можно применять один набор стилей ко всем сразу.

Flexbox

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

Основные компоненты Flexbox:

  1. Flex-контейнер — это элемент, к которому применено display: flex.
  2. Flex-элементы — дочерние элементы внутри контейнера.
.container {
    display: flex;
}

Все дочерние элементы .container теперь становятся флекс-элементами и будут подчиняться правилам Flexbox.

Основные свойства Flexbox

1. Оси в Flexbox

Flexbox оперирует двумя осями:

  • Главная ось (main axis): определяется направлением flex-direction. Элементы располагаются вдоль этой оси.
  • Перекрёстная ось (cross axis): перпендикулярна главной оси.

Например, если flex-direction имеет значение по умолчанию (row), главная ось будет горизонтальной, а перекрёстная — вертикальной.

2. flex-direction — Направление флекс-элементов

Свойство flex-direction определяет, как будут располагаться элементы внутри контейнера:

  • row (по умолчанию): горизонтально слева направо.
  • row-reverse: горизонтально справа налево.
  • column: вертикально сверху вниз.
  • column-reverse: вертикально снизу вверх.

3. justify-content — Выравнивание по главной оси

Это свойство отвечает за распределение флекс-элементов по главной оси (горизонтальной или вертикальной, в зависимости от значения flex-direction):

  • flex-start: элементы прижаты к началу оси.
  • flex-end: элементы прижаты к концу оси.
  • center: элементы расположены по центру.
  • space-between: элементы распределены с одинаковыми промежутками между ними.
  • space-around: элементы имеют равные промежутки, включая пространство по краям

4. align-items — Выравнивание по перекрёстной оси

Свойство align-items управляет выравниванием флекс-элементов вдоль перекрёстной оси:

  • flex-start: элементы прижаты к началу перекрёстной оси.
  • flex-end: элементы прижаты к концу перекрёстной оси.
  • center: элементы центрируются по перекрёстной оси.
  • baseline: элементы выравниваются по базовой линии текста.
  • stretch (по умолчанию): элементы растягиваются, чтобы заполнить весь доступный размер по перекрёстной оси.

5. flex-wrap — Перенос флекс-элементов на новую строку

По умолчанию Flexbox размещает все элементы в одну строку. Свойство flex-wrap позволяет элементам переноситься на новые строки, если они не помещаются в одну:

  • nowrap (по умолчанию): все элементы в одной строке.
  • wrap: элементы переносятся на новую строку при необходимости.
  • wrap-reverse: элементы переносятся на новую строку, но порядок строк будет обратным.

6. align-content — Выравнивание строк флекс-элементов

Это свойство работает, когда есть несколько строк флекс-элементов (например, при использовании flex-wrap). Оно управляет выравниванием строк по перекрёстной оси:

  • flex-start: строки прижаты к началу оси.
  • flex-end: строки прижаты к концу оси.
  • center: строки выравнены по центру.
  • space-between: строки равномерно распределены с равными промежутками.
  • space-around: строки распределены с равными промежутками, включая края.
  • stretch: строки растягиваются, чтобы заполнить всё доступное пространство.

7. flex-grow, flex-shrink, flex-basis — Управление размером флекс-элементов

Эти свойства управляют тем, как флекс-элементы будут занимать доступное пространство:

  • flex-grow: коэффициент, который указывает, насколько элемент может увеличиться по сравнению с другими элементами.
  • flex-shrink: коэффициент, который указывает, насколько элемент может уменьшиться, если места недостаточно.
  • flex-basis: начальный размер элемента перед применением flex-grow или flex-shrink.

Сетка

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

Основные компоненты CSS Grid:

  1. Grid-контейнер — элемент, к которому применяется display: grid. В нём размещаются дочерние элементы, которые автоматически становятся Grid-элементами.
  2. Grid-элементы — дочерние элементы внутри grid-контейнера.
  3. Размещение элементов: Элементы внутри сетки называются Grid Items. Можно управлять их расположением с помощью свойств grid-column и grid-row. 
    .item1 {
    grid-column: 1 / 3; /* Занимает столбцы с 1-го по 3-й */
    grid-row: 1; /* Занимает первую строку */
}
  4. Строки и столбцы: Для создания строк и столбцов используются свойства grid-template-rows и grid-template-columns. 
    .grid-container {
    display: grid;
    grid-template-columns: 200px 1fr 200px; /* Задает три столбца */
    grid-template-rows: auto 100px; /* Задает две строки */
}
    • 200px — это фиксированная ширина столбца.
    • 1fr — это гибкая единица, которая указывает на оставшееся пространство.
    • auto — строка подстраивается под контент, а 100px — фиксированная высота строки.

Пример кода:

Вот простой пример сетки с тремя столбцами и двумя строками:

<div class="grid-container">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
</div>
.grid-container {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    grid-template-rows: auto 100px;
    gap: 10px;
}

.item1 {
    grid-column: 1 / 3; /* Item 1 занимает два столбца */
}

Позиция

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

Основные значения position:

  1. static (по умолчанию)
  2. relative (относительное позиционирование)
  3. absolute (абсолютное позиционирование)
  4. fixed (фиксированное позиционирование)
  5. sticky (липкое позиционирование)

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

  • position: static; — это значение по умолчанию.
  • Элемент находится в нормальном потоке документа.
  • На элемент нельзя воздействовать свойствами top, right, bottom, left — они будут игнорироваться.

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

  • position: relative; — элемент остаётся на своём месте в документе, но его можно сдвинуть относительно его исходного положения с помощью свойств top, right, bottom, left.
  • Другие элементы продолжают вести себя так, как если бы элемент не сдвигался.

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

  • position: absolute; — элемент удаляется из нормального потока документа и позиционируется относительно ближайшего родителя с position: relative, absolute или fixed. Если такого родителя нет, он позиционируется относительно корневого элемента (обычно body).
  • Элемент можно перемещать с помощью свойств top, right, bottom, left.

Пример:

.container {
  position: relative; /* Ближайший родитель */
}
.container .element {
  position: absolute;
  top: 50px;  /* Позиционируется на 50px ниже верхней границы родителя */
  right: 20px; /* Позиционируется на 20px левее правого края родителя */
}

4. fixed (фиксированное позиционирование)

  • position: fixed; — элемент удаляется из нормального потока и фиксируется относительно окна браузера. Даже если вы прокручиваете страницу, элемент остаётся на месте.
  • Используется для создания элементов, таких как закреплённые меню или кнопки «Наверх».

5. sticky (липкое позиционирование)

  • position: sticky; — это комбинация относительного и фиксированного позиционирования. Элемент ведёт себя как обычный элемент до тех пор, пока его не коснётся граница прокрутки (заданная с помощью свойств top, right, bottom, left), после чего элемент фиксируется на экране.
  • Отлично подходит для закрепления заголовков или меню при прокрутке страницы.

Свойства для управления положением:

Когда используется relative, absolute, fixed или sticky, для перемещения элемента применяются следующие свойства:

  • top: Сдвигает элемент вниз относительно верхней границы.
  • right: Сдвигает элемент влево относительно правой границы.
  • bottom: Сдвигает элемент вверх относительно нижней границы.
  • left: Сдвигает элемент вправо относительно левой границы.

Состояния

В CSS "состояния" — это специальные стили, которые применяются к элементам в зависимости от их текущего взаимодействия с пользователем или состояния на странице. Они задаются с помощью псевдоклассов, таких как :hover, :active, :focus, и другие. Эти состояния используются для создания интерактивных и динамических интерфейсов.

Основные состояния в CSS:

  1. :hover (состояние при наведении) Это состояние срабатывает, когда пользователь наводит курсор мыши на элемент. Пример:

    a:hover {
   color: blue;  /* Изменение цвета текста при наведении */
}

button:hover {
   background-color: #ff8000;  /* Изменение цвета фона кнопки при наведении */
}

  2. :active (активное состояние) Это состояние применяется к элементу в момент, когда он нажимается (например, к ссылке или кнопке). :active действует только в момент нажатия.

    Пример:

    a:active {
   color: red;  /* Изменение цвета текста при клике */
}

button:active {
   background-color: #cc6600;  /* Изменение цвета фона кнопки при нажатии */
}

  3. :focus (состояние фокуса) Это состояние применяется, когда элемент находится в фокусе, то есть взаимодействует с клавиатурой (например, поле ввода или кнопка).

    Пример:

    input:focus {
   border: 2px solid blue;  /* Изменение рамки поля ввода при фокусе */
   outline: none;  /* Убираем стандартное выделение */
}

  4. :visited (состояние посещённой ссылки) Применяется к ссылке после того, как пользователь уже посетил страницу по этой ссылке.

    Пример:

    a:visited {
   color: purple;  /* Цвет текста посещённой ссылки */
}

  1. :disabled (отключённое состояние) Применяется к элементам форм (например, кнопкам, полям ввода), которые находятся в состоянии отключения (disabled).

    Пример:

    input:disabled {
   background-color: #ddd;  /* Изменение цвета фона отключенного поля ввода */
   cursor: not-allowed;  /* Изменение курсора */
}

button:disabled {
   opacity: 0.5;  /* Полупрозрачность отключенной кнопки */
}

  2. :checked (состояние выбранного элемента) Это состояние используется для элементов формы, таких как чекбоксы и радиокнопки, когда они выбраны.

    Пример:

    input[type="checkbox"]:checked {
   background-color: #004080;  /* Изменение фона выбранного чекбокса */
}

input[type="radio"]:checked {
   border: 2px solid blue;  /* Изменение рамки выбранной радиокнопки */
}

  3. :nth-child() (состояние конкретного элемента в списке) Это псевдокласс, который позволяет выбрать конкретный элемент в последовательности однотипных элементов.

    Пример:

    tr:nth-child(even) {
   background-color: #f2f2f2;  /* Заливка для каждой четной строки таблицы */
}

tr:nth-child(odd) {
   background-color: #fff;  /* Заливка для каждой нечетной строки таблицы */
}

  4. :not() (отрицание состояния) Применяется для исключения элементов, соответствующих заданному селектору.

    Пример:

    input:not(:disabled) {
   border: 1px solid green;  /* Применение стиля к любым активным полям ввода */
}

Комбинация состояний:

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

Пример:

a:hover:active {
    color: orange;  /* Изменение цвета текста ссылки при наведении и нажатии одновременно */
}

input:focus:invalid {
    border-color: red;  /* Поле ввода с неверным значением при фокусе */
}

Веб-инструменты

Как редактировать CSS через Инструменты разработчика Chrome?

  1. Открыть Инструменты разработчика:
    • Нажмите правой кнопкой мыши на нужном элементе страницы и выберите "Просмотреть код" или "Inspect" (или нажмите Ctrl + Shift + I на Windows/Linux, Cmd + Option + I на Mac).
  2. Выбор элемента:
    • В панели Elements выберите элемент, CSS которого хотите редактировать. Вкладка Elements автоматически откроется, и будет видна структура HTML-документа.
    • Наведите курсор на нужный элемент в коде или на странице, чтобы выделить его.
  3. Редактирование стилей в панели "Styles":
    • Справа от HTML-кода вы увидите панель Styles, где отображаются все применяемые к элементу CSS-стили.
    • Вы можете редактировать существующие стили, просто кликнув по значению и изменив его (например, изменить цвет, размер шрифта и т.д.).
    • Для добавления нового CSS-свойства:
      1. Кликните дважды на пустой области ниже существующих стилей.
      2. Введите новое свойство и его значение
  4. Применение новых стилей через вкладку "Elements":
    • Вы также можете добавить собственные правила CSS. Внизу панели Styles кликните по ссылке "+ (Add new rule)".
    • Здесь вы можете написать полностью новое правило CSS, указав селектор элемента (например, .my-class) и необходимые свойства.

Задание

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

Требования:

  1. Общий стиль и оформление:

    • Унификация цветовой схемы: Создайте единый стиль на всех страницах сайта. Цвета должны соответствовать бренду банка, используя его фирменные цвета для важных элементов, таких как:

      • Фон заголовков и кнопок
      • Цвет текста
      • Цвет ссылок (с разными состояниями: обычный, наведённый, активный)

    • Шрифты:

      • Настройте размер шрифта для разных разделов сайта (например, заголовки — больше, основной текст — комфортный для чтения).

    • Интерлиньяж и отступы:

      • Убедитесь, что текст на сайте читабелен, используйте достаточные отступы между абзацами, заголовками и блоками.
      • Примените правильное расстояние между строками текста (line-height), чтобы текст был приятным для восприятия.

  2. Меню навигации:

    • Горизонтальное или вертикальное меню: Стилевое оформление навигационного меню:
    • Сделайте меню более выразительным, добавив стили для состояния hover (наведение) и active (активное состояние) с помощью CSS.
    • Используйте анимации или переходы для плавного изменения цвета фона или текста при наведении на элементы.
    • Подчёркивание активного элемента: Добавьте визуальный индикатор для текущего раздела, используя изменения цвета фона или текста для активного пункта меню.

  3. Кнопки и формы:

    • Кнопки:
      • Кнопки должны быть стилизованы таким образом, чтобы они были заметны и соответствовали цветовой схеме бренда.
      • Примените эффект тени или изменение фона при наведении, используя псевдоэлементы :hover и :focus.
      • Убедитесь, что кнопки имеют достаточные отступы и четкие границы.
    • Формы:
      • Стилизуйте поля ввода (input, textarea, select), добавив рамки, отступы и фоновый цвет.
      • Примените стили для состояний :focus для визуализации того, что поле ввода активно.
      • Разместите кнопки отправки форм так, чтобы они были удобны для пользователя.
    • Таблицы:
      • Оформление таблиц:
        • Стилизуйте таблицы с использованием рамок, полосатых строк (через nth-child) для улучшения читабельности.
        • Добавьте подчеркивание для заголовков таблицы и стили для выделения строк при наведении.
        • Используйте аккуратное форматирование для улучшения восприятия данных.

  4. Карточки услуг или продуктов:

    • Если на сайте представлены продукты (кредиты, еда и т.д.) в виде карточек:
      • Используйте flexbox или grid для адаптивного расположения карточек.
      • Добавьте стили для теней (box-shadow) или рамок (border), чтобы карточки выглядели более объёмными и выделялись на странице.
      • Примените эффекты при наведении (hover), такие как увеличение масштаба (transform: scale()), или изменение фона карточки.

  5. Подвал сайта (footer):

    • Добавьте стили к подвалу для улучшения его внешнего вида:
      • Используйте контрастные цвета (например, темный фон и светлый текст).
      • Добавьте иконки социальных сетей и стилизуйте их (например, изменяйте цвет при наведении).
      • Разделите содержимое подвала на колонки с помощью CSS Grid или Flexbox, чтобы информация была упорядоченной.
Изображение - Пример главной страницы сайта