76 lines
1.9 KiB
Plaintext
76 lines
1.9 KiB
Plaintext
La feuille CSS cible des éléments dans la page
|
|
Certains n'existent pas... les créer pour que les inscrtructions CSS les affectent. On se concentre ici sur l'HTML qu'on peut modifier.
|
|
|
|
<button type="button" class="collapsible">Open Collapsible</button>
|
|
<div class="coll_content">
|
|
En CSS on peut cibler un élément...
|
|
Exemple :
|
|
NB: on done autant de class qu'on veut mais un seul id, unique dans toute la page !!!
|
|
<codescape class="html block">
|
|
<a href="/lien/" id="seul_lien" class="lien_normal inline">
|
|
text du lien
|
|
</a>
|
|
</codescape>
|
|
|
|
- par son nom
|
|
<codescape class="css block">
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
</codescape>
|
|
|
|
- par sa.ses classe(s)
|
|
<codescape class="css block">
|
|
.lien_normal,
|
|
.lien_normal.inline {
|
|
text-decoration: none;
|
|
}
|
|
.inline {
|
|
display: inline;
|
|
}
|
|
</codescape>
|
|
|
|
NB: On peut cumuler les instructions (avec une virgule)
|
|
NB: On peut cibler un élément en donnant autant de précision sur ses attributs, sa classe, son id, autres propriétés
|
|
|
|
- ici par son id
|
|
.... puis par tous ses attributs
|
|
#seul_lien,
|
|
a#seul_lien.lien_normal.inline {
|
|
background: red;
|
|
}
|
|
|
|
- par n'importe quel autre attributs (ici href)
|
|
<codescape class="css block">
|
|
a[href] {
|
|
text-decoration: none;
|
|
}
|
|
</codescape>
|
|
|
|
. . .
|
|
|
|
NB: en HTML on cumule les classes (ici inline + lien_normal) en ajoutant un espace entre
|
|
<codescape class="html block">
|
|
<p>
|
|
<a class="lien_normal inline">
|
|
text du lien
|
|
</a>
|
|
</p>
|
|
</codescape>
|
|
....
|
|
en CSS un espace signifie autre chose :
|
|
<codescape class="css block">
|
|
p a,
|
|
html body {
|
|
text-decoration: none;
|
|
margin: 0;
|
|
}
|
|
</codescape>
|
|
Ici on cible tout élement <code>a</code> qui serait présent dans <code>p</code>
|
|
... on cible aussi <code>body</code> présent dans <code>html</code>
|
|
... en CSS, c'est la virgule qui sert de séparateur
|
|
|
|
Ensuite il faut bien penser à mettre des acolades "{" "}"
|
|
Tout ce qui se trouver entre elles est appliqué aux éléments ciblés...
|
|
</div>
|