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

Discussion in 'Песочница' started by Lolinas, 11 Jan 2021.

  1. Lolinas

    Lolinas Member

    Joined:
    20 Oct 2019
    Messages:
    90
    Likes Received:
    29
    Reputations:
    2
    Поговорим про каскадные таблицы стилей. С их помощью можно изменить любой элемент на веб-сайте. Естественно, это будет отображаться только в вашем браузере. Из-за внедрения большого количества рекламы не хочется и вовсе посещать некоторые сайты, например, довольно популярный сайт openssource.biz имеет просто обилие рекламных баннеров. Да, можно воспользоваться адблоком, однако разработчики тоже не дураки, и публикуют рекламу без опознавательных стилей. Поэтому блокировщик не может отличить рекламный баннер от простой картинки. Иногда сайты просят выключить блокировщик для отображения определённого контента. Используем специальный плагин для браузера – stylish. С его помощью можно изменить сайт, так как хотите этого именно вы, а не дизайнер сайта. Рассмотрим пример на простой странице группы в вк

    [​IMG]

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

    [​IMG]

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

    [​IMG]

    [​IMG]

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

    [​IMG]

    domain("vk.com") – говорит о том что правило будет работать на всем домене vk.com. Если требуется определённая страница, то нужна написать так url-prefix("https://vk.com/friends?section=list2")
    Теперь посмотрим на страницу группы

    [​IMG]

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

    [​IMG]

    - Рассмотрим теперь случай, в котором требуется изменить шрифт на странице. Мне к примеру, очень нравится «С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;

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

    [​IMG]

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

    [​IMG]

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

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

    [​IMG]

    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"]

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

    [​IMG]

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

    [​IMG]

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

    [​IMG]

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