diff --git a/public/0_afficher_style.png b/public/0_assets/0_afficher_style.png similarity index 100% rename from public/0_afficher_style.png rename to public/0_assets/0_afficher_style.png diff --git a/public/0_firefox_parametres_devs.png b/public/0_assets/0_firefox_parametres_devs.png similarity index 100% rename from public/0_firefox_parametres_devs.png rename to public/0_assets/0_firefox_parametres_devs.png diff --git a/public/0_padding_margin.png b/public/0_assets/0_padding_margin.png similarity index 100% rename from public/0_padding_margin.png rename to public/0_assets/0_padding_margin.png diff --git a/public/0_padding_margin_cut.png b/public/0_assets/0_padding_margin_cut.png similarity index 100% rename from public/0_padding_margin_cut.png rename to public/0_assets/0_padding_margin_cut.png diff --git a/public/0_assets/style_basics.css b/public/0_assets/style_basics.css new file mode 100644 index 0000000..e3b531d --- /dev/null +++ b/public/0_assets/style_basics.css @@ -0,0 +1,3 @@ +p { + color: darkgreen; +} \ No newline at end of file diff --git a/public/style_basics.css b/public/0_assets/style_basics_SAVE.css similarity index 100% rename from public/style_basics.css rename to public/0_assets/style_basics_SAVE.css diff --git a/public/style_columns.css b/public/0_assets/style_columns.css similarity index 98% rename from public/style_columns.css rename to public/0_assets/style_columns.css index a170ca6..0c04126 100644 --- a/public/style_columns.css +++ b/public/0_assets/style_columns.css @@ -47,7 +47,7 @@ } -h3 { +/* h3 { text-align: center; margin-top: 3rem; -} \ No newline at end of file +} */ \ No newline at end of file diff --git a/public/0_assets/vide.js b/public/0_assets/vide.js new file mode 100644 index 0000000..902ea56 --- /dev/null +++ b/public/0_assets/vide.js @@ -0,0 +1,2 @@ +// pas si vide +// alert("coucou") \ No newline at end of file diff --git a/public/0_index_empty.html b/public/0_index_empty.html index 8fb3ef0..7d71b92 100644 --- a/public/0_index_empty.html +++ b/public/0_index_empty.html @@ -1,18 +1,66 @@ + - Document + + 0_index_empty.html + + + + + + + +
Display me not !
+

Je peux voir le code source de la page en faisant CTRL+U ou CTRL+MAJ+I

- Retour à 0_intro.html + + + + +

Nisi commodo irure labore esse cillum culpa et proident. Proident ea non officia tempor deserunt sint in eu cillum eu laborum ipsum ut aliquip exercitation. Exercitation incididunt sint minim occaecat irure fugiat sunt non anim. Sunt ad velit et sit commodo magna. Exercitation nisi magna aute voluptate. Consectetur irure sunt id reprehenderit. Ea enim ipsum aliqua incididunt duis eu magna occaecat ea dolor pariatur esse. Lorem eu duis do et irure cupidatat dolor occaecat culpa.

+

In aute ullamco labore. Est veniam voluptate nisi tempor voluptate ex dolore ad exercitation officia veniam non consequat culpa est. Dolore sunt consectetur cupidatat. Do sunt minim proident dolor adipisicing magna occaecat nostrud elit occaecat exercitation eiusmod dolor proident veniam. Laboris Lorem ad eiusmod do ipsum reprehenderit nostrud labore qui mollit adipisicing eu. Ea ex nisi consequat magna fugiat nostrud deserunt veniam adipisicing irure proident amet id magna mollit.

+ + + + + + + + + + + + + + + + + + + +

Je suis là

+ - \ No newline at end of file + + + + diff --git a/public/0_intro.html b/public/0_intro.html index 9de373e..ad53e3c 100644 --- a/public/0_intro.html +++ b/public/0_intro.html @@ -1,6 +1,7 @@ + 0 intro @@ -10,11 +11,11 @@ - + - + - + @@ -37,24 +38,64 @@
-

Les éléments HTML sont nombreux, ils servent à entourer un contenu dans - la page

-

Par exemple, si on écrit ce code : text souligné le - text va être sousligné (un style va lui être appliqué)

- Exemple :
+

HTML, balises, éléments

+ +

Une page HTML est lue par le Navigateur qui va interpréter son contenu, charger les ressources demandées

+

HyperText Markup Language est une facon de composé l'espace d'une page web, avec des balisages (Markups) dont les hyperliens sont centraux.

+ +

Les balises HTML (tag en anglais) sont nombreuses....
+ elles vienent encercler/encapsuler/contenir... entourer/délimiter... les contenus de la page qui, ainsi, sont diférentiés en objets distincts, en éléments

+ + + +

Il existe plein de balises permettant de créer, de base, des éléments HTML + et plein de propriétés d'affichage (CSS) qu'on peut leur ajouter (pour les modifier)... voir MDN + Je vais ici principalement me référer à MozillaDevNework... il existe énorméméent de ressources pour apprendre à coder... + + Je vous conseille également... + Un index.sommaire (qui pointe vers MDN) fait le tour Selectors (et propriétés) CSS... + Selectors complexes (ciblage CSS), en Anglais, on les vera petit-à-petit + La Cascade (FR), ressources sur le CSS... +

+ + + + + + + +

Afficher le code source

+ +

On va déja regarder comment est composée une page HTML basique...

+ +

Lien vers 0_index_empty.html

+ + CTRL+MAJ+I les outils de dev. s'affichent,
+ CTRL+U, le code source (le fichier avant qu'il soit lu/interprété par le Navigateur) + +

... structure de la page, head, body, footer

+ +
Par convention (et méthode) +
... on met les contenus contextuels (meta) et ressources dans la tête de la page <head>titre, feuilles de style .css, etc</head> (contenus invisible) +
... on met les contenus courant, les textes, images, dans le corps de la page <body>article, texts, images, contenus, etc</body> (contenus visible) +
Les commentaires CTRL+MAJ+/ sont invisibles... + + +

Footer, on le vera avec Javascript, est un espace en bas de page où l'on charge d'autres ressources (.js)...
+ à la fin de la page... ce qui est en bas étant lu... en dernier

+ +
+
+
+ + +

HTML balises simples, souligner, titres... div

+

On va se concentrer sur le contenu dans <body> en commençant par quelques exemples de balises simples :

+ + +

Exemple :

text souligné
- -

Chaque navigateur (Chrome.ium, Firefox.Brave, Safari), va lire ces - "diférentes balises" ("tag" en anglais) - et afficher leur contenu en fonction de celles-ci. Si chacune d'entre - elle se comporte diférement dans la page, c'est que, par - défaut, le Navigateur (qui lit et interpréte le code), va - leur ajouter des styles d'habillage

- - Exemple de balises connues : -

Mettre du texte entre deux balises....
- 

lien vers

@@ -67,10 +108,15 @@
-

Mettre du texte entre deux balises text permettera - de créer un lien

-

Une balise <div>contenu</div> - permet de contenir d'autes éléments + + + + + + +

On construit la page ainsi, en contenant des éléments les uns dans les autres

+ 

     

@@ -85,10 +131,29 @@
-

Dans une <div>, tout ce qui se retrouve avant, à droite, à gauche... - saute à la ligne, passe après la <div>
- C'est parce que une <div> se comporte comme un "block"

-

On va y revenir avec un exemple

+

Dans une div, tout ce qui se retrouve avant, à droite, à gauche... + saute à la ligne, passe après la div
+ C'est parce que une div se comporte comme un "block"

+

On va y revenir avec un exemple

+ + + + + + + + +

Sauts de ligne : br, hr
...

+ +

Dans l'éditeur de texte d'où l'on code (IDE), on peut faire autant de sauts à la ligne qu'on veut ! +
+ +On peut espacer des parties de code... le navigateur ne va créer des sauts de lignes que si on lui demande d'en afficher. +

+ 

 On peut aussi forcer un saut à la ligne avec 
 ou un autre séparateur comme 

@@ -98,74 +163,112 @@ On peut aussi forcer un saut à la ligne avec 
 ou un autre séparateur com
-

Si on veut éviter les sauts de ligne quand on entoure un élément de text (ou autre contenu), on utilisera des balises "inline"

-

Des balises "inline" permettent au contraire d'entourer des bouts de textes (ou autres contenus) sans faire de saut de ligne !

- +

Certains éléments (comme les "div") vont créer du vide autour d'elles, agir comme un "block"

+ +

D'autres éléments se comportent comme du text, sans créer de saut de ligne autour d'eux
+ : ils se succèdent sur la ligne, ils sont affichés de façon "inline"

+

Ce qui les diférentient c'est la propriété d'affichage (display)

+ + + 

 Plus d'informations :
 MDN Firefox (Display)
-

Vous noterez que, même si je fais un saut de ligne dans le code, le lien ne passe pas à la ligne...

-

<strong>contenu</strong> comme <a>contenu</a> sont inline

-

Dans l'écriture dans l'éditeur de texte où l'on code, on peut faire autant de sauts à la ligne qu'on veut !

+

Vous noterez que, même si je fais un saut de ligne dans le code... le lien ne passe pas à la ligne...

+

contenu ainsi que <a>contenu</a> sont "inline"

+ + + +

Basics, des balises de base, prêtes à l'emploi

+ +

D'autres éléments de base permettent de styliser facilement le texte...

À l'orgine il s'agissait de "mimer" certaines mises en formes usuelles dans le journalisme, l'édition

-

Padding crée une marge entre le text est le bord de la feuille (page, support)

-

La balise...
"u" underline
"b" ou "strong" - gras
La balise "span" - est neutre mais permet d'entourer une partie du texte
On va voir ensuite comment il est possible d'ajouter des "classes" et "id" permettant de les identifier

+

La balise...
"u" underline
"b" ou "strong" gras, em ou i pour italic +
La balise "span" + est neutre mais permet d'entourer une partie du texte
+ ... On va voir ensuite comment il est possible d'ajouter des "classes" et "id" permettant de les identifier


 
demo de balise inline qui crée du gras (et c'est tout)
+

+  #italgras {
+    i, u, strong {
+      color: orange
+    }
+  }
+
+

 

   Exemple :

-  
Paragraphe -- Voluptate labore laboris pariatur. Dolore
-    exercitation et ex tempor tempor ut consequat sint
-    deserunt commodo sunt aute. Ex ad est culpa sint eiusmod dolor enim
-    fugiat ipsum eiusmod dolor deserunt. Reprehenderit ullamco pariatur
-    aliqua officia veniam deserunt duis esse nulla laborum ad adipisicing
-    reprehenderit cupidatat cupidatat. Sunt exercitation ad ullamco cillum
-    id. Tempor velit exercitation aute velit pariatur.

-  
Laboris dolor id do dolor aliquip excepteur consectetur nostrud
-      velit. Tempor Lorem eu nisi. Eiusmod id veniam minim duis
-    deserunt exercitation cupidatat. Et aliquip elit quis occaecat minim
-    sunt ut elit sit velit labore amet nisi cillum.

-  
Laboris nisi amet nisi laborum nostrud. Mollit nisi dolore
-    consectetur cupidatat magna occaecat reprehenderit labore esse
-    id. Irure esse excepteur ea aliquip eiusmod velit ipsum exercitation
-    fugiat officia ullamco ut et reprehenderit laboris. Culpa ipsum tempor
-    excepteur. Officia in ea magna do commodo exercitation. Laborum
-    voluptate incididunt incididunt do Lorem in est laboris consectetur
-    enim occaecat. Culpa laboris incididunt eu id qui sit eu voluptate
-    quis laboris eiusmod. Eu aliquip aliqua labore ad eu sint adipisicing
-    laboris esse nisi ut mollit ex eu.

+  
Voluptate labore laboris pariatur. Dolore exercitation et ex tempor tempor ut consequat sint deserunt commodo sunt aute. Ex ad est culpa sint eiusmod dolor enim fugiat ipsum eiusmod dolor deserunt. Reprehenderit ullamco pariatur aliqua officia veniam deserunt duis esse nulla laborum ad adipisicing reprehenderit cupidatat cupidatat. Sunt exercitation ad ullamco cillum id. Tempor velit exercitation aute velit pariatur.

+  
+  
Laboris nisi amet nisi laborum nostrud. Mollit nisi dolore consectetur cupidatat magna occaecat reprehenderit labore esse id. Irure esse excepteur ea aliquip eiusmod velit ipsum exercitation fugiat officia ullamco ut et reprehenderit laboris. Culpa ipsum tempor excepteur. Officia in ea magna do commodo exercitation. Laborum voluptate incididunt incididunt do Lorem in est laboris consectetur enim occaecat. Culpa laboris incididunt eu id qui sit eu voluptate quis laboris eiusmod. Eu aliquip aliqua labore ad eu sint adipisicing laboris esse nisi ut mollit ex eu.

+

+
+ + + + + + + + + + + +

Voir les styles CSS par défaut

+ +

On peut toute fois modifier les propriétés données à ces éléments de base (ou en utiliser un plus adapté)

+ + +

Je peux voir le code source de la page en faisant CTRL+MAJ+I les outils de dev. s'affichent
+ Dans Firefox je trouve les parametres via icon "..." (à droite) puis Parametres ("icon rouage") /OU/ F1

+ +
+
+

Je peux ensuite demander d'afficher ces styles par défaut

+ +
+ +
+

Firefox montre bien que "strong" a des valeurs par défaut... on peut + voir d'autres propriétés et feulles de style

-

On peut modifier les propriétés de ces éléments proposés "de base" en HTML

-

On peut opérer de plusieurs façons, d'abord on - peut ajouter du style directement dans un élement

+ +

Ajouter du style = propriétés + valeurs

-
Ici je suis venu ajouter du style directement à l'élément - font-weight est une propriété - normal une valeur de cette propriété +

On peut opérer de plusieurs façons, d'abord on peut ajouter du style directement dans un élement
+On parle de méthode "inline", dans le texte/code/page même (pas un fichier distinct, on va y revenir)

+ + +
Ici je veux annuler la propriété et valeur attribuées aux éléménts "strong"... + C'est la propriété font-weight avec la valeur "bold" (gras) qui crée l'empatement... + ... par défaut, un élément "strong" est mis en gras "bold" + + Pour changer l'empatement je vais modifier le style de l'élémént strong... + font-weight est une propriété + normal une valeur attribuée à cette propriété 

@@ -175,123 +278,124 @@ On peut aussi forcer un saut à la ligne avec 
 ou un autre séparateur com
 
labore laboris pariatur....
-

labore laboris pariatur, devrait être en gras (propriété inérante à - <strong>) mais on a ajouté un style - directement sur l'élémént ("inline") + ) mais on a ajouté un style + directement sur l'élémént

font-weight: normal; demande en effet que le style d'empatement (gras) du texte entre les balises soit "normal"
(et non pas "bold", valeur par défaut attribuée à - <strong>) -

+ ) +

-->

Ici je suis venu ajouter du style directement à l'élément - font-size est une propriété - 10px une valeur de cette propriété + font-size est une propriété (de style, d'habillage) + 10px une valeur attribuée à cette propriété 

