Стили CSS

Пост опубликован: 23.07.2021

Выделение элементов и групп элементов. Атрибуты «class» и «id».

При создании сайта очень часто необходимо выделить какой-нибудь элемент или группу элементов, т. е. создать для них отдельный особый стиль (отличались, чтобы от всех остальных). К примеру, выделить цветом первый абзац, отдельное слово, выражение или блок. Это можно сделать при помощи атрибутa «class». Узнайте также, как на сайте сделать рекламу при помощи агентства whiteo-agency.com.ua. Пример: Применение атрибута «class». Пусть все абзацы на нашей страничке имеют стиль: Если требуется выделить какой-нибудь абзац нужно создать для него особый стиль. Прошу обратить внимание на то, как мы прописываем этот стиль в таблице CSS.

Первый знак указывает, для какого тега создается этот стиль. В нашем случае стиль действителен только для тегов «Р». Далее ставится точка, — это значит, что создается CLASS. Дальше идет имя класса – у нас RED. Если имя класса начинается с точки – это значит, что он действителен для всех тегов. Теперь нам нужно прописать этот класс в коде выбранного абзаца. Обратите внимание, что в коде страницы имя класса пишется без точки. Пусть это будет второй абзац: Сохраняем таблицу стилей CSS и нашу страничку и переходим в браузер. Как видите, мы достигли своей цели. Второй абзац стал отличаться по цвету от других. Так, создавая классы, мы можем выделить любой объект.

Выделение элементов и групп элементов. Поля. Свойство margin.

На этом занятии мы познакомимся со свойством CSS margin. Это свойство устанавливает расстояние от каждой стороны элемента до соседних объектов или до краёв документа. Если кто не знает, то сообщаю, о том, что каждый элемент на странице имеет свой блок или бокс. Этот блок имеет четыре стороны, которые имеют свои имена: right – правая; left – левая; top – верхняя; bottom – нижняя. Увидеть эти блоки очень просто.

• Пропишем в нашей таблице CSS в стилях каждого элемента рамку: Пусть тело страницы будет окружено сплошной синей рамкой в 3 пикселя толщиной; заголовки будут иметь красную рамку, а абзацы – зеленую.
• Сохраняем нашу таблицу стилей CSS и смотрим в браузере, какие границы имеют блоки наших элементов. Думаю, что теперь все удостоверились, что все элементы страницы имеют свои блоки, ограниченные четырьмя сторонами.
• Теперь давайте пропишем в таблице CSS поля для всех сторон всех элементов. Это делается так: Правила margin для тела страницы прописаны в развернутом виде, а для заголовков и абзацев в сокращенном. Если будете пользоваться сокращенной записью, соблюдайте порядок сторон.
• В каком порядке они идут в развернутом виде, в таком же порядке они должны идти и в сокращенной записи.
• Как всегда, сохраняем таблицу стилей CSS и смотрим, что у нас получилось.

Как видите, все поля в наличии и такие, какие мы заказывали. Обязательно потренируйтесь в работе с этим свойством CSS. При создании сайта без свойства margin не обойтись.