Remerciez-le!

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

LOGO Développement d’Applications Web (cours 03) 2ème année Licence Informatiqu

LOGO Développement d’Applications Web (cours 03) 2ème année Licence Informatique Université Alger1 2018/ 2019 Prof ALI SAOUCHA Email: n_ali_saoucha@esi.com 1 LOGO 2Chapitre 03Le CSS Le css 3 Introduction 4 Les versions de CSS Le CSS a évolué, et les majeurs versions sont: CSS 1 : dès 1996, on dispose de la première version du CSS. Elle pose les bases de ce langage qui permet de présenter sa page web, comme les couleurs, les marges, les polices de caractères, etc. CSS 2 : apparue en 1999 puis complétée par CSS 2.1, cette nouvelle version de CSS rajoute de nombreuses options. On peut désormais utiliser des techniques de positionnement très précises, qui nous permettent d'afficher des éléments où on le souhaite sur la page. CSS 3 : c'est la dernière version, qui apporte des fonctionnalités particulièrement attendues comme les bordures arrondies, les dégradés, les ombres, etc. C’est le navigateur qui lit le code CSS et comprend comment afficher la page. Plus le navigateur est vieux moins il connait les fonctionnalités du CSS. 5 Comment appliquer un style 6 • Un sélecteur détermine à quel élément un style doit être appliqué. • Une propriété détermine le style qui va être appliqué à un élément. • Une valeur détermine le comportement d’une propriété. Où écrire le CSS ? • 3 possibilités : – Dans la balise ouvrante d’un élément, – Dans l’élément head du document HTML, – Dans un fichier CSS séparé. 7 Dans la balise ouvrante d’un élément on peut déclarer le style à l'intérieur d'une balise html à l'aide de l'attribut style. Par exemple : Cette option n’est pas du tout recommandée. Car elle se rapproche de l’utilisation des balises de mise en forme au début de l’ère Html. 8 Dans l’élément head du document HTML Dans l’entête <head> du fichier Html on insère le code CSS dans une balise <style> à l’intérieur de l’entête <head>. Par exemple : 9 Dans un fichier CSS séparé Dans un fichier .css C’est l’endroit recommandé. C’est la méthode la plus pratique et plus souple. Ça évite de tout mélanger dans un seul fichier. On lie le fichier .css à la page Html à l’aide de la balise <link> que l’on place dans le <head>. 10 Dans la balise ouvrante: elle se rapproche de l’utilisation des balises de mise en forme au début de l’ère Html. Dans l’élément head: le code CSS est répété dans chaque fichier HTML Dans un fichier CSS séparé: Les règles sont écrites qu'une seule fois pour tout votre site 11 Dans un fichier CSS séparé 12 Dans un fichier CSS séparé <link rel="stylesheet" href="nom_fichier_style.css" > L’élément link est représenté sous forme de balise orpheline et doit être accompagné de ses deux attributs « rel » et « href ». L’attribut rel signifie relationship qui correspond donc à la relation entre la ressource et le document courant. Dans notre cas l'attribut rel possède une valeur stylesheet qui indique que c'est une feuille de style.. L’attribut href, que vous connaissez déjà, sert à faire le lien en soi. 13 Dans un fichier CSS séparé 14 Dans un fichier CSS séparé 15 Les commentaires en CSS Les fichiers CSS sont très vite très longs : il est donc essentiel de les commenter proprement ! Un commentaire en CSS : /* Je suis un commentaire CSS */ 18 Appliquer un style en sélectionnant une balise Appliquer du style à une balise La syntaxe est : balise { propriété1 : valeur1 ; propriété2 : valeur2 ; … } Par exemple : 20 Appliquer un style en sélectionnant une balise 21 Appliquer un même style à plusieurs balises La syntaxe est : balise1, balise2, … { propriété1 : valeur1 ; propriété2 : valeur2 ; … } Par exemple : Sélecteurs simples et limitations Jusqu’à présent, nous n’avons manipulé que des sélecteurs que l’on appelle « simple », car ils correspondent à des éléments HTML seuls et sans attributs (par exemple le sélecteur p). Ce type de sélecteur doit être préféré tant que possible pour des raisons d’optimisation et de performance du code: En effet, ils requièrent moins de code et sont donc moins gourmands en énergie que des sélecteurs plus complexes. Votre page mettra ainsi moins de temps à charger. Le problème reste qu’on est quand même très limité avec des sélecteurs simples : comment faire pour appliquer un style différent à deux éléments de même type, deux paragraphe par exemple ? On pourrait placer le code CSS dans un attribut style sur la balise que l'on vise, mais ce n'est pas recommandé (il vaut mieux utiliser un chier CSS externe). Et c’est pour cela que l’on a créé les attributs class et id. 22 Appliquer un style via les attributs : class et id Création d’un style via l’attribut class : on définit d’abord un nom de class qui commence nécessairement par un point (.) de la manière suivante: .nom_classe { propriété1 : valeur1 ; propriété2 : valeur2 ; … } Ensuite, on applique le style à la balise de la manière suivante : <balise class="nom_classe"> 23 Appliquer un style via les attributs : class et id 24 Appliquer un style via les attributs : class et id Création d’un style via l’attribut id : c’est identique à class sauf que le nom de l’id est précédé de # lors de sa définition Contrairement à l’attribut class, l’attribut id ne peut être utilisé qu’une seule fois dans le code. 25 Interdit parce que un identifiant doit être unique. Interdit pour la même raison L’interdiction qui est mentionnée en commentaire est souvent ignorée par les navigateurs, mais elle ne l’est pas pour le validateur du w3c. 26 Limitations class et id Nous ne pouvons pour le moment appliquer un style qu’à un contenu entre balises. Effectivement, on ne pourrait pas appliquer de style particulier au mot « linux » dans l’exemple précédent. Pour remédier à cela, on a inventé les deux éléments HTML div et span. 27 div et span les éléments div et span ne possèdent aucune valeur sémantique, ce qui va à l’encontre même du rôle du HTML. Ainsi, vous ne devez les utiliser que lorsque vous n’avez pas d’autre choix. Les éléments div et span vont nous servir de containers. Nous allons nous en servir pour entourer des blocs de code et ainsi pouvoir attribuer des styles particuliers à ces blocs. L’utilisation des éléments div et span est très simple : il suffit d’entourer le bloc de code voulu avec une paire de balises ouvrante et fermante div ou span Généralement, on attribuera une class ou un id à div et span afin de pouvoir différencier nos différents div et span dans notre page. Ainsi, on peut désormais appliquer un style particulier à n’importe quel bout de code dans notre page HTML. 28 Différence entre div et span div est un élément de type block tandis que span est un élément de type inline. tout élément HTML est soit de type block, soit de type inline. 29 Différence entre block et inline 30 différence entre div et span 31 Différence entre div et span L’élément HTML div est un élément de type block. Cet élément va souvent être utilisé comme conteneur pour plusieurs autres éléments HTML. L’élément HTML span est un élément de type inline. Cet élément va souvent servir de conteneur pour du contenu textuel. 32 div et span 33 34 Les playgrounds Il s’agit d’un IDE en ligne permettant de réaliser du développement front-end (HTML, CSS et JS bien souvent) et de visualiser le résultat. La plupart permettent également de sauvegarder le code et de le partager Jsbin, codepen, jsfidle ,…. https://codepen.io/ 35 36 Les sélecteurs Les sélecteurs simples sélecteurs de type sélecteurs de classe sélecteurs d'identifiant sélecteur universel sélecteurs d'attribut Les combinateurs sélecteurs de voisin direct sélecteurs de voisins sélecteurs d'éléments fils sélecteurs d'éléments descendants Les pseudo- classes Les pseudo- éléments Le sélecteur universel * Le sélecteur * permet de cibler tous les éléments d'un document. Syntaxe : * 37 38 Les sélecteurs Les sélecteurs simples sélecteurs de type sélecteurs de classe sélecteurs d'identifiant sélecteur universel sélecteurs d'attribut Les combinateurs sélecteurs de voisin direct sélecteurs de voisins sélecteurs d'éléments fils sélecteurs d'éléments descendants Les pseudo- classes Les pseudo- éléments Les sélecteurs d'attribut Ce sélecteur simple permet de cibler des éléments d'un document en fonction de la valeur d'un de leurs attributs. Syntaxe : [attr] [attr=valeur] [attr~=valeur] [attr|=valeur] [attr^=valeur] [attr$=valeur] [attr*=valeur] 39 Les sélecteurs d'attribut: [attr] 40 [attr]: Permet de cibler un élément qui possède un attribut attr. Les sélecteurs d'attribut: X[attr] X[attr]: Permet de cibler tous les éléments X possédant un attribut attr. 41 Les sélecteurs d'attribut:[attr=valeur] [attr=valeur] Permet de cibler un élément qui possède un attribut attr dont la valeur est exactement valeur. Les sélecteurs d'attribut:[attr~=valeur] [attr~=valeur] Permet de cibler un élément qui possède un attribut attr dont la valeur est valeur. Cette forme permet de fournir une liste de valeurs, séparées par des blancs, à tester. Si au moins une de ces valeurs est égale à celle de l'attribut, uploads/Litterature/ chap3-css-2020.pdf