-petit text
+petit text - 
+même taille  - 
 plus petit text
- - -

Je peux voir le code source de la page en faisant CTRL+MAJ+I les outils de dev. s'affichent
- Dans Firefox je trouve les parametres via icon "..." (à droite) puis Parametres ("icon rouage") /OU/ F1

- -
- -
- -

Je peux ensuite demander d'afficher ces styles par défaut

- -
- -
-

Firefox montre bien que "strong" a des valeurs par défaut... on peut - voir d'autres propriétés et feulles de style

- -
On a vu qu'en HTML on pouvait entourer.encercler.contenir des bouts de text - Qu'on pouvait le faire avec différents tags ou "balises" - Que certaines sont interprétées/lues par défaut par les navigateurs... - qui les affichent d'une certaine façon en leur ajoutant du style - Qu'on peut modifier les éléments en y ajoutant du "style" directement +
On a vu qu'en HTML on pouvait entourer / encercler / contenir... des bouts de text par des balises + Une fois entourés par ces balises, ces bouts de text séparés sont appelés de éléments" + Il existe des éléments de base, prêts à l'emploi, ils ont des propriétés d'affichage intégrées (par défaut) + On peut modifier les éléments en y ajoutant du "style" directement à l'intérieur de l'élément (avec style="") Ces nouvelles propriétés et valeurs outrepassent celles précédemment demandées (par le navigateur)
+
-

