View - Download Untitled

Previous PDF

Next PDF

CSS CSS

CSS-Cascading Style Sheets

Servent à mettre en forme les éléments d'une page HTML Eléments = parties de la structure d'une page : titres, paragraphes, listes, tableaux, images, etc. Attention : essayez de toujours séparer la mise en forme du contenu HTML d'une page web !

CSS -ressources

http://www.w3.org/Style/CSS/ http://www.w3schools.com/ http://www.yoyodesign.org/doc/w3c/css1/ http://openweb.eu.org/css/ http://css.alsacreations.com/ http://csszengarden.com/

Syntaxe des règles CSS

3 éléments : déclaration

sélecteur{propriété:valeur}

sélecteur= définit l'élément sur lequel s'appliquent la ou les propriétés définies entre les accolades (classe, identifiant, balise)

propriété= l'attribut à changer valeur= la nouvelle valeur de l'attribut

Exemple : p {color:blue}

Définition d'un style

Dans un ou plusieurs fichiers .css-feuille de

style externe

A l'intérieur d'une page HTML (dans la balise

head) -feuille de style interne

A l'intérieur d'une balise HTML (in-line)

CSS Quel style va être utilisé s'il existe plusieurs styles définis pour le même élément HTML ?

Le style par défaut du navigateur

Feuille de style externe

Feuille de style interne

Style à l'intérieur d'une balise HTML (in-line)

Priorité

Les bases du code HTML

Préparer un document de travail

Commençons par un document minimaliste :

Ceci est le titre principal

Titre secondaire no 1

Ceci est le texte du premier paragraphe

Titre secondaire no 2

Ceci est le texte du second paragraphe

Nous naissons tous fous.

Quelques-uns le demeurent. (Samuel Beckett, 1906-1989)

Copiez le texte ci-dessus (Pomme+C sur Mac)

Les bases du code HTML

Préparer un document de travail

Ouvrez Kompozer

Ouvrez une nouvelle page (Fichier > Nouveau > Document vide > Ouvrir) Sélectionnez l'onglet Source(en bas à gauche de la fenêtre) z

Supprimez tout le texte préexistant

Collez le texte HTML

Retournez à l'onglet Normal

Enregistrez le document sous le nom test.html

Observez la page

