Accueil / Code CSS

Code CSS

Modèle de page à télécharger

ALLER EN BAS
RETOUR VERS LE HAUT

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;

}


 

RETOUR VERS LE HAUT

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


RETOUR VERS LE HAUT

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;
}



RETOUR VERS LE HAUT

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;
}



RETOUR VERS LE HAUT

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;
}



RETOUR VERS LE HAUT

Les différentes Balises

Titres



Titre 1

Titre 2

Titre 3

Titre 4 - rose espacement



Paragraphes

Paragraphe



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;
}




RETOUR VERS LE HAUT

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;
}



RETOUR VERS LE HAUT

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;
}



RETOUR VERS LE HAUT

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;
}

 



RETOUR VERS LE HAUT


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;
}





RETOUR VERS LE HAUT

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;
}



RETOUR VERS LE HAUT


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;
}



RETOUR VERS LE HAUT

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;
}



RETOUR VERS LE HAUT


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;
}





RETOUR VERS LE HAUT

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;
}



RETOUR VERS LE HAUT

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;
}



RETOUR VERS LE HAUT

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;
}



RETOUR VERS LE HAUT

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

 
Ligne 1
 
Ligne 2
 

Code HTML

<table cellspacing="0" cellpadding="0">
<col width="251">
<tr>
<td width="251">&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;
}


RETOUR VERS LE HAUT