On peut également créer une "feuille de style" pour "Cascading Style Sheet" == CSS

-

Elle va contenir des instructions de mise en forme/page qui vont habiller les éléments de la page

-

L'intéret c'est que ces règles sont accessibles dans un fichier - distinct de la page HTML (ce qui rend son accès et lecture plus simple) -

-

On peut surtout ainsi modifier plusieurs éléments récurents dans nos pages... (cela - donnera de la cohérence esthétique à un site)

+ + +

Feuilles de style : fichier.css

+ +

Comme on vient de le voir...
+ On peut ajouter du style directement dans un élément (dans la page HTML)... mais ce n'est pas le plus simple

+ +

Il est préférable de créer une "feuille de style" pour "Cascading Style Sheet" == CSS

+

On y renseigne / indique / ajoute des instructions d'habillage qui vont modifier le comportement visuel des éléments dans la page ...
+ ( qu'on va identifier grâce à des "Selectors" utilisés dans les feuilles de style CSS pour cibler des éléments présents dans la page HTML )

+

L'intéret d'une feuille de style c'est qu'on peut y ajouter autant de règles qu'on veut et les sauvegarder dans un fichier (qu'on va pouvoir copier, déplacer) +
... ainsi, ces règles inscrites dans un fichiers seront accessibles directement (plutôt qu'intégrées dans la page HTML) +
... ainsi, plusieurs pages pouront charger les mêmes instructions de style. +
.... Si je mets à jour cette feuille de style (fichier), toutes les pages qui la charge auront leur mise en page mise à jour !< +
On peut ainsi modifier plusieurs éléments récurents d'une page à l'autre... (cela donnera de la cohérence esthétique à un site)

+

C'est une méthode de centralisation de l'information...

+ + + +
+

Où mettre la feuille de style ?

Voyons d'abord comment fonctionne une feuille de styles (CSS)

-

Pareillement à une page web (par exemple index.html), une feuille CSS a une extension - particulière : ".css"

-

On peut la nomer de plein de façons ! style.css par - exemple

-

"On ne met pas d'espace dans le nom des - fichiers !, on les remplace par "_" ou "-", plutôt "_""

+

Pareillement à une page web (par exemple index.html), une feuille CSS a une extension particulière : ".css"

+

On peut la nomer de plein de façons ! style.css par exemple

+

"On ne met pas d'espace dans le nom des fichiers !, on les remplace par "_" ou "-", plutôt "_""

Une fois la feuille de style crée on devra la charger dans la page HTML - -

-

Dans la page actuelle j'en ai chargé plusieures...

-

Certaines vont servir plusieurs fois, être chargées dans plusieurs - pages HTML

-

Ainsi, avec une même feuille de style mon site aura une certaine - homogénéité, une cohérence visuelle

-

Je peux voir le code source de la page en faisant CTRL+U ou CTRL+MAJ+I

-
Si je met cette balise dans ma page (de préférence dans "head", dans la tête de la page)... +
Si je mets cette balise dans ma page (de préférence dans <head> .... et </head>, dans la tête de la page)... les instructions qu'elle contient vont modifier la façon dont le navigateur affiche les éléments de la page 

-
+
-

Lien vers style_basics.css

+

Lien vers style_basics.css

-

La feuille de style (fichier) est pratique si on l'utilise plusieurs fois de page en page +

La feuille de style (fichier) est pratique si on l'utilise plusieurs fois de page en page Et, formellement, cela permet d'avoir toutes les inforamtions séparées au même endroit... -Mais on peut aussi charger cette cascade d'instructions directement dans la page... -Au lieu d'utiliser on pourra utiliser +Mais on peut aussi charger cette cascade d'instructions directement dans la page...

+

Au lieu d'utiliser <link> on pourra utiliser <style>...</style> +
== On peut mettre des instructions de style en cascade directement "inline", dans la page HTML.... +
plutôt que dans un fichier séparé (block)

-
-

Sur VSCODE, le logiciel de code qu'on va utiliser... -
je peux créer un fichier index.html -
l'ouvrir... et tapper "!", un popup s'ouvre (Intellisens), en faisant ENTRER, le template (gabari, préformatage) d'une page HTML est chargé...

-

Lien vers 0_index_empty.html

-
+ + + + + + +
Créer un fichier + ! template Html
+ + +

Dans VSCODE (ou Codium), le logiciel de code qu'on va utiliser... +
je peux créer un fichier index.html +
l'ouvrir... et tapper "!", un popup s'ouvre (Intellisens), en faisant ENTRER, le template (gabari, préformatage) d'une page HTML est chargé...

+ +

Lien vers 0_index_empty.html

+
@@ -299,6 +403,8 @@ Au lieu d'utiliser on pourra utiliser Identifier et "cibler" les éléments de la page (id, classes)
+ + leur attribuer des propriétés+valeurs
Plutôt que d'intervenir sur un élement à la fois, on pourra attribuer les mêmes propriétés à un ensemble de mêmes éléments, Ici, la classe "important" est ajoutée sur deux éléments span... @@ -307,11 +413,12 @@ Au lieu d'utiliser on pourra utiliser #important_wrapper (# == ID) .important (. == classe) - Ce qu'on fait là c'est cibler ("sibling") un élément d'après sa classe ou son id + Ce qu'on fait là c'est cibler ("sibling") un élément d'après sa classe ou son id On verra qu'il existe d'autres moyens (plus sophistiqués) + Un index complet (qui pointe vers MDN) fait le tour Selectors (et propriétés) CSS...
-

+

 #important_wrapper { /* id */
   margin-left: 10px;
   border-left: 3px solid red;
@@ -321,14 +428,17 @@ Au lieu d'utiliser  on pourra utiliser 

 
 

 

-  
tempor ut consequat sint...
 
-  
deserunt commodo sunt aute...

-  
Laboris nisi amet nisi laborum nostrud. Mollit nisi dolore.....

-  
Eiusmod id veniam minim duis deserunt exercitation cupidatat....

+  
Ceci est une span avec une classe .important (mais pas strong)...

+  
Ceci est strong sans classe, normal, basic.....

+  
... ceci est strong mais .pas_important !
 
+  
De nouveau, une span qui se fait passer pour strong !

 

 

 
@@ -341,10 +451,30 @@ Au lieu d'utiliser  on pourra utiliser Aussi il est interessant de trouver des noms de classes équivoques (ce n'est pas toujours facile)
 

 
-
CSS On peut attribuer les mêmes consignes (propriétés:valeurs) à plusieurs élémens ciblés en même temps (via leur classe, id, etc)

