Основы cSS и Douglas JavaScript Robot - манекены

В этом проекте вы изменяете и добавляете стили в HTML-робот по имени Douglas. Сегодня утром Дуглас был доставлен с роботизированной фабрики. Его навыки JavaScript выдающиеся; он не нуждается в большом обслуживании (просто новая переменная, которую можно играть время от времени); и он говорит хорошие шутки!

Единственная проблема в том, что он выглядит немного скучно! Конечно, у него красивые голубые глаза, а его «Я <3>

Чтобы начать работу, откройте свой веб-браузер и войдите в общую панель мониторинга. Затем выполните следующие действия:

1. Найдите скрипку под названием Глава 6: Робот-стиль - Запустите и нажмите заголовок, чтобы открыть его.

   Вы также можете перейти непосредственно к приложению Robot.

   Вы видите экран с HTML на панели HTML и некоторый CSS на панели CSS.

2. Нажмите «Вилка» в верхнем меню, чтобы сделать копию скрипта в вашей собственной учетной записи JSFiddle.

Теперь вы готовы начать давать Дугласу какой-то стиль!

Взгляните на первые три строки на панели JavaScript JavaScript Robot.

body {font-family: Arial;}

Эти три строки образуют правило CSS . Правило CSS состоит из двух основных компонентов:

• Селектор: Селектор указывает, к какому элементу или элементам применяется правило CSS. В этом примере селектор - тело.

• Блок декларации: Блок объявлений содержит одно или несколько объявлений CSS, которые указывают, как стилизовать выбранный элемент или элементы. В этом примере у вас есть только одно объявление, font-family: Arial;,

Селекторы CSS

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

Когда вы выбираете элемент для применения стиля, он также применяет тот же стиль к каждому элементу внутри выбранного элемента.

Селекторы CSS имеют несколько разных способов выбора элементов. Посмотрите на три из них при работе с Douglas JavaScript Robot:

• Селектор элементов: Взгляните на первые два правила в CSS-панели робота JavaScript:

  body {font-family: Arial;} p {font-size: 1em;}
  

  Это оба примера селекторов элементов. Селекторы элементов выбирают элементы HTML, используя имя элемента. Чтобы использовать селектор элементов, просто введите имя элемента, который вы хотите выбрать. В этих случаях вы выбираете элемент body (который использует и теги) и элемент p (который использует теги

  и

  ).

• Селектора классов: Посмотрите теперь на третье правило CSS на панели JavaScript JavaScript Robot:

  . eye {background-color: blue; ширина: 20%; высота: 20%; border-radius: 50%;}
  

  Селектор классов начинается с периода (.), за которым следует значение атрибута HTML с именем class. В этом случае вы выбираете все элементы с классом = «глаз». Если вы посмотрите в области HTML, вы увидите, что есть два элемента с классом = «глаз». Они используются, чтобы сделать два глаза Дугласа.

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

• Селекторы идентификаторов: Селекторы идентификаторов начинаются с символа хеша (#) и выбирают элементы на основе значения атрибута идентификатора элемента. Например, левый глаз и правый глаз Дугласа имеют отдельные идентификационные атрибуты:

  #righteye {position: absolute; слева: 20%; top: 20%;} #lefteye {position: absolute; слева: 60%; top: 20%;}
  

  Селекторы идентификаторов полезны, когда вам нужно выбрать один элемент в документе HTML.

  Каждый атрибут ID должен быть уникальным в документе.

  Если вы посмотрите в области HTML, вы увидите, что левый и правый глаза Дугласа, помимо атрибутов класса, также имеют уникальные атрибуты идентификатора. Эти атрибуты были добавлены, чтобы вы могли позиционировать глаза на лицо Дугласа.

Объявления CSS

Объявления CSS входят внутрь блоков объявлений после CSS-селекторов. Объявления состоят из двух частей:

• Свойство: Часть свойства объявления указывает, что следует изменить. Например, вы можете изменить цвет, ширину или позицию элемента. За имуществом должен следовать двоеточие (:).

• Значение: Значение указывает, как свойство должно быть изменено.

Каждое объявление должно заканчиваться точкой с запятой (;). У вас может быть столько объявлений в блоке декларации, сколько нужно для выполнения этой работы.

Блок декларации для элементов с классом глаз, например, содержит четыре объявления:

. eye {background-color: blue; ширина: 20%; высота: 20%; border-radius: 50%;}