CSS. Изменяем отображение любого сайта

yumpa

Member
Сообщения
35
Реакции
27
Посетить сайт
Поговорим про каскадные таблицы стилей. С их помощью можно изменить любой элемент на веб-сайте. Естественно, это будет отображаться только в вашем браузере. Из-за внедрения большого количества рекламы не хочется и вовсе посещать некоторые сайты, например, довольно популярный сайт openssource.biz имеет просто обилие рекламных баннеров. Да, можно воспользоваться адблоком, однако разработчики тоже не дураки, и публикуют рекламу без опознавательных стилей. Поэтому блокировщик не может отличить рекламный баннер от простой картинки. Иногда сайты просят выключить блокировщик для отображения определённого контента. Используем специальный плагин для браузера – stylish. С его помощью можно изменить сайт, так как хотите этого именно вы, а не дизайнер сайта. Рассмотрим пример на простой странице группы в вк

1.png

Предположим нужно оставить все кроме стены. Как это сделать? Для этого откроем инструменты разработки (firefox)

2.png

И с низу появится окно, в котором описан весь код страницы. И очень удобная функция, способная выбирать любой слой страницы (в левом верхнем углу)

3.png
4.png

div.page_cover_info означает селектор элемента, который отвечает за выделенную область. Тег div означает слой (аналог с фотошопом), который может имеет идентификатор класс (class) или айди (id). Не стану углубляться в правила написания файлов таблицы стилей и метода построения веб-страниц, это очень большая тема. Рассмотрим кратко определённые теги и как менять их атрибуты налету. Теперь перейдем в сам stylish. Открываем вкладку с аддонами и выбираем «Стили» и создаем новый стиль

5.png

domain("vk.com") – говорит о том что правило будет работать на всем домене vk.com. Если требуется определённая страница, то нужна написать так url-prefix("

Авторизируйтесь или Зарегистрируйтесь что бы просматривать ссылки.

")
Теперь посмотрим на страницу группы

6.png

Элемент исчез, таким образом можно полностью очистить всю страницу

7.png

- Рассмотрим теперь случай, в котором требуется изменить шрифт на странице. Мне к примеру, очень нравится «Сomic Sans MS». Создаем новое правило в котором вписываем к необходимому тегу данные атрибуты {font-family: comic sans ms !important;}. Если требуется изменить шрифт вовсе на всем сайте, то быстрее будет воспользоваться таким правилом * {font-family: comic sans ms !important;}. Для изменения размера текста и цвета есть стили font-size и color соответственно. font-size: 15px !important; color: red !important;

- Чтобы изменить фон сайта нужно сначала узнать селектор, отвечающий за фон

8.png

Eсли вписать это body.lstfml {background: #000 !important;} то получим черный фон

9.png

Кстати, можно заменить картинку на свою картинку, например так background-image: url("paper.gif") !important;

- Также существует объекты на странице, которые трудно поддаются идентификации, для этих целей существует специальная функция «Копирование css селектора». Данный селектор будет уникальным, и дает ссылку на конкретный объект

10.png

ytd-rich-item-renderer.ytd-rich-grid-renderer:nth-child(1) > div:nth-child(1) > ytd-rich-grid-media:nth-child(1) > div:nth-child(1) > ytd-thumbnail:nth-child(1) > a:nth-child(1) > yt-img-shadow:nth-child(1) > img:nth-child(1)

- Как идентифицировать элемент, который может менять часть своего названия? Это очень часто делается для разблокировки рекламного контента. Сегодня заблокировали баннер, а завтра он снова сияет во всей красе.
Есть специальные приемы для отлавливания таких стилей [attribute^=value]; [attribute$=value]; [attribute*=value]
[attribute^=value] – ищет элемент в котором значение атрибут начинается с определённого слова, например, заблокируем любой div, атрибут которого начинается на yandex - div[id^="yandex"] и div[class^="yandex"]
[attribute$=value] – ищет элемент в котором значение атрибут заканчивается на определённое слово - a[href$=".pdf"]
[attribute*=value] – ищет элемент значение которого содержит определённую строку - [id*="google_ads"]

- Иногда заблокировали элемент, а пустое место от него осталось и нужно подтянуть остальные элементы. Например, сдвинем пост в группе вк в сторону

11.png

Для этого нужно идентифицировать целый пост - post-75459680_1022156. Напишем правило сдвигающее, например, влево на 100 точек - #post-75459680_1022156 {margin-left: -100px !important; margin-right: 100px !important;}

12.png

Но картинка находится под левым меню, чтобы поставить картинку на передний план нужно воспользоваться атрибутом z-index. И теперь правило будет выглядеть так #post-75459680_1022156 {margin-left: -100px !important; margin-right: 100px !important; z-index: 100 !important;}. Z-index: 100 взято с потолка. 100 – это порядковый номер слоя веб страницы

13.png

На этом, пожалуй, все. В этой статье собрана подборка самых актуальных правил, которые могут понадобится обычному пользователю. Для более детального рассмотрения можно воспользоваться интернетом, а именно - w3schools.com/cssref/css_selectors.asp
vk.com/id58924119​
 

Название темы