Il est 23:04

Linear-gradiant

On peut utiliser tout les formes de valeurs pour les couleurs (blue, #fff, rgb(1,1,1)

Pour la direction du linear gradiant, ça dépend du préfixe utilisé. Automatiquement le linear gradiant se fait du haut vers le bas.
Par exemple, si je veux qu'il aille a droite, je dois préciser
- le point de départ pour WEBKIT
- le point d'arrivé pour moz et o
- la direction par "to right" pour les versions les plus récentes.
Donc le code ressemblerai à ça :

background: -webkit-linear-gradiant(left, red, orange, blue);
background: -moz-linear-gradiant(right, red, orange, blue);
background: -o-linear-gradiant(right, red, orange, blue);
background: linear-gradiant(to right, red, orange, blue);
donc on écrit le code 1 fois avec le préfixe de chaque navigateur afin que l'élément soit supporté par les versions plus anciennes + on écrit une fois le code en "normal" pour les versions à jour comme ça le navigateur peut choisir le code le plus adapté

Prefixe vendeur

WEBKIT pour Chrome & Safari
MOZ pour Firefox
MS pour Internet Explorer/Edge
O pour Opera

BACKGROUND IMAGE

Si on ne lui applique pas de propiété, une image de fond va automatiquement être en taille 100% et se répéter pour remplir tout l'espace disponible

Pour changer la taille d'une image on peut lui donner des propiétés absolue donc fixe donc en px ou des propriétés relatives donc en em ou % et dans ce cas, c'est en % de l'élement parent et non en % de l'image!

Par exemple background-size: 50% fait qu'on aura une image repeté 2 fois dans l'élement parent. Car la première répetition prend 50% de l'espace disponible et la deuxième répétition prend les 50% restant. Dans ce cas, c'est en fonction de la largeur de l'image !

Ensuite on peut gérer la répétition grace à background-repeat: Les valeurs disponible sont no-repeat, repeat, repeat-x (horizontalement uniquement) repeat-y (verticalement uniquement)

Background-attachement: permet d'avoir une image qui scroll avec nous (valeur: scoll) ou qui est fixe (valeur: fixed)

Si on ne met aucune propiété c'est la valeur scoll qui s'applique par défaut.

Background-position: permet de choisir le placement de l'image. On peut donner deux indications : top/bottom & right/left. Par exemple: background-position: top right, pour coller l'image en haut à droite. Ou background-position: bottom left; OU background-position: 50px(left) 300px(top); pour le décaler d'autant.

On peut mettre deux images dans un même élément CSS dans ce cas, on sépare toutes nos info par des virgules. Exemple:

background-image: url("img1.jpg"), url("image2.jpg");
background-position: top right, bottom left,
background-attachement: fixed, repeat;

ETC.

Si il y a plusieurs images et qu'elles se chevauchent, elles apparaissent les une au dessus des autres dans l'ordre ou elles sont déclaré dans le css. Dans mon exemple en haut, img1 sera devant image2

FLOAT / CLEAR / OVERFLOW

Reprendre les cours à partir du cours 39...

Float va sortir un élément du flux de la page et le faire "flotter" + les éléments ayant certaines des propiétés de position vont pouvoir ignorer float + l'élement avec float sera toujours contenu dans son élément parent ! Si on met "float:" sur deux block, ils pourrons s'aligner même s'ils sont censé occuper toute la place disponible

Clear permet d'empecher que des éléments se collent à l'élément qui utilise "clear" clear:right pour empecher que des éléments viennent se coller à droite, clear:left fait l'inverse et clear:both pour ne rien avoir des deux cotés. C'est souvent utiliser pour positionner des menu type sidebar, ou des images par rapport au texte.

Je saute la partie sur l'overflow

Propriétés de base d'une page web + centrer verticalement

Dans le body ont ajoute: margin: 0px et padding:0px pour neutraliser tous les paramètres par défauts des navigateurs de nos visiteurs

On met en marge left et right "auto" pour centrer horizontalement l'élement qu'on souhaite centrer (en général, le corps de la page entière.

Pour centrer verticalement notre élément parent; on fait position: absolute. Puis top: x% bottom: x% (x doit être identique)

On peut décider de ne donner aucune propriété de hauteur/largeur à un élément et seulement lui attribuer des marges en % afin qu'il s'adapte aux différentes résolutions d'écran

LES BOITES

Les boites peuvent être des éléments block ou inline

Donc les attribut width, height, padding, border, margin peuvent être appliqué aux éléments block (body, div etc) et aux éléments inline (h, p, a etc...) BORDER STYLE NONEbordure solid
bordure dotted bordure dashed bordure double bordure groove bordure ridge bordure inset bordure outset

Je saute la partie sur les border-radius ; padding et margin

Comme pour le texte, il existe le box-shadow qui fonctionne de la même manière : déplacement horizontale, verticale, propagation et couleur. PAR CONTRE il existe la valeur "inset" à ajouter à la fin de l'attribue bow-shadow pour faire entrer l'ombre DANS la boite!

DISPLAY

Valeur INLINE : l'élément block se comporte comme un élément inline

Ceci est un block "p" classique

Ceci est un block "p" inline

Valeur BLOCK : l'élement inline se comporte comme un élément block

(flemme de faire un exemple)

Valeur INLINE-BLOCK

combinaison des deux, ce qu'il contient devient type block mais l'élement total est un inline (?) -rien compris

Selon chat GPT, il servait à faire des menu de navigation avant. Maintenant on prefère flex ou grid...

Valeur none

Fais disparaitre l'élement de la page (tout en restant présent en html

POSITION

Static

Position par défaut de l'élément

Relative

Change la position relativement à la position initiale de l'élement

Fixed

Element fixe même si on scoll dans la page -pour mon site ça ne sert à rien car tout est déjà compris à l'intérieur de l'écran. Cet élément est hors du flux de la page

Absolute

Z INDEX

Z index permet de choisir quel élement apparait devant quel élément lorsque 2 éléments se chevauchent. C'est utilisé sur les menu déroulants par exemple...

FLOAT/CLEAR/OVERFLOW

Voir insert plus haut

GESTION DES ESPACES DE TEXTE

LINE-HEIGHT permet de choisi l'écart entre les paragrahes en px. LETTER-SPACING permet de choisir la distance entre les lettres tandis que WORD-SPACING permet de choisir la distance entre les mots Ici on se rend compte que la distance entre les lignes est anormalement grande.

Les données peuvent aussi être donné en négatif (-15px par exemple) et dans ce cas l'écart est réduit au lieu d'être agrandi (marche pour les trois propriétés)

Propriété font

- font size peut être exprimé en px ou en %. S'il est exprimé en % il s'adapte aux différents paramètres de chaque utilisateurs

- font style peut avoir 4 propriétés : italic, normal, oblique ou inherit

Mais quelle est la différence entre "oblique" et "italic" ? En réalité, certaines polices ne sont pas faites pour être utilisé en italic, dans ce cas, on utilise oblique pour forcer le panchement de la police!

La propriété inherit permet de régler des conflits de style entre deux éléments. Dans ce cas, on dit à l'élément portant l'attribut inherit d'hériter du style de l'élément parent.

Je n'ai pas d'exemple :')

L'épaisseur d'un texte peut être modifié grâce à font-weight. Font-weight peut prendre comme valeur : normal, bold, lighter, bolder

Propriété text

text-align peut prendre 5 valeur : left, right, center, justify ; inherit

text-transform peut prendre 4 valeurs : none (auune de particulière) capitalize qui met chaque premier mot en majuscule uppercase qui met chaque lettre en majuscule et lowercase qui met chaque lettre en minuscule

Bof voit pas l'interet

text-decoration peut prendre plusieurs valeurs & sous-valeur ! Sois none pour retirer toute décoration, underline pour souligner overline pour tirer un trait en haut line-through pour barer le texte. La spécificité du style underline c'est qu'elle peut prendre une valeurs en plus pour la couleur, l'épaisseur ou le style de trait (solid, double, dotted, dashed, wavy.

CECI EST UN EXEMPLE

Hellooooooo

Maintenant je vais écrire un très long paragraphe pour tester l'attribut TEXT-INDENT qui permet de forcer le décallage d'un élément, ici le paragraphe que je suis en train d'écrire, vers la droite ou vers la gauche (avec une valeur négative). Je veux voir s'il s'agit d'un simple alinéa ou si cela prend en compte tout le paragraphe.
Conclusion, il s'agit d'un alinéa!

text-shadow doit être paramettré avec 4 info : projection horizontale ; projection verticale ; onde de propagation ; couleur.

OMBRE BLEU EN BAS ET TRES A DROITE

OMBRE ROUGE EN HAUT A GAUCHE

OMBRE ORANGE plus naturel

COULEURS POUR LE SITE

J'ai créé ce site le 20/02/2026 et j'ai fini mon apprentissage du html le 28/02/2026! J'espère finir le css avant la fin de mars ^^!

Vérification et validité des codes créés

Les signes spéciaux sont indiqué par des entités html chelou dont la liste ce trouve ici

Enfin, très important !! Il existe 2 sites gratuits sur internet pour vérifier sont HTML et son CSS il s'agit de validator.w3.org/ pour le html et de jigsaw.w3.org pour le css !

Ancres

1. TOUT LE CSS
   1. Spécificite
   2. DIV/SPAN
   3. Roue
2. HTML
3. Train

Avant de continuer, faire un backup de mon fichier style.css afin de retrouver un truc stable en cas d'erreur !!
Créer également un fichier html vierge pour le site
Prochaine étape: rendre le site accessible sur téléphone portable!

Reprendre sur youtube à partir du chapitre 28 ici

Notes sur le CSS

Le CSS permet de donner du style à une page internet. Si je veux contrôler ce style dans le HTML j'utilise les balises "style" dans la section "head" de mon code html.

Si je souhaite utiliser un style ponctuellement, je peux ajouter la valeur "style" dans la balise. Par exemple, ci-dessous un paragraphe en bleu :

J'écris ce paragraphe en bleu !

Je crée des commentaires dans le CSS avec /* en ouverture et */ en fermeture
/*Si je met un slash+étoile devant et derrière une propriété, la propriété est annulé : comme ça : /*color: red;* / ! C'est très utiliser pour les sites en javascript mais je n'en sais pas plus !*/

Si je crée un code css pour la balise "p", tout mes paragraphes seront identique. Pour créer des styles de paragraphes différents, je peux utiliser les attribu id et class. Donc >p id="p1" par exemple. Pour personnaliser p1, comme il s'agit d'un id je met un # devant dans mon code css. et > p class= "p1" pour personnaliser ma class je met .p1 en css. Le p1 c'est le nom que je lui ai attribué, ils peuvent être identique ou non peu importe.

Ceci est un paragraphe avec l'id p1

Ceci est un paragraph avec la class p1

Comm le code id pour p1 a déjà été utilisé, il ne s'appliquera plus ici même si j'ai écrit id=p1 dans mon code.

Spécificité du CSS a garder en méméoire

En CSS, il y a une notion de priorité et d'héritage.
            Heritage : Si j'applique un style à "body" en css 
et que sur ma feuille html h1 et p sont à l'intérieur
 de body, alors, h1 et p héritent des propriété de body.
            La notion de priorité est défini comme suit : l'élément 
le plus proche est prioritaire. Donc ci id ; p ; body 
on des proriétés identiques, ce sera dans 
l'ordre d'abord la notion id qui sera prise en compte, 
puis p, puis body. Donc du plus précis au plus général.
 Petit + : si j'applique un style depuis la page html, 
elle sera prioritaire sur les styles en css. Donc du plus au moins prioritaire 
: l'attribu style dans le html 
; l'element style dans head dans le html ; 
le fichier css (et à l'intérieru du fichier css :
 element du plus précis (id/class/p/h1) au plus général (body)
 ! Et voilà!
        

Les éléments p, h1 (et autres h), form, div etc : sont des éléments dit "block" car ils occupent toute la place disponible dans la page. Même si le texte dans p n'est pas long, le block p occupe toute la largeur du body. Par contre, les éléments img, a, strong, em, span etc sont de type inline, c'est à dire qu'ils n'occupent que l'espace dont ils ont besoins.

Très important : div et span !

Famille de police d'écriture

En général, quand on veut changer l'élément body, on choisi trois type de police d'écrtiure dans la propriété font-family (à l'intérieur du css) : 1ere police: celle qu'on veut utiliser sur le site / 2ieme police: une police public supporté par tout les navigateurs (anciennes ou nouvelles versions) / 3ième police : une famille de police générique (genre sans-serif ou serif)

Google a créer pleins de fonts qui marchent sur la plus part des navigateurs -pas juste chrome- et ça ce trouve à cette adresse
Il faut choisir sa police ainsi que ces propriétés, ensuite google nous fourni le code html a mettre en partie head et le code css a mettre dans l'élément de notre choix

Test vers les images

Pour insérer une image, il vaut mieux qu'elle soit à la bonne taille (en pixel) avant pour ne pas avoir a faire de modif dans le html. On utilise pour sa la balise img src="nom de limage.jpg" par exemple :

Ou venant d'un autre site web, ici pinterest :

Qu'est-ce qu'elle est belle cette madame !

Test vers les liens

On peut créer des balises a href et dowload pour créer des liens cliquable pour télécharger des fichiers mais j'utiliserai cette méthode en temps voulu

Pour que les visiteurs puissent m'envoyer des mails, je peux crééer un lien avec -a href- en mettant en référence de href mailto:monmail@gmail.com mais je ne vais pas faire de test. flemme

Ceci est un test qui mène à une ancre vers mes test de titre, de paragraphes et de liste. Et ceci est une ancre qui mène vers les éléments créé par néocities lorsque j'ai créé le compte.

Il existe trois type de lien direct depuis un même site... href="lien de la page.html" lorsque les deux pages html a relier sont dans le même dossier ; href="dossier/lien de la page.html" lorsque la page d'arrivé est dans un sous dossier de la page de départ ; et enfin href="../lien de la page.html" lorsque la page d'arrivé est dans un dossier qui précède celui de la page de départ. L'exemple des trois types de lien est ici... Attention à bien respecter tout l'intitulé, avec les majuscules et tout sinon ça marche pas ^^!

Cliquer ici pour aller sur ma page SF. Ou cliquer ici pour y acceder depuis un nouvel onglet

Test des titres, paragraphes et listes

Titre le plus important

Titre moins important

Titre niveau 3

titre niveau 4

Titre niveau 5

Titre le plus faible

Premier paragraphe de ce site. Je ne sais pas encore ce que ce site va contenir mdrr

Bah pourquoi tu t'embête à le créer ce site alors ?

Un autre type de paragraphe
            qui enregistre mes sauts de ligne automatiquement
            C'est bien drole ça
            Et hop je prend de l'avance !
        

Ceci est un paragrapghe comportant un élément très important
et un autre élément de moindre importance

Je vais lister des éléments en HTML selon le principe "non-ordonné" :

• Velo
• Voiture
• Train

Je vais lister des éléments en HTML selon le principe "ordonné" :

1. Velo
2. Voiture
3. Train

Les listes peuvent être des points (ul) des chiffres comme plus haut (ol) ou d'autre signes qu'on peut faire apparaitre. Ci-dessous les possibilités parmis 5 types de signes : 1, I, i, A, a

1. Velo
2. Voiture
3. Train

je peux aussi créer des listes de definitions avec dl ; dt et dd :

Liste avec des défintions :

Mot à définir

Définition du mot écrit plus haut

Deuxieme mot à définir

Definition du deuxieme mot

Je vais lister des éléments een html avec des sous partie. Je peux commencer mettre des ol dans les ol / des ul dans les ul / des ol dans les ul / des ul dans les ol (bref tout est possible) :

1. Velo
   1. Guidon
   2. Frein
   3. Roue
   4. Siege
   5. Personne
2. Voiture
3. Train