Skip to content

1. Selector CSS

CSS

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

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

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

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

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

Пример:

p {
  color: red;
  font-size: 16px;
}

В этом примере мы выбираем все элементы и устанавливаем их цвет текста на красный и размер шрифта на 16 пикселей.

Селекторы в CSS

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

Простые селекторы: - Тег: определяет стили для всех элементов с определенным тегом, например, для всех заголовков h1. - Класс: определяет стили для всех элементов с определенным классом, например, для всех элементов с классом "menu". - Идентификатор: определяет стили для элемента с определенным идентификатором, например, для элемента с идентификатором "header". - Псевдоклассы: определяют стили для элементов в определенном состоянии, например, для ссылок, наведенных курсором мыши.

Составные селекторы: - Комбинаторы: позволяют комбинировать несколько селекторов, например, определить стили для элементов, находящихся внутри других элементов или для элементов, следующих за другими элементами. - Группировка селекторов: позволяет применять одни и те же стили к нескольким элементам, разделенным запятыми.

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

  1. Тип селектора - выбирает элементы по их типу:
p {
  color: red;
}
  1. Классовый селектор - выбирает элементы по их классу:
.my-class {
  background-color: blue;
}
  1. Идентификаторный селектор - выбирает элемент по его идентификатору:
#my-id {
  font-size: 20px;
}
  1. Селектор потомков - выбирает элементы, которые являются потомками других элементов:
ul li {
  list-style: none;
}
  1. Селекторы атрибутов - выбирают элементы по их атрибутам:
a[href="https://www.example.com"] {
  color: blue;
}

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

Пример:

h1 {
  color: blue;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}

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

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

Пример:

div {
  color: red;
}

p {
  font-size: 16px;
}

В этом примере все элементы будут иметь красный цвет текста, а все элементы будут иметь размер шрифта 16 пикселей. Если элемент находится внутри элемента, то он унаследует красный цвет текста.

Практические приеры использования CSS

Пример 1: Использование классов и идентификаторов

HTML-код:

<div id="header">
  <h1 class="title">Заголовок страницы</h1>
  <nav class="menu">
    <ul>
      <li><a href="#">Главная</a></li>
      <li><a href="#">О нас</a></li>
      <li><a href="#">Контакты</a></li>
    </ul>
  </nav>
</div>

CSS-код:

#header {
  background-color: #333;
  color: #fff;
  padding: 10px;
}

.title {
  font-size: 36px;
  margin-bottom: 20px;
}

.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu li {
  display: inline-block;
  margin-right: 20px;
}

.menu li a {
  color: #fff;
  text-decoration: none;
}

.menu li a:hover {
  text-decoration: underline;
}

В данном примере мы использовали идентификатор #header для определения стилей для всей области шапки страницы. Для заголовка страницы мы использовали класс .title, который позволяет определить стили только для этого элемента. Для меню мы также использовали класс .menu, а затем определили стили для вложенных элементов, таких как ul, li и a.

Пример 2: Использование псевдоклассов

HTML-код:

<a href="#">Ссылка</a>

CSS-код:

a {
  color: #333;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:active {
  color: #f00;
}

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

Практические задания CSS

  1. Создайте файл index.html и подключите к нему файл стилей styles.css.

  2. Установите фоновый цвет страницы на #f2f2f2.

  3. Установите цвет текста всех заголовков h1-h6 на #333.

  4. Установите отступы для тега body: сверху и снизу - 20px, слева и справа - 40px.

  5. Установите шрифт для всего текста страницы на Arial, sans-serif.

  6. Установите размер шрифта для заголовка h1 - 36px, для заголовка h2 - 30px, для заголовка h3 - 24px, для заголовка h4 - 20px, для заголовка h5 - 18px, для заголовка h6 - 16px.

  7. Добавьте рамку для всех изображений на странице толщиной 1px, цвет рамки - #ccc.

  8. Установите отступы для всех изображений на странице: сверху и снизу - 10px, слева и справа - авто.

  9. Установите выравнивание текста по центру для всех элементов с классом .center.

  10. Установите цвет фона для элементов с классом .highlight на желтый (#ffff99).

  11. Установите цвет фона и цвет текста для элементов с классом .button на #007bff и #fff соответственно.

  12. Добавьте эффект при наведении на элементы с классом .button: изменение цвета фона на #0062cc и цвета текста на #fff.

  13. Установите ширину и высоту для изображений с классом .thumbnail на 200px.

  14. Установите свойство box-shadow для элементов с классом .thumbnail: 0 0 10px #ccc.

  15. Установите свойство border-radius для элементов с классом .thumbnail: 5px.