-
HTML On peut attribuer plusieurs classes à un même élément

 
-

+
+
+
CSS /VS/ HTML, cibler des éléments /VS/ ajouter des classes

+
CSS : On peut attribuer les mêmes consignes (propriétés + valeurs) à plusieurs élémens ciblés en même temps (via leur classe, id, etc) -- virgule

+

+.para, #sad {
+  ....
+}
+.para, 
+#sad {
+  ....
+}
+

+
+
CSS : On utilise un --espace pour indiquer qu'on va chercher un élément... à l'intérieur d'un autre

+  === #text_principal p { ... }

+  === "parent > enfant"
+

+
+
HTML : On utilise un --espace pour attribuer plusieurs classes à un même élément ( ex suivant: "para fond_bleu" )....

+  === a la classe "para" et "fond_bleu"

+
+

 /* ID */
 #text_principal {
   font-family: sans-serif;
@@ -364,6 +494,19 @@ Au lieu d'utiliser  on pourra utiliser 

 
 

-

-  
1. Je suis le premier pargraphe !

-  
2. Et moi le deuxième pargraphe !

-  
3. Et moi le troisiem pargraphe !

-  
4. Et moi le dernier pargraphe =(

-

+
 
+  
1. Je suis le premier paragraphe !
 
+  
2. Et moi le deuxième paragraphe !
 
+  
3. Et moi le troisiem paragraphe !
 
+  
4. Et moi le dernier paragraphe 
+                                                    =(
 
+
 
 

 
 
1. et 2. sont verts (car .para)
@@ -385,27 +529,41 @@ p:last-child .para {
   C'est pour cela qu'on dit qu'elles sont en Cascade ! 
   == Le fichier est lu de haut en bas par le Navigateur qui ensuite afficher la page selon cette liste de demandes/règles.
   
-  ICI, dans le CSS, les instructions de fond (background) indiquées dans ".fond_bleu" prennent le dessus sur celle de ".para" 
+  ICI, dans le CSS, les instructions de fond (background) indiquées dans ".fond_bleu" prennent le dessus sur celle de ".para" 
 
-  4. utilisation d'une pseudo-classe (on va les passer en revue), 
-  ... celle-ci cible TOUT dernier pargraphe (p:last-child) puis cherche TOUT .para à l'intérieur... 
-  ( ... dit à l'envers : cette instruction cible TOUT .para présent dans le dernier paragraphe  (p:last-child) )
+  4. utilisation d'une pseudo-classe (on va les passer en revue), 
+  ( MDN Pseudo-classes + MDN last-child )
+  ... celle-ci, dans notre exemple... cible TOUT dernier paragraphe (p:last-child) puis cherche TOUT .para à l'intérieur... 
+  ( ... dit à l'envers : cette instruction cible TOUT élément avec la classe "para" présent dans le dernier paragraphe  (p:last-child) )
 
   4. Dans le CSS...
-  ... Comme cette instruction d'atteindre/cibler le dernier .para est indiquée après celle de ".fond_bleu", elle prend le dessus :
-  ... la propriété:value   background-color: orangered; est appliquée !!! 
+  ... Comme cette instruction d'atteindre/cibler le dernier .para est indiquée après celle de ".fond_bleu", elle prend le dessus :
+  ... la propriété:value  background-color: orangered; est appliquée !!! 
 

 
 
 

 
 
+
Ciblage parents

 
Un autre exemple de ciblage d'un élément dans un élément

 
#contenant .element_dedans .sous_element

 
-

-#enfant p {
-  text-transform: uppercase;
+

+.border {
+    border:1px solid #000;
+}
+.cascade {
+    margin-left: 10px;
+    background: #FFF;
+    text-align: center;
+}
+.cascade:hover { /* Hover est une autre pseudo-classe bien pratique... */
+    background: fuchsia;
+}
+#enfant p { 
+    /* tout p présent dans #enfant */
+    text-transform: uppercase;
 }
 

 
@@ -418,10 +576,32 @@ p:last-child .para {
       
autonomie
+ + + +

jambes

+ + + + + + +
Mise en page, garder son code lisible et ordonné
+

Vous notez que dans l'écriture du code HTML j'essaie de garder les choses lisibles...
On pourrait ajouter de l'espace (saut de ligne) pour espacer les div avec #id

+

On peut faire autant de saut de ligne que l'on veut... le Navigateur ne les interprète pas comme des sauts de ligne (on l'a vu, on peut utiliser
)

+

Autre chose, on utilise des retraits de ligne (à gauche) des "indent", des espaces pour, visuellement, voir dans le code, quel tag (ici des <p> <div>)
+C'est une convention formelle... qui aide grandement à résoudre des "bugs" / "errors" +

+Wiki Style d'indentation : https://fr.wikipedia.org/wiki/Style_d'indentation + + +

Dans VSCODE on peut utiliser Prettier Code Formatter qui fait le boulot à notre place, aligne correctement les blocks de textes en fonction de leur imbrication successive...

+ +
@@ -437,30 +617,39 @@ p:last-child .para { +

Margin padding

+

S'il on veut créer un saut à la ligne on peut utiliser ajouter des propriétés de marge externes ou internes à l'élément
+Pour cela il faut que l'élément se comporte comme un bloc, ait une propriété display: inline-block | block

-

S'il on veut créer un saut à la ligne on peut utiliser ajouter des propriétés d'espacement...

-

Sur les éléments qui se comportent comme des "blocs" (telles les div)

+
MDN (margin) : https://developer.mozilla.org/fr/docs/Web/CSS/margin +MDN (padding) : https://developer.mozilla.org/fr/docs/Web/CSS/padding +MDN (border) : https://developer.mozilla.org/fr/docs/Web/CSS/border +MDN (raccourcis) (T R B L) https://developer.mozilla.org/fr/docs/Learn_web_development/Core/Styling_basics/Getting_started#raccourcis +MDN (display) : https://developer.mozilla.org/fr/docs/Web/CSS/display
-

On peut ainsi espacer les contenus...

- -

+

 /* Objet au centre, avec MARGE extérieure et PADDING intérieur */
+
+/* DEMO, sert à expliquer.montrer la MARGE EXTERIEURE (margin) autour de #test_margin_padding  */
+#test_wrapper { 
+    border: 1px solid gainsboro;
+    background: #fdffdf;        /* jaune */
+    padding: 10px;
+}
+
+/* Element avec marges... */
 #test_margin_padding { 
     padding: 30px; /* PADDING */
     margin: 30px; /* MARGIN */
     border: 1px solid;
-    background-color: #e3dcff;
-    border: 3px solid red;
+    background-color: #e3dcff;   /* mauve */
+    border: 3px solid red; /* bord visuel de notre élément de test */
 }
-/* DEMO, sert à expliquer.montrer la MARGE EXTERIEURE (margin) autour de #test_margin_padding  */
-#test_wrapper { 
-    border: 1px solid gainsboro;
-    background: #fdffdf; /* jaune */
-    padding: 10px;
-}
-/* DEMO, sert à expliquer.montrer la MARGE INTERIEURE (padding) entre le bord de #test_margin_padding et son CONTENU */
+
+/* DEMO, sert à expliquer.montrer la MARGE INTERIEURE (padding) */
+/* ... entre le bord de #test_margin_padding et son CONTENU */
 #inner_content { 
-    background-color: #cff0fb;
+    background-color: #cff0fb; /* bleu clair*/
     padding: 0px;
 }
 

@@ -473,14 +662,291 @@ p:last-child .para {
- +

Firefox : CTRL+MAJ+I + -> Inspecteur -> Mise en Page

+

En selectionnant un élément dans le code à gauche, on voit quelles marges externes (et internes, avec padding) lui sont appliquées

+ +
-

Margin crée de l'espace, permet aussi de déplacer les éléments...

+
+
-

-#mousehover_movemargin_element {
+
+

+  #margin_first,
+  #margin_seconde,
+  #margin_last {
+      /* il faut que propriété "Display" ait la valeur "inline-block"  */
+      /* (pour éviter que les éléments sautent à la ligne, des blocks) */
+      display: inline-block; 
+      border: 1px solid;
+  }    
+  .margin_left {
+      margin-left: 100px
+  }
+  .margin_right {
+      margin-right: 100px
+  }
+  .large {
+      width:500px;
+  }
+  .petite {
+      width:200px;
+  }
+  

+  
+  

+    

+      #margin_first
+    

+  
+    

+      #margin_seconde
+    

+  
+    

+      #margin_last
+    

+  

+  
+  
+  
Margin et Padding (mais aussi border ou encore text-shadow) fonctionnent comme ceci :

+    
+  
+
+
+

+#top_margin_block {
+  width: 100%
+}
+#margin_exemples_wrapper {
+  background: greenyellow;
+  border: 1px solid #000; /* width(épaisseur) style color */
+    border-width: 1px 1px 1px 1px;
+  display: block;
+  clear: both;
+  float: left;
+  width: 100%;
+  margin-bottom: 4rem;
+}
+.margin_exemples {
+  display: inline;
+  float: left;
+  border: 1px solid #000;
+  border-color: red;
+  background: chartreuse;
+   /* top right bottom left */
+  padding: 5px 5px 0 5px; /* EXEMPLE Padding */
+    padding-top: 5px;      /* déclinaison.. marche aussi avec border, margin, etc */
+    padding-right: 5px;
+    padding-bottom: 0;
+    padding-left: 5px; 
+  height: 100px; 
+  width: 100px;
+}
+.margin_exemples.margin_autour {
+  margin: 100px 0px 0px 0px; /* EXEMPLE Margin */
+  height: auto; width: auto;
+  min-height: 100px;
+  background: lavender;
+    /* top+bottom    left+right */
+  border-width: 1px 4px; /* EXEMPLE border... 2 val., 1er==top+bottom 2e==left+right */
+}
+

