Лекция 2: Селекторы и свойства

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

Что такое CSS-селекторы?

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

Типы селекторов

1. Выбор элемента (типа):

   • Нацеливается на все элементы определенного типа.
   • Пример:

    p {
      color: green;
    }
   

   Это изменит цвет всех элементов

   на зеленый.

2. Выбор класса:

   • Нацеливается на элементы с определенным атрибутом класса.
   • Пример:

    .highlight {
      background-color: yellow;
    }
   

   В вашем HTML любой элемент с class="highlight" будет иметь желтый фон.
   

    
   This is highlighted text.
   

3. Выбор идентификатора:

   • Нацеливается на один элемент с уникальным атрибутом ID.
   • Пример:

    #header {
      font-size: 24px;
    }
   

   Только элемент с id="header" будет иметь размер шрифта 24 пикселя.
   

    
   Welcome to My Website
   

4. Выбор группы:

   • Применяет один и тот же стиль к нескольким селекторам.
   • Пример:

    h1, h2, h3 {
      color: blue;
    }
   

   Это правило сделает все элементы

   ,

   и

   синими.

5. Выбор потомка:

   • Нацеливаются на элементы, находящиеся внутри (потомков) других элементов.
   • Пример:

    div p {
      font-style: italic;
    }
   

   При этом все элементы

   внутри

   будут выделены курсивом.
   

    
   
      
   This text is italicized because it's inside a div.
    
   

   Понимание свойств CSS

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

   Пример свойств:

   • Цвет:

     • Задает цвет текста.
     • Пример:

     h1 {
       color: red;
     }
     

   • Цвет фона:

     • Устанавливает цвет фона.
     • Пример:

     body {
       background-color: #f0f0f0;
     }
     

   • Размер шрифта:

     • Задает размер текста.
     • Пример:

     p {
       font-size: 16px;
     }
     

   • Допуск:

     • Устанавливает пространство за пределами элемента.
     • Пример:

     .box {
       margin: 20px;
     }
     

   • Отступы:

     • Задает пространство внутри элемента между содержимым и границей.
     • Пример:

     .content {
       padding: 10px;
     }
     

   Практические примеры:

   Давайте объединим то, что мы узнали, с простым примером.

   HTML:
   

   
     
   Welcome to CSS Basics
     
   This is an introduction to CSS selectors and properties.
     
   Selectors help you target elements, and properties allow you to style them.
   
   

   CSS:
   

   /* ID Selector */
   #container {
     border: 2px solid black;
     padding: 10px;
   }
   
   /* Element Selector */
   h1 {
     color: purple;
   }
   
   /* Class Selector */
   .intro {
     background-color: lightblue;
     font-size: 18px;
   }
   
   /* Group Selector */
   h1, p {
     font-family: Arial, sans-serif;
   }
   
   /* Descendant Selector */
   #container p {
     margin-bottom: 15px;
   }
   

   В этом примере:

   • Дев #container имеет черную рамку и отступы.
   • Заголовок

     окрашен в фиолетовый цвет.

   • Абзац со вступлением класса имеет голубой фон и шрифт большего размера.
   • Оба элемента

     и

     используют шрифт Arial.

   • Все абзацы внутри #container имеют нижнее поле для интервалов.

   Практическое упражнение

   1. Создайте простой HTML-файл с заголовками, абзацами и разделами.
   2. Экспериментируйте с различными селекторами и свойствами, чтобы стилизовать свой контент.
   3. Попробуйте использовать селектор потомков для стилизации вложенных элементов.
   4. Поиграйте с селектором группировки, чтобы применить одни и те же стили к нескольким элементам.

   ---

   Далее: В следующей лекции мы рассмотрим Блочную модель CSS и узнаем, как поля, границы, отступы и содержимое объединяются, чтобы определить макет вашего веб-элементы. Увидимся там!

   Следуй за мной -

   LinkedIn — Ридой Хасан

   -