Code CSS

Code CSS

Modèle de page à télécharger

<style> | Type de balises | Blocks Naturels | Blocks alignés | Inline en block | Balises | Polices

3 block simples | display: inline-block; | + hauteur et couleurs

Wrap naturel | display: flex; | flex-wrap: wrap; | flex-wrap: nowrap;

justify-content: center; | align-items: center; | align-items: center; 2

Balise tr | Rotation d'Images

Structure d'une page web

Balise : style type texte/css

Code HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Titre de la page</title>

<style type="text/css">

</style>

</head>

<body>

 

</body>
</html>

Code CSS

/*------ Mes BALISES ------*/

<style type="text/css">

h1 {

}

p {

}

a:link {

}

img {

}

div {

}

/*------ Mes CLASS ------*/

.maClass {

}

/*------ Mes ID ------*/

#monID {

}

</style>

Code CSS propre

.maClass {

font-size: 30px;
color:#FFF;
text-align:center;

}


 

Exemple de balises de type block et de type inline

les inlines sont à l'intérieur de blocks


block h1
inline 1 - span
inlne 2 - a
inline 3 - img
block p
inline 1 - strong
inlne 2 - em
inline u
block li
inline 1 - span
inlne 2 - a
inline3 - img
block div
inline 1 - texte
inlne 2 - a
inline 3 - img


exemple de block div + objets inlines

ma div avec texte + lien + imageDescription de l'image en quelques mots


Mofifier les propriétés naturelles des balises

3 Blocks


naturels avant modification



 
 
 


Code HTML

<div class="Boite-1 brose">&nbsp;</div>
<div class="Boite-1 bjaune">&nbsp;</div>
<div class="Boite-1 bviolet">&nbsp;</div>

Code CSS

.Boite-1 {
margin-left:auto;
margin-right:auto;
height: 100px;
width: 100px;
}

.brose {
background-color:#e2448e;
}

.bjaune {
background-color:#FC3;
}

.bviolet {
background-color:#7746a2;
}



Modifier les Blocks


Fonction : display:inline-block;

 
 
 

Code HTML

<div class="Globale-2">
     <div class="Boite-2 brose">&nbsp;</div>
     <div class="Boite-2 bjaune">&nbsp;</div>
     <div class="Boite-2 bviolet">&nbsp;</div>
</div>

Code CSS

.Globale-2 {
text-align:center;
}

.Boite-2 {
margin-left:auto;
margin-right:auto;
height: 100px;
width: 100px;
display:inline-block;
}

.brose {
background-color:#e2448e;
}

.bjaune {
background-color:#FC3;
}

.bviolet {
background-color:#7746a2;
}



De type Inline


Balises naturelles

par exemple dans une balise strong.



Code HTML

<p>par exemple dans une balise <strong class="hauteurBlock">strong</strong>.</p>

Code CSS

.hauteurBlock {
background-color:#e2448e;
width: 100px;
height: 100px;
padding-top: 70px;
display:inline-block;
}



Les différentes Balises

Titres



Titre 1

Titre 2

Titre 3

Titre 4 - rose espacement



Paragraphes

Paragraphe

  • Liste à puces 1
  • Liste à puces 2
  • Liste à puces 3


DIV

 


Code HTML

<h1>Titre 1</h1>
<h2>Titre 2</h2>
<h3 class="violet">Titre 3</h3>
<h4 class="rose espacement">Titre 4 - rose espacement</h4>
<p>Paragraphe</p>

<ul>
     <li>Liste à puces 1</li>
     <li>Liste à puces 2</li>
     <li>Liste à puces 3</li>
</ul>

<div class="maDiv">&nbsp;</div>

Code CSS


h1 {
font-size:48px;

}

h2 {
font-size:36px;
}

h3 {
font-size:30px;
font-style:italic;
}

h4 {
font-weight:bold;
font-size:25px;
}

p {
font-size:35px;
}

ul {
font-size: 24px;
color:#e2448e;
}

li {
margin-bottom: 10px;
}

.maDiv {
background-color:#e2448e;
width: 100px;
height: 100px;
margin-left:auto;
margin-right:auto;
}




Format des polices

Différents formats



font-size: 300%;

font-size: 2.3em;

font-size: 6VW;

font-size: 36px;



Code HTML

<p class="fCSS-pourcentage">font-size: 300%;</p>

<p class="fCSS-em"> font-size: 2.3em;</p>

<p class="fCSS-responsive"> font-size: 6VW;</p>

<p class=" fCSS-pixel"> font-size: 36px;</p>

Code CSS

.fCSS-pourcentage {
font-size:300%;
text-align:center;

}

.fCSS-em {
font-size: 2.3em;
text-align:center;
}

.fCSS-responsive {
font-size: 6vw;
text-align:center;
}

