front end
1.0.0
Préparation : Pour ce contenu, l'étudiant doit disposer d'un ordinateur avec accès Internet, d'un navigateur web prenant en charge HTML 5 (Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, Opera, etc.), d'un éditeur de texte (VSCode, etc.) .) et une plateforme d'hébergement (gratuite ou payante).
Quand on parle de site web, on peut remarquer que ce terme est la combinaison de deux mots en anglais : « web », qui signifie réseau et fait référence au World Wide Web, et « site », qui signifie lieu. En ce sens, un site Web ou un site est un endroit accessible sur Internet, via une URL, et comportant un ensemble de pages programmées dans une certaine langue.
Pour mieux comprendre ce sujet, regardons un exemple : lorsque vous tapez l'adresse blog.betrybe.com dans votre navigateur internet pour accéder au blog de Trybe, le navigateur va chercher où se trouve ce site sur internet. Ensuite, une requête sera faite au serveur.
Tous les fichiers texte, image et style qui composent la page Web sont stockés sur ce serveur. Ensuite, le serveur renverra cet ensemble de documents au navigateur afin qu'il puisse afficher le contenu tel que vous le voyez sur votre écran.
Les sites Web peuvent présenter différentes formes et contenus. Certaines des options incluent : des magasins virtuels, tels que Mercado Livre et Amazon, où les produits peuvent être achetés et vendus ; sites Web et portefeuilles institutionnels, utilisés par les entreprises et les particuliers pour se présenter et être trouvés par les clients ; et des blogs, comme celui que vous lisez.
De plus, les sites Web peuvent également être classés comme statiques ou dynamiques. Les sites Web statiques sont généralement développés en utilisant HTML, CSS et JavaScript. Son contenu est plus simple et il n’y a aucune interaction avec une base de données.
Les sites Web dynamiques, en plus de tirer parti du HTML, du CSS et du JavaScript, utilisent également des langages de programmation plus robustes, comme PHP. Ces sites disposent de fonctionnalités connectées à une base de données. De cette façon, chaque page consultée peut apporter des données spécifiques.
Avec le Web Design, vous devez observer l'importance de l'interface pour le développement de sites Web, l'évolution des technologies utilisées dans la construction de pages Web riches (web 1.0, web 2.0, web 3.0 et web 4.0), l'évolution des interfaces (esthétiques, fonctionnelles et structurelles). ).
Par conséquent, vous devez comprendre l’importance de créer des interfaces riches pour créer un site Web, en visant la meilleure expérience de navigation et d’utilisabilité pour l’utilisateur final, connaissant certaines technologies utilisées dans le passé pour créer des sites en ligne. À partir de cette vision, observez les anciennes tendances du marché, ainsi que les nouvelles tendances dans le développement des interfaces.
Palette de couleurs :
Dégradés :
Fondamentalement, le développement Web consiste à coder des pages pour Internet. Cependant, cette tâche va au-delà de l'utilisation de HTML et CSS, les outils de base pour créer une page statique, qui présente des informations qui ne peuvent être modifiées qu'en éditant le code source.
À l’inverse, les pages d’un site Web peuvent être dynamiques. Cela signifie que le contenu affiché peut être modifié sans interférer avec le code source. Pour ce faire, les parties dynamiques du site Web sont stockées dans une base de données, accessible chaque fois qu'il est nécessaire de récupérer ce contenu.
Cette fonctionnalité permet le développement d'applications complexes, qui utilisent des règles métier, des API — Application Programming Interface — et bien plus encore. Il existe donc une division entre les activités axées sur le développement Web, le codage côté client (front-end) et le codage côté serveur (back-end).
Exemple d'API avec, la structure la plus utilisée actuellement pour les Applications Web et Mobiles, l'API REST également appelée API RESTful .
Les applications Web représentent un nombre croissant de sites sur le Web ; c'est-à-dire qu'elles imitent les applications de bureau plutôt que les documents traditionnels et les liens statiques de texte et d'images qui constituent la majorité du Web. A titre d’exemple, nous avons des traitements de texte en ligne, des outils de retouche photo, des sites de cartographie, etc. Propulsés en grande partie par JavaScript, ils ont poussé HTML4 au bord de ses capacités. HTML5 spécifie de nouvelles API (Application Programming Interface) pour DOM (Document Object Model), qui est une convention multiplateforme et indépendante du langage pour représenter et interagir avec des objets et des documents HTML, XHTML et XML.
Ces nouvelles API vous aident à glisser-déposer des objets envoyés par le serveur, tels que des dessins, des vidéos, etc.
Ces nouvelles interfaces que les pages HTML exposent à JavaScript via des objets dans le DOM facilitent l'écriture d'applications utilisant des modèles hautement spécifiés, plutôt que de simples gadgets mal documentés.
Plus important encore est la nécessité d'un standard ouvert et libre (à utiliser et à mettre en œuvre) qui puisse rivaliser avec les standards propriétaires comme Adobe Flash ou Microsoft Silverlight. Indépendamment de ce que vous pensez de ces technologies ou de ces entreprises, nous pensons que le Web est une plateforme vitale pour la société, le commerce et les communications entre les mains d'un fabricant.
Des millions de pages Web sont déjà utilisées et il est impératif de continuer à les reproduire. Ainsi, HTML5 est principalement un dérivé de HTML4 qui continue de définir la manière dont les navigateurs doivent gérer les anciens balisages tels que <font> , <center> et d'autres nouveaux, à mesure que des millions de pages Web les utilisent.
Le terme interface peut avoir plusieurs significations selon le domaine dans lequel il est étudié. Dans le domaine des technologies de l'information, l'interface désigne la possibilité de communication entre deux systèmes qui ne pourraient pas communiquer naturellement sans une aide extérieure .
HCI est l’étude de l’interaction entre les personnes et les ordinateurs. Il s'agit d'un sujet interdisciplinaire qui relie l'informatique, les arts, le design, l'ergonomie, la psychologie, la sociologie, la sémiotique, la linguistique et des domaines connexes. L'interaction entre les humains et les machines s'effectue via l'interface utilisateur, composée de logiciels et de matériel.
L'interaction homme-machine est une discipline concernée par la conception, l'évaluation et la mise en œuvre de systèmes informatiques interactifs à usage humain et par l'étude des principaux phénomènes qui les entourent.
<a href="mailto:[email protected]">Envoyer un e-mail</a>
Le terme média numérique est à l'opposé du média analogique, qui était configuré par une base matérielle : le son était enregistré dans de petits sillons, sur une surface en vinyle et, lorsqu'une aiguille passait dans ces sillons, le son était reproduit. Dans les médias numériques, le support physique disparaît pratiquement et les données sont converties en séquences numériques ou de chiffres - d'où l'utilisation du terme numérique. Ainsi, les sons, les images, les textes sont en réalité des séquences de nombres, ce qui permet le partage, le stockage et la conversion des données. Au sens le plus large, les médias numériques peuvent être définis comme l'ensemble des véhicules et dispositifs de communication basés sur la technologie numérique, permettant la diffusion ou la communication numérique d'œuvres intellectuelles écrites, sonores ou visuelles. Moyens d'origine électronique utilisés dans les stratégies de communication des marques auprès de leurs consommateurs, généralement appelés médias numériques.
Flash a toujours été l'alternative la plus viable pour ceux qui avaient besoin d'ajouter des vidéos et de la musique aux pages Web. Il était et est toujours présent dans presque tous les navigateurs et nous disposions d’un format qui pouvait être utilisé sans problème majeur.
Ajoutez simplement un appel au plugin et cela fonctionne.
<object width="426" height="240"><param name="movie" value=" https://youtu.be/S2Vty9srpFw"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><param name="allowscriptaccess" value="always"></param> <embed src= https://www.youtube.com/embed/S2Vty9srpFw type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="426" height="240"></embed></object>
En raison d'incohérences du navigateur, il a été nécessaire d'ajouter à la fois le <object> ; quant à la commande <embed> ;, commandes spécifiques à l'utilisation du plugin, dupliquant de nombreux attributs. Sans compter que les plugins comme Flash provoquent de nombreuses instabilités, provoquant des erreurs pouvant même entraîner la fermeture du navigateur.
Pour cette raison, HTML 5 est doté d'un nouveau support, natif du langage, pour éviter l'utilisation de plugins et de commandes inutiles. Actuellement, il suffit de passer un simple appel, comme s'il s'agissait d'une image et le fichier est déclenché.
<contrôles vidéo src="video.mp4" width="426" height="240"></video>
Le problème présenté par la nouvelle commande est l'utilisation de l'attribut src qui ne fonctionne pas bien dans certains navigateurs. Et si l’on veut que tout le monde puisse ouvrir la page, avec n’importe quel navigateur, il faut utiliser un autre type d’attribut. Par conséquent, il est courant d'utiliser l'attribut <source> dans la balise <video> .
L'élément <source> peut être utilisé plusieurs fois et vous permet de définir un format vidéo pour chaque navigateur, vous offrant ainsi une plus grande portée.
< video width =" 426 " height =" 240 " controls >
< source src =" video.mp4 " type =" video/mp4 " >
< source src =" video.webm " type =" video/webm " >
< source src =" video.ogg " type =" video/ogg " >
</ video > < audio controls >
< source src =" audio.mp3 " type =" audio/mpeg " >
< source src =" audio.ogg " type =" audio/ogg " >
< source src =" audio.wav " type =" audio/wav " >
</ audio >Il existe plusieurs codecs possibles et il vous faudra exporter au moins deux versions pour avoir une plus grande portée.
Remarque : Les codecs sont des programmes utilisés pour encoder et décoder des fichiers multimédias. Ils compressent le format original, favorisant le stockage, et le décompressent lors de la reproduction, le transformant à nouveau en image ou en audio.
Tous les exemples audio et vidéo mentionnés sont importés via un document dans le répertoire. Et la question est, comment importer une vidéo déjà hébergée sur un site comme YouTube ou Vimeo ? Et laquelle des deux solutions (Via document ou via serveur) est la plus avantageuse ?
Voyons comment importer des vidéos depuis YouTube et Vimeo, étape par étape !
Jusqu'à l'apparition du HTML5, les tableaux étaient utilisés comme ressource pour concevoir des mises en page. Les concepteurs ont utilisé des tableaux comme grille pour afficher des images et du texte, et ils ont été largement utilisés, devenant ainsi la forme prédominante de conception de sites Web, créant ainsi un aspect riche.
Cependant, aujourd’hui, l’utilisation de tableaux interfère en réalité avec la construction de sites Web meilleurs, plus accessibles, flexibles et fonctionnels, notamment pour les nouveaux médias, tels que les téléphones portables, les tablettes, etc.
Ces tableaux existent toujours dans HTML 5 en tant que ressource permettant d'afficher des données tabulaires, des informations provenant d'une base de données. Avec la nouvelle version de HTML, nous pouvons créer des sites Web entièrement sans tableaux, créant ainsi des mises en page dynamiques qui apparaissent sur de grands écrans comme sur un ordinateur et s'adaptent bien à un petit écran de smartphone. Plus tard, vous verrez comment créer des mises en page réactives avec HTML5 et CSS3.
La commande table n'a pas été supprimée du langage, mais son utilisation a été restreinte. Par contre, nous avons encore plusieurs sites Internet qui utilisent cette ressource, il est donc important que nous comprenions son fonctionnement afin de pouvoir, si nécessaire, entretenir ce type de page.
La commande pour insérer une table est <table> . Pour démarrer une ligne , il faut introduire la balise <tr> et pour une cellule <td> , qui divise la ligne du tableau. <th> divise la ligne du tableau en plaçant le contenu en gras. Toutes ces commandes se terminent respectivement par </table> , </tr> et </td> .
< table >
< tr >
< td > </ td >
< td > </ td >
</ tr >
</ table > La commande <table> possède une série d'attributs qui facilitent le formatage des tableaux. Les principaux sont :
align="" | aligne le tableau sur trois positions : center , left , right et justify |
bgcolor="" | détermine la couleur du tableau |
border="" | détermine la taille de la bordure, si elle est nulle, la bordure n'est pas affichée |
cellspacing="" | détermine l'espacement entre les cellules |
colspan="" | détermine le regroupement entre deux ou plusieurs colonnes du tableau (latéralement) |
rowspan="" | détermine le regroupement entre deux ou plusieurs lignes du tableau. (vers le bas et vers le haut) |
cellpadding="" | détermine l'espacement entre le texte et la bordure de la cellule |
<caption> affiche le texte centré par rapport au tableau, comme s'il s'agissait d'une légende.
Pour choisir les lignes internes qui seront affichées dans le tableau, nous utilisons l'attribut RULES , au sein de la balise. Les compléments de cet attribut sont :
none | pas de ligne entière. |
all | pour afficher toutes les lignes entre chaque colonne et ligne du tableau (par défaut) |
rows | pour les lignes horizontales entre chaque ligne du tableau. |
cols | pour les lignes verticales entre chaque colonne du tableau. |
groups | pour les lignes entre les groupes de colonnes et les sections horizontales, définies par des balises spéciales telles que <colgroup> et <thead> |
Voir quelques exemples :
< table border rules =" all " 6 > <table border rules="none"6> <table border rules="cols"6> <table border rules="groups"6> <table border rules="rows"6>La partie formulaires HTML est très importante pour remplir les données que les utilisateurs saisissent dans la page HTML. La collecte de ces données se fait par le back-end avec un langage de programmation back-end (PHP, JavaScript, Python, Java, etc.) qui stocke et interroge ces données dans une base de données (MySQL, PostgreSQL, MongoDB, OracleDB, etc. . Regardons les balises de formulaire :
Formulaire de connexion (passe-partout) :
< html >
< body >
< h2 > Login </ h2 >
< form >
Login: < br >
< input type =" email " name =" email " > < br >
Senha: < br >
< input type =" password " name =" senha " > < br >
< input type =" submit " value =" Logar " >
</ form >
</ body >
</ html > Grâce à l'attribut type , nous pouvons définir le type de notre input utilisée, l'attribut name='' nous permet de traiter les données envoyées via un langage de programmation.
Formulaire de connexion (passe-partout) - Avec PHP :
< html >
< body >
< h2 > Login </ h2 >
< form action =" processa.php " >
Login: < br >
< input type =" email " name =" email " required > < br >
Senha: < br >
< input type =" password " name =" senha " required > < br >
< input type =" submit " value =" Logar " >
</ form >
</ body >
</ html >Formulaire d'inscription (passe-partout) :
< html >
< head >
< title > Cadastro </ title >
</ head >
< body >
< h2 > Cadastre-se </ h2 >
< form action =" processa.php " >
Nome Completo: < br >
< input type =" text " name =" nome " required > < br >
<!-- <label for="email">Email:</label> -->
Email: < br >
< input type =" email " name =" email " required > < br >
Senha: < br >
< input type =" password " name =" password " required > < br >
Repita a senha: < br >
< input type =" password " name =" password " required > < br >
Sexo: < br >
< input type =" radio " name =" sexo " value =" masculino " > Masculino < br >
< input type =" radio " name =" sexo " value =" feminino " > Feminino < br >
Interesses: < br >
< input type =" checkbox " name =" interesse " value =" futebol " > Futebol < br >
< input type =" checkbox " name =" interesse " value =" video-games " > Video-games < br >
< input type =" checkbox " name =" interesse " value =" academia " > Academia < br >
Estado < br >
< select name =" estado " >
< option value =" RJ " > RJ </ option >
< option value =" SP " > SP </ option >
< option value =" MG " > MG </ option >
< option value =" ES " > ES </ option >
</ select > < br >
Comente! < br >
< textarea name =" comentario " > </ textarea > < br >
< input type =" submit " value =" Cadastrar " >
</ form >
</ body >
</ html > Nous ne pourrons input entre radios que si le name est le même, de cette façon nous pouvons regrouper ces informations et une seule d'entre elles sera marquée.
Avec checkbox nous pouvons choisir plus d’une option à sélectionner.
Avec
Nous pouvons définir les types <input> et leurs attributs :
buttonpasswordtext Les éléments <a> , <input> et <button> sont tous utilisés pour créer des boutons sur une page HTML, mais chacun a des objectifs légèrement différents et est utilisé dans des contextes différents.
L'ancre <a> est utilisée pour créer des liens en HTML. Il est principalement utilisé pour naviguer entre différentes pages Web ou pour ancrer différentes sections d’une page. Lorsqu'un utilisateur clique sur un élément <a> , il est dirigé vers l'URL spécifiée dans l'attribut href . Les éléments <a> sont souvent stylisés avec CSS pour ressembler à des boutons, mais ils ont un comportement de lien standard.
< a href =" pagina.html " > Link </ a > <input> est utilisé pour créer des éléments d'entrée dans un formulaire HTML. Bien qu’il soit souvent utilisé pour créer des champs de saisie de texte, il peut également être utilisé pour créer des boutons. Le type de bouton est spécifié par l'attribut type . Certaines valeurs courantes pour l'attribut type sont "button" , "submit" et "reset" . Les boutons <input> sont utiles lorsque vous devez envoyer des données d'un formulaire à un serveur ou effectuer des actions spécifiques lorsque vous cliquez sur un bouton.
< input type =" button " value =" Clique Aqui " > <button> est utilisé pour créer des boutons en HTML. Il peut contenir du texte, des éléments d'image ou d'autres éléments HTML. Tout comme les boutons <input> , les boutons <button> peuvent avoir un type spécifique spécifié par l'attribut type , tel que "button" , "submit" ou "reset" . Les boutons <button> offrent plus de flexibilité en termes de contenu et de comportement que les boutons <input> , notamment en ce qui concerne le style et la gestion des événements à l'aide de JavaScript.
< button type =" button " > Clique Aqui </ button > En bref, si vous créez un bouton de navigation, utilisez <a> . Si vous créez un bouton pour soumettre des données à partir d'un formulaire, utilisez <input type="submit"> ou <button type="submit"> . Si vous créez un bouton pour effectuer une action spécifique sur la page (comme afficher ou masquer du contenu), utilisez <button type="button"> .
Le HTML sémantique sert à organiser et à structurer les éléments du document en parties spécifiques afin qu'ils ne se propagent pas dans tout le corps de manière désorganisée et illisible.
Jusqu'à la version 4 de HTML, les divs étaient la principale sémantique structurante de la page, avec l'arrivée du HTML5 de nouveaux TAG sont apparus avec des fonctions div créées pour structurer les éléments contenus dans le document, ce qui a rendu la structuration de la page beaucoup plus facile. Notez que vous pouvez comparer la structure d'une page Web avec la mise en page d'une page de journal , car les deux contiennent des en-têtes, des pieds de page, des articles et des sections.
<section> représente une section générique dans un document. Cet élément peut contenir un regroupement de textes avec plusieurs chapitres, sections numérotées, etc. Dans l'exemple suivant, un article est présenté contenant un sujet principal et, au sein de ce sujet, plusieurs sections avec des sujets différents. 
<header> , également utilisé pour délimiter le titre de la section, fonctionne en conjonction avec les éléments précédents, cependant, il n'est pas obligatoire. 
<nav> (navigation) cet élément est la section où se trouvent les informations de la page. Généralement, des liens (liens internes) vers la page elle-même ou des liens externes vers d'autres pages de sites Web externes sont placés dans cette section. 
<article> (article) cet élément est un article indépendant au sein d'un texte, cet élément peut ou non être dans un élément <section> . Imaginez un journal avec des sections sur les sports, les potins, etc. Dans chaque section, il y a plusieurs articles sur des textes spécifiques, par exemple, dans la section sports, il peut y avoir un article parlant de l'équipe A, un autre de l'équipe B et un autre de l'équipe C. Un article peut contenir un élément <header> qui est le title et un élément <footer> qui est le pied de page de l'élément. 
<footer> (pied de page) cet élément contient essentiellement des informations sur le contenu de la section, telles que l'auteur, les liens connexes, etc. 
<aside> cet élément contient des informations qui ne sont pas directement liées au texte. Par exemple : publicités payantes, liens promotionnels, etc. 
Il se caractérise par l'écriture de code CSS, à l'aide de la commande HTML <style> . Cette méthode est supérieure à la précédente, car toutes les règles CSS se trouvent au début du code HTML5. Cependant, ces règles ne peuvent être utilisées que dans ce document, empêchant le partage et la réutilisation des règles.
Exemple d'utilisation :
< head >
< style >
* {margin: 0; padding: 0; box-sizing: border-box;}
body {width: 100%; height: 100vh;}
</ style >
</ head >Les règles ont été écrites dans un fichier avec une extension .css et peuvent être chargées dans le document HTML5 de deux manières :
< head >
< link rel =" stylesheet " href =" default.css " >
< link rel =" stylesheet " href =" green.css " title =" Green styles " >
< link rel =" alternate stylesheet " href =" contrast.css " title =" High contrast " >
< link rel =" alternate stylesheet " href =" big.css " title =" Big fonts " >
< link rel =" alternate stylesheet " href =" wide.css " title =" Wide screen " >
</ head > @import en CSSVous permet d'importer des règles de style dans d'autres règles de style. Cette méthode permet d'appliquer des règles communes à tous les documents HTML.
Exemple d'utilisation :
Au sein d'un document .css , nous pouvons appliquer l'appel à des fichiers externes dans les premières lignes pour utiliser les commandes existantes.
@import "mystyle.css" ;
@import url ( "mystyle.css" );
@import url ( "fineprint.css" ) print; /* mídia específica para impressão */
@import url ( "bluish.css" ) projection , tv; /* mídia específica grandes mídias*/
@import url ( "narrow.css" ) handheld and ( max-width : 400 px ); /* mídia específica mídias portáteis*/ CSS niveau 3 a implémenté le concept de modules, dans lesquels chaque module est développé indépendamment, selon son propre calendrier. Le principal avantage est l’indépendance dans la création de nouvelles fonctionnalités.
Après la création du HTML, la nécessité de formater les pages est devenue évidente, c'est pourquoi en 1996, le langage de style que nous connaissons sous le nom de CSS a été créé.
La syntaxe est très simple et peut être expliquée par la phrase « vous créez des règles de style pour des éléments ou des groupes d'éléments ».
Utilisons un élément HTML que nous avons vu précédemment, l'ancre, pour illustrer.
Une règle CSS est représentée par un sélecteur ou un groupe de sélecteurs , dans notre cas c'est un , donc entre accolades on ajoute les déclarations , dans l'exemple ci-dessous on change la couleur et la taille de la police de ce titre, les déclarations sont formés d’une propriété et d’une valeur.
Une règle CSS est représentée par :
Exemple:
a {
color : # 000 ;
}En CSS, la sélection d'éléments peut aller de modèles contextuels simplifiés à des modèles contextuels riches.
Les types de sélection sont très importants, car leur ordre change en fonction du résultat du traitement de la page.
CSS vous permet de regrouper des instructions répétées.
Exemple:
h1 {famille de polices : sans-serif }
h2 {famille de polices : sans-serif }
h3 {famille de polices : sans-serif }
C'est équivalent à :
h1, h2, h3 {
famille de polices : sans-serif
}
REMARQUE : Tous les h1, tous les h2 et tous les h3
Un élément peut être contenu dans un autre élément.
Exemple : <H1>Ce texte est <EM>très</EM> important</H1>
h1 { color: red } /* indique que tous les éléments h1 ont la couleur rouge */
in { color: red } /* indique que tous les éléments ont la couleur rouge */
h1 in { color: blue } /* indique que les éléments contenus dans un élément h1 ont la couleur bleu */
Un élément enfant est caractérisé lorsque les éléments sont séparés par « > ».
div ol > li p {couleur : vert }Dans cet exemple, tous les éléments p seront colorés en vert lorsqu'ils se trouvent à l'intérieur d'un élément item <li>, un enfant d'une liste <ol> à l'intérieur d'un <div>.
Un élément par priorité est caractérisé lorsque les éléments sont séparés par "+". Autrement dit, le premier paragraphe qui vient après le div.
div + p {
couleur : rouge ;
}
Spécifie les règles pour les éléments possédant un certain attribut.
Exemple:
span[hello="Cleveland"][goodbye="Columbus"] { couleur : bleu ; }La règle sera appliquée à tous les éléments span qui ont l'attribut hello="Cleveland" et l'attribut goodbye="Columbus".
Une classe permet d'attribuer un ensemble de règles à un élément donné. Il est déterminé par un point astérisque (*.) ou simplement un point (.).
Exemple:
.pastoral { color: green } /* tous les éléments avec classe~=pastoral */
/*ou*/
*.pastoral { color: green } /* tous les éléments avec classe~=pastoral */
L'attribut ID permet d'identifier un élément unique dans le document HTML. Pour sélectionner cet élément, utilisez simplement le caractère « # » suivi du nom de l'élément.
Exemple:
h1#title1 { text-align: center } /* applique la règle à l'élément h1 avec id=title */
*.pastoral { color: green } /* tous les éléments avec classe~=pastoral */
Dans l'exemple précédent, nous avons créé une règle qui modifie directement un élément HTML, mais cela signifie que tous les éléments auront cette apparence, et nous avons généralement des sites plus complexes qui nécessitent plusieurs règles différentes pour les mêmes éléments.
Pour le rendre plus tangible, rappelons un peu le site web que nous avons commencé à créer dans le dernier module, il avait plusieurs éléments d'en-tête, mais nous ne voulons pas que l'en-tête principal ait le même formatage que l'en-tête d'un article, c'est là que les identifiants et les classes.
Le sélecteur que nous avons vu dans le premier exemple est un sélecteur de type, car il représente un élément HTML, et avec les ID et les Classes, nous pouvons représenter n'importe quel type d'élément mais il existe quelques différences entre eux :
ID : est représenté par le symbole # (dièse) suivi d'un nom pour cet ID. Ne peut être utilisé qu'une seule fois !
#id{
}Classe : la classe est représentée de manière similaire à l'ID, mais est précédée d'un point au lieu du hachage. Peut être utilisé plus d’une fois !
.class{
}Et la différence la plus importante entre eux réside dans la manière dont ils doivent être utilisés : l'ID ne peut être utilisé qu'une seule fois dans une page HTML alors que la classe n'a aucune restriction.
Et il y a un dernier détail dans cet exemple : la pseudoclasse . Les éléments HTML subissent des modifications causées par l'interaction de l'utilisateur, comme le déplacement de la souris ou le clic sur cet élément. Les pseudo-classes sont très similaires aux événements JavaScript, mais elles n'ont pas le même pouvoir de manipulation des éléments.
sélecteur:pseudo-classe {
propriété : valeur ;
}
Le a:hover dans l'exemple signifie que l'ancre ressemblera également à ceci lorsque l'utilisateur survolera un lien hypertexte.
| Pseudo-classe | Définition |
:hover | Il change l'élément en le survolant. |
:active | Changez l'élément en cliquant dessus. |
:link | Modifie tous les liens non visités. |
:visited | Modifie tous les liens visités. |
:focus | Modifie l'élément <input> qui a le focus. |
:checked | Modifie tous les éléments <input> marqués. |
:disable | Modifie tous les éléments <input> désactivés. |
:enabled | Modifie tous les éléments <input> activés. |
:empty | Modifie tous les éléments <p> qui n'ont pas d'enfants. |
:first-child | Modifie chaque élément <input> activé. |
:enabled | Modifie chaque élément <input> activé. |
:first-child | Modifie chaque élément <p> qui est le premier enfant de l'élément parent. |
:first-of-type | Il modifie chaque élément <p> qui est le premier élément <p> de son élément parent. |
:in-range | Modifie les éléments <input> avec une valeur dans une plage spécifiée. |
:invalid | Remplace tous les éléments <input> par une valeur non valide. |
:lang(language) | Modifie chaque élément <p> avec une valeur d'attribut lang commençant par " it ". |
:last-child | Cela modifie tous les éléments <p> qui sont les derniers enfants de leur élément parent. |
:last-of-type | Modifie chaque élément <p> qui est le dernier élément <p> de son élément parent. |
:link | Modifie tous les liens non visités. |
:not(selector) | Modifie chaque élément qui n'est pas l'élément <p> . |
:nth-child(n) | Modifie chaque élément <p> ordonné à partir de son élément parent. |
:nth-last-child(n) | Modifie chaque élément <p> ordonné à partir de son élément parent, en comptant à partir du dernier enfant. |
:nth-last-of-type(n) | Modifie chaque élément <p> qui est le deuxième élément <p> de son parent, en comptant à partir du dernier enfant. |
:nth-of-type(n) | Il modifie chaque élément <p> qui est le deuxième élément <p> de son élément parent. |
:only-of-type | Modifie l'élément <p> qui est le seul élément <p> de son élément parent. |
:only-child | Il modifie chaque élément <p> qui est le seul enfant de son élément parent. |
:optional | Modifie les éléments <input> sans l'attribut "required". |
:out-of-range | Modifie les éléments <input> avec un atr
Développer
Informations supplémentaires
Applications connexes
Recommandé pour vous
Actualités connexes
Tout
|
