Maison > interface Web > tutoriel CSS > Des bases à la maîtrise : tutoriel pratique CSS (1)

Des bases à la maîtrise : tutoriel pratique CSS (1)

黄舟
Libérer: 2016-12-24 14:02:35
original
1124 Les gens l'ont consulté

CSS (Cascading Stylesheets) est une nouvelle technologie de création de pages Web. Elle est désormais prise en charge par la plupart des navigateurs et est devenue l'un des outils indispensables à la conception Web. L'utilisation de CSS peut simplifier le code de format des pages Web, accélérer la vitesse de téléchargement et d'affichage, réduire la quantité de code à télécharger et réduire considérablement la charge de travail des travaux répétés. Surtout lorsque vous êtes face à un site contenant des centaines de pages Web, CSS est comme un cadeau de Dieu pour nous ! ^_^

Avant-propos

CSS (Cascading Stylesheets) est une nouvelle technologie de création de pages Web. Elle est désormais prise en charge par la plupart des navigateurs et est devenue un élément indispensable de la conception Web. peu d'outils.

W3C (The World Wide Web Consortium) divise le HTML dynamique (Dynamic HTML) en trois parties à mettre en œuvre : le langage de script (y compris JavaScript, Vbscript, etc.), les navigateurs prenant en charge les effets dynamiques (y compris Internet Explorer, Netscape Navigateur, etc.) et feuilles de style CSS.

1. Caractéristiques des feuilles de style en cascade

Sans parler du manque de dynamique des pages Web dans le passé, il existe également de nombreuses difficultés dans la mise en page du contenu Web. Si vous n'êtes pas un professionnel ou une personne particulièrement patiente, cela se produit. Il est difficile de créer une page Web selon votre propre style. Idées et créativité pour afficher des informations. Même ceux qui maîtrisent l'essence du langage HTML doivent passer de nombreux tests avant de pouvoir maîtriser la mise en page de ces informations. Le processus est très long et pénible. Afin de développer Internet et de permettre à davantage de personnes d'entrer le plus rapidement possible dans ce monde coloré, de nouveaux outils auxiliaires HTML sont sur le point d'apparaître.

Les feuilles de style sont nées de cette demande. La première chose qu'ils doivent faire est de positionner avec précision les éléments sur la page Web, permettant aux concepteurs Web de contrôler facilement le texte et les images comme un réalisateur, et de bien fonctionner selon. au scénario sur la scène du site.

Deuxièmement, il sépare la structure du contenu et le contrôle du format sur la page Web. Ce que les téléspectateurs veulent voir, c'est la structure du contenu de la page Web, et afin de permettre aux téléspectateurs de mieux voir ces informations, le contrôle du format doit être utilisé pour les aider. Dans le passé, la répartition des deux sur la page Web était échelonnée et combinée, ce qui était très peu pratique à visualiser et à modifier. Désormais, séparer les deux facilitera grandement les concepteurs de sites Web. La structure du contenu et le contrôle du format sont séparés, de sorte qu'une page Web peut être composée uniquement de contenu, et le contrôle du format de toutes les pages Web est dirigé vers un certain fichier de feuille de style CSS. Ceci est bénéfique à deux égards :

Premièrement, le code de format de la page Web est simplifié, et la feuille de style externe sera également enregistrée dans le cache par le navigateur, accélérant la vitesse de téléchargement et d'affichage, et Réduit également la quantité de code à télécharger (car le formatage répété ne sera enregistré qu'une seule fois).

Deuxièmement, la simple modification du fichier de feuille de style CSS qui stocke le format du site Web peut modifier le style et les caractéristiques de l'ensemble du site, ce qui est particulièrement utile lors de la modification de sites comportant un grand nombre de pages. Il évite la modification des pages Web une par une et réduit considérablement la charge de travail répétée Lorsque vous êtes confronté à un site contenant des centaines de pages Web, CSS est tout simplement comme un cadeau de Dieu pour nous ! ^_^

2. Méthodes d'ajout de feuilles de style en cascade

Il existe quatre façons d'ajouter des feuilles de style aux pages Web.

1. La méthode la plus simple consiste à l'ajouter directement à l'identifiant HTML (tag) :

< Tag style="properties">Contenu de la page Web<

Par exemple :

< p style=”color: blue; font-size: 10pt”>Exemple CSS< /p>

Description du code :

est affiché en bleu "Exemple CSS " avec une taille de police de 10 pt. Bien qu'elle soit simple à utiliser et intuitive à afficher, cette méthode n'est pas couramment utilisée car un tel ajout ne peut pas tirer pleinement parti de la feuille de style "la structure du contenu et le contrôle du format sont enregistrés séparément".

 2. Ajouté dans l'identifiant des informations d'en-tête HTML < head> :

< head>

< 🎜>< !--Le contenu spécifique de la feuille de style-->

< /style>

< /css" signifie que la feuille de style utilise le type MIME, ce qui aide les navigateurs qui ne prennent pas en charge CSS à filtrer le code CSS et à éviter d'afficher la feuille de style que nous avons définie directement sous forme de code source devant le navigateur. Cependant, afin de garantir que la situation ci-dessus ne se produise pas, il est toujours nécessaire d'ajouter l'identifiant de commentaire "< !--Contenu du commentaire-->" à la feuille de style.

3. La feuille de style du lien

est également ajoutée dans l'identifiant des informations d'en-tête HTML < head> :

< head>

< ”*.css” type=”text/css” media=”screen”>

< /head>

*.css est un fichier de feuille de style enregistré séparément, qui ne peut pas contenir l'identifiant