Unités couramment utilisées dans l'échange CSS_Experience

1. Unité de longueur

L'unité de longueur est l'unité la plus couramment utilisée dans la conception de pages Web. Il est peu probable qu’une page non organisée et désorganisée laisse une bonne impression aux gens. Par conséquent, lors de la conception, vous devez définir avec précision certaines valeurs pour la position et la taille des éléments afin d'obtenir l'effet souhaité.

CSS donne aux gens la possibilité de contrôler avec précision les pages Web, ce dont les gens aiment parler. Il permet aux gens de définir l’apparence, la taille, l’espace et d’autres styles. Cependant, le contrôle donné par CSS est également dangereux. Cela se reflète non seulement dans le manque d'expérience du concepteur, mais également dans la manière de donner une valeur de taille et d'espace. Pourquoi? Parce que même si un concepteur peut décider d'une résolution d'écran particulière, il est impossible de décider du cerveau des autres, de la vue des autres ou de ces paramètres personnalisés.

L'une des fonctions principales de CSS est le positionnement CSS. Le concept de positionnement inclut le positionnement et le positionnement de la taille. Peu importe laquelle, vous devez utiliser l’unité de longueur, sinon un positionnement précis est impossible.

En CSS, la longueur est une dimension de mesure utilisée pour la largeur, la hauteur, la taille de la police, l'espacement des mots et des lettres, l'indentation du texte, la hauteur de la ligne, les marges, les trépointes et la largeur de la bordure, ainsi que de nombreuses autres propriétés. .

1. Définir la longueur

Pour définir la longueur dans Dreamweaver 4, vous devez d'abord écrire la partie symbole dans la zone de texte derrière l'option sélectionnée. Ce symbole peut être "+" (signe positif), qui représente une longueur positive. valeur, ou Peut être "-" (signe moins), indiquant une valeur de longueur négative. Si aucun signe n'est écrit, la valeur par défaut est "+". Immédiatement après le symbole se trouve une valeur numérique, qui peut être un nombre entier ou décimal. Sélectionnez ensuite une unité de longueur dans la liste déroulante Unité de longueur de cette option. L'unité de longueur est généralement une abréviation d'unité composée de deux lettres, telles que cm, pt, em, etc.

2． Les unités de longueur absolue

Les valeurs de longueur absolue couramment utilisées dans les définitions de pages Web incluent les centimètres (cm), les millimètres (mm), les pouces (in), les points (pt), les picas (pc), etc.

Unités Pouces (po) Centimètres (cm) Millimètres (mm) Livres (pt) Picas (pc) 4,233 12 1,0
cm 0,3937 1 10 28,3464 4,7244
mm 0,0393 7 0,1 1,0 2,83464 0,47244
lbs 0,01389 0,0352806 0,352806 1,0 0,83333

Utiliser une plage de valeurs de longueur absolue Il est plus limité et n'utilise des valeurs de longueur absolue que si les spécificités du périphérique de sortie externe sont parfaitement connu. En d’autres termes, les valeurs de longueur absolue sont mieux utilisées pour les périphériques de sortie d’imprimante lorsqu’elles sont utilisées uniquement pour l’affichage à l’écran, il est peu important d’utiliser autant que possible des valeurs de longueur relative. Knowsky.com

 3. Valeur de longueur relative

Chaque navigateur a sa propre norme de taille universelle par défaut, qui peut être déterminée par le système ou définie par l'utilisateur en fonction de ses propres préférences. Par conséquent, cette taille par défaut est souvent la taille que les utilisateurs trouvent la plus adaptée. Par conséquent, en utilisant des valeurs de longueur relative, les éléments qui doivent être définis peuvent être mis à l'échelle proportionnellement en fonction de la taille par défaut. Cela rend impossible la création de situations illisibles. En fait, les unités de pourcentage et les mots-clés peuvent produire des effets similaires.