+
+

+

+  
#top_margin_block

+  
.margin_autour :
margin: 100px 0px 0px 0px;

+  
style : 
margin-top: -10px

+

+

+
+

+Notez que, dans le dernier exemple, c'est le style="..." de l'élément (qui est chargé/lu/interprété en dernier, après la feuille de style)....
c'est ce style (margin-top: -10px) qui l'emporte.

+On garde la logique, la dernière propriété:value donnée à un élément (EX: div#exemple.dernier) qui est prise en compte.

+

+
+
+
+

+

+
+
+
+
Margin auto + float (+var +calc)

+
+
+
+

+#margin_auto {
+  display: block; /* + display block */
+  margin: auto;   /* + marge gauche+droite ==> centré ! */
+  /* + taille.largeure fixe (width), ici donnée par .w_large */
+  /* ==> block centré ( marges auto à droite et à gauche ) */
+  background: yellow;
+  text-align: center;
+}
+
+#float_none  { float: none;  }
+#float_left  { float: left;  }
+#float_right { float: right; }
+
+#margin_center_wrapper { /* DEMO rend visible le margin auto */
+  background: #fdffdf;
+  float: none;
+  border: 1px dashed gray;
+}
+
+/* Variables : on attribue une valeure (400px) à une variable "--xxx" */
+/* ... normalement, methode, on les met au début de la feuille CSS (en premier/haut) */
+:root { 
+  --w400: 400px; 
+}
+.w400    {  width: var(--w400);  } /* on charge la valeur contenue dans la variable "--xxx" */
+.w_large {  width: 600px;  } 
+.h_grand {  height: calc(100px + 100px); } /* calc permet de faire des oppérations mathématiques */
+.h100    {  height: 100px; }
+.w100p   {  width: calc(100% - var(--w400)); } /* exemple calc + var ... on aura d'autres exemples*/
+
+.floater {
+  background: yellowgreen;
+  padding: 10px;
+  box-sizing: border-box; /* "box-sizing" va auto calculer les dimensions (height/width)... */
+  /* ... SANS les Padding ni Margin */
+  /* ... sinon, par défaut la largeur ici calculée serait --w400 + Margin + Padding */
+  /* ... ce qui serait trop large !!!! du coup mon calcul serait faussé */
+  /* ... ( je devrais moi-même prendre en compte les margins... ) */
+}
+

+
+

+
#float_none

+
+

+  
#margin_auto :
Contenu centré

+

+
+
#float_right: 
width: var(--w400)

+
+
#float_left :
width: calc(100% - var(--w400))

