Y
yumpa
Original poster
Поговорим про каскадные таблицы стилей. С их помощью можно изменить любой элемент на веб-сайте. Естественно, это будет отображаться только в вашем браузере. Из-за внедрения большого количества рекламы не хочется и вовсе посещать некоторые сайты, например, довольно популярный сайт openssource.biz имеет просто обилие рекламных баннеров. Да, можно воспользоваться адблоком, однако разработчики тоже не дураки, и публикуют рекламу без опознавательных стилей. Поэтому блокировщик не может отличить рекламный баннер от простой картинки. Иногда сайты просят выключить блокировщик для отображения определённого контента. Используем специальный плагин для браузера – stylish. С его помощью можно изменить сайт, так как хотите этого именно вы, а не дизайнер сайта. Рассмотрим пример на простой странице группы в вк
Предположим нужно оставить все кроме стены. Как это сделать? Для этого откроем инструменты разработки (firefox)
И с низу появится окно, в котором описан весь код страницы. И очень удобная функция, способная выбирать любой слой страницы (в левом верхнем углу)
div.page_cover_info означает селектор элемента, который отвечает за выделенную область. Тег div означает слой (аналог с фотошопом), который может имеет идентификатор класс (class) или айди (id). Не стану углубляться в правила написания файлов таблицы стилей и метода построения веб-страниц, это очень большая тема. Рассмотрим кратко определённые теги и как менять их атрибуты налету. Теперь перейдем в сам stylish. Открываем вкладку с аддонами и выбираем «Стили» и создаем новый стиль
domain("vk.com") – говорит о том что правило будет работать на всем домене vk.com. Если требуется определённая страница, то нужна написать так url-prefix("")
Теперь посмотрим на страницу группы
Элемент исчез, таким образом можно полностью очистить всю страницу
- Рассмотрим теперь случай, в котором требуется изменить шрифт на странице. Мне к примеру, очень нравится «С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;
- Чтобы изменить фон сайта нужно сначала узнать селектор, отвечающий за фон
Eсли вписать это body.lstfml {background: #000 !important;} то получим черный фон
Кстати, можно заменить картинку на свою картинку, например так background-image: url("paper.gif") !important;
- Также существует объекты на странице, которые трудно поддаются идентификации, для этих целей существует специальная функция «Копирование css селектора». Данный селектор будет уникальным, и дает ссылку на конкретный объект
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"]
- Иногда заблокировали элемент, а пустое место от него осталось и нужно подтянуть остальные элементы. Например, сдвинем пост в группе вк в сторону
Для этого нужно идентифицировать целый пост - post-75459680_1022156. Напишем правило сдвигающее, например, влево на 100 точек - #post-75459680_1022156 {margin-left: -100px !important; margin-right: 100px !important;}
Но картинка находится под левым меню, чтобы поставить картинку на передний план нужно воспользоваться атрибутом z-index. И теперь правило будет выглядеть так #post-75459680_1022156 {margin-left: -100px !important; margin-right: 100px !important; z-index: 100 !important;}. Z-index: 100 взято с потолка. 100 – это порядковый номер слоя веб страницы
На этом, пожалуй, все. В этой статье собрана подборка самых актуальных правил, которые могут понадобится обычному пользователю. Для более детального рассмотрения можно воспользоваться интернетом, а именно - w3schools.com/cssref/css_selectors.asp
![1.png 1.png](https://ufolabs.net/data/attachments/4/4956-015fe36f1bb5134b91975f8332c013d2.jpg)
Предположим нужно оставить все кроме стены. Как это сделать? Для этого откроем инструменты разработки (firefox)
![2.png 2.png](https://ufolabs.net/data/attachments/4/4957-8ec95b9ce291b8ca0957f477bf931cd4.jpg)
И с низу появится окно, в котором описан весь код страницы. И очень удобная функция, способная выбирать любой слой страницы (в левом верхнем углу)
![3.png 3.png](https://ufolabs.net/data/attachments/4/4958-5a16422381cbf2ca26b011b0f84e70d5.jpg)
![4.png 4.png](https://ufolabs.net/data/attachments/4/4959-3e2ab7e03df183d6f1250a20f709758b.jpg)
div.page_cover_info означает селектор элемента, который отвечает за выделенную область. Тег div означает слой (аналог с фотошопом), который может имеет идентификатор класс (class) или айди (id). Не стану углубляться в правила написания файлов таблицы стилей и метода построения веб-страниц, это очень большая тема. Рассмотрим кратко определённые теги и как менять их атрибуты налету. Теперь перейдем в сам stylish. Открываем вкладку с аддонами и выбираем «Стили» и создаем новый стиль
![5.png 5.png](https://ufolabs.net/data/attachments/4/4960-3a1c819de7a6b1d4958c69bf6199cef5.jpg)
domain("vk.com") – говорит о том что правило будет работать на всем домене vk.com. Если требуется определённая страница, то нужна написать так url-prefix("")
Теперь посмотрим на страницу группы
![6.png 6.png](https://ufolabs.net/data/attachments/4/4961-14abdce1fa14d10107fd176de2bfacf6.jpg)
Элемент исчез, таким образом можно полностью очистить всю страницу
![7.png 7.png](https://ufolabs.net/data/attachments/4/4962-92f3a48d8fd0cd7f068e060c31ad1eec.jpg)
- Рассмотрим теперь случай, в котором требуется изменить шрифт на странице. Мне к примеру, очень нравится «С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 8.png](https://ufolabs.net/data/attachments/4/4963-870ff41842168418ca282e40042c9e51.jpg)
Eсли вписать это body.lstfml {background: #000 !important;} то получим черный фон
![9.png 9.png](https://ufolabs.net/data/attachments/4/4964-f44336cd93ae40052135666526f63d55.jpg)
Кстати, можно заменить картинку на свою картинку, например так background-image: url("paper.gif") !important;
- Также существует объекты на странице, которые трудно поддаются идентификации, для этих целей существует специальная функция «Копирование css селектора». Данный селектор будет уникальным, и дает ссылку на конкретный объект
![10.png 10.png](https://ufolabs.net/data/attachments/4/4965-d1b9081d1699b48e903a33a663977a8e.jpg)
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 11.png](https://ufolabs.net/data/attachments/4/4966-29da7212fbbfa668679a3bca63f0dd4e.jpg)
Для этого нужно идентифицировать целый пост - post-75459680_1022156. Напишем правило сдвигающее, например, влево на 100 точек - #post-75459680_1022156 {margin-left: -100px !important; margin-right: 100px !important;}
![12.png 12.png](https://ufolabs.net/data/attachments/4/4967-28de1cd5b1bb5fd981c01228a204c4fb.jpg)
Но картинка находится под левым меню, чтобы поставить картинку на передний план нужно воспользоваться атрибутом z-index. И теперь правило будет выглядеть так #post-75459680_1022156 {margin-left: -100px !important; margin-right: 100px !important; z-index: 100 !important;}. Z-index: 100 взято с потолка. 100 – это порядковый номер слоя веб страницы
![13.png 13.png](https://ufolabs.net/data/attachments/4/4968-a066b3936994dd10b09770594cde74c2.jpg)
На этом, пожалуй, все. В этой статье собрана подборка самых актуальных правил, которые могут понадобится обычному пользователю. Для более детального рассмотрения можно воспользоваться интернетом, а именно - w3schools.com/cssref/css_selectors.asp
vk.com/id58924119