Maison interface Web tutoriel CSS Tutoriel CSS (6) Explication détaillée des propriétés CSS dans DW4

Tutoriel CSS (6) Explication détaillée des propriétés CSS dans DW4

Apr 01, 2017 pm 02:04 PM
css Explication détaillée des propriétés 教程

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  : . Si les éléments sont utilisés dans la page, ils doivent être utilisés avec JS.

14. Ombre : Créez un autre effet d'ombre

Shadow(Color=?, Direction=?)

Color : fait référence à la couleur de l'ombre.

Direction : définit la direction de la projection, 0 degré signifie verticalement vers le haut, puis tous les 45 degrés sont une unité.

15. Wave : Effet d'ondulation

Wave(Add=?, Freq=?, LightStrength=?, Phase=?, Strength=?)

Add : Indique si Afficher l'objet d'origine, 0 signifie ne pas afficher, non-0 signifie afficher l'objet d'origine.

Freq : définissez le nombre de fluctuations.

LightStrength : définissez l'intensité lumineuse de l'effet d'onde, de 0 à 100. 0 représente le plus faible et 100 représente le plus fort.

Phase : L'angle de phase de départ de l'onde. Valeur en pourcentage de 0 à 100. (Exemple : 25 équivaut à 90 degrés, tandis que 50 équivaut à 180 degrés.)

Force : définissez l'amplitude du balancement des vagues.

16. Xray : Afficher le contour de l'image, effet X-ray

Remarque : Lorsque vous utilisez des filtres CSS, vous devez utiliser des éléments avec des zones, tels que des tableaux, des images, etc. Les éléments sans zones tels que le texte et les paragraphes ne peuvent pas utiliser de filtres CSS. Pour ces éléments, nous pouvons définir les styles de hauteur et de largeur ou les coordonnées des éléments pour y parvenir.

Regardez l'exemple ci-dessous. Nous créons un effet d'ombre portée (dropshadow) sur une ligne de texte, créons un nouveau style.shadow personnalisé et sélectionnons "DropShadow(Color=?, OffX=?, OffY=? ,) dans la liste déroulante du filtre. Positive=?)", nous le définissons sur "DropShadow(Color=999999, OffX=2, OffY=2, Positive=1)". Ensuite, lorsque nous appliquons le style défini à la page, nous constatons que le texte du tableau a une ombre, mais que le texte du paragraphe n'a pas d'ombre. Cliquez sur le bouton Modifier la feuille de style dans le panneau des styles CSS et ajoutez l'attribut Hight au style :

Afin de ne pas affecter la hauteur de l'objet d'origine, la hauteur que nous définissons ne peut pas dépasser la hauteur de la police elle-même. . Après OK, vous pouvez voir dans le navigateur que le texte du paragraphe a également une ombre.

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Comment déverrouiller tout dans Myrise
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment utiliser le bouton bootstrap Comment utiliser le bouton bootstrap Apr 07, 2025 pm 03:09 PM

Comment utiliser le bouton bootstrap? Introduisez Bootstrap CSS pour créer des éléments de bouton et ajoutez la classe de bouton bootstrap pour ajouter du texte du bouton

Comment redimensionner le bootstrap Comment redimensionner le bootstrap Apr 07, 2025 pm 03:18 PM

Pour ajuster la taille des éléments dans Bootstrap, vous pouvez utiliser la classe de dimension, qui comprend: ajuster la largeur: .col-, .w-, .mw-ajustement Hauteur: .h-, .min-h-, .max-h-

Comment configurer le cadre de bootstrap Comment configurer le cadre de bootstrap Apr 07, 2025 pm 03:27 PM

Pour configurer le framework Bootstrap, vous devez suivre ces étapes: 1. Référez le fichier bootstrap via CDN; 2. Téléchargez et hébergez le fichier sur votre propre serveur; 3. Incluez le fichier bootstrap dans HTML; 4. Compiler les sass / moins au besoin; 5. Importer un fichier personnalisé (facultatif). Une fois la configuration terminée, vous pouvez utiliser les systèmes, composants et styles de grille de Bootstrap pour créer des sites Web et des applications réactifs.

Comment insérer des photos sur bootstrap Comment insérer des photos sur bootstrap Apr 07, 2025 pm 03:30 PM

Il existe plusieurs façons d'insérer des images dans Bootstrap: insérer directement les images, en utilisant la balise HTML IMG. Avec le composant d'image bootstrap, vous pouvez fournir des images réactives et plus de styles. Définissez la taille de l'image, utilisez la classe IMG-FLUID pour rendre l'image adaptable. Réglez la bordure en utilisant la classe IMG-border. Réglez les coins arrondis et utilisez la classe Roundée IMG. Réglez l'ombre, utilisez la classe Shadow. Redimensionner et positionner l'image, en utilisant le style CSS. À l'aide de l'image d'arrière-plan, utilisez la propriété CSS d'image d'arrière-plan.

Comment écrire des lignes fendues sur bootstrap Comment écrire des lignes fendues sur bootstrap Apr 07, 2025 pm 03:12 PM

Il existe deux façons de créer une ligne divisée bootstrap: en utilisant la balise, qui crée une ligne divisée horizontale. Utilisez la propriété CSS Border pour créer des lignes de fractionnement de style personnalisées.

Comment afficher la date de bootstrap Comment afficher la date de bootstrap Apr 07, 2025 pm 03:03 PM

Réponse: Vous pouvez utiliser le composant de sélecteur de date de bootstrap pour afficher les dates dans la page. Étapes: Présentez le framework bootstrap. Créez une boîte d'entrée de sélecteur de date dans HTML. Bootstrap ajoutera automatiquement des styles au sélecteur. Utilisez JavaScript pour obtenir la date sélectionnée.

Comment vérifier la date de bootstrap Comment vérifier la date de bootstrap Apr 07, 2025 pm 03:06 PM

Pour vérifier les dates dans Bootstrap, suivez ces étapes: introduisez les scripts et styles requis; initialiser le composant de sélecteur de date; Définissez l'attribut Data-BV-Date pour activer la vérification; Configurer les règles de vérification (telles que les formats de date, les messages d'erreur, etc.); Intégrez le cadre de vérification de bootstrap et vérifiez automatiquement l'entrée de date lorsque le formulaire est soumis.

Comment régler la barre de navigation bootstrap Comment régler la barre de navigation bootstrap Apr 07, 2025 pm 01:51 PM

Bootstrap fournit un guide simple pour configurer les barres de navigation: l'introduction de la bibliothèque bootstrap pour créer des conteneurs de barre de navigation Ajouter l'identité de marque Créer des liens de navigation Ajouter d'autres éléments (facultatif) Styles d'ajustement (facultatif)

See all articles