Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Programmation Web1 Chapitre 4 CSS3 CSS ou « Cascading Style Sheets » est un lan

Programmation Web1 Chapitre 4 CSS3 CSS ou « Cascading Style Sheets » est un langage utilisé pour décrire la présentation d'un document en html. Le CSS améliore la présentation et la mise en page en décrivant les couleurs, la police, les couleurs et images de fond, le remplissage, les marges, les bordures ... Le langage CSS n'est autre que des feuilles de style en cascade, il décrit la forme et non le fond de la page. Les feuilles de style permettent notamment : d'obtenir une présentation homogène sur tout un site en faisant appel sur toutes les pages à une même définition de style ; de permettre le changement de l'aspect d'un site complet entier par la seule modification de quelques lignes ; une plus grande lisibilité du HTML, car les styles sont définis à part ; des chargements de page plus rapides, pour les mêmes raisons que précédemment ; un positionnement plus rigoureux des éléments. L’APPLICATION DE CSS À UN DOCUMENT HTML : Pour la mise en forme d’un document HTML, on peut trouver plusieurs possibilités. 1. feuille de style externe 2. Style CSS intégré dans la page 3. Style CSS intégré dans la balise 1. feuille de style externe Il est recommandé de faire un lien vers une feuille de style externe (un fichier à part) et le placer dans la balise< head>. Une feuille de style externe est un fichier texte ayant l'extension « .css ». Si les règles ne sont pas stockées dans une feuille de style externe, on rencontrera d’énormes difficultés en cas de modification de ces mêmes règles. <head> <link rel="stylesheet" type="text/css" href="ma_feuille_de_style.css" /> </head> Programmation Web1 Chapitre 4  La balise <link> avertit le navigateur qu'il faudra réaliser un lien.  L'attribut rel="stylesheet" précise qu'il y trouvera une feuille de style externe.  L'attribut type="text/css" précise que l'information est du texte et du genre cascading style sheets (css).  L'attribut classique de lien href=" ... " donne le chemin d'accès et le nom du fichier à lier. 2. Style CSS intégré dans la page Il s’agit d’inclure le code CSS avec la balise HTML <style> dans l’entête de la page <head> <html> <head> <title>Exemple</title> <style type="text/css"> body {background-color: #0000ff;} </style> </head> <body> <p>Cette page a le fond bleu</p> </body> </html> 3. Style CSS intégré dans la balise Il s’agit d’utiliser l’attribut style et l’appliquer sur une balise HTML et ajouter le code CSS entre les " " <html> <head> <title>Exemple</title> </head> <body style="background-color: #0000ff;"> <p style="background-color: #0000ff ,>Cette page a le fond bleu</p> </body> </htm</html> 4. Cascading Ordre D'une manière générale, tous les styles seront "cascade" dans une nouvelle feuille de style "virtuel" par les règles suivantes, où le numéro un a la plus haute priorité: 1) style de ligne (dans un élément HTML) 2) feuilles de style externes et internes (dans la section de la tête) 3) Navigateur par défaut Programmation Web1 Chapitre 4 Donc, un style en ligne (dans un élément HTML spécifique) a la plus haute priorité, ce qui signifie qu'il va remplacer un style défini dans la balise <head>, ou dans une feuille de style externe, ou une valeur navigateur par défaut. I. LE SYNTAXE CSS Une règle CSS se compose d'un sélecteur et un bloc de déclaration: Les sélecteurs sont les éléments HTML à appliquer le style. Le bloc de déclaration contient une ou plusieurs déclarations séparées par des points-virgules. Chaque déclaration comprend un nom de propriété CSS et une valeur, séparés par deux points. Une déclaration CSS se termine toujours par un point-virgule, et les blocs de déclaration sont entourés par des accolades. Exemple: p { color: red; text-align: center; } 1. Les sélecteurs CSS Les sélecteurs CSS sont utilisés pour «trouver» (ou sélectionner) les éléments HTML en fonction de leur nom d'élément, id, classe, attribut, et plus encore. 1.1. Le sélecteur de style Le sélecteur de style sélectionne des éléments basés sur le nom de l'élément. Sélectionner tous les éléments <p>les centrer, colorer le texte en bleu p { text-align: center; color: blue; } 1.2. Le sélecteur d’identifiant Utilise l'attribut id d'un élément HTML pour sélectionner un élément spécifique. Programmation Web1 Chapitre 4 L'identifiant d'un élément doit être unique dans une page, de sorte que le sélecteur de id sélectionne un élément unique. Pour sélectionner un élément avec un id spécifique, écrire un dièse (#), suivi par l'identifiant de l'élément. <p id="para1"> c’est correct, mais si on le rencontre dans la même page : <h1 id="para1"> ce n'est plus correct ! #para1 { text-align: center; color: red; } Cette règle centre le texte et le colore en rouge de n'importe quel élément qui porte un attribut id ayant comme valeur para1. 1.3. Le sélecteur de classe Ce sélecteur permet d'appliquer des styles à tous les éléments marqués d'une classe, peu importe le type d'élément à l'aide l'attribut class Pour sélectionner des éléments avec une classe spécifique, écrire une période de caractères (.), Suivi du nom de la classe. Dans l'exemple ci-dessous, tous les éléments HTML avec class = "center" sera rouge et aligné au centre: <p class="center ">texte </p> .center { text-align: center; color: red; } On peut spécifier quelques éléments HTML spécifiques affectés par une classe. Exemple : seulement <p> éléments avec class = "center" sera aligné au centre: p.center { text-align: center; color: red; } Programmation Web1 Chapitre 4 Les éléments HTML peuvent également se référer à plus d'une classe. l'élément <p> sera stylé selon la class = "center" et class = "large": <p class="center large">texte .</p> Les balises génériques : Pour définir un style applicable seulement à une partie de la page et non plus à une balise <HTML> précise, vous pouvez placer un attribut style dans une balise <DIV> ou <SPAN>. Ces balises définissent une zone de texte donnée, donc tout ce qui se trouve entre la balise de début et la balise de fin adopte le style défini. L'élément HTML <div> (qui signifie division du document) est un conteneur générique qui permet d'organiser le contenu sans représenter rien de particulier. Il peut être utilisé afin de grouper d'autres éléments pour leur appliquer un style (en utilisant les attributs class ou id). C’est une balise de type block. Comme <p>,<h1> etc... Elle crée un nouveau "bloc" dans la page, et provoque donc obligatoirement un retour à la ligne. <div>Salut</div> <div>Ceci est une division</div> L'élément HTML <span> est un conteneur générique en ligne (inline) pour les contenus phrasés. Il ne représente rien de particulier. Il peut être utilisé pour grouper des éléments afin de les mettre en forme (grâce aux attributs class ou id et aux règles CSS). C’est une balise de type inline, c'est une balise qui se met à l'intérieur d'un paragraphe <span>Salut</span> <span>Ceci est un conteneur générique</span> Exemple : Code HTML: <p>Comme l'a dit <span class="nom">Neil Armstrong</span>un certain 20 juillet 1969...</p> Code CSS : .nom { color:blue; } Programmation Web1 Chapitre 4 1.4. Regroupement de sélecteurs Il est préférable de regrouper les éléments avec les mêmes définitions par des sélecteurs de groupe et séparer chaque sélecteur par une virgule. h1, h2, p { text-align: center; color: red;} 2. Les Commentaires Un commentaire CSS est utilisé pour expliquer le code, il est ignoré par les navigateurs. Il commence par / * et se termine par * /. Les commentaires peuvent également étendre sur plusieurs lignes: p { color: red; /* ceci est un commentaire sur une ligne */ text-align: center; } /* ce ci est un commentaire mutiligne */ II. FORMATTAGE DE TEXTE 1. color La propriété color modifie la couleur du texte en faisant appel à divers systèmes de notation : hexadécimale, rouge-vert-bleu, teinte-saturation-lumière p { color: green; /* C'est vert avec le mot clé "green" */ color: #008000; /* C'est vert avec la notation hexadécimale */ color: rgb(0,128,0); /* C'est vert avec la notation RGB */ color: hsl(120, 100%, 25%);/* C'est vert avec la notation HSL */ } 2. Mise en forme du texte 2.1. font-family font-family définit une liste de polices dans lesquelles le texte peut apparaître. Programmation Web1 Chapitre 4 La valeur de cette propriété est une liste de polices séparées par des virgules. Si le navigateur ne peut pas trouver la première police de la liste, il passe alors à la suivante et l'applique au texte concerné. Si aucune police de la liste ne fonctionne, alors le navigateur utilise sa propre police par défaut. Voici un exemple : <p class="arial">texte.</p> .arial { font-family:"Times New Roman", Times, arial; } 2.2. font-size La propriété font-size ajuste la taille du texte, en utilisant une de ces unités :  px :L'unité px détermine la hauteur en pixels de votre texte.  em : em spécifie la largeur de la lettre "M" avec la police utilisée. Ainsi, en indiquant une taille de police de 1.5em, on précise que la taille du texte devrait faire 1,5 fois la taille de la lettre "M" de l'élément parent. Si l'élément parent n'a pas de taille absolue, 1em vaut par défaut 16px.  rem : facile à utiliser comme unité qu'em car la taille uploads/s3/ le-langage-css-n-x27-est-autre-que-des-feuilles-de-style-en-cascade-il-decrit-la-forme-et-non-le-fond-de-la.pdf