Só posso falar com familiaridade com o Firefox, pois esse é o meu navegador principal. Vou tentar manter as coisas gerais aqui para atender ao seu pedido de 'ensine-me a pescar'. Para esse fim, incluirei dois exemplos, o seu e outro com mais lições do mundo real. Primeiro, obteremos algumas ferramentas para facilitar a criação de CSS do usuário.
- Atualize para o Firefox mais recente. Algumas das versões recentes tiveram expansões das ferramentas de inspeção do site, então você as desejará.
- Opcional: Instale a extensão Firebug, que oferece ferramentas muito mais poderosas de inspeção do site. (pessoalmente, não uso o Firebug para criar CSS de usuário, mas incluo uma menção aqui por questões de integridade)
- Instale a extensão Stylish . Essa é uma extensão centrada no CSS do usuário que simplifica bastante a criação do CSS do usuário.
Agora, então, para realmente escrever algo. Você deve ter uma familiaridade básica com HTML e CSS antes de continuar. O W3Schools tem tutoriais decentes disponíveis para se familiarizar com a estrutura básica e sintaxe de HTML e CSS . Para fins de resposta, incluirei informações suficientes para ajudar um novato a esperar o suficiente para obter o exemplo.
- Navegue até a página. (no seu caso, /unix// )
- Clique com o botão direito do mouse no elemento que você deseja manipular. (praticamente em qualquer lugar da página neste caso, pois o plano de fundo afeta a página inteira)
- Selecione 'Inspecionar elemento' no menu pop-up. Isso usa as ferramentas de inspeção integrada do Firefox. Não abordarei o Firebug aqui, mas possui painéis e recursos semelhantes.
- Isso abre os painéis na parte inferior e lateral da janela do Firefox. Na parte inferior, você está vendo HTML. À direita, você vê regras CSS para o elemento de página selecionado (que será o item em que você clicou com o botão direito do mouse). Na parte inferior, clique em diferentes elementos para navegar. A página está organizada em uma árvore de elementos e você pode recolher ou expandir cada nó na árvore. Ao clicar nos elementos, o elemento selecionado será destacado na própria página.
- Em geral, neste momento, você desejará inspecionar o elemento que deseja manipular, juntamente com os elementos pai (os itens que contêm esse elemento na árvore). Identifique o elemento que você realmente precisará manipular. Por exemplo, se você estiver mexendo com as respostas desta página, você acabará começando com o elemento <p> que contém o texto de uma resposta, mas deseja incluir todas as informações ao redor do texto, como as / setas de votação para baixo, as informações do pôster, os links de compartilhamento / edição / sinalização, etc. Portanto, você navega alguns níveis até a tag <div> que possui um ID de "resposta - ####" e uma classe de "responda", pois esse é o elemento que contém todos os elementos de limpeza de uma resposta. Clique nele e você verá que parte da página da Web é destacada. (Nesse caso, o plano de fundo da página estará próximo ao topo, dentro da tag <body> . Role até a parte superior do HTML e clique na tag <body>.)
- Em seguida, você precisa identificar as propriedades CSS deste elemento que deseja manipular. Veja o CSS à direita e encontre as propriedades que deseja alterar. Pessoalmente, sou bastante iniciante em CSS, portanto, neste momento, frequentemente procurarei no Google 'css' + um nome de propriedade para aprender mais sobre a propriedade e como ela se comporta. Continuando meu exemplo, em que observamos uma resposta SE, digamos que queremos alterar as margens em torno da resposta. O arquivo all.css tem uma propriedade de margem definida como 0px, mas claramente há uma margem em torno desses elementos. Alguns pesquisadores me ensinam a procurar propriedades de preenchimento, pois elas também podem afetar as margens de um item. Com certeza, existem duas propriedades relacionadas ao preenchimento definidas em uma resposta: parte inferior do preenchimento e parte superior do preenchimento. (para o seu problema específico, você está procurando uma imagem de plano de fundo, procure por 'background' nas propriedades CSS. Você verá uma propriedade 'background' na parte superior. Ela se aplica aos elementos do corpo dessa página. Como pesquisar no Google " css background property " para aprender como essa propriedade funciona, mostra que ela pode conter uma cor ou um URL para uma imagem, junto com vários modificadores. Depois de navegar um pouco para descobrir como a propriedade background-image funciona, vemos alguns informações úteis, o valor padrão de 'none' . Queremos reverter a imagem de plano de fundo para seu valor padrão, portanto, precisaremos dessas informações.)
Agora usamos o Stylish. A alternativa sem o Stylish seria editar os arquivos que você postou na sua resposta. O Stylish nos permite gerenciar facilmente o CSS de muitos sites de sites. Stylish adiciona um pequeno ícone à janela do Firefox, clique nele e vá em "Escreva um novo estilo" -> "For" (este site) .com ". Dê um nome ao estilo e, opcionalmente, algumas tags. Você poderá para distinguir esse estilo como o que se aplica a Superuser.com ou Stackexchange.com etc. Essa janela fornece um modelo que permite alterar o CSS apenas para este domínio.Se você precisar alterar o CSS para um URL específico, pode fazer isso ou você também pode obter um estilo em branco se quiser escrever CSS que se aplique a todos os sites, basta selecionar a entrada apropriada no menu Elegante. Para o meu exemplo de modificação de resposta, você '
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("superuser.com") {
}
Qualquer coisa colocada no bloco @ -moz-document será aplicada apenas ao domínio entre parênteses. Veja os itens em negrito acima. Para alterar o preenchimento das respostas, atualize a caixa de texto para ficar assim:
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("superuser.com") {
.answer {
padding-bottom:0px;
padding-top:0px;
}
}
Decompô-lo para as pessoas que não sabem CSS, estamos selecionando primeiro da classe (ergo um "" vai no início. Se estivéssemos a seleção por ID, que ia colocar um '#' lá.) Resposta (então responde'). Em seguida, abrimos um bloco com uma chave para listar as propriedades do item selecionado que iremos alterar. Primeiro, alteramos o preenchimento inferior e o definimos como 0 pixels . Em seguida, fazemos o mesmo para o padding-top . Cada propriedade e valor termina com um ponto-e-vírgula. Então fechamos o bloco com uma cinta encaracolada. (no seu exemplo unix, você faria o seguinte:
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("unix.stackexchange.com") {
body {
background:none;
}
}
Aqui você está trabalhando no domínio unix.stackexchange.com. Estamos selecionando o elemento "body" (ao selecionar o elemento HTML também é um seletor de CSS, não é necessário #s ou .s aqui). Estamos definindo o plano de fundo como nenhum.)
- Chamo sua atenção para os botões na parte inferior da janela de edição de estilos à moda. "Visualizar" aprovará as alterações digitadas, para que você possa vê-las em ação. "Salvar" salvará as alterações. "Cancelar" é bastante óbvio. Para praticamente qualquer alteração de CSS do usuário que você está fazendo, clique em Visualizar para ver se a alteração funcionou da maneira que você queria. Nos dois exemplos, você verá que não funcionou. Há uma razão importante para isso, que abordo agora.
O CSS possui uma hierarquia específica de prioridades para determinar como lidar com CSS do usuário x CSS do autor x CSS do navegador. Normalmente, temos CSS para uma página escrita pelo autor da página e que conterá regras para muitos dos elementos nessa página. Quando uma regra não é definida pelo autor, mas está no CSS do usuário, o navegador o utiliza. Se nenhum deles tiver CSS definido para esse elemento, o navegador utilizará suas próprias regras CSS padrão nesse elemento. Portanto, há uma hierarquia de peso aqui, autor> usuário> navegador. Se algo estiver definido nos três, o CSS de maior peso vencerá e o CSS entrará em vigor. Existe uma maneira de obter CSS de menor peso para substituir o CSS de maior peso, designando-os importantes. Você faz isso incluindo "! Important"
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("unix.stackexchange.com") {
body {
background:none !important;
}
}
Agora clique em Visualizar novamente e você verá que o CSS do usuário funciona. Clique em Salvar e aproveitar.
Se você estiver usando o Chrome, o inspetor interno já é muito bom. Há também uma extensão Stylish . Você insere as modificações de CSS de maneira um pouco diferente: selecione "Gerenciar estilos instalados" e clique em "Escrever novo estilo", insira os sites ou padrões de URL para aplicar a postagem abaixo da caixa de código e insira apenas o CSS específico do domínio no campo " código ", por exemplo
body {
background:none !important;
}
Você faz o que faria se estivesse colocando no site
então adicione
antes do
}. Aqui está um pequeno detalhe sobre o uso de usuários que não são usuários do CSS, que ainda o explica para seu uso.fonte