Le style CSS de Dreamweaver4 contient tous les attributs CSS1 définis par la spécification W3C. Dreamweaver4 divise ces attributs en Type, Arrière-plan, Bloc, Boîte et Bordure, Liste, Positionnement et Extensions, comme le montre la figure ci-dessous. les expliquera en détail ci-dessous.
1. Type
Le panneau Type est principalement utilisé pour définir les styles de base tels que la police, la taille, la couleur et les effets du texte. Lors de la configuration, nous définissons uniquement les attributs qui doivent être modifiés et laissons les attributs qui n'ont pas besoin d'être modifiés vides.
Remarque : Le nom de l'attribut avec * signifie que l'effet de style ne peut pas être affiché lors de l'édition du document. Vous devez l'ouvrir avec un navigateur pour voir l'effet.
Police : définissez la famille de polices. Qu’est-ce qu’une famille de polices ? Il s'agit de définir plusieurs polices pour le texte. Lorsque vous rencontrez du texte qui ne peut pas être affiché dans la première police, la deuxième police ou la police suivante de la série sera automatiquement affichée. La propriété CSS correspondante est "font-family".
Remarque : Dreamweaver4 intègre 6 séries de polices anglaises. Généralement, nous utilisons la série de polices anglaises "Verdana, Arial, Helvetica, sans-serif" qui sont plus belles. Si vous n'utilisez pas ces familles de polices, vous devez modifier la série de polices vous-même. Vous pouvez créer une nouvelle famille de polices via « Modifier la liste des polices » en bas de la liste déroulante, ou vous pouvez écrire directement le nom de la police. la liste déroulante manuellement, en les séparant par des virgules. La police par défaut pour les pages Web chinoises est Song Dynasty. Généralement, laissez-la vide et ne sélectionnez aucune police.
Taille : Définissez la taille du texte. Vous pouvez choisir une taille de police spécifique en sélectionnant un nombre et une unité de mesure, ou vous pouvez choisir une taille de police relative. Il est préférable d'utiliser les pixels comme unités afin que le texte ne se déforme pas dans le navigateur. Généralement, le 12px relativement standard est utilisé pour les petites polices. La propriété CSS correspondante est "font-size".
Remarque : les unités de longueur en CSS sont divisées en unités de longueur absolue et unités de longueur relative. Généralement, les unités de longueur absolue que nous utilisons couramment sont : px : (pixel) La longueur est déterminée en fonction de la résolution de. l’affichage.
pt : (taille de la police) détermine la longueur en fonction de la taille de la police définie par le système Windows.
mm, cn, po : (millimètres, centimètres, pouces) Déterminez la longueur en fonction de la taille réelle indiquée. Ces unités ne changent pas lorsque la résolution du moniteur change.
Les unités de longueur relative sont :
em : la taille du texte actuel. Par exemple : {font-size:2em} signifie que la taille du texte est deux fois supérieure à la taille d'origine.
ex : La hauteur de la lettre "x" actuelle, généralement la moitié de la taille de la police.
% : Définit la taille en pourcentage du texte actuel. Par exemple : {font-size:300%} signifie que la taille du texte est 3 fois supérieure à la taille d'origine.
petit, grand : Indique une taille d'un niveau plus petite ou d'un niveau plus grande que la taille actuelle. style : définissez le style de police sur Normal, Italique ou Oblique. Italic et Oblique sont des polices italiques. Le paramètre par défaut est Normal. La propriété CSS correspondante est "font-style".
Remarque : Italic et Oblique sont toutes deux des polices italiques. La différence entre elles est que Italic est une police italique, tandis qu'Oblique est une police italique. Pour les polices sans italique, Oblique doit être utilisée.
Hauteur de ligne : définissez la hauteur de ligne de la ligne où se trouve le texte. La valeur par défaut est Normal, mais vous pouvez également saisir vous-même une valeur précise et sélectionner une unité de mesure. Une manière d'écrire plus intuitive consiste à utiliser des pourcentages. Par exemple, 140 % signifie que la hauteur de la ligne est égale à 1,4 fois la taille du texte. La propriété CSS correspondante est "line-height".
Décoration : ajoutez un soulignement, un surlignement, un trait et un clignotement au texte. Ces effets peuvent exister en même temps, il suffit de cocher la case devant l'effet. La propriété CSS correspondante est "text-decoration".
Remarque : Le paramètre par défaut pour les liens est Souligné, nous pouvons supprimer le soulignement en n'en sélectionnant aucun. Le clignotement (effet flash) n'est visible que dans le navigateur NC.
Poids : spécifiez la taille en points du texte en gras pour la police. Normal équivaut à 400 ; gras équivaut à 700. Pour les caractères gras, le gras est généralement utilisé. La propriété CSS correspondante est "font-weight".
Variante : vous permet de sélectionner une variante de la police. Lorsque les petites majuscules sont sélectionnées, toutes les lettres de cette zone de style seront en majuscules. La propriété CSS correspondante est "font-variant".
Case : convertissez la première lettre de chaque mot de la sélection en majuscules, ou mettez le mot entièrement en majuscules ou entièrement en minuscules. Paramètres : majuscule (mettre en majuscule la première lettre du mot), majuscule (convertir en majuscule), minuscule (convertir en minuscule), aucun (ne pas convertir). La propriété CSS correspondante est "text-transform".
Couleur : définissez la couleur du texte. La propriété CSS correspondante est "color".
Remarque : Il existe trois façons de représenter les valeurs de couleur en CSS :
l Le format #RRGGBB est une combinaison de valeurs de couleur rouge, verte et bleue, et la valeur de chaque couleur est "00 – FF" est un entier positif hexadécimal à deux chiffres. Par exemple : #FF0000 signifie rouge, #FFFF00 signifie jaune.
l format rgb(R,G,B), RGB est la valeur de trois couleurs, allant de 0 à 255, par exemple : rgb(255,0,0) signifie rouge, rgb(255,255,0 ) signifie jaune.
l Utilisez des noms de couleurs. CSS peut utiliser des noms de couleurs déjà définis. Par exemple : rouge signifie rouge, jaune signifie jaune.
2. Contexte
Le panneau Arrière-plan est principalement utilisé pour définir l'arrière-plan des éléments, notamment la couleur d'arrière-plan, l'image d'arrière-plan et le contrôle de l'image d'arrière-plan. Généralement, il s'agit du réglage de BODY (page), TABLE (table) et p (zone).
Couleur d'arrière-plan : définissez la couleur d'arrière-plan de l'élément. La propriété CSS correspondante est "background-color".
Image d'arrière-plan : définissez l'image d'arrière-plan de l'élément. La propriété CSS correspondante est "background-image".
Répéter : détermine si et comment l'image d'arrière-plan se répète. Pas de répétition : affiche l'image une fois au début de l'élément. Répéter : affiche l'image en mosaïque horizontalement et verticalement sur la partie d'arrière-plan de l'élément. Répéter-x et Répéter-y : Répéter respectivement dans les directions horizontale et verticale. La valeur par défaut est Répéter. La propriété CSS correspondante est "background-repeat".
Remarque : Si vous définissez le CORPS d'un élément, vous pouvez contrôler si l'arrière-plan de la page est répété.
Pièce jointe : Correction de l'image de fond ou défilement avec le contenu. Le paramètre fix indique un arrière-plan fixe et scroll indique un arrière-plan qui défile avec le contenu. La propriété CSS correspondante est "background-attachment".
Remarque : Si vous définissez le CORPS de l'élément, vous pouvez fixer l'arrière-plan de la page.
Horizontal : Spécifiez la position horizontale de l'image d'arrière-plan. Vous pouvez spécifier gauche (gauche), centre (centre), droite (droite). Vous pouvez également spécifier une valeur numérique, telle que 20px signifie que l'arrière-plan est à 20 pixels de la gauche. La propriété CSS correspondante est "background-position".
Vertical : Spécifiez la position verticale de l'image d'arrière-plan. Il peut être spécifié comme haut (haut), centre (centre), bas (bas) ; une valeur numérique peut également être spécifiée. La propriété CSS correspondante est "background-position".
Remarque : la position horizontale et la position verticale utilisent la même propriété CSS, alors faites attention lors de sa définition.
3. Bloquer
Le panneau Bloc est principalement utilisé pour définir l'espacement du texte, l'alignement, l'exposant, l'indice, la disposition, l'indentation de la première ligne, etc.
Espacement des mots : définissez l'espacement entre les mots. Des valeurs négatives peuvent être définies. La propriété CSS correspondante est "word-spacing".
Remarque : Généralement, IE ne prend pas en charge cet attribut et n'est disponible que dans IE4+ sur la plateforme MAC.
Espacement des lettres : définissez l'espacement entre les caractères. Des valeurs négatives peuvent être spécifiées. Les caractères chinois étant également des caractères, ce paramètre peut définir l'espacement entre les caractères. La propriété CSS correspondante est "letter-spacing".
Alignement vertical : Spécifie l'alignement vertical de l'élément. Vous pouvez spécifier sub (indice), super (exposant), top (aligné avec le haut), middle (centré), bottom (aligné avec le bas)... La propriété CSS correspondante est "vertical-align".
Alignement du texte : définissez la disposition du texte. Gauche (alignement à gauche), droite (alignement à droite), centre (centre), justifier (justifier les deux extrémités). La propriété CSS correspondante est "text-align".
Retrait du texte : définissez la valeur de retrait de la première ligne de texte. Les valeurs négatives tirent la première ligne de texte vers l'extérieur. Pour laisser deux espaces avant chaque paragraphe, définissez-le sur 2em, car em est la taille de police actuelle et 2em est la taille de deux caractères. La propriété CSS correspondante est "text-indent".
Espaces : définissez comment gérer les caractères d'espacement dans l'élément. Vous avez le choix entre trois options : Normal compressera tous les caractères d'espacement ; Pre traitera ces caractères d'espacement comme le texte de la balise pre (c'est-à-dire que tous les caractères d'espacement, y compris les espaces, les tabulations, les retours chariot, etc. seront compressés. ) Réservé); Nowrap spécifie que le texte sera renvoyé à la ligne uniquement lorsqu'il rencontrera la balise br. La propriété CSS correspondante est "white-space".
4. Boîte
Le panneau Boîte définit principalement la limite, l'espacement, la hauteur, la largeur et la méthode de flottaison de l'objet.
Largeur : Définit la largeur de l'élément. La propriété CSS correspondante est "width".
Hauteur : Définit la hauteur de l'élément. La propriété CSS correspondante est « hauteur ».
Remarque : Les objets définis par la largeur et la hauteur sont principalement des images, des tableaux, des calques, etc.
Float : Définit la manière dont l'élément flotte. left signifie que l'objet flotte à gauche, right signifie que l'objet flotte à droite et none signifie que l'objet ne flotte pas. La propriété CSS correspondante est "float".
Clair : Le flottement des éléments n'est pas autorisé. left signifie que les objets flottants ne sont pas autorisés sur le côté gauche, right signifie que les objets flottants ne sont pas autorisés sur le côté droit, none signifie que les objets flottants sont autorisés des deux côtés et les deux ne sont pas autorisés à avoir des objets flottants. La propriété CSS correspondante est "clear".
Padding : Définissez l'espace entre le contenu de l'élément et sa bordure (si l'élément n'a pas de bordure, il fait référence à la marge de la page). Vous pouvez définir respectivement les valeurs de haut (remplissage supérieur), de droite (remplissage droit), de bas (remplissage inférieur) et de gauche (remplissage gauche). Les propriétés CSS correspondantes sont "padding; padding-top; padding-right; padding-bottom; padding-left".
Marge : Définit la distance entre la bordure de l'élément et les autres éléments (s'il n'y a pas de bordure, cela signifie la distance entre le contenu). Vous pouvez définir respectivement les valeurs haut (bordure supérieure), droite (bordure droite), bas (bordure inférieure) et gauche (bordure gauche). Les propriétés CSS correspondantes sont "margin; margin-top; margin-right; margin-bottom; margin-left".
Ce qui suit est le diagramme de relation entre le remplissage, la bordure et la bordure :
5. Bordure
Le panneau Bordure peut définir la largeur, la couleur et le style de la bordure de l'objet.
Largeur : définissez la largeur du côté de l'élément. Vous pouvez définir respectivement les valeurs Top (largeur supérieure), Right (largeur droite), Bottom (largeur inférieure) et Left (largeur gauche). Les propriétés CSS correspondantes sont "border; border-top; border-right; border-bottom; border-left".
Couleur : définissez la couleur de la bordure. Vous pouvez définir la couleur de chaque bord individuellement. Les propriétés CSS correspondantes sont "border-color; border-top-color; border-right-color; border-bottom-color; border-left-color".
Remarque : Nous pouvons créer des bords clairs et sombres en définissant différentes couleurs, de sorte que les éléments semblent tridimensionnels.
style : définissez le style de la bordure. Peut être défini sur aucun (pas de bordure), pointillé (ligne pointillée), pointillé (ligne pointillée), plein (ligne continue), double (ligne double), rainure (rainure), crête (rainure convexe), encart (bord concave) , Début (bord convexe) et autres styles de bordure. La propriété CSS correspondante est "border-style".
Remarque : les pointillés (ligne pointillée) et les pointillés (ligne pointillée) doivent être pris en charge par IE5.5 ou supérieur ou par la plate-forme MAC, sinon l'effet sera une ligne continue.
6. Liste
Le panneau Liste peut définir le style de l'élément de liste, l'image de l'élément de liste et la position.
Type : définissez la balise par défaut utilisée par l'élément de liste. Les styles pouvant être définis sont : disque (cercle plein), cercle (cercle creux), carré (carré), décimal (chiffres arabes), romain inférieur (chiffres romains minuscules), romain supérieur (chiffres romains majuscules), inférieur. -alpha (lettres anglaises minuscules), alpha-majuscule (lettres anglaises majuscules), aucun (pas de puces). La propriété CSS correspondante est "list-style-type".
Bullet Image : définissez l'image de l'élément de liste. La valeur est l'adresse URL ou le chemin de l'image. La propriété CSS correspondante est "list-style-image".
Position : définissez si l'élément de la liste se trouve dans le texte ou en dehors du texte. À l'intérieur : la marque de l'élément de liste est placée à l'intérieur du texte. À l'extérieur : la marque de l'élément de liste est placée à l'extérieur du texte. La propriété CSS correspondante est "list-style-position".
7. Positionnement
Le panneau Positionnement équivaut à placer des objets dans un calque pour le positionnement. Il équivaut à la balise HTML p. Vous pouvez considérer les définitions comme une couche de définitions CSS.
Type : Définissez la méthode de positionnement de l'objet. Il existe trois méthodes : Absolue (positionnement absolu), Relative (positionnement relatif) et Statique (pas de positionnement spécial). La propriété CSS correspondante est "position".
Visibilité : définissez l'état d'affichage initial du calque de positionnement de l'objet. Il existe trois états : Hériter (héritant des propriétés d'affichage du calque parent), Visible (l'objet est visible) et Caché. La propriété CSS correspondante est « visibilité ».
Z-Index : définissez l'ordre d'empilement des objets. Les calques portant des numéros plus élevés apparaissent au-dessus des calques portant des numéros inférieurs. Les valeurs des variables peuvent être positives ou négatives. La propriété CSS correspondante est "z-index".
Débordement : définissez comment gérer si le contenu du calque dépasse la taille du calque. Il existe quatre méthodes de traitement : visible, qui augmente la taille du calque pour afficher tout le contenu du calque caché, qui maintient la taille du calque inchangée et coupe le contenu au-delà du calque ; bar ; Auto, qui seules les barres de défilement ne sont affichées que lorsque le contenu dépasse les limites du calque. La propriété CSS correspondante est "overflow".
Placement : définissez la position et la taille du calque de positionnement de l'objet. Vous pouvez définir respectivement la gauche (positionnement à gauche), le haut (positionnement en haut), la largeur (largeur) et la hauteur (hauteur). Les propriétés CSS correspondantes sont "left; top; width; height".
Clip : Définit la zone visible du calque de positionnement. La partie extérieure à la zone est une zone invisible et transparente. Cela peut être compris comme l'effet du placement d'un masque rectangulaire sur le calque de positionnement. La propriété CSS correspondante est "clip".
Remarque : Ce paramètre n'est valable que lors d'un positionnement absolu.
Remarque : Lorsque le positionnement absolu est défini dans Type, un calque de positionnement absolu sera ajouté à l'objet. Le calque créé par ce CSS possède un panneau de propriétés comme un calque normal et est également affiché dans le panneau de gestion des calques. Vous pouvez modifier les paramètres ci-dessus en définissant le panneau de propriétés de ce calque de positionnement, mais la valeur modifiée dans ce panneau de propriétés sera ajoutée en tant que style en ligne après la balise d'objet. L'image suivante est le panneau de propriétés du calque de positionnement :
8 . Extensions (Extensions)
Saut de page : Forcer les sauts de page avant et après l'objet contrôlé par le style lors de l'impression.
Avant : définissez le séparateur de page qui apparaît avant l'objet. Lorsqu'il est défini sur toujours, un séparateur de page est toujours inséré avant l'objet. La propriété CSS correspondante est "page-break-before".
Après : le séparateur de page qui apparaît après la définition de l'objet. Lorsqu'il est défini sur toujours, les sauts de page sont toujours insérés après l'objet. La propriété CSS correspondante est "'>.
Remarque : IE5 ci-dessus ne prend en charge que les valeurs toujours et les valeurs vides (nulles).
Curseur : change lorsque la souris glisse sur l'objet contrôlé par le style Forme de la souris Peut être défini sur main (type de main), réticule (type "dix"), texte (type "I"), attendre (attendre), par défaut (par défaut), aide (aide), e-resize (. flèche est), ne-resize (flèche nord-est), n-resize (flèche nord), nw-resize (flèche nord-ouest), w-resize (flèche ouest), sw-resize (flèche sud-ouest), s-resize (flèche sud ), se -resize (flèche sud-est) et auto (auto)
.Filtre : ajoutez des effets de filtre au style. Étant donné que cet attribut a beaucoup de contenu, nous présenterons les filtres séparément dans le chapitre suivant.
2. Filtres
CSS fournit des effets de filtre multimédia intégrés. Grâce à cette technologie, vous pouvez ajouter des filtres visuels et des effets de transformation à un élément HTML standard, tel que des images, des conteneurs de texte, et d'autres objets. Dreamweaver4 propose 16 filtres parmi lesquels choisir, comme indiqué ci-dessous :
Voyons ensuite comment utiliser facilement ces filtres CSS dans Dreamweaver4.
Créez un style personnalisé ".filter", sélectionnez le filtre Alpha dans la liste déroulante Filtre, nous allons "Alpha(Opacity=?, FinishOpacity=?, style=?, StartX=?, StartY= ? , FinishX=?, FinishY=?)" définissez le paramètre Opacité sur 50 et supprimez tous les paramètres suivants, comme indiqué ci-dessous :
Après avoir appuyé sur OK, un style personnalisé de ".filter" est créé. Nous Appliquez ce style à une image et l’image sera semi-transparente. Si vous appliquez ce style à un tableau, le tableau deviendra également semi-transparent. Notez que tous les effets de filtre ne sont visibles que dans le navigateur. Voici le code original :
Remarque : Dans cet exemple, nous n'avons pas utilisé les paramètres suivants, uniquement le paramètre Opacité, donc Supprimez les autres paramètres.
Expliquons les effets et les paramètres de chaque filtre :
1. Alpha : Définir la transparence
Alpha(Opacity=?, FinishOpacity=?, style=? , StartX= ?, StartY=?, FinishX=?, FinishY=?)
Opacité : niveau de transparence, la plage est de 0 à 100, 0 représente complètement transparent, 100 représente complètement opaque.
FinishOpacity : lors de la définition de l'effet de transparence du dégradé, il est utilisé pour spécifier la transparence à la fin, et la plage est également de 0 à 100.
style : définissez le style de transparence du dégradé. Une valeur de 0 représente une forme uniforme, 1 représente une forme linéaire, 2 représente une forme radiale et 3 représente un rectangle.
StartX et StartY : représentent les coordonnées X et Y de départ de l'effet de transparence dégradé.
FinishX et FinishY : représentent les coordonnées X et Y de la fin de l'effet de transparence du dégradé.
2. BlendTrans : effet de fondu entrant et sortant entre les images
BlendTrans(Duration=?)
Durée : temps de fondu entrant ou sortant.
Remarque : Ce filtre doit être utilisé avec JS pour créer une séquence d'images afin de créer des effets entre les images.
3. Bluru : Créer un effet de flou
Flou (Ajouter=?, Direction=?, Force=?)
Ajouter : S'il faut flouter dans une direction, ceci Le paramètre est une valeur booléenne, vraie (et non 0) ou fausse (0).
Direction : définissez la direction du flou, où 0 degré représente la verticale vers le haut, puis tous les 45 degrés sont une unité.
Force : représente la valeur du pixel flou.
4. Chroma : définissez la couleur spécifiée sur transparente
Chroma(Color=?)
Color : fait référence à la couleur à définir comme transparente.
5. DropShadow : Créez un effet d'ombre
DropShadow(Color=?, OffX=?, OffY=?, Positive=?)
Color : Spécifiez la couleur de l'ombre.
OffX : Spécifie le décalage horizontal de l'ombre par rapport à l'élément, un nombre entier.
OffY : Spécifie le décalage vertical de l'ombre par rapport à l'élément, un nombre entier.
Positif : C'est une valeur booléenne. Lorsque la valeur est vraie (non-0), cela signifie établir une ombre extérieure ; lorsqu'elle est fausse (0), cela signifie établir une ombre intérieure.
6. FlipH : retournez l'élément horizontalement
7. FlipV : retournez l'élément verticalement
8 Glow : créez un effet de lueur extérieure
Glow. (Color=?, Strength=?)
Color : spécifie la couleur de la lumière.
Force : L'intensité de la lumière, qui peut être n'importe quel nombre entier compris entre 1 et 255. Plus le nombre est grand, plus la portée de la lumière est grande.
9. Gris : supprimez la couleur de l'image et affichez-la sous forme d'image en noir et blanc
10. Inverser : inversez la couleur de l'image, produisant un effet semblable à celui d'un film
11. Lumière : l'effet de placer une source de lumière, qui peut être utilisée pour simuler l'effet de projection d'une source de lumière sur un objet
Remarque : cet effet nécessite que JS définisse la position et l'intensité. de la lumière.
12. Masque : Créez un masque transparent
Masque(Couleur=?)
Couleur : Définissez la couleur d'arrière-plan pour rendre la partie de l'objet recouvrant l'arrière-plan transparente.
13. RevealTrans : Créer un effet de commutation
RevealTrans(Duration=?, Transition=?)
Durée : est le temps de commutation, en secondes.
Transtition : C'est la méthode de commutation et peut être réglée de 0 à 23.
Remarque : Si vous souhaitez basculer entre les pages, vous pouvez ajouter une ligne de code dans la zone
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
