Je ne peux parler qu'avec familiarité avec Firefox, car c'est mon navigateur principal. Je vais essayer de garder les choses générales ici pour répondre à votre demande "apprends-moi à pêcher". À cette fin, je vais inclure 2 exemples, le vôtre et un autre qui contient plus de leçons du monde réel. Tout d'abord, nous disposerons de quelques outils pour faciliter la création de CSS utilisateur.
- Passez à la dernière version de Firefox. Certaines des versions récentes ont eu des extensions des outils d'inspecteur de site Web, vous en aurez donc besoin.
- Facultatif: installez l' extension Firebug qui vous offre des outils d'inspection de site beaucoup plus puissants. (personnellement, je n'utilise pas Firebug pour créer des CSS utilisateur, mais j'inclus une mention ici par souci d'exhaustivité)
- Installez l' extension Stylish . Il s'agit d'une extension centrée sur l'utilisateur CSS qui simplifie considérablement la création de CSS utilisateur.
Maintenant, pour écrire quelque chose. Vous devez avoir une connaissance de base du HTML et du CSS avant de continuer. W3Schools propose des didacticiels décents pour vous familiariser avec la structure et la syntaxe de base de HTML et CSS . Pour le bien de cette réponse, je vais inclure suffisamment d'informations pour, espérons-le, aider un débutant assez longtemps pour que l'exemple soit accompli.
- Accédez à la page. (dans votre cas, /unix// )
- Faites un clic droit sur l'élément que vous souhaitez manipuler. (à peu près n'importe où sur la page pour ce cas, car l'arrière-plan affecte toute la page)
- Sélectionnez «Inspecter l'élément» dans le menu contextuel. Cela utilise les outils d'inspection intégrés de Firefox, je n'aborderai pas Firebug ici, mais il a des volets et des fonctionnalités similaires.
- Cela ouvre des panneaux en bas et sur le côté de la fenêtre Firefox. En bas, vous voyez HTML. Sur la droite, vous voyez des règles CSS pour l'élément de page sélectionné (qui sera la chose sur laquelle vous avez cliqué avec le bouton droit). En bas, cliquez sur différents éléments pour naviguer. La page est organisée en une arborescence d'éléments et vous pouvez réduire ou développer chaque nœud de l'arborescence. Lorsque vous cliquez sur des éléments, l'élément sélectionné sera mis en surbrillance sur la page elle-même.
- En général, à ce stade, vous voudrez inspecter l'élément que vous cherchez à manipuler, ainsi que ses éléments parents (les éléments qui contiennent cet élément dans l'arborescence). Identifiez l'élément que vous devrez réellement manipuler. Par exemple, si vous jouez avec les réponses sur cette page, vous finirez par commencer par l'élément <p> qui contient le texte d'une réponse, mais vous voulez inclure toutes les choses autour du texte, comme le haut / flèches de vote vers le bas, les informations de l'affiche, les liens de partage / modification / indicateur, etc. Ainsi, vous remontez quelques niveaux jusqu'à la balise <div> qui a un id de "réponse - ####" et une classe "répondre", car c'est l'élément qui contient tous les éléments de fenêtre d'une réponse. Cliquez dessus et vous verrez qu'une partie de la page Web sera mise en évidence. (Dans ce cas, l'arrière-plan de la page sera près du haut, dans la balise <body> . Faites défiler vers le haut du code HTML et cliquez sur la balise <body>.)
- Ensuite, vous devez identifier les propriétés CSS de cet élément que vous voudrez manipuler. Regardez le CSS à droite et trouvez les propriétés que vous souhaitez modifier. Personnellement, je suis assez nouveau pour CSS, donc à ce stade, je vais souvent google 'css' + un nom de propriété pour en savoir plus sur la propriété et comment elle se comporte. Poursuivant mon exemple où nous examinons une réponse SE, disons que nous voulons modifier les marges autour de la réponse. Le fichier all.css a une propriété margin définie sur 0px, mais il y a clairement une marge autour de ces éléments. Certaines recherches sur Google m'apprennent à rechercher des propriétés de rembourrage, car celles-ci peuvent également affecter les marges autour d'un élément. Effectivement, il y a deux propriétés liées au rembourrage qui sont définies sur une réponse, padding-bottom et padding-top. (pour votre problème spécifique, vous recherchez une image d'arrière-plan, recherchez donc "arrière-plan" dans les propriétés CSS. Vous verrez une propriété "arrière-plan" vers le haut. Elle s'applique aux éléments de corps de cette page. Google " css background property " pour savoir comment cette propriété fonctionne, vous montre qu'elle peut contenir une couleur ou une URL vers une image, ainsi que divers modificateurs. Après avoir parcouru un peu pour découvrir comment fonctionne la propriété background-image , nous en voyons informations utiles, la valeur par défaut «aucune» . Nous voulons rétablir l'image d'arrière-plan à sa valeur par défaut, nous aurons donc besoin de ces informations.)
Nous utilisons maintenant Stylish. L'alternative sans style serait de modifier les fichiers que vous avez publiés dans votre réponse. Élégant nous permet de gérer facilement le CSS utilisateur de nombreux sites. Stylish ajoute une petite icône à votre fenêtre Firefox, cliquez dessus puis allez "Ecrire un nouveau style" -> "Pour" (ce site) .com ". Donnez un nom au style et éventuellement des tags. Vous pourrez alors pour distinguer ce style comme étant celui qui s'applique à Superuser.com ou Stackexchange.com etc. Cette fenêtre nous donne un modèle qui nous permet de modifier le CSS uniquement pour ce domaine. Si vous devez modifier le CSS pour une URL spécifique, vous pouvez le faire ou vous pouvez également obtenir un style vierge si vous souhaitez écrire du CSS qui s'applique à tous les sites, sélectionnez simplement l'entrée appropriée dans le menu élégant. Pour mon exemple de modification de réponse, vous '
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("superuser.com") {
}
Tout ce qui est placé dans le bloc @ -moz-document ne s'appliquera qu'au domaine dans la parenthèse. Voir les éléments en gras ci-dessus. Pour modifier le remplissage des réponses, vous mettez à jour la zone de texte comme suit:
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("superuser.com") {
.answer {
padding-bottom:0px;
padding-top:0px;
}
}
Pour briser ce bas pour les personnes qui ne connaissent pas CSS, nous sélectionnant d' abord la classe (ergo un « » va au début. Si nous sélectionnons par ID, nous avait mis un « # » là - bas.) Réponse (donc «réponse»). Ensuite, nous ouvrons un bloc avec une accolade pour lister les propriétés de l'élément sélectionné que nous allons modifier. Tout d'abord, nous modifions padding-bottom et le définissons sur 0 pixels . Ensuite, nous faisons de même pour le rembourrage . Chaque propriété et valeur se termine par un point-virgule. Ensuite, nous fermons le bloc avec une accolade bouclée. (dans votre exemple Unix, vous feriez ceci:
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("unix.stackexchange.com") {
body {
background:none;
}
}
Ici, vous travaillez sur le domaine unix.stackexchange.com. Nous sélectionnons l'élément "body" (lorsque la sélection de l'élément HTML est également un sélecteur CSS, pas besoin de #s ou .s ici). Nous ne définissons l'arrière-plan à aucun.)
- J'attire votre attention sur les boutons en bas de la fenêtre d'édition de style élégant. "Aperçu" appliquera les modifications que vous avez saisies, afin que vous puissiez les voir en action. "Enregistrer" enregistrera les modifications. "Annuler" est assez évident. Pour à peu près tout changement de CSS utilisateur que vous faites, vous voudrez cliquer sur Aperçu pour voir si le changement a fonctionné comme vous le vouliez. Dans les deux exemples, vous verrez que cela n'a pas fonctionné. Il y a une raison importante à cela, que j'aborde maintenant.
Le CSS a une hiérarchie spécifique de priorités pour déterminer comment traiter le CSS utilisateur contre le CSS auteur contre le CSS navigateur. Normalement, nous avons du CSS pour une page écrite par l'auteur de la page, et qui contiendra des règles pour de nombreux éléments de cette page. Lorsqu'une règle n'est pas définie par l'auteur, mais se trouve dans votre CSS utilisateur, votre navigateur l'utilisera. Si aucun d'eux n'a de CSS défini pour cet élément, le navigateur utilise ses propres règles CSS par défaut sur cet élément. Il y a donc une hiérarchie de poids ici, auteur> utilisateur> navigateur. Si quelque chose est défini dans les trois, le CSS de poids supérieur l'emportera et son CSS prendra effet. Il existe un moyen d'obtenir un CSS de faible poids pour remplacer le CSS de poids plus élevé, et c'est en les désignant comme importants. Pour ce faire, incluez "! Important"
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("unix.stackexchange.com") {
body {
background:none !important;
}
}
Maintenant, cliquez à nouveau sur Aperçu et vous verrez que votre CSS utilisateur fonctionne. Cliquez sur Enregistrer et profitez.
Si vous utilisez Chrome, son inspecteur intégré est déjà très bon. Il existe également une extension élégante . Vous entrez les modifications CSS un peu différemment: sélectionnez «Gérer les styles installés» puis cliquez sur «Écrire un nouveau style», entrez les sites ou les modèles d'URL auxquels appliquer la publication en dessous de la zone de code, et entrez uniquement le CSS spécifique au domaine dans le « code ”, par exemple
body {
background:none !important;
}
Vous faites ce que vous feriez si vous mettiez sur le site
puis ajouter
avant le
}. Voici un petit détail sur l'utilisation non-user-css qui l'explique toujours pour votre usage.la source