Свойства cSS и Douglas JavaScript-робот - манекены

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

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

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

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

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

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

Внесите некоторые изменения в внешний вид Дугласа, изменив значения некоторых разных свойств CSS:

1. Найти правило CSS для элемента p.

   В настоящее время это второе правило на панели CSS.

2. Измените значение свойства font-size на 2. 5em.

   Полное правило теперь должно выглядеть следующим образом:

   p {font-size: 2. 5em;}
   

   Существует несколько способов указания размеров текста. Наиболее часто используемые способы - использование пикселей (px), процентов (%) или ems (em). Когда вы используете проценты или ems, размер шрифта выбранного элемента устанавливается на основе размера шрифта родительского элемента. Например, 2. 5em в два с половиной раза превышает размер шрифта родителя выбранного элемента.

3. Нажмите кнопку «Выполнить», чтобы увидеть изменение в панели «Результаты».

   

   Дуглас с смелым сообщением.

4. Найти правило CSS для элемента body.

5. Измените значение элемента body на следующее, обратив внимание на использование кавычек:

   «Comic Sans MS», cursive, sans-serif
   

   Полное правило CSS теперь должно выглядеть следующим образом: < body {font-family: «Comic Sans MS», cursive, sans-serif;}

   Нажмите кнопку «Выполнить», чтобы увидеть результаты.
   

6. У Дугласа теперь есть интересные письма на его рубашке.

   Дуглас, теперь с веселыми буквами!

   

   Затем измените цвет глаз Дугласа, чтобы он соответствовал вашему цвету глаз!

   Найдите правило CSS, которое содержит цвет глаз Дугласа.

7. Теперь он выглядит следующим образом:

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

   Измените значение свойства background-color на цвет вашего глаза.
   

8. Например, если ваши глаза коричневые, вы можете изменить их на следующее:

   background-color: brown;

   Нажмите кнопку «Выполнить», чтобы просмотреть результаты.
   

9. Цвет, который глаза Дугласа меняют, когда вы используете слово «коричневый», не выглядит очень коричневым, а цвет, который используется, когда вы пытаетесь сделать глаза Дугласа зелеными, также не является цветом, который, по-видимому,,Чтобы получить более точный цвет, вы можете использовать другое имя цвета CSS или создать свой собственный цвет, используя шестнадцатеричную нотацию.