400
Subscribers
No data24 hours
No data7 days
No data30 days
Posts Archive
400
Formatage du texte (fin).
La propriété font
à la place d'utiliser, font-weight, font-family, font-size, vous pouvez tous simplement utilisé la propriété font qui attend ces 3 valeurs là .
Ex:
p{
font: 22px Arial bold;
}
Tout simplement.
Ăa Ă©pargne d'Ă©crire :
p{
 font-size: 22px;
 font-weight: bold;
 font-family: Arial;
}
De plus , peut importe l'ordre que vous donnez, le navigateur saura qui est qui.
400
Formation du texte
Ajouter une police d'Ă©criture
Pour ce faire, on utilisera la propriété font-family.
Les valeurs qu'elle peut prendre sont :
serif, mono, TimesNewRoman, monospace, sans-serif, Arial ; Arial Black ; Comic Sans MS ; Courier New ; georgia ; impact ; trebuchet MS ; verdana etc ...
Ex:
p{
font-family: Arial;
}
Utilisé une police personnalisé
Les polices personnalisĂ© sont un bon moyen de changer du style et ĂȘtre sĂ»re qu'il sera de mĂȘme partout.
Pour ce faire,
On utilisera la propriété @font-face
La police incluse sera télécharge par le navigateur et appliquer à votre page web.
Il existe divers formats de police :
.ttf : TrueType Font.
.eot : Embedded OpenType. Fonctionne sur Internet Explorer uniquement, toutes versions. Ce format est propriétaire,
produit par Microsoft.
.otf : OpenType Font.
.woff : Web Open Font Format.
Pour inclure donc une police d'Ă©criture, on fera :
@font-face {
font-family: 'NomQueVousVoulez';
src: url('NomDeLaPolice.extension');
}
S'il existe plusieurs format pour cette mĂȘme police, il faudrait simplement rajouter d'autres propriĂ©tĂ©s src.
@font-face {
font-family: 'NomQueVousVoulez';
src: url('NomDeLaPolice.eot') format('eot'),
url('NomDeLaPolice.woff') format('woff'),
url('NomDeLaPolice.ttf') format('truetype')
}
Si vous avez la police avec vous, vous pouvez simplement indiqué dans la propriété src, son chemin d'accÚs.
Mais il est également possible de la récupérer depuis le web en entrant à l'adresse web qui héberge la police.
400
Formatage du texte
Le surlignage
Pour surligner du texte on fera :
p{
 text-decoration: underline ;
}
Pour avoir du texte barré, on utilisera
p{
 text-decoration: line-through;
}
Pour du texte surligner en dessus du texte, on fera :
p{
 text-decoration: overline;
}
400
Formatage du texte
La propriété font-style
Permet de définir la façon donc le texte sera visible.
Elle accepte les valeurs :
italic : pour le texte en italique
normal : pour l'apparence normale
Ex:
p{
 font-style: italic ;
}
400
Formatage du texte
La propriété font-weight
Permet d'ajouter ou d'enlever l'Ă©paisseur d'un texte.
Ses valeurs peuvent ĂȘtre :
bold : gras
normal : normal
lighter : légÚre que la normale ou plus fine
Ou des valeurs allant de 100 Ă 900.
Toujours pour un paragraphe, on pourrait faire :
p{
 font-weight: bold; /*gras*/
 font-weight: 900; /*gras*/
 font-weight: 500; /*normal*/
 font-weight: normal; /*normal*/
 font-weight: 200; /*légÚre ou fine*/
}
Vous l'aurez compris
400
đđđ€ đđđđđđŁđđđ„đ€ đ€đ„đȘđđ đđ âđđ
Formation du texte
La propriété font-size
Permet d'ajouter ou de réduire la taille d'écriture (taille de police) d'un caractÚre.
Sa valeur accepte des nombres et divers unité.
Parmi ces unités, on compte :
Le pixel : px
Le point : pt
La largeur d'Ă©cran : vw
La hauteur d'Ă©cran : vh
Et Ă©galement le em, rem, pc, % etc...
Pour donner un police de 30 pixels Ă notre paragraphe, on fera:
p{
 font-size: 30px;
}
Ăventuellement les autres valeurs peuvent ĂȘtre spĂ©cifiĂ©es !
400
- La sélection par pseudo class ou pseudo élément (suite et fin)
La pseudo ::before
Permet d'appliquer du style à un élément cloné. En effet, utilisé cette pseudo permet de dupliquer l'élément donc on applique du style.
Ex:
...
Pour cloner cette div, on pourra le faire comme ceci et lui appliquer du style :
div::before{
content: ''; /*Obligatoire sinon l'élément ne sera pas créé*/
...
}
La pseudo ::after ne pas confondre avec :after
Fait la mĂȘme chose que ::before, la diffĂ©rence est que ::after est prioritaire devant ::before.
Si j'oublie ou ne me rappelle plus des autres pseudo propriété, veuillez faire vos recherches également.
On ne peut pas tous les voir !400
- La sélection par pseudo class ou pseudo élément (suite)
La pseudo ::placeholder
Permet d'appliquer du style Ă des balises de saisie contenant l'attribut placeholder
Ex:
Pour changer la police, la couleur par exemple du placeholder par défaut, on fera :
input::placeholder, textarea::placeholder{
...
}
On vient de voir comment appliquer un mĂȘme style Ă plusieurs balises đđ
Donc je ne reviendrai pas dessus đ
Pour le reste des explications, on se basera sur cet exemple :
Cliquez ici
La pseudo :hover
Permet d'appliquer du style lorsque la souris se trouve sur cet élément.
Ex:
a:hover{
...
}
La pseudo :focus
Permet d'appliquer du style lorsqu'on clique sur l'élément
Ex:
a:focus{
...
}
La pseudo :after
Permet d'appliquer du style aprÚs avoir cliqué sur un élément. Elle est similaire à la pseudo :visited (qui marche uniquement sur les liens) donc on ne verra pas.
Ex:
a:after{
...
}
400
Bonsoir Ă tous, on se retrouve aujourd'hui pour continuer avec un nouveau tuto en CSS.
Votre environnement de travail Ă©tant dĂ©jĂ prĂȘt, vous serez invitĂ© Ă tester des codes et Ă faire de petits exercices.
Let's go...
Installez-vous bien đ
400
La suite demain 20h00.
Si j'ai du retard veuillez m'excuser mais il y aura tout de mĂȘme bel et bien cours.
A demain avec un grand sourire Ă tous đ
400
- La sélection par des pseudo class ou pseudo élément.
Pour tous le reste des explications, on fonctionneront avec cet exemple :
- ...
- ...
- ...
- ...
- ...
- ...
400
- La sélection par frÚre universel
Il s'agit de récupérer tous les frÚres peu importe direct ou pas en fonction d'un frÚre précédent !
Pour mieux comprendre, suivons cet exemple :
...
...
...
...
On souhaite par exemple appliquer du style à tous les h1 qui sont frÚre direct ou pas de div. Pour ce faire, c'est comme précédemment : - on sélectionne le frÚre de référence - on sélectionne le ou les frÚres cibles - on sépare les deux frÚres par le signe ~ Ex: div ~ h1 { propriété : valeur ; } Ceci se lit, sélectionne tous les titres de niveau 1, qui sont frÚres en général de div.400
- La sélection par frÚre adjacent
Autrement dit, sélectionne un élément frÚre direct d'un autre élément.
En gros supposons cet exemple :
...
...
...
Comme p est le parent des balises qu'il contient, alors les balises contenu dans p sont appelés des frÚres !
Appliquer du style à h2, en fonction de son précédent frÚre reviens à faire :
- sélectionner le frÚre de référence
- sélectionner le frÚre cible
- séparer les deux frÚres par le signe +
Ex:
On souhaite appliquer du style Ă h2 qui est le frĂšre direct de h1.
On fera :
h1+ h2 {
propriété : valeur ;
}
L'Ă©criture
h1 + div{
propriété : valeur ;
}
Ne marchera pas, car div n'est pas le frĂšre direct de h1.
Pour lui appliquer du style, on devra faire plutĂŽt :
h2 + div{
propriété : valeur ;
}
Car c'est h2 son frÚre précédent direct !400
- La sélection des enfants qui suivent directement leurs parents
On peut avoir une balise qui contient plusieurs autres balises.
On dit que cette balise est le parent des balises qu'elle contient.
Supposons cet exemple :
... qui suivent directement le parent ul (qui viennent directement aprĂšs ul),
On fera ceci :
- sélectionner le parent
- récupérer l'enfant ou les enfants
- séparé le parent des enfants proche par le signe >
Ex:
ul > li{
propriété : valeur ;
}
Cet écriture se lit, sélectionne tous les enfants li, qui sont immédiatement aprÚs le parent ul.
Ce qui voudrait dire que seul le 1er et 2e li seront sélectionnés !
L'Ă©criture :
ul > p{
propriété : valeur ;
}
Ne marchera pas, car p ne se trouve pas directement aprĂšs la balise ul !
- ...
- ...
- ...
...
400
- La sélection d'une balise en fonction de son attribut et de la valeur de cet attribut
C'est comme le cas prĂ©cĂ©dent, a la diffĂ©rence que plusieurs de nos paragraphes peuvent avoir les mĂȘmes attributs mais pour ces attributs des valeurs diffĂ©rentes !
Ex:
Paragraphe 1
Paragraphe 2
Paragraphe 3
Essayons d'appliquer du style Ă notre dernier paragraphe, On fera : - sĂ©lectionner la balise en question - repĂ©rer l'attribut ainsi que sa valeur - Et c'est encore tout ! p[alt=p3]{ propriĂ©tĂ© : valeur ; } Facile n'est-ce pas ?đ400
- La sélection d'une balise en fonction de son attribut
Ici, le principe est simple !
On peut avoir plusieurs balises de mĂȘme nature (ex: des
...
), qui se différencient unique par les attributs qu'ils possÚdent ou non. Ex:Paragraphe 1
Paragraphe 2
Paragraphe 3
Si on souhaite appliquer du style uniquement au deuxiĂšme paragraphe Ă partir de ce code HTML, on fera comme suit : 1. Recherche la diffĂ©rence avec les autres paragraphes en terme d'attribut 2. RepĂ©rer la diffĂ©rence et l'utiliser. On remarque que notre 2e paragraphe se diffĂ©rencie des autres au travers de son attribut alt. Utilisons lĂ ! Pour se faire, on devra : - RĂ©cupĂ©rer la balise en question - Ouvrir des crochets et placĂ© l'attribut de diffĂ©rence [alt] - Et c'est tout đ Ex: p[alt]{ PropriĂ©tĂ© : valeur ; ... }400
- La sélection parent enfant(s).
Si on reprend le cas prĂ©cĂ©dent oĂč on a :
<p class="paragraphe">
 <h1 id="titre"><span class="text">Un titre</span> de paragraphe</h1>
    Un paragraphe
