Я могу говорить только со знакомством с Firefox, так как это мой основной браузер. Я постараюсь придерживаться общих правил, чтобы выполнить вашу просьбу «научи меня ловить рыбу». Для этого я включу 2 примера: ваш и другой, в котором больше уроков из реальной жизни. Во-первых, мы получим несколько инструментов, которые упростят создание пользовательского CSS.
- Обновление до последней версии Firefox. В некоторых из последних версий были расширены инструменты инспектора веб-сайтов, так что вы захотите их.
- Необязательно: Установите расширение Firebug, которое дает вам гораздо более мощные инструменты инспектора сайта. (лично я не использую Firebug для создания пользовательского CSS, но я привожу здесь упоминание для полноты картины)
- Установите стильное расширение. Это пользовательское 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-bottom и padding-top. (для вашей конкретной проблемы вы ищете фоновое изображение, поэтому ищите "background" в свойствах CSS. Вы увидите свойство 'background' в верхней части. Это относится к элементам тела этой страницы. Погуглив "свойство фона css", чтобы узнать, как работает это свойство, вы увидите, что оно может содержать цвет или 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, здесь нет необходимости использовать символы #s или .s). Мы устанавливаем фон в нет.)
- Обращаю ваше внимание на кнопки в нижней части окна редактирования стильного стиля. "Предварительный просмотр" будет вводить изменения, которые вы ввели, чтобы вы могли видеть их в действии. "Сохранить" сохранит изменения. "Отмена" довольно очевидна. Для практически любого изменения пользовательского CSS, которое вы делаете, вам нужно нажать Preview, чтобы увидеть, сработало ли изменение так, как вы этого хотели. В обоих примерах вы увидите, что это не сработало. Для этого есть важная причина, к которой я сейчас обращаюсь.
У 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;
}
}
Теперь нажмите Preview еще раз, и вы увидите, что ваш пользовательский CSS работает. Нажмите Сохранить и наслаждайтесь.
Если вы используете Chrome, его встроенный инспектор уже очень хорош. Также есть стильное расширение. Вы вводите модификации CSS немного по-другому: выберите «Управление установленными стилями», затем нажмите «Создать новый стиль», введите сайты или шаблоны URL-адресов, к которым будет применяться публикация ниже поля кода, и введите только CSS для конкретного домена в « код », например
body {
background:none !important;
}
