version : 1.0
Mozilla.org/fr/ - Général
zonecss.fr - CSS
dafont.com/fr/ - Polices
fonts.google.com/ - Polices
htmlcolorcodes/fr/ - Couleur
mozilla.org/fr/docs/Web/CSS/border - Border
Ecriture d’un paragraphe.
Il y a moyen de modifier des mots dans le paragraphe…
| Code | Explication |
|---|---|
| < br > | Changer de fil |
| < em >…< /em > | Les éléments un peu importants |
| < strong >…< /strong > | Les éléments importants |
| < mark >…< /mark > | Marquer le texte |
| < i >…< /i > | Italique |
| < b >…< /b > | Gras |
| < u >…< /u > | Souligner |
< p >
Ceci est en code : type em< br >
Ceci est en code : type strong< br >
Ceci est en code : type mark< br >
Ceci est en code : type i< br >
Ceci est en code : type b< br >
Ceci est en code : type u
< /p >
<ul>
<li>Numéro 1</li>
<li>Numéro 2</li>
<li>Numéro 3</li>
</ul><ol>
<li>Numéro 1</li>
<li>Numéro 2</li>
<li>Numéro 3</li>
</ol><dl>
<dt>Liste 1</dt>
<dd>Données de la liste 1<dd>
<dt>Liste 2</dt>
<dd>Données de la liste 2<dd>
<dt>Liste 3</dt>
<dd>Données de la liste 3<dd>
</dl>Des sections que nous allons pouvoir rajouter sur la page du site.
| Nom de la section | Quelle est elle ? |
|---|---|
| < header >… < /header > | Entête de la page. |
| < nav >… < /nav > | Barre de navigation de la page. |
| < section >… < /section > | Possible de plusieurs sections. |
| < heading >… < /heading > | Titre de la section. |
| < article >… < /article > | Contenu de la section. |
| < aside >… < /aside > | ??? |
| < footer >… < /footer > | Pieds de page de la page. |
4 types de liens pour accéder à d’autre données et 3 attribues possibles pour les types de liens.
| Attribue | Explication |
|---|---|
| href | OBLIGATOIRE - Va choisir la chose à montrer. |
| target | Le fichier ou le site sera sur une autre page. Par défaut "_blank", toute les attribues se montreront sur la même page. |
| title | Va montrer une information lorsque la sourie se positionnera sur le type. |
Toutes les différentes fonctions…
| Code | Fonction | Visualisation |
|---|---|---|
| < a href=“https://www.google.com” >Google< /a > | Accéder à un autre site sur la même page. | Google : même page |
| < a href=“https://www.google.com” target=“google” >Google< /a > | Accéder à un autre site sur une autre page. Target peut être "_blank". | Google : autre page |
| < a href=“https://www.google.com” target=“google” title=“Aller sur le site Google” >Google< /a > | Accéder à un autre site sur une autre page et visualiser la donnée. Target peut être "_blank". | Google : autre page et visualisation |
| < a href="_demo.html" >Démo< /a > | Accéder à un fichier du site sur la même page. | Démo : même page |
| < a href="_demo.html" target=“demo” >Démo< /a > | Accéder à un fichier du site sur une autre page. Target peut être "_blank". | Démo : autre page |
| < a href="_demo.html" target=“demo” title=“La page de démo” >Démo< /a > | Accéder à un fichier du site sur une autre page et visualiser la donnée. Target peut être "_blank". | Démo : autre page et visualisation |
| < a href=“#test_eu” >eu< /a target=“eu” > | Accéder à une place dans le site en cours sur la même page. “eu” a été modifier pour permettre l’accéssion. | eu : même page |
| < a href=“#test_eu” target=“eu” >eu< /a target=“eu” > | Accéder à une place dans le site en cours sur une autre page. “eu” a été modifier pour permettre l’accéssion. | eu : autre page |
| < a href=“#test_eu” target=“eu” title=“La zone de visualisation de ‘eu’” >eu< /a target=“eu” > | Accéder à une place dans le site en cours sur une autre page et visualiser la donnée. Target peut être "_blank“.”eu" a été modifier pour permettre l’accéssion. | eu : autre page et visualisation |
| < a href=“mailto:solo3326@yahoo.fr” >solo3326@yahoo.fr< /a > | Permets d’envoyer un message à la personne en question. | solo3326@yahoo.fr |
| Code | Fonctions | Images |
|---|---|---|
| < img src=“images/html/logo.png” /> | Placer une image sur le site. |  |
| < img src=“images/html/logoX.png” alt=“Logo” /> | L’image n’est pas localisé, donc “alt” va pouvoir y mettre le nom. |  |
| < img src=“images/html/logo.png” alt=“Logo” title=“Ceci est un logo” /> | Placer une image sur le site, et pouvoir lire un détail sur l’image. | |
Mettre un titre de l’image :
< figure >
< img src="images/html/logo.png" alt="Logo" title="Ceci est un logo" />
< figcaption >
Logo
< /figcaption >
< /figure >Visualisation :
3 systèmes de mise en place des styles…
JUSTE POUR INFO, LES VISUS DE CE SITE NE SERONT QUE DES STYLES SUR LE TYPE POUR VISUALISER. MAIS DANS LA REALITE, IL FAUDRA FAIRE UN FICHIER "---.css" !!!Il est possible d’écrire des commentaires dans le fichier CSS. L’écriture sera ainsi :
/* Ceci est un commentaire */Il va être possible de créer des données de CSS diverses. Une chose importante, le sélecteur “id” ne peut être qu’à un seul endroit dans la page. Alors que le sélecteur “class” peut être sur plusieurs endroit de la page.
| Code | Explication |
|---|---|
| p { } | La sélection par la balise. |
| h1, em { } | la multi-sélection. |
| .class { } | La sélection par la classe. |
| #id { } | La sélection par l’ID. |
| * { } | Le sélecteur universel (toutes les balises). |
| A B { } | La balise B contenue dans A. |
| a[title] { } | La balise a qui a un attribut “title”. |
| a[title=“Accueil”] { } | La balise a qui a un attribut title qui a un valeur “Accueil”. |
| a[title*=“Accueil”] { } | La balise a qui a un attribut title dont le mot “Accueil” est en tout ou partie la valeur. |
Pour info, toute la liste : CSS3 Selectors Updates
< h1 style=“color: chocolate”; >Titre< /h1 >
POUR INFO, TOUS LES CODES SERONT DANS UN FICHIER DE STYLES !!!
Le code pour modifier la taille d’un texte est font-size = …;. Par exemple pour un taille de “h1” est suivante :
h1 {
font-size= 16px;
}Les polices notées ici, sont pratiquement intégré au web naturellement, du moins, les 5 premières…
p {
font-family: Verdana, Arial, DEFAULT(sans-serif, serif);
}Placer le fichier de police dans la zone du HTML. Par exemple, ici, nous allons mêtre le fichier suivant : theblacklist.ttf dans SRC. Il est possible d’avoir plusieurs type de police.
Dans le fichier CSS, on va créer la police :
@font-face {
font-family: "theblacklist";
src: url('../src/theblacklist.ttf') format('truetype');
}
h1 {
font-family: 'theblacklist', arial, sans-serif;
}Dans le fichier CSS, on va créer les multi police :
@font-face {
font-family: "theblacklist";
src: url('../src/theblacklist.ttf') format('truetype'),
url('../src/theblacklist.eot') format('eot'),
url('../src/theblacklist.svg') format('svg');
}
h1 {
font-family: 'theblacklist', arial, sans-serif;
}Sur le site de fonts.google, on va choisir des polices, et nous aurant les données correspondante. Il va falloir le paramétrer dans < head >.
<head>
<...>
<...>
<link href="https://font.googleapis.com/css?family=Open+Sans" rel="stylessheet">
<...>
</head>Si on choisi plusieurs polices, la programmation du head sera ainsi :
<head>
<...>
<...>
<link href="https://font.googleapis.com/css?family=Open+Sans|Roboto" rel="stylessheet">
<...>
</head>Et dans le fichier CSS, tous les mots seront “Roboto” si il n’y a pas de changement, comme dans “h2”.
body {
font-family: 'Roboto', sans-serif;
}
h2 {
font-family: 'Open Sans', sans-serif;
}Mettre le “footer” en gras :
footer {
font-weight: bold;
}Dans le “H2”, pas de gras, en italique et souligner :
h2 {
font-weight: normal;
font-style: italic;
text-decoration: underline;
}Dans la “a” on enlève le soulignement et on le mets en noir :
a {
text-decoration: none;
color: black;
}l’alignement se fait avec le code : text-align. 4 choix disponibles : * left : Mettre à gauche. * center : Mettre au centre. * right : Mettre à droite. * justify : que la police puisse agrandir sur toute la largeur du site.
Exemple :
h1 {
text-align: center;
}
p {
text-align: justify;
}Revoir les sommaires : * Listes NON Ordonnées (ul). * Listes Ordonnées (ol).
Tout ce que l’on peut faire, est de enlever le “.”.
li {
list-style-type: none;
}Une zone d’infos : mozilla.org/fr - list-style-type
Différentes modification :
Initialement installation de la liste dans le fichier de la zone :
<nav>
<ul>
<li><a href="index.html" title="Accueil">Accueil</a></li>
<li><a href="#projets" title="Accueil Deux">Projets</a></li>
<li><a href="#contact" title="Contact">Contact</a></li>
</ul>
</nav>Et Modification de la forme dans le fichier CSS :
ul {
padding: 0; --- Coupe la largeur de gauche qui est en place par défaut.
}
li {
list-style-type: none; --- Enlève les points se situant à gauche des mots.
}
nav {
text-align = center; --- Place l'ensemble des mots au centre.
}Dans le “Header” (la zone haut de la visualisation) on va installer une image :
<header>
<...>...<...>
<img src="pictures/logo.png" alt="logo" title="Ceci est mon logo" id="logo">
</header>Et donc, dans le CSS, il va être possible de modifier l’image grace à “ID”. Le code “float” va pouvoir avoir 2 données différentes : * float: left; — Va s’installer à gauche. * float: right; — Va s’installer à droite.
Par exemple le titre “h3” ne devra pas être à coté de l’image. Il y a 3 données possibles. : * clear: left; — Va enterdir de se mettre à coté d’une image qui est paramétrer à gauche (left). * clear: right; — Va enterdir de se mettre à coté d’une image qui est paramétrer à droite (right). * clear: both; — Va enterdir de se mettre à coté d’une image où qu’elle soit.
#logo {
float: left;
}
h3 {
clear: both;
}Pour mettre une couleur dans la totalité du fichier, on utilise “body”. Les différentes opération :
Il est possible de transparer un outil, quelqu’il soit. Le code en question est : * opacity: ???; — La valeur d’opacity est MAXIMUM (0 - 1).
L’exemple va être “h1” :
h1 {
opacity: 0.6;
}Un site de données : mozilla.org/fr/docs/Web/CSS/border - Border
Un test sur “h1” :
h1 (
---
border: 1px black solid; --- 1 point de largeur, couleur noir et entièrement vu normalement.
)Il est possible d’avoir une bordure, en bas, ou à gauche, ou à droite, ou en haut. La bordure limitée est cela :
La bordure peut passer en ronde. Par contre, pour pouvoir bouger la bordure, il faut la déclarer.
La version “box-shadow” va permettre de faire une ombre sur une zone.
le test est le suivant : < h3 style=“box-shadow: 5px 10px 20px red”;>Une zone H3< /h3 >
le test est le suivant : < h3 style=“box-shadow: 5px 10px 20px red inset”;>Une zone H3< /h3 >
le test est le suivant : < h3 style=“text-shadow: 3px 3px 3px silver”;>Une zone H3< /h3 >
Lorsque la souris passe sur un secteur, il est possible de modifier la couleur. L’exemple là, va modifier le “h1” :
h1:hover {
color: red;
}Lorsque la souris est cliqué sur un secteur, il est possible de modifier la couleur. L’exemple là, va modifier le “h1” :
h1:active {
color: red;
}Si on sélectionne un des départ de “a”, on le rends en couleurs :
a:focus {
color: red;
}Si le secteur de “a” a été visité, on peu lui rendre une couleur :
a:visited {
color: red;
}On peut modifier le type de la balise. Par exemple pour des “li” se trouvant dans un ‘ul’ leur type est un “block”, pour le modifier :
li {
display: inline; --- Du coups, là, les "li" seront en ligne.
}Et par exemple que la dernier balise (“Contact”) vas se mettre en bas des autres :
a[title="Contact"] {
display: block;
}Il y a deux dimmensions possibles : * width: px ou %; — Gère la longueur du block. * min-width: px ou %; — Longueur minimale. * max-width: px ou %; — Longueur maximale. * height: px ou % — Gère la hauteur du block. * min-height: px ou %; — Hauteur minimale. * max-height: px ou %; — Hauteur maximale.
Les marges sont les suivantes en programmation :
Pour info, par défaut, “body” a un “margin” (une marge EXTERNE) de 8px. Donc, le mieu est de l’éliminé.
body {
---
margin: 0;
}Pour les titres également, du coups pour le “h1” qui est dans le “header”, il a un “margin” qui éloigne l’ensemble de la hauteur.
Pour que “header” soit bien coller en haut et que “h1” puisse être eloigné du haut de “header”.
h1 {
---
margin-top: 0; --- Cela va coller à la hauteur.
padding-top: 30px; --- Le "h1" va s'éloigner du "header".
}IMPORTANT !!! POUR QUE LE SITE PUISSE ËTRE SUR UN TELEPHONE PAR EXEMPLE !!!
Dire que la taille de la boite c’est les bordures de la boite.
* {
box-sizing: border-box;
}