В этом разделе собраны материалы о использовании CSS для создания стилей сайтов.

Для позиционирования на экране различных устройств различных элементов HTML-документа применяются разные HTML-теги. Однако, стандартная разметка HTML не всегда подходит для правильного отображения того или иного элемента с точки зрения дизайна. Для того, чтобы правильно разместить тот или иной элемент иногда требуется поменять его стандартное поведение в массиве других, окружающих его документов. Для этих целей удобнее всего задать (или переопределить) CSS свойство display, которое определяет, как элемент должен быть показан в документе. В этой статье рассмотрим, какие значения может принимать свойство display и как это скажется на свойствах и поведении того, объекта, к которому это свойство применяется.

Ранее были рассмотрены два варианта того, как запретить копирование контекста с сайта: с помощью JavaScript (легко обходится отключением JS в браузере) и с помощью прозрачного блока CSS на весь экран, который перекрывает доступ до элементов страницы (легко обходится, удалением этого элемента со страницы с помощью инструментов разработчика браузера). В этой статье расскажу про ещё один способ того, как усложнить жизнь тем, кто ворует чужой контент с помощью CSS свойства user-select и на этом пожалуй остановлюсь. Нет идеальной защиты. На крайней случай, можно всегда нанять секретаршу, которая всё перепечатает (если конечно нет нормального сисадмина, разбирающегося в том, как работают сайты, в штате).

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

Использование фоновых картинок в качестве элементов дизайна в большинстве случаев — плохая практика, но при хорошем чувстве стиля и правильной разметке страницы, можно получить хороший вариант, на котором приятно смотрится расположенная поверх фона информация. Тем более, что современные браузеры позволяют легко делать полупрозрачные цвета, которые можно подкладывать промежуточным фоном между фоновым изображением и основным контекстом. В этой статье покажу простейший вариант того, как сделать адаптивное фоновое изображение, которое будет автоматически подстраиваться под ширину экрана пользователя и, кроме этого, для разных устройств будет загружаться своя фоновая картинка.

В предыдущей статье было рассмотрено решение, как сделать правильную нумерацию во вложенных нумерованных списках HTML с помощью CSS. И это решение работает до тех пор, пока на странице нет маркированных списков. Как только появляется маркированный список, включается вывод счётчика элементов li, и ненумерованные элементы списка также начинают нумероваться. И это ещё не всё: нумерация вложенных маркированных списков влияет на правильность нумерации нумерованных элементов этого списка. Короче, бардак. В этой статье рассмотрим, как привести в порядок нумерацию в смешанных нумерованных и маркированных списках HTML с помощью CSS уточнив, какие именно элементы списков li считать.

Стандарт языка HTML поддерживает два вида списков: нумерованные и ненумерованные. Первые используются для упорядоченного перечисления элементов, вторые — для создания списка равнозначных элементов. Есть ещё списки определений, которые используются для создания блоков определение-описание но, по моему опыту, используются крайне редко. О том, как работать с этими списками есть видео для новичков, где подробно показано, как работать с этими списками.