Différences entre CSS et HTML. En quoi CSS est-il différent du HTML ?

Si vous devez styliser ces éléments, vous pouvez utiliser l'exemple suivant :

#container ( largeur : 1080px ; marge : 0 auto ; arrière-plan : #eee ) #menu ( hauteur : 90px ; arrière-plan : #ddd ) .link ( couleur : #000 ; décoration de texte : aucun ) #content ( remplissage : 20px ) .text (taille de police : 15 px)

Quand la classe est-elle utilisée et quand l'identifiant est-il utilisé ?

L'ID est utilisé pour les éléments individuels qui n'apparaissent qu'une seule fois sur la page. Par exemple, en-tête, pied de page, menu, etc. Le sélecteur de classe est utilisé pour un ou plusieurs éléments qui apparaissent plusieurs fois sur une page. Par exemple, des paragraphes, des liens, des boutons, des éléments de saisie. Bien que vous puissiez utiliser la classe sur un élément individuel, il est préférable d'utiliser ces sélecteurs aux fins prévues.

Vous devez également tenir compte du fait qu'un élément HTML peut avoir à la fois un identifiant et une classe. Supposons qu'il y ait deux blocs sur la page avec la même taille et le même style, mais avec un positionnement différent. Dans ce cas, vous pouvez appliquer la même classe à ces blocs pour le redimensionnement et le style, puis utiliser un sélecteur d'ID distinct sur chaque bloc pour leur donner un positionnement différent.

Les éléments peuvent également être liés à plusieurs classes en même temps. Ceci est très utile lorsque vous devez appliquer un style à un seul groupe d'éléments d'un certain type. Par exemple, il existe une classe .content qui est appliquée à tous les paragraphes. Si vous devez ajouter une bordure ou tout autre style à plusieurs paragraphes distincts, vous pouvez le faire en utilisant la classe CSS p supplémentaire .bordered :

Ce point n'a pas de frontières.

Ce point a des limites.

Notez l'espace blanc entre les deux noms de classe dans l'attribut class du deuxième paragraphe. Ci-dessous un exemple de code CSS :

