Розуміння CSS для стилю користувача у веб-переглядачі


13

Я хочу внести конкретну зміну у зовнішній вигляд певного сайту у своєму веб-браузері. Цей веб-сайт використовує CSS, тому я думаю, що я повинен зробити - це перезаписати CSS користувача (будь ласка, виправте мене, якщо це неправильно).

Мої браузери - це Firefox (для якого я думаю, що мені слід щось написати chrome/userContent.css) та Chrome ( User\ StyleSheets/Custom.css).

Я хочу внести конкретну зміну - видалити фоновий візерунок (темні точки) на всіх сторінках /unix// . Але загалом, навчіть мене, як ловити рибу: як я дізнаюся, який параметр потрібно змінити, і як записати цю зміну в css користувача?

Відповіді:


15

Я можу говорити лише з знайомством з Firefox, оскільки це мій основний браузер. Я спробую зробити тут загальне, щоб виконати ваше прохання "навчити мене ловити рибу". З цією метою я включу два приклади, ваш та інший, у яких є більше реальних уроків. По-перше, ми отримаємо кілька інструментів для спрощення створення користувачів CSS.

  1. Оновлення до останнього Firefox. Деякі з останніх версій мали розширення інструментів інспектора веб-сайтів, тож ви хочете їх мати.
  2. Необов’язково: встановіть розширення Firebug, яке дає вам набагато більш потужні інструменти для інспектора сайту. (особисто я не використовую Firebug для створення CSS користувача, але тут я включаю згадку для повноти)
  3. Встановіть розширення Stylish . Це розширення, орієнтоване на CSS, яке значно спрощує створення CSS користувача.

