1. L'auteur : Olivier Legrand
1.1. Formateur du Web
1.2. Olivier Legrand - Concepteur pédagogique multimédia
2. Bordures et ombres
2.1. Raccourci
2.1.1. border: dotted 1px black thick;
2.2. Styles de bordure
2.2.1. Styles
2.2.1.1. dotted;
2.2.1.1.1. pointillés
2.2.1.2. dashed;
2.2.1.2.1. tired
2.2.1.3. double;
2.2.1.3.1. double bordure
2.2.1.4. groove;
2.2.1.4.1. gravé dans la page
2.2.1.5. ridge;
2.2.1.5.1. Effet 3d sortant de la page
2.2.1.6. inset;
2.2.1.6.1. Bordure rentrante incrustée
2.2.1.7. outset;
2.2.1.7.1. Bordure sortante extrudée
2.2.1.8. none
2.2.1.8.1. Pas de bordure
2.2.2. Gestion des styles
2.2.2.1. border-style:
2.2.2.2. border-top-style:
2.2.2.3. border-bottom-style:
2.2.2.4. border-left-style:
2.2.2.5. border-right-style:
2.2.3. Exemple
2.3. couleur bordure
2.3.1. Gestion des couleurs
2.3.1.1. border-top-color:
2.3.1.2. border-right-color:
2.3.1.3. border-left-color:
2.3.1.4. border-bottom-color:
2.3.2. Important
2.3.2.1. Possibilité de définir la couleur des 4 cotés
2.3.2.2. Il faut définir avant la
2.3.2.2.1. border-style: dotted;
2.3.2.2.2. border-width: 7px;
2.3.3. Exemple
2.4. Epaisseur bordure
2.4.1. border-top-width:
2.4.1.1. défini l'épaisseur
2.4.1.2. border-top-width: 7px;
2.4.2. border-width:
2.4.2.1. thin;
2.4.2.1.1. bordure fine
2.4.2.2. medium;
2.4.2.2.1. bordure moyenne
2.4.2.3. thick;
2.4.2.3.1. bordure épaisse
2.4.3. Gestion de l'épaisseur
2.4.3.1. border-top-width
2.4.3.2. border-bottom-width
2.4.3.3. border-left-width
2.4.3.4. border-right-width
2.4.4. Exemple
2.5. Bordure arrondi
2.5.1. border-radius:
2.5.2. Angle de l'arrondit
2.5.2.1. border-top-right-radius:
2.5.2.2. border-bottom-right-radius:
2.5.2.3. border-bottom-left-radius:
2.5.2.4. border-top-left-radius:
2.5.3. compatibilé
2.5.3.1. FireFox
2.5.3.1.1. -moz-border-radius: 1em;
2.5.3.2. Chrome, Safari,
2.5.3.2.1. -webkit-border-radius: 40px 10px;
2.5.4. Exemple
2.5.5. Bordure arrondi image
2.5.5.1. HTML
2.5.5.2. CSS
2.6. Ombres bordures
2.6.1. box-shadow:
2.6.2. Composition
2.6.2.1. 5px - décalage horizontal de l'ombre
2.6.2.2. 10px - décalage vertical de l'ombre
2.6.2.3. 10px - adoucissement du dégradé
2.6.2.4. Green - couleur de l'ombre
2.6.3. Exemple
2.7. Bordure image
2.7.1. border-image:
2.7.2. Exemple
2.8. Ombres textes
2.8.1. text-shadow: 10px 10px 20px blue;
2.9. Barre horizontale
2.9.1. <hr>
3. Formatage du texte
3.1. Les attributs
3.1.1. Police
3.1.1.1. font-family: Times New Roman;
3.1.1.2. font-family: arial, verdana, sans-serif ;
3.1.1.3. Pesonnalisée
3.1.1.3.1. @font-face
3.1.1.3.2. Le navigateur téléchargera la police
3.1.1.3.3. Conseils :
3.1.1.3.4. Exemple :
3.1.2. La taille
3.1.2.1. font-size
3.1.2.2. Derivés
3.1.2.2.1. font-size: x-large;
3.1.2.2.2. font-size: 1.2em;
3.1.2.2.3. font-size: 14px;
3.1.3. Gras
3.1.3.1. font-weight: bold;
3.1.4. Souligné
3.1.4.1. text-decoration: underline;
3.1.5. Italique
3.1.5.1. font-style: italic;
3.1.6. Raccourci
3.1.6.1. font: italic bold small-caps 20pt Arial;
3.2. Aligné
3.2.1. text-align: justify;
3.2.2. text-align: left;
3.2.3. text-align: right;
3.2.4. vertical-align:top;
3.2.5. text-align: center;
3.3. Decoration
3.3.1. text-decoration
3.3.1.1. none
3.3.1.1.1. texte non souligné
3.3.1.2. underline
3.3.1.2.1. texte souligné par dessous
3.3.1.3. overline underline
3.3.1.3.1. texte souligné par dessus et dessous
3.3.1.4. line-through
3.3.1.4.1. texte barré
3.4. Image flottante
3.4.1. Dans le Html
3.4.1.1. <img src="rose.jpg" alt="rose" class="reiki">
3.4.1.2. On indique un nom de class="reiki"
3.4.2. Dans le Css
3.4.2.1. .reiki { float: left; }
3.4.2.2. La class reiki est rappelée
3.5. Texte en
3.5.1. majuscule
3.5.1.1. text-transform: uppercase;
3.5.2. petite majuscule
3.5.2.1. font-variant: small-caps;
3.5.3. minuscule
3.5.3.1. lowercase
3.6. Citation
3.6.1. <blockquote> </blockquote>
3.7. Retrait
3.7.1. text-indent
3.7.1.1. text-indent: 30px;
4. Mettre en place le CSS
4.1. 3 Méthodes
4.1.1. Créer un fichier CSS
4.1.1.1. Lier le fichier html avec le CSS
4.1.1.2. Dans le fichier Html
4.1.1.2.1. <link rel="stylesheet" href="style.css"/>
4.1.1.3. Dans la CSS
4.1.1.3.1. P { color: blue; {
4.1.2. Ecrire le CSS dans le HTML
4.1.2.1. Ecrire le CSS dans la balise <head> </head>
4.1.2.2. Insérer la balise <style> </styles>
4.1.2.3. Insérer le code CSS dans la balise <style> </style>
4.1.2.4. Exemple
4.1.3. Ecrire le CSS dans l'attribut HTML
4.1.3.1. <p style=color: blue;> </p>
4.1.3.2. L'attribut <style> s'applique sur toutes les balises HTML
4.1.4. Important :
4.1.4.1. On ne mélange pas le code HTML avec le Code CSS
4.1.4.2. Il faut créer une feuille CSS à part de la page HTML
4.2. Appliquer un style
4.2.1. Exemple
4.2.2. à deux balises
4.2.2.1. h1, em { color: blue; {
4.2.3. Les commentaires
4.2.3.1. /* commentaire */
4.3. Attribut class - Id
4.3.1. Class
4.3.1.1. Se trouve au sein d'un balise HTML
4.3.1.2. Il permet d'identifier une ou + balises
4.3.1.3. <p class="introduction">
4.3.1.4. Dans la CSS
4.3.1.4.1. .introduction
4.3.1.4.2. .introduction { color: blue; {
4.3.1.5. Résultat
4.3.1.5.1. <p class="introduction">
4.3.1.5.2. Seulement le 1er paragraphe sera en bleu
4.3.2. Id
4.3.2.1. Se trouve au sein d'un balise HTML
4.3.2.2. <p id="introduction">
4.3.2.3. Dans la CSS
4.3.2.3.1. #introduction
4.3.2.3.2. #introduction { color: blue; {
4.3.3. Différences
4.3.3.1. Les noms Id sont uniques dans chaque page html
4.3.3.2. Il ne peut y avoir 2 fois id="introduction"
4.3.3.3. Les noms de class peuvent être utilisé + fois
4.4. Balises spécifiques
4.4.1. Span
4.4.1.1. Permet d'englober du texte (un titre)
4.4.1.1.1. <span> </span>
4.4.1.1.2. <div> </div>
4.4.2. Div
4.4.2.1. Permet d'englober un bloc de texte (un paragraphe)
4.4.3. On peut y intégrer des attributs class et id
4.4.3.1. <span class="introduction">
4.5. Les sélécteurs
4.5.1. sélecteur universel
4.5.1.1. L'étoile *
4.5.1.2. * { color: blue; {
4.5.1.3. Tout le texte sera en bleu
4.5.2. Sélectionner + balises
4.5.2.1. h2 em { color: blue; {
4.5.2.2. Les em qui sont dans la balise h2 sont bleus
4.5.3. Cibler les balises qui en suivent d'autres
4.5.3.1. h2 + p { color: blue; {
4.5.4. Le liens qui contiennent "title"
4.5.4.1. a {title} { color: blue; {
5. Couleur et fond
5.1. Types d'écriture
5.1.1. color: purple;
5.1.2. color: #FFC305;
5.1.2.1. hexadécimal
5.1.2.1.1. FF quantité de rouge
5.1.2.1.2. C3 quantité de vert
5.1.2.1.3. 05 quantité de bleu
5.1.3. color: rgb(145, 200, 120);
5.1.4. Ressources
5.1.4.1. http://code-couleur.com/
5.2. Couleur de fond
5.2.1. background-color: black;
5.3. Image de fond
5.3.1. Variantes
5.3.1.1. background-image: url(image.jpg);
5.3.1.2. background-attachment: fixed;
5.3.1.2.1. L'image de fond reste figée
5.3.1.3. Affiche 1 seule fois l'image
5.3.1.4. Image en haut à droite
5.3.2. Combiner les valeurs CSS
5.3.2.1. background: url("mikao.jpg") no-repeat top right fixed;
5.4. Combiner deux images de fond
5.4.1. Il faut rajouter url("neige.jpg");
5.4.2. Exemple
5.5. Transparence
5.5.1. opacity: 0.3;
5.5.1.1. Rend transparent les éléments d'une même zone
5.5.2. Dans le html
5.5.2.1. <p class="transparence"
5.5.3. Dans le CSS
5.6. Fond dégradé
5.6.1. Linéraire
5.6.1.1. background: linear-gradient
5.6.2. Circulaire
5.6.2.1. background: radial-gradient
5.6.3. Exemple
5.6.3.1. CSS
6. Les liens
6.1. Lien
6.1.1. a:link
6.1.2. Défini l'apparence du lien non cliqué
6.2. Lien visité
6.2.1. a:visited {
6.2.2. Défini l'apparence du lien visité
6.3. Lien survolé
6.3.1. a:hover
6.3.2. Défini l'apparence du lien au passage de la souris
6.3.3. Variantes
6.3.3.1. La balise hover s'applique aussi sur des <p>
6.3.3.2. p:hover {
6.3.3.3. La balise hover s'applique aussi sur les <div>
6.3.3.4. div:hover {
6.4. Lien cliqué
6.4.1. a:active {
6.4.2. Défini l'apparence du lien quand il est cliqué
6.5. Exemple
6.6. Les plus
6.6.1. Couleur de lien
6.6.1.1. a {
6.6.1.2. Exemple
6.6.2. Soulignement
6.6.2.1. text-decoration
6.6.2.1.1. none
6.6.2.1.2. underline
6.6.2.1.3. overline underline