Понимание CSS для стилизации пользователей в браузере

Question 1

Я хочу внести конкретное изменение в внешний вид конкретного сайта в своем веб-браузере. Этот сайт использует CSS, поэтому я думаю, что мне нужно написать пользовательский CSS-override (пожалуйста, исправьте меня, если я не прав).

Мои браузеры – это Firefox (для которого, как я думаю, мне нужно написать что-то в chrome/userContent.css) и Chrome (User\ StyleSheets/Custom.css).

Конкретное изменение, которое я хочу сделать, – это удалить фоновый узор (темные точки) на всех страницах https://unix.stackexchange.com/. Но в более общем плане, пожалуйста, научите меня, как ловить рыбу: как я могу узнать, какой параметр нужно изменить, и как я могу написать это изменение в пользовательском CSS?

Question 2

Я могу говорить только о Firefox, так как это мой основной браузер. Я постараюсь оставаться в общем русле и выполнить вашу просьбу «научить меня ловить рыбу». В этом духе я приведу два примера: ваш и другой, который содержит более реальные уроки. Сначала мы получим инструменты, чтобы упростить создание пользовательского CSS.

Обновите Firefox до последней версии. Некоторые из недавних версий имели расширения инструментов инспектора веб-сайтов, так что они вам понадобятся.
По желанию: установите расширение Firebug, которое дает вам гораздо более мощные инструменты инспектора сайта. (лично я не использую Firebug для создания пользовательского CSS, но упоминаю его здесь для полноты).
Установите расширение Stylish. Это расширение, ориентированное на пользовательский CSS, значительно упрощает создание пользовательского CSS.

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