Coté source, tous les caractères ont la même taille par contre coté Normal (ce qui s'affiche aussi dans le navigateur), les caractères ont des tailles différentes. Le HTML permet donc de modifier l'apparence de mon fichier texte.

Les bases du code HTML

Quelques balises HTML -rappel

Les balises head= tête, en anglais et (prononcer " fin head") définissent les limites de l'entête du document, cependant que les balises body = corps, en anglais et (" fin body ") définissent les limites du corps du texte La première ligne du corps du document est le titre principal qui apparaît sur la page: elle est au format " Header1= en-tête, en anglais 1 ", ou " Titre de niveau 1 ". Les balises HTML qui définissent ce format sont

et

(" fin h1 ")

Deux lignes sont au format " Header 2 ", ou " Titre de niveau 2 ". Les balises HTML correspondantes sont

et

La paire de balises et sert à délimiter une citation. Les autres lignes sont au format de " paragraphe " défini par les balises

et

Les bases du code HTML

Modifions nos premières balises

Observez attentivement l'ensemble du texte au format HTML dans l'onglet Source. Modifiez une balise

en

et la balise

correspondante en ;

Visualisez l'effet en mode Normal

Veillez à modifier aussi la balise de fin, au risque de constater des effets imprévisibles. Un grand nombre de balises HTML doivent être utilisées par paires. Il est important de respecter ces paires: à toute balise "ouvrante" doit correspondre une balise "fermante". Modifiez maintenant une balise

en

et la balise

correspondante en

et visualiser l'effet en mode Normal. Recomposez ensuite le document selon sa forme initiale

Définition d'un style

Les balises HTML dans le document servent à

indiquer la structure du document: en-tête (), corps du document (), titre de premier niveau (

), titre de second niveau (

), paragraphe (

), citation (), Dans ce cas, il s'agit d'une présentation "par défaut" des différentes structures de la page web.

Définition d'un style

La mise en forme du texte se fera avec l'éditeur de styles de KompoZer, un outil nommé CaScadeS. Dans la barre d'outils de KompoZer, cliquez sur le boutonqui active l'éditeur de styles. Vous pouvez aussi appuyer sur la touche F11 pour ouvrircet outil. Ensuite, cliquez sur le petit bouton situé en haut et à gauche pour permettre la création d'une nouvelle règle de style.

La zone Feuilles et règlesà

gauche est vide; les onglets de la partie droite de la fenêtre sont inactifs. C'est normal.

Définition d'un style

Définition d'un style pour les titres de premier niveau Définissons maintenant une mise en forme pour le titre de premier niveau: h1. Vérifiez que l'éditeur CaScadeSest toujours disponible pour la création d'uneNouvelle règle de style

Dans la zone de saisie actuellement vide,

indiquez la balise h1 Cliquez ensuite sur le bouton Créer la règle de style. Dans la zoneFeuilles et règles, il fait mention d'une règle pour les titres h1 Dans la zoneFeuilles et règles, sélectionnez le sélecteur h1 Sélectionnez l'ongletTextequi peut maintenant être activé.

Dans la zone Couleur, indiquez red

Regardez votre page HTML, le titre est rouge

Définition d'un style

Définition d'un style pour les titres de 2ème niveau En utilisant la même méthode, définissez, pour les titres de niveau 2 (h2) : la couleur verte (green) pour les caractères la couleur jaune (yellow) pour le fond Vérifier que les couleurs sont appliquées immédiatement dans la page

Enregistrer le document

Définition d'un style

Question ?

Quelle est la balise qui définit le corps du texte, dans une page HTML?

1.

2.

3.

4.

En utilisant la même méthode que ci-dessus, définissez une couleur de fond fuchsia (attention à l'orthographe) pour le fond du corps du texte, vérifier puis enregistrer

Où se cachent les styles ?

Le code HTML est une structure relativement simple qui ne contient que du texte brut. Comment une couleur de caractères ou une couleur de fond peuvent- elles être indiquées dans ce texte?

Allez en coulisse vous comprendrez !!!

Vérifiez que la page test.htmlest toujours ouverte.

Si nécessaire, ouvrez-la ou activez l'onglet

correspondant.

Activez l'onglet Source de la page test.html.

Dans cette page, repèrezles modifications opérées depuis la définition des mises en formes des éléments h1, h2et body. L'ensemble est inclus dans une zone limitée par les deux balises style.

Où se cachent les styles ?

Modifions notre premier style

Modifiez color: reden color: bluepour la balise h1 Retournez dans l'onglet Normal et visualisez le résultat obtenu Modifiez color: greenen color: redpour la balise h2

Pouvez-vous prévoir le résultat?

Modifiez finalementbackground-color: fuchsiaenbackground-color:bluepour la balisebody Vérifiez que le résultat est conforme à ce que vous attendiez Quel serait, l'effet de la règle cite {color: green}si on l'introduisait dans votre document de travail ?

1. Aucun effet

2. Le document serait entouré d'un cadre vert

3. Le fond de la page prendrait la couleur verte

4. La citation de Samuel Beckett prendrait la couleur verte.

Vérifiez votre réponse avec votre fichier

Où se cachent les styles ?

Ouvrez votre premier site

Pour chaque titre redéfinissez un style

La balise fontne doit plus apparaître

Enregistrez

Annexe -propriétés CSS

Définir les couleurs

Texte

Arrière plan

Définir les couleurs

Noms de couleurs :

aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow, orange (orange -seulement pour CSS 2.1) (source : http://fr.wikipedia.org/wiki/Couleurs_du_Web) aqua/ cyan (bleu eau, cyan)#00FFFF green (vert)#008000navy(bleu marine)#000080silver (argent)#C0C0C0 black (noir) blue (bleu) #0000FFlime(vert citron)#00FF00purple (violet)#800080white(blanc)#FFFFFF fuchsia / magenta

Définir les couleurs

y Nombres hexadécimaux -16 millions de couleurs (256x256x256) #RRGGBB avec R, G, B de 0 à F

Exemple : #FFFFFF -blanc, #000000 -noir

Nombres hexadécimaux abrégés -4096 couleurs (16x16x16) #RGB avec R, G, B de 0 à F

Exemple : #6C3 = #66CC33

Valeurs RGB

color : rgb(125, 200, 56) Pourcentages RGB (pourcentage du maximum admis -255) color : rgb(50%, 100%, 30%) transparent -pour un arrière plan transparent

Propriétés CSS -Texte

color-définit la couleur du texte

Valeurs : couleur

direction-définit la direction du texte (CSS2)

Valeurs : ltrou rtl

letter-spacing-augmente ou diminue l'espace entre les caractères

Valeurs : normal, taille

line-height-définit la distance entre les lignes

Valeurs : normal, nombre, taille, %

text-align-définit l'alignement du texte dans le cadre d'un élément

Valeurs : left, right, center, justify

text-decoration-ajoute une "décoration» au texte Valeurs : none, underline, overline, line-through, blink

Propriétés CSS -Texte

text-indent-définit le retrait de la première ligne de texte dans un élément

Valeurs :taille, %

text-transform-définit les lettres dans un élément

Valeurs : none, capitalize, uppercase, lowercase

white-space-définit la façon de traiter l'espace intérieur d'un élément

Valeurs : normal, pre, nowrap

word-spacing-augmente ou diminue l'espace entre les mots

Valeurs : normal, taille

Propriétés CSS -Arrière-plan

background-un raccourci pour la définition de toutes les propriétés d'arrière-plan dans une seule déclaration

Valeurs : background-color background-image background-repeat background-attachment background-position

background-attachment-indique si une image d'arrière plan est fixe ou défile avec le reste de la page

Valeurs : scroll, fixed

background-color-définit la couleur d'arrière-plan d'un élément Valeurs : color-rgb, color-hex, color-name, transparent background-image-définit une image d'arrière-plan

Valeurs : url(URL), none

background-position-définit la position d'une image d'arrière-plan

Valeurs : top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right, x% y%, xpos ypos

background-repeat-définit si/comment une image d'arrière-plan est répétée

Valeurs : repeat, repeat-x, repeat-y, no-repeat

Exercice

Ajoutez une image d'arrière-plan à votre page. Testez plusieurs effets en jouant sur le défilement de l'arrière plan. Essayez plusieurs options (ex. no-repeat) Positionnez votre image à divers emplacements et essayez les options scroll et fixedquotesdbs_dbs17.pdfusesText_23

[PDF] b?n ?? các qu?n paris

[PDF] bandolero paris latino (remix 2003)

[PDF] bandolero paris latino traduction paroles

[PDF] bank account and savings account classes java

[PDF] banque de france 01000 bourg en bresse

[PDF] banque de france 92 hauts de seine

[PDF] banque de france meaux 77100

[PDF] banque de france saint germain en laye

[PDF] bar exam essay questions and answers

[PDF] bar exam questions and answers pdf

[PDF] barcelona paris flight time

[PDF] barkodlu ikametgah belgesi

[PDF] base faible exemple

[PDF] base forte ponta grossa

[PDF] bash cookbook pdf download