+

+
+
+
Box-sizing... 
+  La Cascade, explications détaillées en Français : https://la-cascade.io/articles/box-sizing-pour-les-nuls
+  MDN (détails) : https://developer.mozilla.org/fr/docs/Learn_web_development/Core/Styling_basics/Box_model
+
+  MDN (:root) https://developer.mozilla.org/fr/docs/Web/CSS/:root
+  MDN (var) : https://developer.mozilla.org/fr/docs/Web/CSS/var
+  MDN (calc) : https://developer.mozilla.org/fr/docs/Web/CSS/calc
+

+
+
+
+
+
+
+
+
Largeur / hauteur (adaptative)

+
+

+#width_full_page {
+  max-width: 800px;
+  min-width: 500px:
+  padding: 10px; border: 1px solid; background: yellow;
+}
+

+
+

+

+  #width_full_page
+

+

+
+
+
+
+
+
Mediaqueries

+
+
Exemple complet : 0_min_max_width.html
+Penser à ajouter <meta name="viewport" content="width=device-width, initial-scale=1.0"> dans head

+
+

+:root {
+    --maxw: 600px;
+    --maxw_extra: 900px;
+}
+#width_full_page,
+#width_bloc_textarea {
+    padding: 10px; border: 1px solid; 
+    background: yellow;
+}
+
+.min_max_width {
+    min-width: 500px;
+    max-width: var(--maxw_extra);
+}
+
+/* vue adaptative aka. responsive design */
+@media (max-width: 638px) { /* == S'applique tant que l'écran a une largeur maximum de... 638px (et -) */ 
+                            /* == Si l'écran a une largeur max de 638px */
+                            /* ..... ok .... ok .... 638px || non */
+    #width_full_page {      
+        background: rgb(34, 255, 0);
+    }
+}
+@media (min-width: 700px) { /* == Si l'écran est large au minimum de... 700px (et +) */
+                            /* non || 700px ..... ok .... ok .... */
+    #width_full_page {
+        background: rgb(255, 102, 0);
+    }
+}
+
+/* EXTRA/bonus ":has".... */
+/* Si xxx:has(yyy) == "SI xxx contient yyy" */
+/* Ici, on garde la taille fixe si le bloc contient une textarea */
+.min_max_width:has(textarea) {
+    min-width: var(--maxw);
+    max-width: var(--maxw);
+}
+textarea {
+    width: var(--maxw); /* initial */
+    max-width: calc(var(--maxw) - 10px);
+    min-width: 400px;
+    min-height: 100px;
+    max-height: 300px;
+    display: block;
+}
+

+
+

+    

+        #width_full_page
+    

+
+    

+        #width_bloc_textarea
+        
+    

+

+
MDN css CSS_media_queries
+    MDN css :has
+    MDN html textarea
+

+
+
+
+
+
Transition + margin (pause)

+
+
Margin crée de l'espace, permet aussi de déplacer les éléments...
+MDN (transition) : https://developer.mozilla.org/fr/docs/Web/CSS/transition

+
+

+#mousehover_movemargin_element { 
   height: 130px;
   width: 130px;
   background: red;
@@ -489,12 +955,12 @@ p:last-child .para {
   text-align: center;
   display: block; /* par défaut, une div a la propriété "display" == "block" (comme valeur) */
 }
-#mousehover_movemargin:hover > #mousehover_movemargin_element {
+#mousehover_movemargin:hover #mousehover_movemargin_element {
   margin-left: calc(100% - 130px - 50px);
   background:yellow;
   transition: all 1s;
+  cursor: pointer;
 }
-
 

 
 
@@ -504,88 +970,174 @@ p:last-child .para {
+ + + + + +

Positions... left/right/top/bottom

+ +

On peut également déplacer un élément de la page grace à la combinaison de :
+ position: relative | absolute | fixed | sticky
+ left / right / top / bottom: 100px
+ + +

MDN (Position) : https://developer.mozilla.org/fr/docs/Web/CSS/position
+ + 

-#margin_first,
-#margin_seconde,
-#margin_last {
-    display: inline-block;
-    border: 1px solid;
-}    
-.margin_left {
-    margin-left: 100px
+  .moveme {
+    z-index: 999;
+  }
+  .move_relative {
+    position: relative;
+  }
+  .move_absolute {
+    position: absolute;
+  }
+  .move_fixed {
+    position: fixed;
+    opacity: 0;
+    bottom: 0px; right: 0
+  }
+  .moveme:hover {
+    opacity: 0;
+  }
+  
+  /* "Combinateur de voisins directs" (.item + .other) */
+  /* https://developer.mozilla.org/fr/docs/Web/CSS/Next-sibling_combinator */
+  .not_last_move:hover + .moveme,
+  .not_last_move:hover,
+  .move_fixed:hover {
+    opacity: 1;
+  }
+  
+
+  /* encore du CSS avancé... */
+  /* https://css-tricks.com/examples/nth-child-tester/ */
+  /* https://css-tricks.com/how-nth-child-works/ */
+  .moveme:nth-last-child(2) {
+    border: 3px solid red;
+  }
+  .moveme:nth-last-child(1) { background: red; color: #FFF; z-index: 9999999; }
+
+  .petit_padd { padding:4px; background: #FFF }
+  
+
+  #pos_sticky {
+    position: sticky;
+    top: 0;
+    right: 0 !important;
+    float: right;
+    margin: 0;
+    background: aqua;
+  }
+
+ +

+    relative + left:100px; 
+    relative + left:300px;
+    relative + top:-70px;
+    absolute + top:-70px;
+    fixed + bottom: 0px; right: 0;
+
+ + +#pos_sticky + + +
+ + +

Dialog

+ +
+
+
+
+ +

Faisons une petite pause !

+
+ +
+ +
+
+
+
+
+
+ + +

Selection

+ + +

Petite pause, encore une pseudo-classe....
+MDN : https://developer.mozilla.org/fr/docs/Web/CSS/::selection + +


+/* #incognito { pointer-events: none;} */
+
+.code-content ::selection {
+  background: #000;
+  color: #FFF;
 }
-.margin_right {
-    margin-right: 100px
+
+#incognito :is(.censured, .silencied, .unreadable) {
+  background:#000;
+  color: #000;  
+  pointer-events: none;
 }
-.large {
-    width:500px;
+#incognito :is(.censured, .silencied, .unreadable)::selection{
+    color: #000;
 }
-.petite {
-    width:200px;
+
+
+ +

+  

+    

+      Id quis id est cupidatat ea culpa. Excepteur excepteur adipisicing esse ullamco occaecat duis commodo reprehenderit commodo nostrud incididunt. Dolore nisi nostrud aute mollit eu pariatur. In incididunt reprehenderit ut nisi veniam Lorem. Laboris irure occaecat cupidatat et.
+    

+    

+      Velit culpa deserunt commodo magna eiusmod deserunt tempor aute excepteur et labore velit incididunt qui. Labore velit do sunt enim aliquip veniam deserunt deserunt. Mollit proident reprehenderit ullamco. Dolor eu cillum ipsum consequat eu consectetur minim enim commodo dolor sint irure nostrud magna. Adipisicing enim laboris anim consectetur Lorem incididunt dolore minim mollit deserunt ad dolor id ad exercitation. Aliquip irure deserunt eiusmod minim ex nostrud duis irure ad laborum. Lorem cupidatat commodo exercitation laborum mollit sint sint consequat commodo.
+    

+  

+
+ + + +

Textes

+ +

+#text_basics {
+  text-align: center;
+  font-size: 1.2em;
+  line-height: 2em;
+  font-family: sans-serif, Arial;
+  text-decoration: underline;
+  font-style: italic;
+}
+#text_basics p:first-letter {
+  text-transform: uppercase;
 }
 

-  

-    #margin_first
-  

-  

-    #margin_seconde
-  

-  

-    #margin_last
+  

+    
ipsum exercitation adipisicing incididunt fugiat nulla laboris sit consectetur esse sunt laborum nisi nisi nisi ullamco. Deserunt cupidatat occaecat in. Proident voluptate exercitation culpa veniam nulla elit fugiat. Cillum id consequat fugiat dolore culpa proident amet. Lorem est qui quis nulla nostrud labore irure id culpa cupidatat non aute nostrud pariatur. Sint veniam cillum ut veniam voluptate excepteur commodo occaecat elit pariatur laborum. Laborum ad duis cupidatat consequat cillum enim cupidatat enim enim sint labore. Aliqua ipsum aliqua quis occaecat est sunt nulla sit pariatur velit nostrud dolore ipsum est.
-

Margin et Padding (mais aussi border ou encore text-shadow) fonctionnent comme ceci :

- -

-#top_margin_block {
-  width: 100%
-}
-#margin_exemples_wrapper {
-  background: greenyellow;
-  border: 1px solid #000;
-  display: block;
-  clear: both;
-  float: left;
-  width: 100%;
-  margin-bottom: 4rem;
-}
-.margin_exemples {
-  display: inline;
-  border: 1px solid #000;
-  background: chartreuse;
-  padding: 5px 5px 0 5px; /* EXEMPLE Padding */
-  height: 100px; width: 100px;
-  float: left;
-}
-.margin_exemples.margin_autour {
-  margin: 100px 0px 0px 0px; /* EXEMPLE Margin */
-  height: auto; width: auto;
-  min-height: 100px;
-  background: lavender
-}
-
-

