Compte rendu css

Compte rendu css

Compte rendu N°3 I) Introduction : Ce compte rendu contient une feuille de style et une page html qui exploite les proprietes de la feuille CSS tout en les presentant. II) Code et commentaires : La feuille de style « design. css » /*insertion d’une image de fond dans le body*/ body { background-image : url(« im1. jpg »); } /*Creation de la classe “titreNum” qui met en forme un titre*/ .titreNum { /* ”color” permet de definir la couleur du texte*/ color : #20B2AA; /* “font-size” permet de definir la taille de la police, la methode « x. em » permet de definir la taille de la police en proportion par rapport a la taille normale (qui est de 1. 0em) */ font-size : 1. 5em; /* “text-decoration” permet de personnaliser le texte, dans ce cas il est souligne */ text-decoration : underline; /* “text-weight” permet de definir l’epaisseur du texte, qui est dans ce cas gras */ text-weight : bold; } /* Definition des attributs de la balise <h1> */ h1 { font-size : 3. 2em; /* “text-align” permet de definir l’alignement du texte */ text-align : center; color : #FF1493; * “font-family” permet de definir les polices a appliquer au texte, “serif” designe la police par

Désolé, mais les essais complets ne sont disponibles que pour les utilisateurs enregistrés

Choisissez un plan d'adhésion
defaut du navigateur qui sera applique si toutes les polices qui precedent ne sont pas definies */ font-family : « Curlz MT », »comic sans ms »,serif; text-decoration : underline; } /* Creation d’une classe qui permet de faire clignoter le texte (ne marche qu’avec FireFox) */ .texteClignotant { color : red; /* “text-decoration” prend cette fois la valeur “blink” pour indiquer le clignotement du texte*/ text-decoration : blink; } /* Definition des attributs pour les paragraphes */ { /* “word-spacing” permet de determiner l’espacement entre deux mots, la reference est faite en pixel */ word-spacing : 5px; /* “text-indent” permet de definir le decalage en debut de paragraphe pour une meilleure lisibilite, la refrence s’effectue en pixel */ text-indent : 40px; /* le texte dans ce cas est justifie */ text-align : justify; /* “capitalize” permet de transformer en majuscule le 1er caractere de chaque mot */ text-transform : capitalize; } /* Creation d’une classe “marqueur” qui permet de mettre en mettre en valeur une partie du texte */ marqueur { /* Definir une couleur de fond pour la partie a laquelle sera applique la classe */ background-color : yellow; font-weight : bold; } /* Creation d’une classe “fond” qui permet de mettre en valeur un bloc specifique */ .fond { text-align : center; background-color : black; color : white; } /* Definition des attributs de la balise <a> */ a { /* permet d’enlever le souligne applique par defaut aux liens hypertextes */ text-decoration : none; color : #DC143C; font-size :3em; } /* Definition des attributs du lien lors du passage de la souris dessus */ :hover { color : #7FFF00; } /* Definition des attributs du lien lorsque la page a ete visitee */ a:visited { color : yellow; } /* Definition des attributs du lien lorsque le focus est dessus ou lorsqu’il est actif */ a:focus,a:active { color : #FFA500 ; } La page « site. html » <html> <head> <title>Mon site</title> <! –Utilisation de la feuille de style “design. css”, link sert a faire le lien entre la feuille css et la page html–> <link rel= »stylesheet » media= »screen » type= »text/css » title= »perso » href= »design. css »> lt;/head> <body> <h1>Les feuilles de styles</h1> < ! –<span> permet de specifier une classe a utiliser et a appliquer a une partie de la page –> <span class= »titreNum »>I) Retrait et mise en forme paragraphe :</span><br> <p>Ce paragraphe sera decale et tous ses mots commenceront par une <span class= »marqueur »>majuscule</span>, tout comme il sera justifie. </p> <p > Dans ce paragraphe il existe un <span class= »texteClignotant »>texte clignotant !!!! </span></p> lt;span class= »titreNum »>II) Differentes mises en formes et utilisations de classes:</span><br> <div class= »fond »> <form name= »f1″ method= »post »> Combien existe-il de manieres d’inserer un code CSS ? ;br; ;input type= »radio » name= »l »;;span class= »texteClignotant »;1;/span; methode;br; ;input type= »radio » name= »l »;;span class= »texteClignotant »;2;/span; methodes;br; ;input type= »radio » name= »l »;;span class= »texteClignotant »;3;/span; methodes;br; ;/form; ;/div; lt;span class= »titreNum »;III) Les modifications sur les liens hypertextes;/span;;br; ;p; ;a href= »www. google. com »;Faire une ;span class= »marqueur »;recherche;/span;;/a; ;/p; ;/body; ;/html; Rq : tous les attributs definis dans le fichier CSS seront appliques au sein de la page html ! III) Conclusion : L’utilisation des feuilles de styles permet une personnalisation rapide et efficace des pages web, tout comme elle permet d’eviter les repetions de codes dans les pages Html ce qui les rend moins chargees et donc permet une navigation plus rapide.