.fCSS-pixel {
font-size:36px;
text-align:center;
}



Différents Blocks

1er cadre

alignement simple


1
2
3


Code HTML

<div class="les-cadres1">
     <div class="cadre1">1</div>
     <div class="cadre1">2</div>
     <div class="cadre1">3</div>
</div>

Code CSS

/*------------ cadre 1 ---------------*/

.les-cadres1 {
border:3px #7030A0 dashed;
border-radius: 10px;
background-color:#FFF;
width: 90%;
text-align:center;
margin-left:auto;
margin-right:auto;

}

.cadre1 {
font-size: 30px;
border:1px #d01870 dotted;
border-radius: 10px;
background-color:#FFF;
width: 40%;
margin-left:auto;
margin-right:auto;
}



2ème cadre

display: inline-block;


1
2
3


Code HTML

<div class="les-cadres2">
     <div class="cadre2">1</div>
     <div class="cadre2">2</div>
     <div class="cadre2">3</div>
</div>

Code CSS

/*------------ cadre 2 ---------------*/

.les-cadres2 {
border:3px #7030A0 dashed;
border-radius: 10px;
background-color:#FFF;
width: 90%;
margin-left:auto;
margin-right:auto;
}


.cadre2 {
font-size: 30px;
border:1px #d01870 dotted;
border-radius: 10px;
text-align:center;
background-color:#FFF;
width: 32%;
display:inline-block;
}

 





3ème cadre

+ hauteur et couleurs


1
2
3


Code HTML

<div class="les-cadres3">
<div class="cadre3 brose">1</div>
<div class="cadre3 bjaune">2</div>
<div class="cadre3 bviolet">3</div>
</div>

Code CSS

/*------------ cadre 3 ---------------*/

.les-cadres3 {
border:3px #7030A0 dashed;
border-radius: 10px;
background-color:#FFF;
width: 90%;
height: 200px;
margin-left:auto;
margin-right:auto;
}


.cadres3 {
font-size: 30px;
border:1px #d01870 dotted;
color:#FFF;
text-align:center;
padding-top: 8px;
border-radius: 10px;
width: 32%;
height: 40px;
display:inline-block;
}

.brose {
background-color:#e2448e;
}

.bjaune {
background-color:#FC3;
}

.bviolet {
background-color:#7746a2;
}





4ème cadre

Wrap naturel

1
2
3


Code HTML

<div class="les-cadres4">
     <div class="cadre4 brose">1</div>
     <div class="cadre4 bjaune">2</div>
     <div class="cadre4 bviolet">3</div>
</div>

Code CSS

/*------------ cadre 4 ---------------*/

.les-cadres4 {
border:3px #7030A0 dashed;
border-radius: 10px;
background-color:#FFF;
width: 90%;
margin-left:auto;
margin-right:auto;
}

.cadre4 {
font-size: 30px;
border:1px #d01870 dotted;
color:#FFF;
text-align:center;
border-radius: 10px;
width: 200px;
height: 100px;
display:inline-block;
}

.brose {
background-color:#e2448e;
}

.bjaune {
background-color:#FC3;
}

.bviolet {
background-color:#7746a2;
}





5ème cadre

display: flex;

1
2
3


Code HTML

<div class="les-cadres5">
     <div class="cadre5 brose">1</div>
     <div class="cadre5 bjaune">2</div>
     <div class="cadre5 bviolet">3</div>
</div>

Code CSS

/*------------ cadre 5 ---------------*/

.les-cadres5 {
border:3px #7030A0 dashed;
border-radius: 10px;
background-color:#FFF;
width: 100%;
height: 200px;
display: flex;
}

.cadre5 {
font-size: 30px;
border:1px #d01870 dotted;
color:#FFF;
border-radius: 10px;
width: 200px;
height: 100px;
}

.brose {
background-color:#e2448e;
}

.bjaune {
background-color:#FC3;
}

.bviolet {
background-color:#7746a2;
}



6ème cadre

flex-wrap: wrap;

1
2
3


Code HTML

<div class="les-cadres6">
     <div class="cadre6 brose">1</div>
     <div class="cadre6 bjaune">2</div>
     <div class="cadre6 bviolet">3</div>
</div>

Code CSS

/*------------ cadre 6 ---------------*/
.les-cadres6 {
border:3px #7030A0 dashed;
border-radius: 10px;
background-color:#FFF;;
width: 100%;
height: 200px;
display: flex;
flex-wrap: wrap;
 }

.cadre6 {
font-size: 30px;
border:1px #d01870 dotted;
color:#FFF;
border-radius: 10px;
width: 200px;
height: 100px;
}

.brose {
background-color:#e2448e;
}

.bjaune {
background-color:#FC3;
}

.bviolet {
background-color:#7746a2;
}





7ème cadre

