400
Subscribers
No data24 hours
No data7 days
No data30 days
Posts Archive
400
𝕃𝕖𝕤 𝕤𝕖𝕝𝕖𝕔𝕥𝕖𝕦𝕣𝕤 𝕖𝕟 ℂ𝕊𝕊
Il existe divers sélecteur en CSS. Parmi plusieurs nous verrons :
- La sélection par le nom de la balise.
Ex :
Un titre de paragraphe
Un paragraphe On pourrait appliquer le style ici au titre juste en faisant : h1 { Propriété (s) : valeurs(s); ... } Ou directement à notre paragraphe en faisant : p{ Propriété(s) : valeur(s); ... }400
𝕌𝕟𝕖 𝕚𝕟𝕤𝕥𝕣𝕦𝕔𝕥𝕚𝕠𝕟 𝕔𝕤𝕤 (suite)
Illustration :
D'après le TAF d'hier, on a :
body{
background: #000;
color: #fff;
}
Les commentaires en CSS
Tout comme le langage HTML, le CSS permet également de laisser des commentaires.
Pour ce faire, il suffit de place un /* avant son commentaire pour marquer le début et un */ après son commentaire pour marquer la fin.
Reprenons l'illustration ci-dessous et commentons là :
body /* ici c'est le sélecteur*/ {
background /* ici c'est une propriété */ : #000 /* ici la valeur de la propriété */;
color: #fff;
}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
𝐒𝐚𝐥𝐮𝐭 à 𝐭𝐨𝐮𝐬 ,𝐜𝐨𝐦𝐦𝐞𝐧𝐭 𝐯𝐨𝐮𝐬 𝐚𝐥𝐥𝐞𝐳 𝐜'é𝐭𝐚𝐢𝐭 𝐣𝐮𝐬𝐭𝐞 𝐩𝐨𝐮𝐫 𝐯𝐨𝐮𝐬 𝐩𝐫é𝐬𝐞𝐧𝐭𝐞𝐳 𝐦𝐚 𝐩𝐚𝐠𝐞 𝐅𝐚𝐜𝐞𝐛𝐨𝐨𝐤 𝐙𝐨𝐧𝐞 𝐂𝐨𝐝𝐢𝐧𝐠 𝐨ù 𝐣𝐞 𝐩𝐚𝐫𝐭𝐚𝐠𝐞 𝐜𝐞𝐫𝐭𝐚𝐢𝐧𝐬 𝐭𝐮𝐭𝐨𝐬 𝐞𝐭 𝐩𝐫𝐨𝐣𝐞𝐭 𝐞𝐧 𝐩𝐫𝐨𝐠𝐫𝐚𝐦𝐦𝐚𝐭𝐢𝐨𝐧 𝐞𝐭 𝐛𝐢𝐞𝐧 𝐝'𝐚𝐮𝐭𝐫𝐞𝐬 𝐞𝐧𝐜𝐨𝐫𝐞.
𝐀𝐥𝐨𝐫𝐬 𝐣𝐞 𝐯𝐨𝐮𝐬 𝐝𝐞𝐦𝐚𝐧𝐝𝐞𝐬 à 𝐭𝐨𝐮𝐬 𝐝𝐞 𝐯𝐨𝐮𝐬 𝐚𝐛𝐨𝐧𝐧é 𝐞𝐭 𝐝𝐞 𝐦𝐞𝐭𝐭𝐫𝐞 𝐮𝐧 𝐣'𝐚𝐢𝐦𝐞 à 𝐥𝐚 𝐩𝐚𝐠𝐞 𝐞𝐭 𝐧'𝐨𝐮𝐛𝐥𝐢𝐞𝐳 𝐬𝐮𝐫𝐭𝐨𝐮𝐭 𝐩𝐚𝐬 𝐥𝐞𝐬 𝐫𝐞𝐜𝐨𝐦𝐦𝐚𝐧𝐝𝐚𝐭𝐢𝐨𝐧𝐬.
𝐒𝐮𝐫 𝐜𝐞 𝐣𝐞 𝐯𝐨𝐮𝐬 𝐫𝐞𝐦𝐞𝐫𝐜𝐢𝐞,𝐨𝐧 𝐬𝐞 𝐫𝐞𝐭𝐫𝐨𝐮𝐯𝐞 𝐜𝐞 𝐬𝐨𝐢𝐫 𝐩𝐨𝐮𝐫 𝐥𝐚 𝐬𝐮𝐢𝐭𝐞 𝐝𝐞𝐬 𝐭𝐮𝐭𝐨𝐬☺️.
𝐋𝐢𝐞𝐧 𝐝𝐞 𝐦𝐚 𝐩𝐚𝐠𝐞 𝐙𝐨𝐧𝐞 𝐂𝐨𝐝𝐢𝐧𝐠
https://www.facebook.com/profile.php?id=100089340313965&mibextid=ZbWKwL
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
𝕌𝕟𝕖 𝕚𝕟𝕤𝕥𝕣𝕦𝕔𝕥𝕚𝕠𝕟 𝕔𝕤𝕤
Voici comment on déclare ses instructions en CSS :
1. Tout d'abord, il nous faut un sélecteur
Un sélecteur : c'est tout simplement le point de référence d'une ou plusieurs balises par laquelle(s) on souhaite faire un style. Nous y reviendrons.
2. Des accolades d'instructions
3. D'une propriété CSS
Une propriété CSS est tout simplement une instruction qu'on souhaite voir appliquer, elle est suivi généralement par
4. Une valeur
La propriété CSS est séparée de la valeur par un deux points ( : ).
Les propriétés peuvent être nombreuses ou pas. C'est à dire qu'on peut utiliser au sein d'un même sélecteur une ou plusieurs propriété à la fois.
Les propriétés sont généralement entre les accolades d'instructions et se termine par un point virgule ( ; ).
Ex :
Sélecteur {
Propriété 1 : valeur ;
Propriété 2 : valeur ;
...
Propriété n : valeur ;
}
400
𝕃𝕚𝕒𝕚𝕤𝕠𝕟 𝕕'𝕦𝕟𝕖 𝕗𝕖𝕦𝕚𝕝𝕝𝕖 𝕕𝕖 𝕤𝕥𝕪𝕝𝕖 𝕖𝕩𝕥𝕖𝕣𝕟𝕖 𝕒 𝕦𝕟 𝕠𝕦 𝕡𝕝𝕦𝕤𝕚𝕖𝕦𝕣𝕤 𝕗𝕚𝕔𝕙𝕚𝕖𝕣𝕤 ℂ𝕊𝕊 (suite)
Pour Lier une feuille de style CSS a une ou plusieurs page HTML, rien de plus simple.
Il suffit d'utiliser la syntaxe suivante :
<link rel="stylesheet" type="text/css" href="nomFichier.css">
Ainsi, pour les pages web où on veux lier le même fichier style, il suffira de faire cette déclaration.400
Quelle balise nous permettait de lier une feuille de CSS à une page HTML ?
400
𝕃𝕚𝕒𝕚𝕤𝕠𝕟 𝕕'𝕦𝕟𝕖 𝕗𝕖𝕦𝕚𝕝𝕝𝕖 𝕕𝕖 𝕤𝕥𝕪𝕝𝕖 𝕖𝕩𝕥𝕖𝕣𝕟𝕖 𝕒 𝕦𝕟 𝕠𝕦 𝕡𝕝𝕦𝕤𝕚𝕖𝕦𝕣𝕤 𝕗𝕚𝕔𝕙𝕚𝕖𝕣𝕤 ℂ𝕊𝕊
Pour Lier une feuille de style CSS a une ou plusieurs page HTML, rien de plus simple.
Souvenez vous qu'on a en parler dans le chapitre 1 de ce thème.
Rappelez moi (10 mins de sondage ouvert)
400
𝕆𝕦 𝕖𝕔𝕣𝕚𝕥-𝕠𝕟 𝕝𝕖 𝕔𝕠𝕕𝕖 ℂ𝕊𝕊 ?
Il existe 3 façons d'écrire son code CSS. Tout comme le HTML, on le fait dans un éditeur de texte de 3 façons :
- Dans un fichier séparé avec l'extension .css (méthode recommandée)
- Dans l'entête du document HTML
<head>...</head>, grâce à la balise <style>...</style>
- Dans n'importe quelle balise HTML grâce à l'attribut style (méthode que je déconseille).
Comme vu plus haut, au travers de la méthode recommandée, celle via un fichier CSS séparé, on aura deux fichiers :
- un fichier HTML qui n'aura pas de style contenant juste le code
- un fichier CSS qui aura notre code CSS et qui sera relié à notre fichier HTML.
Pourquoi cette méthode est conseillée ?
Tout simplement parce que grâce à cette méthode, avec un seul et même fichier CSS, on peut mettre en forme 1 ou une infinité de page HTML.
Il suffira juste de lier la feuille de style CSS a la page HTML.
La 3e méthode, celle via l'attribut style est déconseillée car, l'usage de cette dernière :
- Nous fait répété le code
Imaginez vous avez 8 paragraphes et chaque paragraphe sont stylé de la même façon, il faudra copier le code CSS du premier paragraphe dans les 7 autres pour voir leur mise en forme. Il y ici une redondance du code, des ressources et du temps perdus pour l'interprétation car c'est le navigateur qui devra lire et interprété le code pour chaque balise.
- Nous fait perdre beaucoup plus de temps et j'en passe
400
Et va donc nous permettre d'obtenir le même site, stylisé grâce au CSS comme celui ci :
400
ℂ𝕠𝕞𝕞𝕖𝕟𝕥 𝕒𝕡𝕡𝕝𝕚𝕢𝕦𝕖𝕣 𝕕𝕦 𝕤𝕥𝕪𝕝𝕖 𝕖𝕟 ℂ𝕊𝕊 ?
À quoi sert réellement ce langage ?
Le langage CSS permet de choisir la couleur de votre texte.
Lui qui nous permet de sélectionner la police utilisée sur notre site.
Lui encore qui permet de définir la taille du texte, les bordures, le fond…
Et aussi, c'est lui qui permet de faire la mise en page de votre site. Vous pourrez dire : je veux que mon menu soit à gauche et occupe telle largeur, que l'en-tête de mon site soit calé en haut et qu'il soit toujours visible, etc.
CSS va pouvoir nous permettre de passer d'un site comme celui-ci :
400
Chapitre 2 : Le langage CSS
𝕀𝕟𝕥𝕣𝕠𝕕𝕦𝕔𝕥𝕚𝕠𝕟
Le langage CSS créé dans les années 1996, est le langage par excellence pour la mise en forme des pages web. Le sigle CSS signifie Cascading Style Sheet en anglais, littéralement « feuille de style en cascade ».
De part ces quelques mots commençons immédiatement en voyant de quoi est capable ce langage réellement.
400
Bonsoir à tous, on se retrouve aujourd'hui pour débuter un nouveau chapitre de notre formation du 𝕋𝕙è𝕞𝕖 𝟙 : 𝕃𝕖 𝕝𝕒𝕟𝕘𝕒𝕘𝕖 ℍ𝕋𝕄𝕃 𝕖𝕥 ℂ𝕊𝕊.
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 😊