</p>,
Appliquer le style Ă notre balise span se fera comme suit :
1. Je sélectionne son parent qui est #titre, suivi de l'enfant qui est .text, Les deux sont séparés par de l'espace blanc.
Ex :
#titre .text{
 color: green;
}
C'est aussi simple que ça, que de modifier son code et changer la class en id de notre span.
400
- La sélection à l'aide des attributs class et id
Nous avons vu que ces attributs étaient créés dans ce but, celui d'appliquer du style CSS.
Pour une class, on devra mettre la valeur de cette class précédé par un point (.), tandis que pour un id, on devra mettre la valeur de cet id précédé par un hashtag (#).
Ex:
<p class="paragraphe">
<h1 id="titre">Un titre de paragraphe</h1>
Un paragraphe
</p>
Appliquer du style CSS au paragraphe reviens Ă Ă©crire :
.paragraphe {
Propriété(s) : valeur(s);
...
}
Ăcrire la mĂȘme chose pour notre titre reviens Ă Ă©crire :
#titre {
Propriété (s) : valeurs(s);
...
}
NB : Supposons que dans notre titre on aimerait que notre mot Un titre, sois de couleur verte.
Pour ce faire on serait tenté de rajouter une balise de contenance <span>...</span> car elle n'a aucun effet et son rÎle c'est de permettre d'appliquer du style Cf. https://t.me/c/1817367665/153
Rajoutons a notre <span>...</span>, l'attribut class avec pour valeur texte !
On aura donc :
<p class="paragraphe">
<h1 id="titre"><span class="text">Un titre</span> de paragraphe</h1>
Un paragraphe
</p>
Pourquoi faire ce exemple ?
Le but c'est de vous rappeler la différence entre class et id !
Souvenez vous, on a dit que id est prioritaire Ă une class.
Donc étant donné que notre titre est un id, et elle contient un enfant qui a une class, appliquer un style différent directement à cet enfant si le parent à déjà ce style ne marchera pas.
On a notre titre avec la couleur rouge !
#titre {
color : red;
Propriété (s) : valeurs(s);
...
}
Si on revient modifier la couleur de notre span comme ceci :
.text{
color: green;
}
Ăa ne marchera pas !
Pourquoi ?
Parce que id est prioritaire !
Ăa veut dire que si on a un cas comme celui-ci, on ne pourra pas lui appliquer du style ?
En faite, on pourra le faire mais différemment, sois en donnant à notre span un id, sois en utilisant plutÎt cet autre type de sélecteur :
