Loading presentation...
Prezi is an interactive zooming presentation

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Seance 3 - CSS

No description
by

Elie Matta

on 2 March 2014

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Seance 3 - CSS

Les feuilles de styles
en cascades "CSS" Rappel Vous devriez savoir Vous devriez savoir fair CSS: Cascading Style Sheets Les règles CSS label { } Une règle CSS comporte deux parties principales: -Un sélecteur -Une ou plusieurs déclarations -La déclaration est formée d'une ou plusieurs propriétés -La propriété doit avoir une valeur Sélecteur Propriété Valeur color: lightslategrey; Déclaration Où mettre du CSS ? On peut écrire du code CSS dans 3 endroits différents: 1- Méthode A : dans un fichier .css à l'aide de l'en-tête HTML 2- Méthode B : dans l'en-tête du fichier XHTML 3- Méthode C : dans les balises Méthode 1 Mettre le CSS dans un fichier CSS en utilisant la balise <link> en spécifiant les attributs <head>
<title>Bienvenue sur mon site web</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="css/styles.css" media="all" />
</head> Décrit le type du
contenu du fichier Décrit le type de relation C'est l'emplacement où se trouve votre feuille de style sous forme de lien relatif. Décrit la mise en page
(autres exemples: screen, print) Méthode 2 Mettre les règles CSS directement dans la balise <style> <head>
<title>Bienvenue sur mon site web</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
label {
color: lightslategrey;
}
</style>
</head> styles.css label { /* Change la couleur de toutes les balises label */
color: lightslategrey;
} Méthode 3 Cette méthode est la plus pratique: Elle vous permettra de faire changer le design du site en un clin d'oeil. Le fichier ne sera téléchargé qu'une seule fois. Cette méthode ressemble beaucoup à la première mais elle est moins pratique. Ajouter un attribut style à la balise pour appliquer un style particulier. <label style="color: lightslategrey;">Nom et Prénom:</label> -Le CSS sera peu lisible à l'intérieur des balises -La possibilité de changer la couleur de toutes les balises du site en un clic n'est plus possible. Type des sélecteurs 1- balise : redéfinit les balises 2- id : s'applique sur un élément seulement 3- class : s'applique sur plusieurs éléments qui ont un attribut class="nomClassIci" label {
color: lightslategrey;
} <h1 id="titre">Votre nom et prénom</h1> #titre {
color: red;
} HTML CSS HTML <label class="description">Nom et Prénom:</label> CSS .description {
color: lightslategrey;
} Imbrication de balises #apropos_wrapper p em
{
color: green;
} 1- Mélange des balises et id .contenu_detail, #apropos_wrapper p {
color: black;
} 2- Mélange des balises, classes et id /*
Cela va chercher la balise dont l'id = apropos_wrapper, puis cherche la balise p,
et finalement cherche la balise em pour la donner la couleur verte.
L'ordre est important.
*/ Cette méthode a des défauts: -Les règles CSS -Où mettre du CSS -Type de sélecteurs -Imbrication de balises dans du CSS -Gère la structuration et la présentation de la page web séparément du code HTML -Contient les styles qui définissent la façon d'afficher les éléments HTML -Grâce à ce langage, nous allons pouvoir créer rapidement et simplement la mise en page du site -Extension .css
Full transcript