-

-  
#top_margin_block

-  
.margin_autour :
margin: 100px 0px 0px 0px;

-  
style : 
margin-top: 10px

-

-
- - - - -
+
+

Alignement manuel (2 colones left/right)

@@ -633,7 +1185,14 @@ p:last-child .para { - Flexbox + +
+
+
+ Flexbox +
+
+
@@ -645,8 +1204,8 @@ p:last-child .para { integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"> - + diff --git a/public/0_min_max_width.html b/public/0_min_max_width.html new file mode 100644 index 0000000..29fa5f6 --- /dev/null +++ b/public/0_min_max_width.html @@ -0,0 +1,156 @@ + + + + 0_min_max_width.html + + + + + + + + + + + + <- Retour

+ + +
CTRL+MAJ+I outils de dev. + CTRL+MAJ+M -> Vue adaptative + +
MDN css CSS_media_queries + MDN css :has + MDN html textarea +
+
+ + +
+ #width_full_page +
+ +
+ #width_bloc_textarea + +
+ +
+ #width_part_vw +
+ +
+
+ .flexible_vw +
+
+ .flexible_vw +
+
+ .flexible_vw +
+
+ + + + + + + \ No newline at end of file diff --git a/public/script_html_infos.js b/public/script_html_infos.js deleted file mode 100644 index 1c3f014..0000000 --- a/public/script_html_infos.js +++ /dev/null @@ -1,172 +0,0 @@ -// Création de la boîte d'information -const infoBox = document.createElement('div'); -infoBox.id = 'info-box'; -infoBox.innerHTML = ` -
- -
-
-
Parent :
-
Enfant :
-
-`; - -// Ajout des styles -const style = document.createElement('style'); -style.textContent = ` - #info-box { - position: fixed; - top: 20px; - right: 20px; - background: #333; - color: white; - padding: 15px 20px; - border-radius: 8px; - min-width: 250px; - box-shadow: 0 4px 6px rgba(0,0,0,0.3); - font-size: 14px; - display: none; - z-index: 9999; - } - - #info-box.visible { - display: block; - } - - #info-box div { - margin: 5px 0; - } - - #info-box strong { - color: #4CAF50; - } - - #info-toggle { - margin-bottom: 10px; - padding-bottom: 10px; - border-bottom: 1px solid #555; - } - - #info-box.no_infos { - max-width: 200px; - display: block; - overflow: hidden; - min-width: auto; - } - - #info-box.no_infos { - #info-toggle { - border-bottom: 0px solid #555; - padding: 0; - margin: 0; - } - #toggle_hide_text { - display: none; - } - } - #info-toggle label { - cursor: pointer; - user-select: none; - } - - #info-content.hidden { - display: none; - } -`; - -// Injection dans le DOM -document.head.appendChild(style); -document.body.appendChild(infoBox); - -// Récupération des éléments d'affichage -const elementInfo = document.getElementById('element-info'); -const elementParent = document.getElementById('element-parent'); -const toggleCheckbox = document.getElementById('toggle-display'); -const infoContent = document.getElementById('info-content'); - -// Clé pour le localStorage -const STORAGE_KEY = 'info-box-hidden-state'; - -// Fonction pour appliquer l'état -function applyToggleState(isHidden) { - if (isHidden) { - infoContent.classList.add('hidden'); - infoBox.classList.add('no_infos'); - toggleCheckbox.checked = true; - } else { - infoContent.classList.remove('hidden'); - infoBox.classList.remove('no_infos'); - toggleCheckbox.checked = false; - } -} - -// Charger l'état depuis localStorage au démarrage -const savedState = localStorage.getItem(STORAGE_KEY); -if (savedState !== null) { - applyToggleState(savedState === 'true'); -} - -// Gestion du toggle -toggleCheckbox.addEventListener('change', function() { - const isHidden = this.checked; - applyToggleState(isHidden); - // Sauvegarder l'état dans localStorage - localStorage.setItem(STORAGE_KEY, isHidden); -}); - -// Écouter l'événement mouseover sur tout le document -document.addEventListener('mouseover', function(e) { - const el = e.target; - - // Ignorer la boîte d'info elle-même - if (el.closest('#info-box')) { - return; - } - - // Récupérer les informations - const tag = el.tagName.toLowerCase(); - const id = el.id; - const classes = el.className; - - // Construire la chaîne au format element#id.class - let infoStr = tag; - if (id) { - infoStr += '#' + id; - } - if (classes) { - // Remplacer les espaces par des points pour les classes multiples - infoStr += '.' + classes.trim().replace(/\s+/g, '.'); - } - - // Construire la chaîne parent au format element#id.class - let parentStr = '(aucun)'; - if (el.parentElement) { - const parentTag = el.parentElement.tagName.toLowerCase(); - const parentId = el.parentElement.id; - const parentClasses = el.parentElement.className; - - parentStr = parentTag; - if (parentId) { - parentStr += '#' + parentId; - } - if (parentClasses) { - parentStr += '.' + parentClasses.trim().replace(/\s+/g, '.'); - } - } - - // Afficher les informations - elementInfo.textContent = infoStr; - elementParent.textContent = parentStr; - - // Rendre la boîte visible - infoBox.classList.add('visible'); -}); - -// Optionnel : cacher la boîte quand on quitte la page -document.addEventListener('mouseout', function(e) { - if (e.relatedTarget === null) { - infoBox.classList.remove('visible'); - } -}); \ No newline at end of file diff --git a/public/style.css b/public/style.css index 4798200..1403a5d 100644 --- a/public/style.css +++ b/public/style.css @@ -1,7 +1,83 @@ +:root { + --property: #b77804; + --value: #0451A5; + --attr_value: #2aa198; +} + +.token.tag { + color: #800000 !important; + font-weight:400; +} +.token.punctuation { + color: #800000 !important; + font-weight: 480; +} +.token.property, +.color.property { + color: var(--property) !important; +} + +.token.value, +.color.value { + color: var(--value) !important; +} +.token.selector, +.token.attr-value { + color: var(--attr_value) !important; + font-weight: 480; +} + + +.language-markup .token.attr-name { + color: #E50000 !important; + font-weight: 500; +} +.language-markup .token.value { + color: #0451A5 !important; + font-weight: 500; +} + +code[class*="language-markup"] { + color: #595959 !important; +} +code[class*="language-markup"]:hover { + color: #898989 !important; +} + +code[class*="language-css"] { +color: var(--value) !important; +} + +.token.number { +color: #FF0095 !important; +} +.token.unit { +color: #7400DA; +} +.token.hexcode.color { + color: #00c3ff; +} + +.token.function { + color: #4A8147 !important; +} + + + +.token.comment { + color: #008000b3 !important; +} +pre[class*="language-"]:hover +.token.comment { + color: #04008017 !important; +} + + body, html { margin: 0; padding: 0; + counter-reset: compteListe; } body { font-family: sans-serif; @@ -9,14 +85,14 @@ body { max-width: 1280px; } -h1 { - text-align: center; -} +/* h1 { */ + /* text-align: center; */ +/* } */ -#navbar { +#navbar { background-color: #fff !important; border-radius: 2px; - position: sticky; + /* position: sticky; */ top: 0px; width: 100%; display: block; @@ -49,12 +125,15 @@ h1 { background: #f2f2ff; padding: 15px 10px 20px 20px; } +/* .resume + .wrap_css_html { + margin-top: -20px; +} */ .code-toolbar + .code-toolbar { margin-top: -30px !important; } -.exemple, +/* .exemple, */ .code-content { /* border: 1px solid #e8cf8b; */ border-radius: 0 0 3px 3px; @@ -82,20 +161,67 @@ pre[class*="language-"] { margin-top: 0 !important; padding-bottom: 30px !important; } -.exemple { +/* .exemple { padding-top: 22px; -} +} */ pre.language-css { background: #f5fde3 !important; } - +codecss, codescaped { background-color: #fdf6e3; border-radius: 0 0 3px 3px; padding: 3px; color: #000 !important; } +codecss { + background-color: #f5fde3; +} +codescaped.espace { + white-space: pre; + display: block; + border: 1px solid #e8cf8b; + padding: 15px 20px 22px 20px; +} + +.wrap_css_html_button { + position: relative; + z-index: 9999; + float: right; + margin-left: -310px; + right: -11px; + top: -12px; + font-size: 12px; + cursor: pointer; + background: darkgreen; + border: 2px solid darkgreen; + border-radius: 0 4px 0px 4px; + color: #fff; +} + +.wrap_anchor_link { + float: left; + position: absolute; + right: 25px; + text-decoration: none; + z-index: 999; + margin-right: 13px; + font-size: 16px; + margin-top: -11px; + background: rgb(161, 255, 161); + color: #000000; + padding: 1px 7px; + + float: right; + margin-right: 33px; + position: sticky !important; + margin-left: -570px; +} +.anchor_link { + color: rgb(60, 99, 171); +} + .file { background: #e3eafd; font-style: normal; @@ -104,15 +230,19 @@ codescaped { padding: 0 7px; } +.wrap_css_html div.code-toolbar[data-type="language-css"] > .toolbar { + margin-top: 10px; +} + code:not([class]) { font-size: 1.3em; color: #000; background: #fdf6e3; padding: 0 5px; } -:is(.code-toolbar) + :not(.exemple) { +/* :is(.code-toolbar) + :not(.exemple) { margin-top: 1rem; -} +} */ :is(.exemple, .code-content) p { color: #000; } @@ -122,7 +252,7 @@ div.code-toolbar > .toolbar { } .toolbar-item:first-child span { border-radius: 0 !important; - background: #FFF !important; + background: #fff !important; box-shadow: none !important; left: -10px !important; position: relative !important; @@ -133,15 +263,34 @@ div.code-toolbar > .toolbar { white-space: break-spaces !important; } -code.key { +/* code.language-css::before { + content: attr(id) " -- " attr(data-num_css); + position: relative; + float: right; + margin-right: 100px; + margin-top: -12px; + font-size: 12px; +} */ + +code.term, +code.key, +kdb.key { background: gray; color: #fff !important; font-size: 1.3em; font-weight: bold; padding: 3px 13px; border-radius: 4px; + white-space: pre-line; +} +kdb.key { + font-size: 1em; + padding: 0px 10px; +} +code.term { + background: rgb(237, 221, 221); + color: #000000 !important; } - hr.space { height: 2rem; border: 0; @@ -151,3 +300,76 @@ hr.visible { height: 10px; margin: 3rem 0; } + +.copy-notification { + color: #ffffff; + background-color: rgba(0, 0, 0, 1); + padding: 20px; + border-radius: 20px; + position: fixed; + top: 30%; + left: 50%; + /* width: 150px; */ + margin-top: -30px; + margin-left: -85px; + display: none; + text-align: center; +} + +.wrap_css_html { + border: 2px solid #59b2a5; + padding: 10px; + margin-left: -10px; + margin-right: -10px; + border-radius: 6px; +} +.wrap_css_html .code-toolbar:last-child { + margin-bottom: 0; +} +.wrap_css_html + .wrap_css_html { + margin-top: 3rem; +} + +.wrap_css_html + *:not(.wrap_css_html) { + margin-top: 3rem; +} + +.wrap_css_html:target { + border-color: red !important; +} + + +.color.property { + color: var(--property) !important; + font-weight: 550 !important; +} +.color.value { + color: var(--value) !important; +} + + +:not(.code-content) > :is(h1,h2,h3,h4,h5,h6) { + background: #000; + color: #FFF; + padding: 10px 20px; +} + +#next_flexbox { + display: block; + float: left; + margin: 3rem 0; +} + +.hash_title { + position: absolute; + margin-left: -110px; + text-decoration: none; + width: 80px; + text-align: right; +} + +.hash_title::before { + counter-increment: compteListe 1; + content: counter(compteListe) " "; + font-size: 13px; +} \ No newline at end of file