CSS Правила и Селекторы


26.12.2020


Синтаксис CSS

CSS состоит из правил стиля, которые браузер интерпретирует и затем применяет к соответствующим элементам в вашем документе.

Каждое правило имеет три части: селектор и свойство, и значение.

Например, цвет заголовка может быть определен как:


<h1>Большой заголовок</h1>


h1 {
  color: orange;
}

h1, h2, h3 {
color:
orange; }
селектор
cвойство
значение
CSS селекторы, правила
Блок объявлений содержит одно или несколько объявлений, разделенных точкой с запятой.
Каждое объявление включает в себя имя свойства и значение, разделенные точкой с запятой.

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

Наиболее общие и легкие для понимания селекторы, это селекторы по типу. Эти селекторы выделяют типы элемента на странице.

Например, для выделения всех параграфов на странице:


<p>Один параграф</p>


p {
  color: red;
  font-size: 130%;
}

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

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

Селекторы идентификаторов позволяют вам изменять стиль элемента HTML, который имеет атрибут id, несмотря на его позицию в дереве документа. Пример селектора id:


<div id="intro">
  <p>Это параграф в секции intro</p>
</div>
<p>Это параграф не в секции intro</p>


#intro {
  color: white;
  background-color: gray;
}

CSS, стили, пример CSS внешнего
Чтобы выбрать элемент со спецефическим id, используйте символ решетки (#), а затем добавьте id элемента.

Селекторы классов

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

В нижеуказанном примере, на оба параграфа, содержащих класс "first", будет влиять CSS:


<p class="first">Это параграф со стилевым классом</p>
<p>Это параграф без стилевого класса</p>
<p class="first">Это параграф со стилевым классом</p>
<p>Это параграф без стилевого класса</p>


.first {
  font-size: 200%;
}

CSS, стили, пример CSS внешнего
Чтобы выбрать элементы спецефического класса, используйте символ точки, следом за котором укажите имя класса.
НЕ начинайте имя класса или идентификатора с числа!

Селекторы классов

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

В нижеуказанном примере, на оба параграфа, содержащих класс "first", будет влиять CSS:


<div id="intro">
<p class="first">Это параграф со <em>стилевым классом</em></p>
</div>
<p>Это параграф без стилевого класса</p>
<p class="first">Это параграф со стилевым классом</p>
<p>Это параграф без стилевого класса</p>


#intro .first em {
  color: pink;
  background-color: gray;
}

В результате, только выбранные элементы будут изменены:

CSS, стили, пример CSS внешнего
Селектор потомков соответствует всем элементам, являющимися потомками указанного элемента.

Проверка знаний

В правилах, "селектор":




Какие селекторы бывают?




Выбирете слова, чтобы заполнить пропуски:

#intro {
  background-_____: yellow;
}
p, h1, h2, h3, h4 {
  _____: black;
}




Необходимо сделать текст параграфа сделать зеленого цвета, а по классу test сделать красным цветом, выберете правильный вариант:

_ {
  сolor: ____
}
.test {
  _____ red;
}




Итого баллов:

Дополнительные сведения
Данные уроки мы - модераторы Web-infinity стараемся делать простыми в понимании, интересными, полезными и эффективными особенно для начинающих. Если у вас появились вопросы на каком либо этапе, уроке, то вы можете обратиться в поддержку по адресу web-infinity-team@mail.ru