-
8-Classiques CSS
-
Par Maximum 34 le 5 Avril 2015 à 19:30
Bon! Chuis pas là pour vous faire un cours de HTML/CSS, j'en serais bien incapable mais
Vu que le sujet de l'article est "trouver un sélecteur", pour ceux qui ne savent pas ce qu'est un sélecteur,
une rapide explication s'impose ( les autres, vous zappez !)Une page web est au format HTML = HyperText Markup Language.
Le HTML est donc un langage qui permet d'écrire des pages internet à l'aide de balises - en anglais: Markup-comme par exemple <p>qui indique qu'un paragraphe débute.Le fichier HTML = le contenu de la page web. Il détient la structure et le message à afficher mais en quelque sorte à l'état brut.
Ainsi, concernant la forme, les couleurs, les dimensions, le style quoi ! c'est le CSS qui s'en charge.
CSS = Cascading Style Sheets = feuille de style en cascade.
Le HTML,on l'a vu, assure le balisage du contenu avec des balises du genre <p> <div id="boubou"> ou <div class="coucou> ouverture balises et </p></div> fermeture balise afin de regrouper des éléments de la pageLe CSS, lui, il parle comme ça:
sélecteur {
propriété1: valeur1;
propriété2: valeur2;
propriétén: valeurn; }
Mè-z alor ! ... Comment sont les relations ?
Au beau fixe, ne vous inquiétez pas ...
Bon, on a dit rapide ;-) on s'y tient et on reprend notre petit exemple de paragraphe:Quand le html, il dit ça: <p>bla bla bla blablabla</p>
si on veut que le blabla s' affiche en arial rouge et de 14pixels
le CSS, lui, il dit çap{
font-family: arial;
font-size: 14px;
color: red;}Et le navigateur, qui comprend tout et bin, il affiche le bla bla bla blablabla en police Arial, avec la taille de 14px et en rouge, se vous plait.
Bon, on va traverser sans se mouiller la cascade et arriver direct sur:
Quand le html, il dit ça
<div id="boubou">
Pour mettre une bordure blanche de 4px d'épaisseur autour de boubou (id), le CSS dit
#boubou{
border: solid 4px white}et si on veut tous les coucou(class) en italique,
le CSS est
.coucou {
font-style: italic;}En clair,
Si html <div id=“nomid“>contenu</div>
alors CSS
#nomid{
propriété1: valeur1;
propriété2: valeur2;}
Si html <div class=“nomclass“>contenu</div>
alors CSS
.nomclass{
propriété1: valeur1;
propriété2: valeur2;}Bon ! c'est un peu plus complexe que cela mais j'ai dit "on fait court !"
Pour ceux qui veulent appronfondir: http://www.yoyodesign.org/doc/w3c/css2/selector.htmlEt revenons à nos moutons:
Pour inspecter ou examiner un élément de la page, on fait "clic droit" sur une partie de la page.
EXEMPLE:
Je clique droit sur le titre du blog dans mon en tête.
Dans la fenêtre de dialogue avec le navigateur qui vient de s'ouvrir en surimpression sur la page du blog,
Je choisis "examiner l'élément" avec firefox ou "inspecteur l'élément " avec chrome .
En bas de l'écran, s'ouvre l'outil du navigateur qui fait apparaitre dans la grande colonne de gauche, le html de la page à l'écran et dans la petite colonne de droite le CSS.Capture d'écran avec Chrome: clic sur image pour agrandir
Donc comme j'ai cliqué/droit sur "le bleu lézard tests", c'est cette ligne de code html qui est surlignée.
Dans le cas présent, il s'agit d'un lien ( puisque cliquable vers la page d'accueil) et donc le texte est entre des balises html lien c'est à dire <a>le bleu lézard tests</a>
Cette ligne de code se trouve entourée d'une balise div ayant un attribut id qui porte le nom titre_header:
<div id="titre_header"><a href="/" rel="home">Le bleu lézard tests personnaliser son blog </a></div>Ainsi, le sélecteur pour appliquer un style à ce lien est;
#titre_header a(on peut vérifier la présence dans la colonne CSS de droite de ce sélecteur et du style actuel attribué).
Autre exemple avec un module du menu1: clic sur image pour agrandir
je clique/droit sur "les menus".
la ligne de code html surlignée m'indique que l'élément "les menus" est un attribut id qui porte le nom module_menu142132528
Ainsi son sélecteur est
#module_menu142132528Voili, Voilou
Papasti a fait un superbe travail, la page sélecteur EklaBlog
votre commentaire