Create your own awesome maps

Even on the go

with our free apps for iPhone, iPad and Android

Get Started

Already have an account?
Log In

MOOC HTML5/CSS3 semaine 2 Mise en forme CSS by Mind Map: MOOC HTML5/CSS3
semaine 2 
Mise en forme CSS
5.0 stars - 2 reviews range from 0 to 5

MOOC HTML5/CSS3 semaine 2 Mise en forme CSS

L'auteur : Olivier Legrand

Formateur du Web

Olivier Legrand - Concepteur pédagogique multimédia

Bordures et ombres

Raccourci

border: dotted 1px black thick;

Styles de bordure

Styles, dotted;, pointillés, dashed;, tired, double;, double bordure, groove;, gravé dans la page, ridge;, Effet 3d sortant de la page, inset;, Bordure rentrante incrustée, outset;, Bordure sortante extrudée, none, Pas de bordure

Gestion des styles, border-style:, border-top-style:, border-bottom-style:, border-left-style:, border-right-style:

Exemple

couleur bordure

Gestion des couleurs, border-top-color:, border-right-color:, border-left-color:, border-bottom-color:

Important, Possibilité de définir la couleur des 4 cotés, Il faut définir avant la, border-style: dotted;, border-width: 7px;

Exemple

Epaisseur bordure

border-top-width:, défini l'épaisseur, border-top-width: 7px;

border-width:, thin;, bordure fine, medium;, bordure moyenne, thick;, bordure épaisse

Gestion de l'épaisseur, border-top-width, border-bottom-width, border-left-width, border-right-width

Exemple

Bordure arrondi

border-radius:

Angle de l'arrondit, border-top-right-radius:, border-bottom-right-radius:, border-bottom-left-radius:, border-top-left-radius:

compatibilé, FireFox, -moz-border-radius: 1em;, Chrome, Safari,, -webkit-border-radius: 40px 10px;

Exemple

Bordure arrondi image, HTML, CSS

Ombres bordures

box-shadow:

Composition, 5px - décalage horizontal de l'ombre, 10px - décalage vertical de l'ombre, 10px - adoucissement du dégradé, Green - couleur de l'ombre

Exemple

Bordure image

border-image:

Exemple

Ombres textes

text-shadow: 10px 10px 20px blue;

Barre horizontale

<hr>

Formatage du texte

Les attributs

Police, font-family: Times New Roman;, font-family: arial, verdana, sans-serif ;, Pesonnalisée, @font-face, Le navigateur téléchargera la police, Conseils :, 2 polices personnalisées par site, Exemple :

La taille, font-size, Derivés, font-size: x-large;, font-size: 1.2em;, font-size: 14px;

Gras, font-weight: bold;

Souligné, text-decoration: underline;

Italique, font-style: italic;

Raccourci, font: italic bold small-caps 20pt Arial;

Aligné

text-align: justify;

text-align: left;

text-align: right;

vertical-align:top;

text-align: center;

Decoration

text-decoration, none, texte non souligné, underline, texte souligné par dessous, overline underline, texte souligné par dessus et dessous, line-through, texte barré

Image flottante

Dans le Html, <img src="rose.jpg" alt="rose" class="reiki">, On indique un nom de class="reiki"

Dans le Css, .reiki { float: left; }, La class reiki est rappelée

Texte en

majuscule, text-transform: uppercase;

petite majuscule, font-variant: small-caps;

minuscule, lowercase

Citation

<blockquote> </blockquote>

Retrait

text-indent, text-indent: 30px;

Mettre en place le CSS

3 Méthodes

Créer un fichier CSS, Lier le fichier html avec le CSS, Dans le fichier Html, <link rel="stylesheet" href="style.css"/>, Dans la CSS, P { color: blue; {

Ecrire le CSS dans le HTML, Ecrire le CSS dans la balise <head> </head>, Insérer la balise <style> </styles>, Insérer le code CSS dans la balise <style> </style>, Exemple

Ecrire le CSS dans l'attribut HTML, <p style=color: blue;> </p>, L'attribut <style> s'applique sur toutes les balises HTML

Important :, On ne mélange pas le code HTML avec le Code CSS, Il faut créer une feuille CSS à part de la page HTML

Appliquer un style

Exemple

à deux balises, h1, em { color: blue; {

Les commentaires, /* commentaire */

Attribut class - Id

Class, Se trouve au sein d'un balise HTML, Il permet d'identifier une ou + balises, <p class="introduction">, Dans la CSS, .introduction, Le point indique la class, .introduction { color: blue; {, Résultat, <p class="introduction">, Seulement le 1er paragraphe sera en bleu

Id, Se trouve au sein d'un balise HTML, <p id="introduction">, Dans la CSS, #introduction, La dièse # indique l' ID, #introduction { color: blue; {

Différences, Les noms Id sont uniques dans chaque page html, Il ne peut y avoir 2 fois id="introduction", Les noms de class peuvent être utilisé + fois

Balises spécifiques

Span, Permet d'englober du texte (un titre), <span> </span>, <div> </div>

Div, Permet d'englober un bloc de texte (un paragraphe)

On peut y intégrer des attributs class et id, <span class="introduction">

Les sélécteurs

sélecteur universel, L'étoile *, * { color: blue; {, Tout le texte sera en bleu

Sélectionner + balises, h2 em { color: blue; {, Les em qui sont dans la balise h2 sont bleus

Cibler les balises qui en suivent d'autres, h2 + p { color: blue; {

Le liens qui contiennent "title", a {title} { color: blue; {

Couleur et fond

Types d'écriture

color: purple;

color: #FFC305;, hexadécimal, FF quantité de rouge, C3 quantité de vert, 05 quantité de bleu

color: rgb(145, 200, 120);

Ressources, http://code-couleur.com/

Couleur de fond

body { background-color: black; }

background-color: black;

Image de fond

body { background-image: url("neige.jpg"); }

Variantes, background-image: url(image.jpg);, background-attachment: fixed;, L'image de fond reste figée, Affiche 1 seule fois l'image, Image en haut à droite

Combiner les valeurs CSS, background: url("mikao.jpg") no-repeat top right fixed;

Combiner deux images de fond

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

Exemple

Transparence

opacity: 0.3;, Rend transparent les éléments d'une même zone

Dans le html, <p class="transparence"

Dans le CSS

Fond dégradé

Linéraire, background: linear-gradient

Circulaire, background: radial-gradient

Exemple, CSS

Les liens

Lien

a:link

Défini l'apparence du lien non cliqué

Lien visité

a:visited {

Défini l'apparence du lien visité

Lien survolé

a:hover

Défini l'apparence du lien au passage de la souris

Variantes, La balise hover s'applique aussi sur des <p>, p:hover {, La balise hover s'applique aussi sur les <div>, div:hover {

Lien cliqué

a:active {

Défini l'apparence du lien quand il est cliqué

Exemple

a:link { color: blue; text-decoration: none; } a:visited { color: grey; text-decoration: line-through; color: black; } a:hover { color: blue; text-decoration: underline; } a:active { background-color: white; text-decoration: underline overline; opacity: 0.6;

Les plus

Couleur de lien, a {, Exemple

Soulignement, text-decoration, none, Lien non souligné, underline, Lien souligné par dessous, overline underline, Lien souligné par dessus et dessous