Divers‎ > ‎Atelier <coding>‎ > ‎

CSS




Apprendre avec Froggy la grenouille






1. Comment le CSS fonctionne-t-il ?

CSS est la meilleure moitié de HTML. Et pour le codage, leur statut n'est pas égal : HTML s'occupe du gros-œuvre (la structure), tandis que CSS fait les finitions (la présentation).
on peut ajouter du code CSS avec l'attribut style. Par exemple, on peut fixer le type et le corps de la police d'un paragraphe.
Copier puis coller le code ci-dessus dans l'éditeur qui se trouve en bas de page.


La syntaxe CSS de base ( Sélecteur / propriété / valeur)


Créer un fond en dégradé : les dégradés de type linéaire

Pour créer un dégradé linéaire, on utilise les mots clefs linear-gradient. On peut ensuite spécifier autant de valeurs que souhaitées, chaque valeur correspondant à une couleur de notre dégradé.

Afin que le tout fonctionne correctement, vous devez mentionner chaque préfixe vendeur et il est recommandé de finir avec le linear-gradient sans aucun préfixe (ce sera la valeur par défaut) comme ceci :


2. Ma première page avec CSS


<html>

 <head>

 <title>Ma première page avec CSS</title>

 <style type="text/css">

 h1 {font-size: 30px; font-family: arial;}

 h2 {font-size: 15px; font-family: courier;}

 p {font-size: 8px; font-family: "times new roman";}

 </style>

 </head>

 <body>

 <h1>Ma première page avec CSS</h1>

 <h2>Bienvenue sur ma première page avec CSS</h2>

 <p>Ici vous pouvez voir CSS à l'œuvre </p>

 </body>

</html>

Page pour tester le code : http://www.hgndp.com/ressources-pedagogiques/atelier-coding/html-editor



3. Modèles de boîte


Modèle des boïtes
Le modèle des boîtes CSS se base sur le principe que tous les éléments utilisés en HTML sont mis en forme sur la base de zones rectangulaires. Ainsi chaque élément lorsqu'il est rendu dans le navigateur aura les contours suivants :

  - Le contenu de l'élément dont la taille est définie par sa largeur width et sa hauteur height
  - Son espacement intérieur : propriété padding
  - Sa bordure : propriété border
  - Sa marge : propriété margin

Ainsi lorsqu'une mise en page précise est nécessaire il est important de tenir compte et d'appliquer au mieux ce modèle pour obtenir le rendu attendu.


4. Gradient de couleur


Créer un fond en dégradé : les dégradés de type linéaire

Pour créer un dégradé linéaire, on utilise les mots clefs linear-gradient. On peut ensuite spécifier autant de valeurs que souhaitées, chaque valeur correspondant à une couleur de notre dégradé.

Afin que le tout fonctionne correctement, vous devez mentionner chaque préfixe vendeur et il est recommandé de finir avec le linear-gradient sans aucun préfixe (ce sera la valeur par défaut) comme ceci :