CSS prend également en charge les trois unités relatives de longueur suivantes : em (la largeur de la lettre M dans la police actuelle), ex (la hauteur de la lettre X dans la police actuelle) et px (la taille d'un pixel).

Le but de l'utilisation de em et ex est de définir la largeur appropriée pour la police donnée. Il n'est pas nécessaire de connaître la taille de la police lors de l'affichage, elle peut être déterminée en comparant le M et. X dans la police actuelle. Plus la taille de la police est grande, plus les em et ex correspondants sont grands.

La longueur en pixels est relative à la hauteur et à la largeur d'un pixel (peut-être un carré) sur l'écran. La largeur et la hauteur de l'image sont souvent indiquées en pixels. La mesure des pixels n’est généralement pas une bonne méthode. Premièrement, la taille des pixels varie considérablement en fonction de la résolution. La plupart des utilisateurs règlent l'affichage sur la résolution la plus élevée possible, ce qui donne des pixels trop petits pour être lus.

2. Unité de pourcentage

Pour utiliser le pourcentage dans Dreamweaver 4, vous devez d'abord écrire la partie du symbole dans la zone de texte derrière l'option sélectionnée. Ce symbole peut être "+" (positif. signe), indiquant une valeur de longueur positive, ou "-" (signe négatif), indiquant une valeur de longueur négative. Si aucun signe n'est écrit, la valeur par défaut est "+".Il y a une valeur numérique immédiatement après le symbole. Vous pouvez saisir n'importe quelle valeur après le symbole, mais comme dans certains cas, le navigateur ne peut pas gérer les pourcentages avec décimales, il est préférable de ne pas utiliser de pourcentages avec décimales. Sélectionnez ensuite « % » dans la liste déroulante des unités de longueur de cette option.
Le pourcentage est toujours relatif à une autre valeur. Cette valeur peut être une unité de longueur ou autre chose. Chaque propriété qui peut être spécifiée à l'aide d'une unité de valeur en pourcentage définit également une valeur de référence pour cette valeur en pourcentage. Dans la plupart des cas, cette valeur de référence est la taille de police de l'élément lui-même.

3. Unités de couleur

L'utilisation intensive d'images peut rendre la page Web vivante. Mais tous ceux qui ont déjà surfé sur Internet ont éprouvé l’angoisse d’attendre une photo. En fait, l'utilisation appropriée de différentes couleurs dans différentes parties peut également avoir un effet d'image, attirant l'attention des lecteurs sur les parties clés. Cependant, le temps de téléchargement de la page Web est considérablement réduit.

L'attribut color est utilisé pour définir la couleur de premier plan d'un élément. Dans la plupart des cas, l'objet texte contenu dans cet élément est utilisé. L'utilisation de l'attribut color peut également être utilisée pour déterminer la couleur de la bordure d'un élément. La syntaxe générale pour définir les couleurs est : couleur : valeur de couleur.

Le moyen le plus simple et le plus direct de définir les valeurs de couleur est d'utiliser des valeurs en pourcentage. Dans ce cas, les niveaux de valeurs de couleur rouge, verte et bleue sont déterminés sous forme de pourcentages. Le format est : couleur:rgb(R%,G%,B%). Un avantage supplémentaire de l'utilisation d'une valeur en pourcentage pour spécifier une couleur est qu'elle déclare un ensemble réel de nombres, quelle que soit la valeur.

Une autre façon de spécifier une couleur est d'utiliser un nombre entier compris entre 0 et 255. Le format est couleur : rgb(128 128 128).
La troisième façon de définir une couleur consiste à utiliser un tableau hexadécimal pour définir la couleur. Cette méthode de définition est familière aux personnes qui font souvent de la programmation. Lors de la définition d'une couleur, utilisez trois tableaux hexadécimaux disposés en séquence, tels que "#FC0EA8".Cette définition est au format #RRGGBB. Autrement dit, ajoutez les valeurs hexadécimales requises aux positions rouge, verte et bleue.

La dernière et la plus simple façon de définir une couleur est de spécifier un nom pour la couleur. Par exemple, le code ci-dessous spécifie que la couleur du texte est violette.

Dans Dreamweaver 4, vous pouvez cliquer sur l'icône du sélecteur de couleurs pour sélectionner une couleur appropriée dans le sélecteur de couleurs ouvert.

4. Unité URL

L'unité URL est liée à l'adresse du lien. L'URL est l'abréviation de « Uniform Resource Locator » et le lien est l'âme de la page Web. Grâce à des liens, diverses pages Web peuvent être reliées, de sorte que de nombreuses pages du site Web forment un tout organique, permettant aux visiteurs de passer d'une page à l'autre. Un lien peut être un morceau de texte, une image ou un autre élément de page Web. Lorsque ces objets sont cliqués avec la souris dans le navigateur, le navigateur peut charger une nouvelle page ou accéder à d'autres emplacements de la page selon ses instructions.

Dans le processus de création de liens, le chemin est très important. Il existe deux types de chemins dans Dreamweaver 4 : les chemins absolus et les chemins relatifs. Les chemins relatifs peuvent être divisés en chemins relatifs au répertoire racine et chemins relatifs au fichier.

Le chemin absolu contient le chemin complet du protocole du serveur (généralement http:// ou ftp:// sur une page web). Un chemin absolu contient l'emplacement exact quel que soit l'emplacement du document source. Mais si le document cible est déplacé, le lien sera invalide. Des chemins absolus doivent être utilisés lors de la création de liens vers des fichiers en dehors du site actuel.

Les chemins relatifs au répertoire racine partent toujours du répertoire racine du site courant. Tous les fichiers accessibles au public sur le site sont stockés dans le répertoire racine du site. Les chemins relatifs au répertoire racine utilisent des barres obliques pour indiquer au serveur de démarrer à partir du répertoire racine. Par exemple, /Dreamweaver/index.html sera lié au fichier index.html dans le dossier Dreamweaver à la racine de votre site. Si vous liez des fichiers dans un environnement où le contenu est fréquemment déplacé, l'utilisation d'un chemin relatif au répertoire racine est souvent la meilleure approche. Lors de l'utilisation de chemins relatifs au répertoire racine, les documents contenant des liens se déplacent dans le site sans que les liens ne soient rompus. Cependant, les chemins relatifs au répertoire racine conviennent pour visualiser le site localement, auquel cas vous pouvez utiliser des chemins relatifs au document.

Remarque : Lors de la prévisualisation du fichier localement dans le navigateur, le contenu lié au chemin relatif au répertoire racine n'apparaîtra pas. En effet, les navigateurs ne reconnaissent pas la racine du site de la même manière que les serveurs, et pour prévisualiser le contenu lié à un chemin relatif à la racine, le fichier doit être placé sur un serveur distant et visualisé à partir de là.

Le chemin relatif au document fait référence au chemin relatif au dossier où se trouve le document actuel. Par exemple, le document test.swf se trouve dans le dossier Flash et spécifie le document dans le dossier actuel. …/test.swf spécifie le document dans le répertoire de niveau supérieur du dossier actuel ; et /test/test.swf spécifie le document test.swf dans le dossier test sous le dossier Flash. Les chemins relatifs au document sont généralement les chemins les plus simples pouvant être utilisés pour créer des liens vers des fichiers qui se trouvent toujours dans le même dossier que le document actuel.

Remarque : Vous devez enregistrer le nouveau fichier avant de créer un chemin relatif au document, car un chemin relatif au document n'est pas valide sans un point de départ défini. Dreamweaver 4 utilise automatiquement un chemin absolu commençant par File:// avant d'enregistrer le document.