flex-wrap: nowrap;

1
2
3


Code HTML

<div class="les-cadres7">
<div class="cadre7 brose">1</div>
<div class="cadre7 bjaune">2</div>
<div class="cadre7 bviolet">3</div>
</div>

Code CSS

/*------------ cadre 7 ---------------*/
.les-cadres7 {
border:3px #7030A0 dashed;
border-radius: 10px;
background-color:#FFF;
width: 100%;
height: 200px;
display: flex;
flex-wrap: nowrap;
}

.cadre7 {
font-size: 30px;
border:1px #d01870 dotted;
color:#FFF;
border-radius: 10px;
width: 200px;
height: 100px;
}

.brose {
background-color:#e2448e;
}

.bjaune {
background-color:#FC3;
}

.bviolet {
background-color:#7746a2;
}





8ème cadre

justify-content: center;

justify-content: center;
justify-content: flex-start;
justify-content: flex-end;

1
2
3


Code HTML

<div class="les-cadres8">
     <div class="cadre8 brose">1</div>
     <div class="cadre8 bjaune">2</div>
     <div class="cadre8 bviolet">3</div>
</div>

Code CSS

/*------------ cadre 8 ---------------*/
.les-cadres8 {
border:3px #7030A0 dashed;
border-radius: 10px;
background-color:#FFF;
width: 100%;
height: 200px;
display: flex;
justify-content: center;
}

.cadre8 {
font-size: 30px;
border:1px #d01870 dotted;
color:#FFF;
border-radius: 10px;
width: 200px;
height: 100px;
}

.brose {
background-color:#e2448e;
}

.bjaune {
background-color:#FC3;
}

.bviolet {
background-color:#7746a2;
}



9ème cadre

align-items: center;

1
2
3


Code HTML

<div class="les-cadres9">
     <div class="cadre9 brose">1</div>
     <div class="cadre9 bjaune">2</div>
     <div class="cadre9 bviolet">3</div>
</div>

Code CSS

/*------------ cadre 9 ---------------*/
.les-cadres9 {
border:3px #7030A0 dashed;
border-radius: 10px;
background-color:#FFF;
width: 100%;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
}

.cadre9 {
font-size: 30px;
border:1px #d01870 dotted;
color:#FFF;
border-radius: 10px;
width: 200px;
height: 100px;

}

.brose {
background-color:#e2448e;
}

.bjaune {
background-color:#FC3;
}

.bviolet {
background-color:#7746a2;
}



10ème cadre

align-items: center; 2

1
2
3


Code HTML

<div class="les-cadres10">
     <div class="cadre10 brose">1</div>
     <div class="cadre10 bjaune">2</div>
     <div class="cadre10 bviolet">3</div>
</div>

Code CSS

/*------------ cadre 10 ---------------*/
.les-cadres10 {
border:3px #7030A0 dashed;
border-radius: 10px;
background-color:#FFF;
width: 100%;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
}

.cadre10 {
font-size: 30px;
border:1px #d01870 dotted;
color:#FFF;
border-radius: 10px;
width: 200px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}

.brose {
background-color:#e2448e;
}

.bjaune {
background-color:#FC3;
}

.bviolet {
background-color:#7746a2;
}



Html Table et la balise « tr »

Ajouter une bordure à la table et aux lignes (Balises TR)

Notes : les bordures ne s'affichent pas sur certains thèmes Shopify

Voici ce qu'il devrait afficher

Tableau tel qu'il devrait apparaitre

J'ai dû le trafiquer un peu pour Shopify. Malgré cela, ce n'est pas encore ça

 
Ligne 1
 
Ligne 2
 

Code HTML

<table cellspacing="0" cellpadding="0">
<col >
<tr>
<td >&nbsp;</td>
</tr>
<tr class="border_ligne1">
<td align="center">Ligne 1</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr class="border_ligne2">
<td align="center">Ligne 2</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>



Code CSS

table {
border: solid #9f3388 2px;
border-radius: 10px;
margin-left:auto;
margin-right:auto;
}

tr.border_ligne1 td {
border-bottom: 1px #7746a2 dashed;
border-top: 1px #7746a2 dashed;
}

tr.border_ligne2 td {
border-bottom: 1px #7746a2 solid;
border-top: 1px #7746a2 solid;
}



Rotation d'Images

360°


Code HTML

<p align="center">

<img class="rotation" src="https://cdn.shopify.com/s/files/1/0269/6308/3347/files/Grenades.jpg?v=1600091813"width="200" />

</p>

 


Code CSS

/*------------ ROTATION ---------------*/
.rotation {
border-radius: 50%;
transition: transform .8s ease-in-out;
transition: transform .8s ease-in-out;
}

.rotation:hover {
transform: rotate(360deg);
transform: rotate(360deg);
}