Contenu (marge : 10 px ; taille de police : 15 px ; couleur : bleu).bordered (bordure : 2 px solide #222)

Il est important d'utiliser correctement l'identifiant et la classe CSS, car leur utilisation incorrecte peut entraîner des erreurs d'affichage du code HTML.

Traduction de l’article « Classe CSS vs ID : lequel utiliser» a été préparé par l’équipe sympathique du projet.

Bon Mauvais

L'une des questions les plus courantes lors de l'apprentissage des nouvelles normes est de savoir quelle est la différence entre les attributs « id » et « class » des éléments HTML. Après tout, l’effet semble être le même.

Ils n’ont le même effet que dans les cas les plus simples d’utilisation en CSS. En fait, il existe de nombreuses différences.

L'essentiel

class est un attribut gratuit qui est généralement attribué à plusieurs éléments pour les distinguer des autres. Par exemple, les images qui accompagnent simplement le texte peuvent recevoir class="decor" , et les images importantes pour la compréhension du texte peuvent recevoir class="content" .

Conséquences

De cette essence découlent directement ou indirectement d’autres différences visibles dans HTML, CSS et scripts.

...

. Plusieurs signes

Un élément peut recevoir plusieurs classes séparées par des espaces :

. De plus, ils peuvent être utilisés séparément :

/* tous les éléments importants */ .important (color:red;)

Et en combinaison :

/* éléments avec important et centré à la fois */ .important.centered (border:solid black 1px;)

Notez qu'il n'y a pas d'espace entre les classes dans la règle CSS.

...

Différents poids en CSS

Chaque règle en CSS a un « poids » qui détermine l'ordre dans lequel elles sont appliquées. l'identité a plus de poids. Par conséquent, si un élément a à la fois un identifiant et une classe :

L'une ou l'autre des deux règles

#about (couleur:vert;).important (couleur:rouge;)

Le premier gagne, la couleur du titre sera verte. (Le poids des règles est une autre histoire ; il y aura un article à ce sujet en temps voulu.)

CSS3 est utilisé par les créateurs de pages Web pour spécifier les couleurs, les polices, l'emplacement des blocs et d'autres aspects de l'apparence de ces pages Web. L'objectif principal du développement de CSS3 était de séparer la description de la structure logique d'une page Web (qui se fait à l'aide de HTML ou d'autres langages de balisage) de la description de l'apparence de cette page Web (qui se fait désormais à l'aide du langage formel de CSS3). Cette séparation peut accroître l'accessibilité des documents, offrir une plus grande flexibilité et un plus grand contrôle sur sa présentation, et réduire la complexité et la répétition du contenu structurel. De plus, CSS3 permet au même document d'être présenté dans différents styles ou méthodes de sortie, telles que la présentation sur écran, la présentation imprimée, la lecture vocale (par un navigateur vocal spécial ou un lecteur d'écran) ou la sortie par des appareils utilisant le braille.

Avant l’avènement de CSS3, les pages Web étaient conçues exclusivement en HTML, directement dans le contenu du document. Cependant, avec l’avènement de CSS3, il est devenu possible de séparer fondamentalement le contenu et la présentation d’un document. Grâce à cette innovation, il est devenu possible d'appliquer facilement un style de conception unique pour une masse de documents similaires, ainsi que de modifier rapidement cette conception.

Avantages :

Plusieurs modèles de pages pour différents appareils de visualisation. Par exemple, sur un écran le design sera conçu pour une grande largeur, le menu ne s'affichera pas lors de l'impression, mais sur un PDA et un téléphone portable le menu suivra le contenu.

Réduire le temps de chargement des pages du site Web en transférant les règles de présentation des données dans un fichier CSS distinct. Dans ce cas, le navigateur télécharge uniquement la structure du document et les données stockées sur la page, et la représentation de ces données n'est téléchargée par le navigateur qu'une seule fois et peut être mise en cache.

Facile de modifier le design plus tard. Vous n'avez pas besoin de modifier chaque page, modifiez simplement le fichier CSS.

Options de conception supplémentaires. Par exemple, en utilisant la mise en page CSS, vous pouvez créer un bloc de texte qui enveloppera le reste du texte (par exemple, pour un menu) ou rendre le menu toujours visible lors du défilement de la page.

Défauts:

Affichage de présentations différentes dans différents navigateurs (surtout les plus anciens), qui interprètent différemment les mêmes données CSS3.

Il est souvent nécessaire en pratique de corriger non seulement un seul fichier CSS, mais également des balises HTML, qui sont liées aux sélecteurs CSS3 d'une manière complexe et obscure, ce qui annule parfois la facilité d'application de fichiers de style unique et allonge considérablement le temps d'édition et de test. .

DifférencesCSS3 :

nouveaux styles

pseudo-sélecteurs

animation

support de toile

transformation

gestion du contenu des balises

...et plus encore

2.2.3 Bref aperçu du langage js et de la bibliothèque jQuery

Javascript

JavaScript est un langage de programmation de script orienté prototype. C'est un dialecte du langage ECMAScript.

JavaScript est généralement utilisé comme langage intégré pour accéder par programmation aux objets d'application. Il est le plus largement utilisé dans les navigateurs comme langage de script pour ajouter de l’interactivité aux pages Web.

Principales caractéristiques architecturales : typage dynamique, typage faible, gestion automatique de la mémoire, programmation de prototypes, fonctions d'objets de premier ordre.

JavaScript a été influencé par de nombreux langages et a été développé dans le but de rendre le langage similaire à Java, mais en même temps facile à utiliser pour les non-programmeurs. JavaScript n'appartient à aucune entreprise ou organisation, ce qui le différencie d'un certain nombre de langages de programmation utilisés dans le développement Web.

« JavaScript » est une marque déposée d'Oracle Corporation.

Fonctionnalités linguistiques

JavaScript est un langage orienté objet, mais le prototypage du langage rend le travail avec des objets différent des langages traditionnels orientés classes. De plus, JavaScript possède un certain nombre de propriétés inhérentes aux langages fonctionnels - fonctions d'objets de première classe, objets de listes, fonctions anonymes, fermetures - qui confèrent au langage une flexibilité supplémentaire.

Bien que la syntaxe soit similaire à celle du C, JavaScript présente des différences fondamentales par rapport au langage C :

objets avec possibilité d'introspection

fonctionne comme des objets de première classe

coulée de caractères automatique

collecte automatique des déchets

Le langage manque de choses utiles telles que :

Système modulaire : JavaScript n'offre pas la possibilité de gérer les dépendances et l'isolation de la portée

Bibliothèque standard : en particulier, il n'existe pas d'interface de programmation d'application pour travailler avec le système de fichiers, gérer les flux d'E/S ou les types de base pour les données binaires.

Interfaces standards vers les serveurs Web et les bases de données

Un système de gestion de packages qui suivrait les dépendances et les installerait automatiquement

Sémantique et syntaxe :

La syntaxe du langage JavaScript rappelle à bien des égards la syntaxe du C et de Java, mais sémantiquement le langage est bien plus proche de Self, Smalltalk ou encore Lisp.

Tous les identifiants sont sensibles à la casse

Les noms de variables peuvent utiliser des lettres, des traits de soulignement, des symboles de dollars et des chiffres arabes.

Les noms de variables ne peuvent pas commencer par un chiffre

Pour formater les commentaires sur une seule ligne, // sont utilisés ; les commentaires sur plusieurs lignes et en ligne commencent par /* et se terminent par */.

Structure de la langue :

Structurellement, JavaScript peut être représenté comme une combinaison de trois parties clairement distinctes les unes des autres :

Noyau (ECMAScript)

Modèle d'objet de navigateur (BOM)

Modèle objet de document (DOM)

Si JavaScript est affiché dans des environnements autres que le navigateur, le modèle objet du navigateur et le modèle objet du document peuvent ne pas être pris en charge.

Le modèle objet de document est parfois considéré comme une entité distincte de JavaScript, ce qui est cohérent avec la définition du DOM en tant qu'interface de document indépendante du langage. En revanche, un certain nombre d’auteurs trouvent que BOM et DOM sont étroitement liés.

ECMAScript n'est pas un langage de navigateur et ne définit pas de méthodes d'entrée ou de sortie. Il s’agit plutôt de la base de la création de langages de script. La spécification ECMAScript décrit les types de données, les instructions, les mots-clés et mots réservés, les opérateurs, les objets, les expressions régulières, sans limiter les auteurs de langages dérivés dans leur extension avec de nouveaux composants.

Modèle objet du navigateur

Le modèle objet du navigateur est une partie du langage spécifique au navigateur qui constitue une couche entre le noyau et le modèle objet du document. L'objectif principal du modèle objet du navigateur est de gérer les fenêtres du navigateur et d'assurer leur interaction. Chaque fenêtre du navigateur est représentée par un objet window, l'objet central du DOM. Le modèle objet du navigateur n'est pas actuellement standardisé, mais une spécification est en cours de développement par le WHATWG et le W3C.

En plus de la gestion des fenêtres, les navigateurs prennent généralement en charge les entités suivantes dans le cadre du modèle objet du navigateur :

Gestion des trames

Prise en charge de l'exécution de code retardée et du bouclage retardé

Boîtes de dialogue système

Gérer l'adresse de la page ouverte

Gestion des informations du navigateur

Gestion des informations sur les paramètres du moniteur

Gestion limitée de l'historique de navigation

Prise en charge des cookies HTTP

Modèle objet de document

Le modèle objet de document est une interface de programmation d'application pour les documents HTML et XML. Selon le DOM, un document (par exemple, une page Web) peut être représenté comme une arborescence d'objets qui possèdent un certain nombre de propriétés qui permettent diverses manipulations avec celui-ci :

Générer et ajouter des nœuds

Obtenir des nœuds

Changer de nœuds

Modification des connexions entre les nœuds

Suppression de nœuds.

jQuery est une bibliothèque JavaScript qui se concentre sur l'interaction de JavaScript et HTML. La bibliothèque jQuery vous aide à accéder facilement à n'importe quel élément DOM, à accéder et à manipuler les attributs et le contenu des éléments DOM. La bibliothèque jQuery fournit également une API pratique pour travailler avec AJAX.

Possibilités

Moteur de sélection CSS multi-navigateurs Sizzle, transformé en un projet distinct

Traversée de l'arborescence DOM, y compris la prise en charge de XPath en tant que plugin

Événements

Effets visuels

Modules complémentaires AJAX

Plugins JavaScript

Travailler avec jQuery peut être divisé en 2 types :

Obtenir un objet jQuery à l'aide de la fonction $(). Par exemple, en y passant un sélecteur CSS, vous pouvez obtenir un objet jQuery de tous les éléments HTML qui relèvent du critère, puis travailler avec eux en utilisant diverses méthodes de l'objet jQuery. Dans le cas où la méthode ne doit renvoyer aucune valeur, elle renvoie une référence à l'objet jQuery, qui permet d'enchaîner les appels de méthode selon le concept d'interface fluide.

Appel de méthodes globales sur l'objet $, par exemple, des itérateurs de tableau pratiques.

Afin de comprendre la différence entre CSS et HTML, vous devez comprendre ce qu'est CSS et ce qu'est HTML.
Traduit de l'anglais, CSS signifie « Feuilles de style en cascade ». CSS est une technologie de gestion de la conception d'une page Web, elle offre de nombreuses options pour décrire l'apparence d'une page, et elle permet également de simplifier considérablement l'apparence d'une page HTML en transférant la conception des éléments de la page vers un fichier CSS. . CSS permet d'utiliser un seul design pour un nombre illimité d'éléments de page HTML. Cela vous permet de modifier le design de toutes les pages du site sur toutes les pages qui utilisent une classe pour le design, en le modifiant une fois dans le fichier CSS, c'est très pratique si le site a plus de 50 pages, vous n'avez pas besoin de changer la conception de l'élément dans chacun d'eux.
Qu'est-ce que c'est HTML? Traduit de l'anglais, HTML signifie « langage de balisage hypertexte ». HTML est le langage de balisage standard pour les documents HTML. Le langage de balisage hypertexte est utilisé directement pour structurer le contenu d'une page HTML. Avec son aide, vous pouvez créer des tableaux, les concevoir, créer des modèles de textes, etc.
Pages HTML sans utiliser CSS devenir complexe et déroutant, puisque la conception de chaque élément est réécrite, ce qui augmente considérablement le volume du texte. Par exemple, il existe une page HTML qui contient 3 parties de texte qui doivent être formatées de la même manière (taille, couleur), mais il n'est pas possible d'utiliser des balises HTML pour formater les trois à la fois, car ces fragments sont situés à différents endroits de la page HTML. Pour formater de tels textes, il faudra utiliser le code à chaque fois, pour chaque fragment séparément.
Lorsque nous utilisons CSS, nous créerons une fois un design pour la classe, puis dans le code de la page HTML, nous attribuerons simplement cette classe à chacun des trois fragments. Maintenant, le code HTML semble moins volumineux, n'est-ce pas ? En modifiant un seul élément CSS, nous pouvons modifier le design de toutes les pages du site à la fois. Et il peut y avoir des milliers de ces pages.

Site Web des conclusions

1. HTML est le langage dans lequel une page Web est créée. CSS est la technologie qui contrôle la conception de cette page Web.
2. Du point de vue de la conception de pages, CSS est plus pratique que d'écrire la conception en HTML, car vous permet de réduire considérablement la taille du code et de définir la conception de plusieurs pages à la fois.

À première vue, il n'y a aucune différence quant à ce qu'il faut utiliser : identifiant ou classe. Après tout, si vous attribuez les mêmes paramètres de style CSS à id et class, le résultat sera identique. En fait, il n'y a pratiquement aucune différence entre id et class en CSS, à l'exception de la priorité de leur traitement. Mais dans d’autres cas, souvent utilisés dans le développement Web, la différence est tout à fait notable. Cet article met juste tout en évidence différences entre la classe et l'identifiant.

IDENTIFIANT

IDENTIFIANT est l'identifiant unique de l'élément. Sur une page, un identifiant n'est utilisé qu'une seule fois, bien qu'il soit possible d'utiliser plusieurs identifiants identiques au sein d'une même page, mais cela peut poser des problèmes lors de l'utilisation des ancres HTML et JS. Si vous essayez d'attribuer deux identifiants différents à un élément (balise HTML), seules les règles du premier identifiant (le plus à gauche) fonctionneront.

Exemple 1 : pourquoi il est déconseillé d'utiliser des identifiants (ID)

<p id = "mon_id_r7t" > Bloc de texte sélectionné</p>

<p id = "mon_id_r7t" > Bloc de texte sélectionné</p>

Exemple 2 : comment ne pas utiliser d'identifiants (ID)

<p id = "mon_id_r7t" id = "mon_id_r9t" > L'attribution de deux identifiants ou plus au 1er élément n'est pas autorisée</p>

Dans le cas de l'application simultanée de id et class à un même élément, la priorité de ID sera supérieure à celle de class :

Définir des styles CSS

#my_id_r7t ( couleur : vert ; font-weight : gras ; )

Ce paragraphe se voit attribuer une classe my_class et un identifiant my_id.

Comme vous pouvez le constater, la couleur a acquis les valeurs enregistrées dans l'identifiant. Mais si vous y regardez de plus près, id et class peuvent se compléter avec succès : la police grasse spécifiée dans l'identifiant est combinée avec le style italique écrit en classe.

Si l'on ajoute au descripteur <p> style également : <p class = "my_class_r7t" style = "couleur : gris" id = "my_id_r7t" >, alors le résultat sera comme ceci :

Le style attribué au descripteur à l'aide de style="..." a la priorité la plus élevée.

Un bon exemple de priorités est donné dans la documentation officielle CSS (eng). En bref, les priorités par ordre décroissant sont : style, id, classe, style de balise.

L'élément id peut être utilisé comme ancre HTML, au lieu de la construction plus ancienne <un nom = "nom_jakorya" > , afin que vous puissiez créer un lien vers une partie spécifique de la page sans avoir à la recharger en utilisant <a href = "#imya_jakorya" > Haut</a>. S'il y a plusieurs identifiants identiques sur la page, une situation ambiguë surviendra.

Lors de la programmation de pages à l'aide de JS, la fonction getElementById est souvent utilisée () , qui « s'attend » également à ce que l'identifiant soit unique. Sinon, des erreurs peuvent survenir dans le code.

Classe

Lors de l'utilisation classe, un descripteur HTML peut se voir attribuer des styles de plusieurs classes en même temps :

My_class_r7t ( couleur : bleu ; style de police : italique ; )
.my_class_ffR5 ( couleur : noir ; couleur d'arrière-plan : #fafafa ; remplissage : 3px ; bordure : 1px solide #757575 ; marge gauche : 30px ; )

Les noms des différentes classes sont écrits séparés par des espaces :

<p classe = "ma_classe_ffR5 ma_classe_r7t" > Un exemple d'utilisation de 2 classes différentes pour 1 balise HTML.</p>

Le résultat de l'application de deux classes différentes au 1er descripteur HTML.

Les classes my_class_r7t et my_class_ffR5 définissent des couleurs différentes pour le contenu d'une balise HTML. La couleur définie plus tard dans le fichier de style sera utilisée (dans ce cas, la classe my_class_ffR5 est écrite après my_class_r7t). L'ordre dans lequel les classes sont appliquées dans le descripteur HTML lui-même n'a pas d'importance.

Pour donner aux classes composées un style unique, elles sont écrites ensemble, de manière transparente :

Ma_classe_bbbb755 ( font-weight : bold ; )
.my_class_ffR5 .my_class_bbbb755 ( texte-align : droite ; )

L'alignement à droite sera appliqué uniquement lorsqu'un descripteur HTML se voit attribuer 2 classes à la fois :

"ma_classe_ffR5 ma_classe_bbbb755"> Un exemple d'application de styles à des classes composites

Voyez ci-dessous à quoi cela ressemble :

Un exemple d'application de styles à des classes composites

La même classe, contrairement à id, peut être facilement affectée à un nombre illimité d'éléments différents :

<classe div = "ma_classe_ffR5" >...</div>
<p classe = "ma_classe_ffR5" >...</p>
<classe h5 = "ma_classe_ffR5" >...</h5>
<classe div = "ma_classe_ffR5" >...</div>
<p classe = "ma_classe_ffR5" >...</p>

Classe ou identifiant : que faut-il utiliser ?

En fait, vous ne pouvez pas choisir d'utiliser la classe ou l'identifiant. C'est la même chose que comment choisir ce qui est meilleur : manger ou boire ? Il est nécessaire d'utiliser à la fois des classes et des identifiants, en fonction du but recherché. Dans la plupart des cas, il est préférable d'utiliser une classe pour éviter d'utiliser accidentellement un identifiant plusieurs fois sur la même page. Mais si nécessaire, vous devez utiliser id : mise en évidence d'un bloc unique de la page, pour les ancres, pour JS, etc.