MOOC HTML5/CSS3 semaine 2 Mise en forme CSS

Commencez. C'est gratuit
ou s'inscrire avec votre adresse courriel
Rocket clouds
MOOC HTML5/CSS3 semaine 2 Mise en forme CSS par Mind Map: MOOC HTML5/CSS3 semaine 2  Mise en forme CSS

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