Вам бонус- начислено 1 монета за дневную активность. Сейчас у вас 1 монета

Селекторы тегов в CSS

Лекция



Привет, сегодня поговорим про селекторы тегов в css, обещаю рассказать все что знаю. Для того чтобы лучше понимать что такое селекторы тегов в css , настоятельно рекомендую прочитать все из категории Каскадные таблицы стилей CSS/ CSS3.

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

Тег { свойство1: значение; свойство2: значение; ... }

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

Пример 7.1. Изменение стиля тега абзаца

 

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Селекторы тегов</title>
  <style>
   P { 
    text-align: justify; /* Выравнивание по ширине */
    color: green; /* Зеленый цвет текста */
   }
  </style>
 </head> 
 <body>

  <p>Более эффективным способом ловли льва в пустыне
  является метод золотого сечения. Об этом говорит сайт https://intellect.icu  . При его использовании пустыня делится
  на две неравные части, размер которых подчиняется правилу золотого
  сечения.</p>

 </body>
</html>
 
 

В данном примере изменяется цвет и выравнивание текста абзаца. Стиль будет применяться только к тексту, который располагается внутри контейнера <p>.

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

Вопросы для проверки

1. В какой строке содержится ошибка?

  1. H1 { margin-left: 20px; }
  2. p { margin-left: 20px; padding-left: 20px; }
  3. h2 { margin-right: 20px; }
  4. head { color: #rob; }
  5. body { font-size: 11pt; color: #aaa; }

2. Таня для фона веб-страницы и цвета текста выбрала цвета #ffe9f2 и #6e143b и в стилях использовала следующий код, однако нужные цвета не проявились. В чем причина?

body {
background-color: #ffe9f2 
color: #6e143b
}

  1. body написан строчными буквами.
  2. Свойство background-color неверное, следует писать background.
  3. Значения цветов указаны неправильно.
  4. В качестве селектора применять body некорректно.
  5. Не хватает точки с запятой.

3. Какая строка написана правильно?

  1. <P> { color: #333; }
  2. P { color: #333; }
  3. P: { color: #333;}
  4. P { color: 333; }
  5. P { color: #3333; }

4. К какому селектору следует применить свойство margin, чтобы изменить отступы на веб-странице?

  1. !DOCTYPE
  2. A
  3. HEAD
  4. TITLE
  5. BODY

5. Как добавить фоновый цвет ко всем элементам <H1>?

  1. h1 { background-color: white }
  2. h1.all { background-color: white }
  3. h1:all { background-color: white }
  4. h1[all] { background-color: white }
  5. h1#all { background-color: white }

Ответы

1. head { color: #rob; }

2. Не хватает точки с запятой.

3. P { color: #333; }

4. BODY

5. h1 { background-color: white }

На этом все! Теперь вы знаете все про селекторы тегов в css, Помните, что это теперь будет проще использовать на практике. Надеюсь, что теперь ты понял что такое селекторы тегов в css и для чего все это нужно, а если не понял, или есть замечания, то не стесняйся, пиши или спрашивай в комментариях, с удовольствием отвечу. Для того чтобы глубже понять настоятельно рекомендую изучить всю информацию из категории Каскадные таблицы стилей CSS/ CSS3

Из статьи мы узнали кратко, но содержательно про селекторы тегов в css

Ответы на вопросы для самопроверки пишите в комментариях, мы проверим, или же задавайте свой вопрос по данной теме.

создано: 2014-10-19
обновлено: 2021-03-13
132606



Рейтиг 9 of 10. count vote: 2
Вы довольны ?:


Найди готовое или заработай

С нашими удобными сервисами без комиссии*

Как это работает? | Узнать цену?

Найти исполнителя
$0 / весь год.
  • У вас есть задание, но нет времени его делать
  • Вы хотите найти профессионала для выплнения задания
  • Возможно примерение функции гаранта на сделку
  • Приорететная поддержка
  • идеально подходит для студентов, у которых нет времени для решения заданий
Готовое решение
$0 / весь год.
  • Вы можите продать(исполнителем) или купить(заказчиком) готовое решение
  • Вам предоставят готовое решение
  • Будет предоставлено в минимальные сроки т.к. задание уже готовое
  • Вы получите базовую гарантию 8 дней
  • Вы можете заработать на материалах
  • подходит как для студентов так и для преподавателей
Я исполнитель
$0 / весь год.
  • Вы профессионал своего дела
  • У вас есть опыт и желание зарабатывать
  • Вы хотите помочь в решении задач или написании работ
  • Возможно примерение функции гаранта на сделку
  • подходит для опытных студентов так и для преподавателей



Комментарии


Оставить комментарий
Если у вас есть какое-либо предложение, идея, благодарность или комментарий, не стесняйтесь писать. Мы очень ценим отзывы и рады услышать ваше мнение.
To reply

Каскадные таблицы стилей CSS/ CSS3

Термины: Каскадные таблицы стилей CSS/ CSS3