MOOC HTML5/CSS3 semaine 2 Mise en forme CSS

Get Started. It's Free
or sign up with your email address
Rocket clouds
MOOC HTML5/CSS3 semaine 2 Mise en forme CSS by 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. Mettre en place le CSS

3.1. 3 Méthodes

3.1.1. Créer un fichier CSS

3.1.1.1. Lier le fichier html avec le CSS

3.1.1.2. Dans le fichier Html

3.1.1.2.1. <link rel="stylesheet" href="style.css"/>

3.1.1.3. Dans la CSS

3.1.1.3.1. P { color: blue; {

3.1.2. Ecrire le CSS dans le HTML

3.1.2.1. Ecrire le CSS dans la balise <head> </head>

3.1.2.2. Insérer la balise <style> </styles>

3.1.2.3. Insérer le code CSS dans la balise <style> </style>

3.1.2.4. Exemple

3.1.3. Ecrire le CSS dans l'attribut HTML

3.1.3.1. <p style=color: blue;> </p>

3.1.3.2. L'attribut <style> s'applique sur toutes les balises HTML

3.1.4. Important :

3.1.4.1. On ne mélange pas le code HTML avec le Code CSS

3.1.4.2. Il faut créer une feuille CSS à part de la page HTML

3.2. Appliquer un style

3.2.1. Exemple

3.2.2. à deux balises

3.2.2.1. h1, em { color: blue; {

3.2.3. Les commentaires

3.2.3.1. /* commentaire */

3.3. Attribut class - Id

3.3.1. Class

3.3.1.1. Se trouve au sein d'un balise HTML

3.3.1.2. Il permet d'identifier une ou + balises

3.3.1.3. <p class="introduction">

3.3.1.4. Dans la CSS

3.3.1.4.1. .introduction

3.3.1.4.2. .introduction { color: blue; {

3.3.1.5. Résultat

3.3.1.5.1. <p class="introduction">

3.3.1.5.2. Seulement le 1er paragraphe sera en bleu

3.3.2. Id

3.3.2.1. Se trouve au sein d'un balise HTML

3.3.2.2. <p id="introduction">

3.3.2.3. Dans la CSS

3.3.2.3.1. #introduction

3.3.2.3.2. #introduction { color: blue; {

3.3.3. Différences

3.3.3.1. Les noms Id sont uniques dans chaque page html

3.3.3.2. Il ne peut y avoir 2 fois id="introduction"

3.3.3.3. Les noms de class peuvent être utilisé + fois

3.4. Balises spécifiques

3.4.1. Span

3.4.1.1. Permet d'englober du texte (un titre)

3.4.1.1.1. <span> </span>

3.4.1.1.2. <div> </div>

3.4.2. Div

3.4.2.1. Permet d'englober un bloc de texte (un paragraphe)

3.4.3. On peut y intégrer des attributs class et id

3.4.3.1. <span class="introduction">

3.5. Les sélécteurs

3.5.1. sélecteur universel

3.5.1.1. L'étoile *

3.5.1.2. * { color: blue; {

3.5.1.3. Tout le texte sera en bleu

3.5.2. Sélectionner + balises

3.5.2.1. h2 em { color: blue; {

3.5.2.2. Les em qui sont dans la balise h2 sont bleus

3.5.3. Cibler les balises qui en suivent d'autres

3.5.3.1. h2 + p { color: blue; {

3.5.4. Le liens qui contiennent "title"

3.5.4.1. a {title} { color: blue; {

4. Couleur et fond

4.1. Types d'écriture

4.1.1. color: purple;

4.1.2. color: #FFC305;

4.1.2.1. hexadécimal

4.1.2.1.1. FF quantité de rouge

4.1.2.1.2. C3 quantité de vert

4.1.2.1.3. 05 quantité de bleu

4.1.3. color: rgb(145, 200, 120);

4.1.4. Ressources

4.1.4.1. http://code-couleur.com/

4.2. Couleur de fond

4.2.1. background-color: black;

4.3. Image de fond

4.3.1. Variantes

4.3.1.1. background-image: url(image.jpg);

4.3.1.2. background-attachment: fixed;

4.3.1.2.1. L'image de fond reste figée

4.3.1.3. Affiche 1 seule fois l'image

4.3.1.4. Image en haut à droite

4.3.2. Combiner les valeurs CSS

4.3.2.1. background: url("mikao.jpg") no-repeat top right fixed;

4.4. Combiner deux images de fond

4.4.1. Il faut rajouter url("neige.jpg");

4.4.2. Exemple

4.5. Transparence

4.5.1. opacity: 0.3;

4.5.1.1. Rend transparent les éléments d'une même zone

4.5.2. Dans le html

4.5.2.1. <p class="transparence"

4.5.3. Dans le CSS

4.6. Fond dégradé

4.6.1. Linéraire

4.6.1.1. background: linear-gradient

4.6.2. Circulaire

4.6.2.1. background: radial-gradient

4.6.3. Exemple

4.6.3.1. CSS

5. Formatage du texte

5.1. Les attributs

5.1.1. Police

5.1.1.1. font-family: Times New Roman;

5.1.1.2. font-family: arial, verdana, sans-serif ;

5.1.1.3. Pesonnalisée

5.1.1.3.1. @font-face

5.1.1.3.2. Le navigateur téléchargera la police

5.1.1.3.3. Conseils :

5.1.1.3.4. Exemple :

5.1.2. La taille

5.1.2.1. font-size

5.1.2.2. Derivés

5.1.2.2.1. font-size: x-large;

5.1.2.2.2. font-size: 1.2em;

5.1.2.2.3. font-size: 14px;

5.1.3. Gras

5.1.3.1. font-weight: bold;

5.1.4. Souligné

5.1.4.1. text-decoration: underline;

5.1.5. Italique

5.1.5.1. font-style: italic;

5.1.6. Raccourci

5.1.6.1. font: italic bold small-caps 20pt Arial;

5.2. Aligné

5.2.1. text-align: justify;

5.2.2. text-align: left;

5.2.3. text-align: right;

5.2.4. vertical-align:top;

5.2.5. text-align: center;

5.3. Decoration

5.3.1. text-decoration

5.3.1.1. none

5.3.1.1.1. texte non souligné

5.3.1.2. underline

5.3.1.2.1. texte souligné par dessous

5.3.1.3. overline underline

5.3.1.3.1. texte souligné par dessus et dessous

5.3.1.4. line-through

5.3.1.4.1. texte barré

5.4. Image flottante

5.4.1. Dans le Html

5.4.1.1. <img src="rose.jpg" alt="rose" class="reiki">

5.4.1.2. On indique un nom de class="reiki"

5.4.2. Dans le Css

5.4.2.1. .reiki { float: left; }

5.4.2.2. La class reiki est rappelée

5.5. Texte en

5.5.1. majuscule

5.5.1.1. text-transform: uppercase;

5.5.2. petite majuscule

5.5.2.1. font-variant: small-caps;

5.5.3. minuscule

5.5.3.1. lowercase

5.6. Citation

5.6.1. <blockquote> </blockquote>

5.7. Retrait

5.7.1. text-indent

5.7.1.1. text-indent: 30px;

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