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

13

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

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

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

— Жиль "ТАК - перестань быть злым"
источник

15

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

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

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

Перейдите на страницу. (в вашем случае /unix// )
Щелкните правой кнопкой мыши по элементу, которым вы хотите управлять. (в этом случае почти везде на странице, так как фон влияет на всю страницу)
Выберите «Проверка элемента» во всплывающем меню. При этом используются встроенные средства проверки Firefox, я не буду здесь говорить о Firebug, но у него есть аналогичные панели и функции.
Это открывает панели в нижней и боковой части окна Firefox. Внизу вы видите HTML. Справа вы видите CSS-правила для выбранного элемента страницы (на котором вы щелкнете правой кнопкой мыши). Внизу кликайте по разным элементам, чтобы перемещаться. Страница организована в дерево элементов, и вы можете свернуть или развернуть каждый узел в дереве. При нажатии на элементы выбранный элемент будет выделен на самой странице.
В общем, на этом этапе вам нужно проверить элемент, которым вы хотите манипулировать, а также его родительские элементы (элементы, которые содержат этот элемент в дереве). Определите элемент, которым вам действительно придется манипулировать. Например, если вы возитесь с ответами на этой странице, вы в конечном итоге начнете с элемента <p>, который содержит текст ответа, но вы хотите включить в текст все элементы, например стрелки для голосования вниз / вниз, информация об авторе, ссылки «поделиться», «редактировать», «пометить» и т. д. Итак, вы переходите на пару уровней вверх к тегу <div> с идентификатором «answer - ####» и классом "ответ", поскольку это элемент, который содержит все элементы оформления окна ответа. Нажмите на него, и вы увидите, что эта часть веб-страницы будет выделена. (В этом случае фон страницы будет находиться ближе к верху внутри тега <body> . Прокрутите вверх до верхней части HTML-кода и щелкните тег <body>.)
Далее вам нужно определить свойства CSS этого элемента, которыми вы хотите манипулировать. Посмотрите на CSS справа и найдите свойства, которые вы хотите изменить. Лично я довольно новичок в CSS, поэтому на этом этапе я часто буду гуглить «css» + имя свойства, чтобы узнать больше о свойстве и его поведении. Продолжая мой пример, где мы смотрим на SE-ответ, допустим, мы хотим изменить поля вокруг ответа. Файл all.css имеет свойство margin, установленное в 0px, но очевидно, что вокруг этих элементов есть поле. Некоторое гугление учит меня искать свойства заполнения, так как они также могут влиять на поля вокруг элемента. Конечно, есть два свойства, связанные с отступом, которые установлены в ответе, padding-bottom и padding-top, (для вашей конкретной проблемы вы ищете фоновое изображение, поэтому ищите «background» в свойствах CSS. Вы увидите свойство «background» в верхней части. Оно применяется к элементам body этой страницы. Поиск в Google » css background свойство ", чтобы узнать, как работает это свойство, показывает вам, что оно может содержать цвет или URL-адрес изображения вместе с различными модификаторами. После небольшого перехода к описанию того, как работает свойство background-image , мы видим некоторые полезная информация, значение по умолчанию 'none' . Мы хотим вернуть фоновое изображение к его значению по умолчанию, поэтому нам понадобится эта информация.)
Теперь мы используем Стильный. Альтернативой без Стила будет редактирование файлов, которые вы разместили в своем ответе. Стильный позволяет нам легко управлять пользовательским 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-document, будет применяться только к домену в скобках. См. Пункты, выделенные жирным шрифтом выше. Чтобы изменить отступы для ответов, вы обновляете текстовое поле так:
```
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("superuser.com") {
    .answer {
        padding-bottom:0px;
        padding-top:0px;
    }
}
```
Чтобы разорвать этот вниз для людей , которые не знают CSS, мы первый выбирающий класс (эрго а «» идет в начале. Если мы подбирали по идентификатору, мы бы поставить „#“ есть.) Ответ (так что «ответь»). Затем мы открываем блок с фигурной скобкой, чтобы вывести список свойств выбранного элемента, который мы будем изменять. Сначала мы изменяем 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, здесь нет необходимости использовать символы # или.). Мы устанавливаем фон в нет.)
Обращаю ваше внимание на кнопки внизу окна Стильный стиль редактирования. «Предварительный просмотр» будет вводить изменения, которые вы ввели, чтобы вы могли видеть их в действии. «Сохранить» сохранит изменения. «Отмена» довольно очевидна. Для практически любого изменения пользовательского CSS, которое вы делаете, вам нужно нажать Preview, чтобы увидеть, сработало ли изменение так, как вы хотели. В обоих примерах вы увидите, что это не сработало. Для этого есть важная причина, к которой я сейчас обращаюсь.
У 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;
    }
}
```
Теперь нажмите Preview еще раз, и вы увидите, что ваш пользовательский CSS работает. Нажмите Сохранить и наслаждайтесь.

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

body {
  background:none !important;
}

— Кин
источник

2

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

— Бенджамин Банье
источник

2

Использование greasemonkey для проверки свойства css похоже на использование молотка для ввинчивания винта. Это работает, но это не элегантно, и вы, скорее всего, что-то сломаете по пути.

— Калеб

2

Вы делаете то, что сделали бы, если бы размещали на сайте

foo.bar { background-pattern:none; }

затем добавьте

!important

до }. Вот небольшая деталь по использованию без user-css, которая все еще объясняет это для вашего использования.

— tobylane
источник