Lors de la mise en page d’une page Web, devez-vous d’abord écrire du HTML ou du CSS ?

Beaucoup d'amis ont leurs propres habitudes. Certaines personnes aiment d'abord écrire du CSS, et d'autres aiment d'abord écrire du HTML. Alors, quel est le processus d'écriture le plus scientifique pour la mise en page d'une page Web ? Aujourd'hui, je vais l'analyser pour tout le monde

Il existe de nombreuses réponses à cette question sur Internet : écrivez d'abord du HTML, puis écrivez du CSS ; écrivez d'abord du CSS, puis écrivez du HTML ;

Lorsque je crée habituellement des pages HTML, je choisis de faire les deux en même temps. Tout d'abord, créez un fichier de répertoire approximatif pour le site Web, tel que imges : pour stocker la page images ; : pour stocker le langage de script JS, et je recommande de placer le fichier CSS directement dans le dossier images, afin d'éviter de se tromper sur le chemin de l'image lors de l'appel du fond de l'image, et pour faciliter la maintenance des noms d'image naturellement, la page html doit être ; placé dans le répertoire racine.

Ensuite, nous écrivons d'abord la partie de mise en page la plus basique en HTML, en utilisant DIV, puis ajoutons directement ID ou CLASS (la différence entre ID et CLASS) dans le DIV. Ces parties de mise en page incluent. Partie veste, partie tête, partie médiane, gauche, centre, droite, partie copyright, etc. La tête, le milieu et le bas sont essentiellement les parties communes de la page. La plupart des pages Web sont regroupées par ces trois parties. Après avoir nommé ces parties avec un ID ou une classe, nous écrivons ensuite l'attribut de style CSS correspondant dans le fichier de style CSS. Avant d'écrire le CSS, nous devons définir le div global, h1, h2, la police, la taille de la police, le li et les autres styles de l'ensemble du site. Je n'entrerai pas dans les détails ici. Si vous voulez en savoir plus, veuillez vous rendre sur . le modèle CSS de définition globale que j'utilise pour en savoir plus. Téléchargez-le et utilisez-le, afin de ne pas avoir à le redéfinir à chaque fois que vous créez un nouveau site Web, mais vous pouvez directement copier le modèle de définition de style CSS de base commun et l'utiliser.

Généralement, lors de la création de DIV+CSS, il est préférable pour les novices de faire du HTML et du CSS en même temps, afin de réduire les erreurs. Si l'expérience n'est pas très bonne pendant la production, j'espère tester la compatibilité dans une variété de versions de navigateurs de marques différentes pendant le processus de production. Si l'affichage apparaît normal dans ce navigateur, mais l'affichage est incomplet et déroutant dans d'autres navigateurs. etc. . De cette manière, nous pouvons résoudre et comprendre les problèmes de compatibilité de base, accumuler une précieuse expérience technique DIV+CSS et nous habituer à prendre des notes pour ne pas les oublier à l'avenir.

Apprenons d'abord à écrire du HTML puis à écrire du CSS :
Pourquoi certaines personnes expérimentées disent-elles aux novices qu'on ne peut pas écrire la partie HTML d'un seul coup ? Parce que les gens sont susceptibles de faire des erreurs, il peut y avoir des problèmes dans le processus d'écriture de vos idées, ou en raison de problèmes de compatibilité du navigateur, dont certains que vous n'aviez pas anticipés à l'avance en raison d'un manque d'expérience, vous les avez donc découverts en écrivant. le style. En cas de problème, vous devrez peut-être modifier votre code HTML. Si vous écrivez d'abord le code HTML et que la page s'agrandit, vous risquez d'oublier la sélection de disposition des attributs CSS à laquelle vous aviez pensé en HTML.

Apprenons ensuite à écrire du CSS d'abord, puis à écrire du HTML :
Pour les producteurs CSS expérimentés, c'est plus réalisable que d'écrire d'abord du HTML, puis du CSS. Pourquoi? Nous savons que la fonctionnalité d'attribut parent héritage de CSS est assez bonne, nous pouvons donc l'utiliser pour écrire du CSS en premier. Mais cela ne peut pas être le cas pour les novices. Si vous écrivez d’abord le CSS puis revenez à la page HTML pour écrire, vous reviendrez sur le CSS que vous avez écrit et oublierez comment appeler la sélection puisque vous n’avez aucune expérience en matière de compatibilité CSS. problèmes, la compatibilité est également assez bonne. Les personnes expérimentées utilisent la fonction d'héritage parent pour mettre en forme le code du fichier CSS, et lors du retour au HTML, il est clair qu'il n'est pas facile de faire des erreurs lors de l'appel de la classe et de l'ID en CSS.

Ce qui précède a présenté et expliqué les méthodes d'écriture séquentielle, mais il convient de mentionner que généralement lors de la création de pages, nous utilisons généralement les deux en même temps + les tests du navigateur. Il est très bien d'écrire les deux en même temps ou d'abord à moitié pour écrire du CSS puis à écrire du HTML, ou inversement, à moitié pour écrire du HTML d'abord puis à écrire du CSS. De cette façon, il est moins probable de faire des erreurs et d'éviter. perdre du temps en modifications après avoir commis des erreurs.

La déclaration ci-dessus n'est pas nécessairement tout à fait correcte, mais à travers ce qui précède, je veux dire aux développeurs de production DIV+CSS que peu importe que vous écriviez d'abord du HTML ou du CSS. Ce qui compte, c'est votre amour pour div+css. . Dans la pratique quotidienne, vous pouvez également effectuer du HTML/CSS en même temps. Tout dépend de vos habitudes. Mais au fur et à mesure que vous développez et produisez davantage, vous trouverez naturellement une méthode qui vous convient et qui se développera rapidement. J'espère que ce qui précède vous sera utile.

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment définir la couleur de la police du texte CSS

Dans la mise en page Web HTML, div et span sont liés Quelle est la différence

Comment définir la police de texte en CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!