CSS

logo CSS

CSS (/siːɛsɛs/ англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки. Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.


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


 

Звезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активна

Как запретить копирование с сайта с помощью CSS

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

Звезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активна

Как сделать DIV на весь экран, перекрывающий всю страницу, с помощью CSS

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

Адаптивная фоновая картинка под все разрешения экрана. CSS-стили
Звезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активна

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

Звезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активна

Правильная нумерация в смешанных нумерованных и маркированных списках HTML с помощью CSS

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

Звезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активна

Правильная нумерация во вложенных нумерованных списках HTML с помощью CSS

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