Online Mind Mapping and Brainstorming

Create your own awesome maps

Online Mind Mapping and Brainstorming

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