Перейдите на страницу. (в вашем случае, https://unix.stackexchange.com/)
Щелкните правой кнопкой мыши на элементе, который вы хотите изменить. (практически в любом месте на странице в этом случае, так как фон влияет на всю страницу)
Выберите «Просмотреть элемент» из всплывающего меню. Это использует встроенные инструменты инспекции Firefox, я не буду упоминать Firebug здесь, но у него есть аналогичные панели и функции.
Это откроет панели внизу и сбоку окна Firefox. Внизу вы видите HTML. Справа вы видите CSS-правила для выбранного элемента страницы (который будет тем, на который вы щелкнули правой кнопкой мыши). Внизу щелкайте по различным элементам для навигации. Страница организована в виде дерева элементов, и вы можете свернуть или развернуть каждый узел в дереве. Щелкая по элементам, выделенный элемент будет подсвечен на самой странице.
В общем, на этом этапе вы захотите исследовать элемент, который вы хотите изменить, вместе с его родительскими элементами (элементами, которые содержат этот элемент в дереве). Определите элемент, который вам действительно нужно будет изменить. Например, если вы работаете с ответами на этой странице, вам нужно будет начать с элемента <p>, который содержит текст ответа, но вы хотите включить все вещи вокруг текста, такие как стрелки голосования вверх/вниз, информация о пользователе, ссылки на совместное использование/редактирование/флаг и т.д. Так что вы поднимаетесь на несколько уровней к тегу <div>, который имеет идентификатор “answer-####” и класс “answer”, так как это элемент, который содержит все элементы оформления ответа. Щелкните по нему, и вы увидите, как эта часть веб-страницы подсвечивается. (В этом случае фон страницы будет вверху, внутри тега <body>. Прокрутите вверх к верхней части HTML и щелкните по тегу <body>.)
Затем вам нужно определить CSS-свойства этого элемента, которые вы хотите изменить. Посмотрите на CSS справа и найдите свойства, которые вы хотите изменить. Лично я довольно нов в CSS, поэтому на этом этапе я часто гуглю ‘css’ + имя свойства, чтобы узнать больше о свойстве и о том, как оно работает. Продолжая свой пример, где мы смотрим на ответ SE, давайте скажем, что мы хотим изменить отступы вокруг ответа. В файле all.css свойство margin установлено на 0px, но, очевидно, что есть отступ вокруг этих элементов. Некоторое гугление учит меня искать свойства padding, так как они также могут влиять на отступы вокруг элемента. И действительно, есть два свойства, связанные с отступами, которые установлены для ответа, padding-bottom и padding-top. (для вашей конкретной проблемы вы ищете фоновое изображение, так что ищите ‘background’ в CSS-свойствах. Вы увидите ‘background’ свойство ближе к верху. Оно применяется к элементам body этой страницы. Гугление “свойство css background”, чтобы узнать, как это свойство работает, показывает вам, что оно может содержать цвет или URL изображения, а также различные модификаторы. После небольшого поиска, чтобы разобраться, как работает свойство background-image, мы видим полезную информацию, стандартное значение ‘none’. Мы хотим вернуть фоновое изображение к его стандартному значению, так что нам нужна эта информация.)
Теперь мы используем Stylish. Альтернативой без Stylish было бы редактирование файлов, которые вы указали в своем ответе. Stylish позволяет нам легко управлять пользовательским CSS для многих сайтов. Stylish добавляет небольшую иконку в ваше окно Firefox, нажмите на нее, затем выберите “Написать новый стиль” -> “Для “(этот сайт).com”. Дайте стилю имя и, по желанию, некоторые теги. Затем вы сможете различать этот стиль как применимый к Superuser.com или Stackexchange.com и т.д. Это окно дает нам шаблон, который позволяет нам изменить CSS только для этого домена. Если вам нужно изменить CSS для конкретного URL, вы можете сделать это, или вы также можете просто получить пустой стиль, если хотите написать CSS, который применяется ко всем сайтам, просто выберите соответствующую запись в меню Stylish. Для моего примера изменения ответа вы получите текстовое поле, содержащее это:
```
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("superuser.com") {

}
```
Все, что помещается в блок @-moz-document, будет применяться только к домену, указанному в скобках. Обратите внимание на выделенные элементы выше. Чтобы изменить отступы для ответов, вы обновляете текстовое поле, чтобы оно выглядело так:
```
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("superuser.com") {
    .answer {
        padding-bottom:0px;
        padding-top:0px;
    }
}
```
Чтобы объяснить это людям, которые не знают CSS, мы сначала выбираем класс (поэтому в начале идет “.”). Если бы мы выбирали по ID, мы бы поставили “#”. answer (то есть ‘answer’). Затем мы открываем блок с фигурной скобкой, чтобы перечислить свойства выбранного элемента, которые мы будем изменять. Сначала мы изменяем padding-bottom и устанавливаем его на 0 пикселей. Затем мы делаем то же самое для padding-top. Каждое свойство и значение завершается точкой с запятой. Затем мы закрываем блок с фигурной скобкой. (в вашем примере UNIX вы бы сделали это:
```
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("unix.stackexchange.com") {
    body {
        background:none;
    }
}
```
Здесь вы работаете с доменом unix.stackexchange.com. Мы выбираем элемент “body” (выбирая HTML-элемент, вы также используете селектор CSS, здесь не нужны # или .). Мы устанавливаем фон на none.)
Обращаю ваше внимание на кнопки внизу окна редактирования стиля Stylish. “Предварительный просмотр” применит изменения, которые вы ввели, чтобы вы могли увидеть их в действии. “Сохранить” сохранит изменения. “Отмена” довольно очевидна. Почти для любого изменения пользовательского CSS, которое вы делаете, вам захочется нажать Предварительный просмотр, чтобы увидеть, сработало ли изменение так, как вы хотели. В обоих примерах вы увидите, что это не сработало. На это есть важная причина, которую я сейчас объясню.
CSS имеет определенную иерархию приоритетов для определения того, как работать с пользовательским CSS, авторским CSS и браузерным CSS. Обычно у нас есть CSS для страницы, написанный автором страницы, и он будет содержать правила для многих элементов на этой странице. Когда правило не определено автором, но присутствует в вашем пользовательском CSS, тогда ваш браузер будет использовать это. Если ни одно из них не имеет CSS, определенного для этого элемента, тогда браузер использует свои собственные стандартные CSS-правила для этого элемента. Таким образом, здесь есть иерархия веса: автор > пользователь > браузер. Если что-то определено во всех трех случаях, то CSS с более высоким весом будет иметь приоритет и вступит в силу. Есть способ заставить CSS с более низким весом игнорировать CSS с более высоким весом, и это делается путем обозначения их как важные. Вы делаете это, добавляя “!important” к каждому CSS-объявлению, вот так:
```
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("unix.stackexchange.com") {
    body {
        background:none !important;
    }
}
```
Теперь снова нажмите Предварительный просмотр, и вы увидите, что ваш пользовательский CSS работает. Нажмите Сохранить и наслаждайтесь.

Если вы используете Chrome, его встроенный инспектор уже очень хорош. Существует также расширение Stylish. Вы вводите изменения CSS немного иначе: выберите «Управление установленными стилями», затем нажмите «Написать новый стиль», введите сайты или шаблоны URL, чтобы применить пост ниже поля кода, и введите только доменно-специфичный CSS в поле «код», например:

body {
  background:none !important;
}

Question 3

Установите firebug, чтобы определить соответствующее свойство CSS, а затем напишите скрипт greasemonkey, чтобы переопределить его.

Question 4

Вы делаете то, что сделали бы, если бы вставляли следующее на сайт:

foo.bar { background-pattern:none; }

А затем добавляете

!important

перед }. Вот небольшой нюанс по использованию не пользовательского CSS, который все же объясняет это для вашего использования.

Понимание CSS для стилизации пользователей в браузере

Вопрос или проблема

Ответ или решение

Понимание CSS для стилизации пользователей в браузере

Общая информация о CSS и пользовательских стилях

Варианты браузеров

Шаги для создания пользовательского CSS

Занятия по CSS

Заключение