Тепер, щоб насправді щось написати. Перед початком роботи ви повинні ознайомитись з HTML та CSS. У W3Schools є гідні підручники для ознайомлення з базовою структурою та синтаксисом HTML та CSS . Заради цієї відповіді я включу достатньо інформації, щоб сподіватися допомогти новачкові в достатній кількості, щоб досягти прикладу.

  1. Перейдіть на сторінку. (у вашому випадку /unix// )
  2. Клацніть правою кнопкою миші елемент, яким ви хочете маніпулювати. (майже в будь-якому місці сторінки для цього випадку, оскільки фон впливає на всю сторінку)
  3. У спливаючому меню виберіть "Перевірити елемент". Тут використовуються вбудовані інструменти перевірки Firefox, я тут не звертатимусь до Firebug, але він має подібні панелі та функції.
  4. Це відкриває панелі внизу та збоку вікна Firefox. Унизу ви бачите HTML. Праворуч ви бачите правила CSS для вибраного елемента сторінки (це буде те, на що ви клацнули правою кнопкою миші). Унизу натисніть на різні елементи для навігації. Сторінка впорядкована у дерево елементів, і ви можете згорнути або розгорнути кожен вузол на дереві. При натисканні на елементи вибраний елемент буде виділятися на самій сторінці.
  5. Загалом, у цей момент ви захочете оглянути елемент, яким ви хочете маніпулювати, разом із його батьківськими елементами (елементи, які містять цей елемент у дереві). Визначте елемент, яким фактично доведеться маніпулювати. Наприклад, якщо ви плутаєтеся з відповідями на цій сторінці, ви починаєте з елемента <p>, який містить текст відповіді, але ви хочете включити всі речі навколо тексту, як-от вгору / стрілки для голосування / вниз, інформація про афішу, посилання для редагування / редагування / прапор тощо. Отже, ви переходите на кілька рівнів до тегу <div>, який має ідентифікатор "відповідь - ####" та клас "відповідь", оскільки це елемент, який містить усі елементи віконної відповіді. Клацніть на ньому, і ви побачите, що частина веб-сторінки буде виділена. (У цьому випадку фон сторінки буде поблизу вгорі, в тезі <body> . Прокрутіть угору HTML і натисніть тег <body>.)
  6. Далі вам потрібно визначити властивості CSS цього елемента, якими ви хочете маніпулювати. Подивіться на CSS праворуч та знайдіть властивості, які ви хочете змінити. Особисто я досить новачок у CSS, тому в цей момент я часто буду google 'css' + ім'я власності, щоб дізнатися більше про властивість та про те, як він веде себе. Продовжуючи мій приклад, коли ми дивимось на відповідь SE, скажімо, що ми хочемо змінити межі навколо відповіді. Файл all.css має властивість поля, встановлену на 0px, але очевидно, що навколо цих елементів є поле. Деякі googling вчать мене шукати властивості набивання, оскільки вони також можуть впливати на поля навколо предмета. Звичайно, є дві властивості, пов’язані з прокладкою, які встановлені у відповіді, нижній та нижній. (для конкретної проблеми ви шукаєте фонове зображення, тому шукайте "background" у властивостях CSS. Ви побачите властивість "background" вгорі. Це стосується елементів тіла цієї сторінки. Google " css background властивість ", щоб дізнатись, як працює ця властивість, показує, що вона може містити колір або URL-адресу до зображення разом із різними модифікаторами. Після переходу трохи до того, як переглядати, як працює властивість background-image , ми бачимо деякі корисна інформація, значення за замовчуванням "none" . Ми хочемо повернути фонове зображення до його значення за замовчуванням, тому нам потрібна ця інформація.)
  7. Тепер ми використовуємо Стильний. Альтернативою без Stylish було б редагування файлів, які ви розмістили у своїй відповіді. Стильний дозволяє нам легко керувати CSS користувачів багатьох сайтів. Стильно додає невелику піктограму до вашого вікна Firefox, натисніть на неї, потім перейдіть до "Написати новий стиль" -> "Для" (цей сайт) .com ". Дайте стилю ім'я та необов'язково кілька тегів. Ви зможете щоб виділити цей стиль як той, що застосовується до Superuser.com або Stackexchange.com і т. д. У цьому вікні ви знайдете шаблон, який дозволяє нам змінювати CSS тільки для цього домену. Якщо вам потрібно змінити CSS для конкретної URL-адреси, ви Ви можете зробити це, або ви також могли просто отримати порожній стиль, якщо ви хочете написати CSS, який стосується всіх сайтів, просто виберіть відповідний запис у меню Стильний. Для мого прикладу, що змінює відповіді, ви '

    @namespace url(http://www.w3.org/1999/xhtml);
    
    @-moz-document domain("superuser.com") {
    
    }

    Все, що поміщено в блок @ -moz-документа, стосуватиметься лише домену, що знаходиться в дужках. Дивіться напівжирними предметами вище. Щоб змінити набивання для відповідей, ви оновлюєте текстове поле таким чином:

    @namespace url(http://www.w3.org/1999/xhtml);
    
    @-moz-document domain("superuser.com") {
        .answer {
            padding-bottom:0px;
            padding-top:0px;
        }
    }

    Щоб розірвати цей вниз для людей , які не знають CSS, ми перший вибирає клас (ерго а «» йде на початку. Якщо ми підбирали за ідентифікатором, ми б поставити "#" є.) Відповідь (так 'відповідь'). Потім ми відкриваємо блок із фігурною дужкою, щоб перелічити властивості вибраного елемента, який ми будемо змінювати. Спочатку ми змінюємо нижню частину і встановлюємо її на 0 пікселів . Потім робимо те ж саме для підкладки-топ . Кожна властивість і значення закінчується крапкою з двократкою Потім закриваємо блок фігурною дужкою. (у вашому прикладі unix ви зробите це:

    @namespace url(http://www.w3.org/1999/xhtml);
    
    @-moz-document domain("unix.stackexchange.com") {
        body {
            background:none;
        }
    }

    Тут ви працюєте над доменом unix.stackexchange.com. Ми вибираємо елемент "body" (коли вибір елемента HTML також є селектором CSS, тут не потрібно #s або .s). Ми встановлюємо фон нічим.)

  8. Звертаю вашу увагу на кнопки внизу вікна стильного редагування стилів. "Попередній перегляд" введе зміни, які ви ввели, тож ви зможете побачити їх у дії. "Зберегти" збереже зміни. "Скасувати" досить очевидно. Для майже будь-якого користувача, який змінив CSS, який ви робите, ви захочете натиснути Попередній перегляд, щоб побачити, чи зміна працювала так, як ви цього хотіли. В обох прикладах ви побачите, що це не спрацювало. Для цього є важлива причина, з якою я зараз звертаюся.
  9. CSS має специфічну ієрархію пріоритетів для визначення способу роботи з користувачем CSS проти автора CSS проти CSS браузера та CSS браузера. Зазвичай у нас є CSS для сторінки, яку написав автор сторінки, і яка буде містити правила для багатьох елементів на цій сторінці. Якщо правило не визначено автором, але воно знаходиться у вашому користувальницькому CSS, тоді ваш браузер використовуватиме це. Якщо жоден з них не визначає CSS для цього елемента, браузер використовує власні правила CSS для цього елемента. Отже, тут є ієрархія ваги, автор> користувач> браузер. Якщо щось визначено у всіх трьох, то CSS з більшою вагою виграє і його CSS набуде чинності. Існує спосіб отримати CSS з меншою вагою, щоб замінити CSS з більшою вагою, і це, визначивши їх важливими. Ви робите це, додаючи "! Важливо"

    @namespace url(http://www.w3.org/1999/xhtml);
    
    @-moz-document domain("unix.stackexchange.com") {
        body {
            background:none !important;
        }
    }

    Тепер ще раз натисніть Попередній перегляд, і ви побачите, що CSS вашого користувача працює. Клацніть Зберегти та насолоджуйтесь.

Якщо ви використовуєте Chrome, його вбудований інспектор вже дуже хороший. Також є Стильне розширення . Ви вводите модифікації CSS дещо інакше: виберіть "Керувати встановленими стилями", потім натисніть "Написати новий стиль", введіть сайти або шаблони URL-адрес, щоб застосувати публікацію до поля коду, і введіть лише CSS, що залежить від домену, у полі " код ", наприклад

body {
  background:none !important;
}

2

Встановіть firebug, щоб ідентифікувати відповідну властивість CSS, а потім напишіть сценарій жировика, щоб замінити його.


2
Використовувати масляний ключ для отримання властивості css - це як використовувати молоток для забивання гвинта. Це працює, але це не елегантно, і ви, швидше за все, щось порушите по дорозі.
Калеб

2

Ви робите те, що зробили б, якби розміщували на сайті

foo.bar { background-pattern:none; }

потім додайте

!important 

перед }. Ось невеличка деталізація використання не користувача css, яка все ще пояснює це для вашого використання.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.