Вопросы по теории:

  1. Что такое поля и отступы элементов, чем они отличаются, и какие свойства их изменяют?
  2. Какие свойства изменяют ширину и высоту элементов? Подумайте хорошенько.
  3. Чем отличаются классы CSS от идентификаторов, а псевдоклассы от псевдоэлементов.
  4. Какое свойство изменяет способ позиционирования элементов и чем отличается абсолютное позиционирование от относительного.

Ответы:

  1. Поля задаются свойством margin — это пустые пространства вокруг элемента, которые находится за его рамкой (border), ну а если рамки нет, то естественно поля начинаются сразу за внутренними отступами, а если и они не указаны, то сразу за содержимым элемента. Поля элемента всегда прозрачные.

    Внутренние отступы указываются свойством padding и находятся между его содержимым и рамкой, а если рамка не указана, то между содержимым и внешними полями. Цвет внутренних отступов всегда совпадает с фоновым цветом самого элемента.

  2. На ширину и высоту элементов влияет целая группа свойств. Во-первых, это свойства width и height, с помощью которых указываются размеры отведенные под содержимое элемента. А во-вторых, это свойства из первого пункта, то есть поля, отступы и рамки, так как их изменение также сказывается на размере. Довольно часто этот неучтенный момент вводит новичков в CSS в ступор (по себе знаю) и порой они начинают недоумевать, когда устанавливают у элемента одну ширину и высоту, а на деле выходит другая. А все потому, что у элемента были заданы те самые поля, отступы или рамка либо все это вместе.

    Да, как-то так исторически сложилось, что когда люди общаясь, говорят про ширину и высоту элементов, то имеются в виду именно свойства width и height, а не все свойства отвечающие за эти параметры. Но забывать о том, какие свойства на самом деле влияют на размеры никак нельзя.

  3. Классы в CSS отличаются от идентификаторов тем, что первых может быть на странице сколько угодно, а вторых — каждого по одному и не более. Вот и все. А, нет, есть еще одно небольшое отличие, но вы о нем пока не знаете, но скоро узнаете. :)

    Псевдоэлементы в CSS — это такие инструкции, которые позволяют выделить внутри элемента определенный участок, чтобы задавать ему стили отдельно, как будто этот участок — самостоятельный элемент ограниченный тегами. А псевдоклассы позволяют изменять стили всего элемента, но в зависимости от каких-то определенных условий, которые могут быть совершенно разными (действия пользователя, нахождение элемента в определенном месте HTML-кода и так далее).

  4. Способы позиционирования задаются свойством position. При относительном позиционировании смещение элемента считается от того места, где бы он находился, не будь этого позиционирования вообще. При этом элемент вырывается из обычного потока HTML-элементов (другие его не замечают), но его исходное место остается незанятым.

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

На самом деле, друзья, я больше чем уверен, что вы не на все вопросы ответили правильно либо ответили правильно, но не полностью. Как всегда сужу по себе в тот период, когда я сам только учился CSS. :) Но в очередной, уже наверное сотый, раз говорю вам — не старайтесь все сразу запомнить наизусть, не надо. И не переживайте о том, что что-то не запомнили — со временем ваш мозг сам «отделит зерна от плевел». В конце концов, есть учебники и справочники, которые всегда помогут вспомнить. Но вот на что вам надо обратить внимание, так это на понимание материала. В общем, если вы все поняли и усвоили, но что-то не запомнили — не страшно, но вот если вы чего-то не поняли в процессе изучения и при этом пошли дальше — вот это уже плохо. Поэтому рекомендую вам в срочном порядке разбираться с такими моментами.

Вернуться в урок → Перейти к следующему уроку