Il semble que ce que vous dites est que le CSS de la page remplace le style par défaut du contenu que vous injectez. Cela est probablement dû à l'une des deux choses suivantes: ne pas spécifier chaque attribut de style (et en utilisant des valeurs relatives) pour votre contenu ou votre spécificité n'est pas assez élevé.
Indiquez tous les attributs de style
Disons que votre contenu ressemble à ceci:
<div id="#cool-bookmarklet">Here is some content</div>
Et votre CSS ressemble à ceci:
#cool-bookmarklet {
color: #000000;
font-size: 80%;
}
Deux problèmes avec ce qui précède. Seuls deux attributs de style sont déclarés, donc tous les autres attributs seront hérités d'autres styles. Et si la page avait CSS comme ça?
div {
width: 70%;
background-color: #000000;
}
Vous aurez des problèmes car ce CSS s'applique à votre contenu (le div). Votre div 'cool-bookmarklet' aura 70% de la largeur de son parent et aura une couleur de fond noire. Pas bon.
De plus, la taille de la police est une valeur relative, ce qui signifie qu'elle sera de 80% de la valeur héritée. Donc, si la taille de police spécifiée par la page est 10px, votre police sera 8px. Ici, il est probablement préférable d'utiliser le dimensionnement explicite pour éviter les problèmes de styles hérités.
Voici comment votre CSS devrait chercher à éviter les styles hérités:
#cool-bookmarklet {
color: #000000;
font-size: 12px;
width: 400px;
background-color: #ffffff;
margin: 0;
padding: 0;
font-weight: normal;
/* etc, etc */
}
Spécificité
Il y a une partie de CSS que beaucoup de gens n'apprennent pas (et moi ont pris un certain temps pour comprendre) et c'est ce qu'on appelle la spécificité. La spécificité est utilisée par les navigateurs pour déterminer les styles CSS à appliquer aux éléments lorsque deux sélecteurs entrent en conflit.
De la spécification CSS:
La spécificité d'un sélecteur est calculé comme suit (du spec):
- comte 1 si la déclaration est de est un « style » attribut plutôt qu'un Règle avec un sélecteur, 0 sinon (= a) (En HTML, les valeurs de l'attribut "style" d'un élément sont des règles de feuille de style Ces règles n'ont pas de sélecteur, donc a = 1, b = 0, c = 0 et d = 0.)
- Compter le nombre d'attributs ID dans le sélecteur (= b)
- compter le nombre d'autres attributs et pseudo-classes dans le sélecteur (= c)
- compter le nombre de noms d'éléments et des pseudo-éléments dans le sélecteur (= d)
concaténation des quatre nombres abcd (dans un système numérique avec une grande base) donne la spécificité.
Donc a = styles dans un attribut de style d'un élément html. b = sélecteurs id, c = noms de classe et attributs, d = noms de tags. Le sélecteur avec la plus haute spécificité 'gagne' si deux sélecteurs ciblent le même élément.
C'est un peu déroutant, mais on s'y arrête après quelques essais.
Disons que vous avez ces deux règles dans votre CSS:
#cool-bookmarklet { color: red; }
div { color: blue; }
Et le contenu:
<div id="cool-bookmarklet">Here is some content</div>
Le sélecteur '# refroidissement bookmarklet' aurait une spécificité de 100 (a = 0, b = 1, c = 0, d = 0). Le sélecteur 'div' a une spécificité de 1 (a = 0, b = 0, c = 0, d = 1). '# cool-bookmarklet' gagnerait et le div aura un texte rouge. Ceci est pertinent parce que si votre bookmarklet injecte une feuille de style pour styliser votre contenu, d'autres CSS sur la page peuvent le remplacer si la spécificité est plus élevée. Il est souvent plus facile de donner à votre contenu un identifiant (qui a une haute spécificité 'b'). Cela vous permet de cibler votre contenu et de ne pas vous soucier des autres styles.
Espérons que ça aide!
Merci pour la réponse si rapide:) J'utilise le fichier CSS pas en ligne css codes, dois-je ajouter! Important pour toutes les lignes de codes CSS? – Alper
@Alper vous devrez faire en sorte que les codes CSS en ligne soient sécurisés. Ça craint beaucoup, mais c'est le seul moyen sûr à 100%. Sinon, si vos règles CSS ciblent tous un élément avec un 'id' (par exemple' #mainwidget a li {...} 'ceci devrait être assez spécifique (et remplacer les autres CSS) dans la plupart des cas.Les règles derrière ceci sont appelées spécificité CSS, voir par ex. [cette question] (http://stackoverflow.com/questions/2809024/points-in-css-specificity) pour les pointeurs. –
Wow, son point très intressant .. Je ne savais pas ceci: S J'utilise le fichier css comme décrit précédemment, mais tous les éléments qui ont un problème à corrompre ont leurs propres identifiants. Donc, ajouter "! Important" à tous les styles d'id résoudra mon problème, n'est-ce pas? – Alper