Code CSS pour ce gradient de couleur :


 background: -webkit-linear-gradient(90deg, #c21500 10%, #ffc500 90%); /* Chrome 10+, Saf5.1+ */

 background:    -moz-linear-gradient(90deg, #c21500 10%, #ffc500 90%); /* FF3.6+ */

 background:     -ms-linear-gradient(90deg, #c21500 10%, #ffc500 90%); /* IE10 */

 background:      -o-linear-gradient(90deg, #c21500 10%, #ffc500 90%); /* Opera 11.10+ */

 background:         linear-gradient(90deg, #c21500 10%, #ffc500 90%); /* W3C */


<table border="1" bordercolor="#888" cellspacing="0" style="background:-webkit-linear-gradient(90deg,#c21500 10%,#ffc500 90%);background:-moz-linear-gradient(90deg,#c21500 10%,#ffc500 90%);background:-ms-linear-gradient(90deg,#c21500 10%,#ffc500 90%);background:-o-linear-gradient(90deg,#c21500 10%,#ffc500 90%);background:linear-gradient(90deg,#c21500 10%,#ffc500 90%);border-width:1px">

<tbody><tr><td style="width:711px;height:48px">&nbsp;</td></tr></tbody></table>


Page pour tester le code : http://www.hgndp.com/ressources-pedagogiques/atelier-coding/html-editor



Lien pour les autres gradients


Lien pour l'explorateur de gradients


5. Quelques exemples. (fonctionne avec Chrome, Safari ...)


code css

résultat

<style type="text/css">

.roundedImage{

   overflow:hidden;

   -webkit-border-radius:50px;

   -moz-border-radius:50px;

   border-radius:50px;

   width:90px;

   height:90px;

}

</style>

<div class="roundedImage" style="background:url(http://static.debray-jerome.fr/49/images/slideshow/1.jpg) no-repeat 0px 0px;" >

   &nbsp;

</div>

<style type="text/css">

.roundedImage{

   overflow:hidden;

   -webkit-border-radius:50px;

   -moz-border-radius:50px;

   border-radius:50px;

   width:90px;

   height:90px;

}

</style>

<div class="roundedImage">

   <img src="http://www.html5-css3-pense-bete.fr/img/cms/box-shadow.jpg" alt="1"/>

</div>



Page pour tester le code : http://www.hgndp.com/ressources-pedagogiques/atelier-coding/html-editor


















La liste complète des 147 couleurs en CSS, par ordre alphabétique.
CouleurNomValeur en HexValeur en Decimal
aliceblue#F0F8FF240,248,255
antiquewhite#FAEBD7250,235,215
aqua#00FFFF0,255,255
aquamarine#7FFFD4127,255,212
azure#F0FFFF240,255,255
beige#F5F5DC245,245,220
bisque#FFE4C4255,228,196
black#0000000,0,0
blanchedalmond#FFEBCD255,235,205
blue#0000FF0,0,255
blueviolet#8A2BE2138,43,226
brown#A52A2A165,42,42
burlywood#DEB887222,184,135
cadetblue#5F9EA095,158,160
chartreuse#7FFF00127,255,0
chocolate#D2691E210,105,30
coral#FF7F50255,127,80
cornflowerblue#6495ED100,149,237
cornsilk#FFF8DC255,248,220
crimson#DC143C220,20,60
cyan#00FFFF0,255,255
darkblue#00008B0,0,139
darkcyan#008B8B0,139,139
darkgoldenrod#B8860B184,134,11
darkgray#A9A9A9169,169,169
darkgreen#0064000,100,0
darkgrey#A9A9A9169,169,169
darkkhaki#BDB76B189,183,107
darkmagenta#8B008B139,0,139
darkolivegreen#556B2F85,107,47
darkorange#FF8C00255,140,0
darkorchid#9932CC153,50,204
darkred#8B0000139,0,0
darksalmon#E9967A233,150,122
darkseagreen#8FBC8F143,188,143
darkslateblue#483D8B72,61,139
darkslategray#2F4F4F47,79,79
darkslategrey#2F4F4F47,79,79
darkturquoise#00CED10,206,209
darkviolet#9400D3148,0,211
deepPink#FF1493255,20,147
deepskyblue#00BFFF0,191,255
dimgray#696969105,105,105
dimgrey#696969105,105,105
dodgerblue#1E90FF30,144,255
firebrick#B22222178,34,34
floralwhite#FFFAF0255,250,240
forestgreen#228B2234,139,34
fuchsia#FF00FF255,0,255
gainsboro#DCDCDC220,220,220
ghostwhite#F8F8FF248,248,255
gold#FFD700255,215,0
goldenrod#DAA520218,165,32
gray#808080128,128,128
green#0080000,128,0
greenyellow#ADFF2F173,255,47
grey#808080128,128,128
honeydew#F0FFF0240,255,240
hotpink#FF69B4255,105,180
indianred#CD5C5C205,92,92
indigo#4B008275,0,130
ivory#FFFFF0255,255,240
khaki#F0E68C240,230,140
lavender#E6E6FA230,230,250
lavenderblush#FFF0F5255,240,245
lawngreen#7CFC00124,252,0
lemonchiffon#FFFACD255,250,205
lightblue#ADD8E6173,216,230
lightcoral#F08080240,128,128
lightcyan#E0FFFF224,255,255
lightgoldenrodyellow#FAFAD2250,250,210
lightgray#D3D3D3211,211,211
lightgreen#90EE90144,238,144
lightgrey#D3D3D3211,211,211
lightpink#FFB6C1255,182,193
lightsalmon#FFA07A255,160,122
lightseagreen#20B2AA32,178,170
lightskyblue#87CEFA135,206,250
lightslategray#778899119,136,153
lightslategrey#778899119,136,153
lightsteelblue#B0C4DE176,196,222
lightyellow#FFFFE0255,255,224
lime#00FF000,255,0
limegreen#32CD3250,205,50
linen#FAF0E6250,240,230
magenta#FF00FF255,0,255
maroon#800000128,0,0
mediumaquamarine#66CDAA102,205,170
mediumblue#0000CD0,0,205
mediumorchid#BA55D3186,85,211
mediumpurple#9370DB147,112,219
mediumseagreen#3CB37160,179,113
mediumslateblue#7B68EE123,104,238
mediumspringgreen#00FA9A0,250,154
mediumturquoise#48D1CC72,209,204
mediumvioletred#C71585199,21,133
midnightblue#19197025,25,112
mintcream#F5FFFA245,255,250
mistyrose#FFE4E1255,228,225
moccasin#FFE4B5255,228,181
navajowhite#FFDEAD255,222,173
navy#0000800,0,128
oldlace#FDF5E6253,245,230
olive#808000128,128,0
olivedrab#6B8E23107,142,35
orange#FFA500255,165,0
orangered#FF4500255,69,0
orchid#DA70D6218,112,214
palegoldenrod#EEE8AA238,232,170
palegreen#98FB98152,251,152
paleturquoise#AFEEEE175,238,238
palevioletred#DB7093219,112,147
papayawhip#FFEFD5255,239,213
peachpuff#FFDAB9255,218,185
peru#CD853F205,133,63
pink#FFC0CB255,192,203
plum#DDA0DD221,160,221
powderblue#B0E0E6176,224,230
purple#800080128,0,128
rebeccapurple#663399102,51,153
red#FF0000255,0,0
rosybrown#BC8F8F188,143,143
royalblue#4169E165,105,225
saddlebrown#8B4513139,69,19
salmon#FA8072250,128,114
sandybrown#F4A460244,164,96
seagreen#2E8B5746,139,87
seashell#FFF5EE255,245,238
sienna#A0522D160,82,45
silver#C0C0C0192,192,192
skyblue#87CEEB135,206,235
slateblue#6A5ACD106,90,205
slategray#708090112,128,144
slategrey#708090112,128,144
snow#FFFAFA255,250,250
springgreen#00FF7F0,255,127
steelblue#4682B470,130,180
tan#D2B48C210,180,140
teal#0080800,128,128
thistle#D8BFD8216,191,216
tomato#FF6347255,99,71
turquoise#40E0D064,224,208
violet#EE82EE238,130,238
wheat#F5DEB3245,222,179
white#FFFFFF255,255,255
whitesmoke#F5F5F5245,245,245
yellow#FFFF00255,255,0
yellowgreen#9ACD32154,205,50





Tutotials CSS



 https://thimble.mozilla.org/fr/anonymous/dd8060f6-b5ff-49d7-8753-514fd855cc4e
Thimble est un éditeur de code en ligne qui facilite la création et la publication de vos propres pages web tout en apprenant le langage HTML, CSS et le JavaScript.

 http://fr.learnlayout.com/   pour apprendre la mise en page  (19 leçons) en français très utile pour créer
un site web
 http://learn.shayhowe.com/html-css/building-your-first-web-page/ les bases en anglais 
https://zeef.com/?query=tag%3Acss Portail vers d'autres 
sites
 en anglais 
 http://tympanus.net/codrops/css_reference/ les références les + importantes en anglais html / CSS / résultat
    
 http://www.cssbasics.com/

 Possibilité de télécharger les 18 chapitres en anglais génial pour apprendre

  • Générateur de tableau Divtable  en #HTML + #CSS, basés au choix sur la balise <div> ou sur <table>
   



 Code CSS Résultat
 

<br>
<div style="display:table-cell;width:400px;text-align:center;height:40px;vertical-align:middle;background-color:#3369e8;font-family:Verdana,Arial,sans-serif;font-weight:bold;font-size:14px;color:#fff;border-radius:20px">Le CSS avec google sites </div>
<br>


 


Le CSS avec google site


 

<br>
<div style="display:table-cell;width:400px;text-align:center;height:40px;vertical-align:middle;background-color:#3369e8;font-family:Verdana,Arial,sans-serif;font-weight:bold;font-size:14px;color:#fff;border-radius:20px">Le CSS avec google sites </div>
<br>


 




utilisation de la box-shadow

 


<br>
<div style="overflow:auto;font-family:Verdana;font-size:12px;padding:0.4em;
margin-top:15px;margin-bottom:15px;line-height:100%;color:rgb(0,0,0);
white-space:normal;word-break:keep-all;border:2px solid rgb(96,96,96);
border-radius:6px;white-space:Normal;width:350px;height:150px">
<code style="font-family:Verdana;font-size:12px;padding:0.4em;
color:rgb(0,0,0);border-radius:0px;white-space:pre-wrap;
display:block;background:rgb(255,255,255)">
</code></div>
<br>



 






Texte en overflow


 

<br>
<div>
<div style="font-size:14px">
<h2 style="font-size:14px;display:table-cell;width:300px;
text-align:center;height:22px;
vertical-align:middle;font-family:Verdana,Arial,sans-serif;
color:rgb(255,255,255);box-shadow:rgb(163,160,161) 5px 5px 3px;
background-color:rgb(51,105,232)"> 1. </h2>
</div>



 





1.

 

<svg width="72" height="72" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><style>.spinner{animation:1s linear infinite opacity-svg;transform-origin:50%}@keyframes opacity-svg{0%{opacity:1}to{opacity:0}}.spinnerN1{transform:rotate(0deg) translateY(-30px);animation-delay:0}.spinnerN2{transform:rotate(30deg) translateY(-30px);animation-delay:.08333333333333333s}.spinnerN3{transform:rotate(60deg) translateY(-30px);animation-delay:.16666666666666666s}.spinnerN4{transform:rotate(90deg) translateY(-30px);animation-delay:.25s}.spinnerN5{transform:rotate(120deg) translateY(-30px);animation-delay:.3333333333333333s}.spinnerN6{transform:rotate(150deg) translateY(-30px);animation-delay:.4166666666666667s}.spinnerN7{transform:rotate(180deg) translateY(-30px);animation-delay:.5s}.spinnerN8{transform:rotate(210deg) translateY(-30px);animation-delay:.5833333333333334s}.spinnerN9{transform:rotate(240deg) translateY(-30px);animation-delay:.6666666666666666s}.spinnerN10{transform:rotate(270deg) translateY(-30px);animation-delay:.75s}.spinnerN11{transform:rotate(300deg) translateY(-30px);animation-delay:.8333333333333334s}.spinnerN12{transform:rotate(330deg) translateY(-30px);animation-delay:.9166666666666666s}</style><path fill="none" d="M0 0h100v100H0z"/><rect x="46.5" y="40" width="7" height="20" rx="5" ry="5" fill="#5c5c5c" class="spinner spinnerN1"/><rect x="46.5" y="40" width="7" height="20" rx="5" ry="5" fill="#5c5c5c" class="spinner spinnerN2"/><rect x="46.5" y="40" width="7" height="20" rx="5" ry="5" fill="#5c5c5c" class="spinner spinnerN3"/><rect x="46.5" y="40" width="7" height="20" rx="5" ry="5" fill="#5c5c5c" class="spinner spinnerN4"/><rect x="46.5" y="40" width="7" height="20" rx="5" ry="5" fill="#5c5c5c" class="spinner spinnerN5"/><rect x="46.5" y="40" width="7" height="20" rx="5" ry="5" fill="#5c5c5c" class="spinner spinnerN6"/><rect x="46.5" y="40" width="7" height="20" rx="5" ry="5" fill="#5c5c5c" class="spinner spinnerN7"/><rect x="46.5" y="40" width="7" height="20" rx="5" ry="5" fill="#5c5c5c" class="spinner spinnerN8"/><rect x="46.5" y="40" width="7" height="20" rx="5" ry="5" fill="#5c5c5c" class="spinner spinnerN9"/><rect x="46.5" y="40" width="7" height="20" rx="5" ry="5" fill="#5c5c5c" class="spinner spinnerN10"/><rect x="46.5" y="40" width="7" height="20" rx="5" ry="5" fill="#5c5c5c" class="spinner spinnerN11"/><rect x="46.5" y="40" width="7" height="20" rx="5" ry="5" fill="#5c5c5c" class="spinner spinnerN12"/></svg>


 






Pour aller plus loin






DivTable est donc un outil en ligne vous permettant de concervoir des tableaux HTML de manière graphique. 
Un peu comme dans Word/Writer.
D'ailleurs DivTable permet également de convertir un tableau en div.

Générateur de tableu