Styles courants CSS
Cette fois, je vais vous présenter les styles CSS courants. Quelles sont les précautions à prendre pour utiliser les styles CSS courants, jetons un coup d'œil ?
À quoi fait référence CSS Sprite (Sprite) ? Quelle est sa fonction
CSS Sprite est CSS Sprite, certaines personnes l'appellent également CSS Sprite. C'est une technologie de fusion d'images CSS. est Fusionnez la petite icône et l'image d'arrière-plan en une seule image, puis utilisez le positionnement d'arrière-plan CSS pour afficher la partie de l'image qui doit être affichée.
Quelles sont les différences dans les scénarios d'utilisation entre les balises img et les images d'arrière-plan CSS ?
img est utilisé comme balise html, et les images utilisées par img sont généralement utilisées comme contenu.
Les images d'arrière-plan CSS sont généralement utilisées pour la décoration.
Dans une direction plus détaillée, pendant le processus de chargement de la page Web, les images qui existent en tant qu'images d'arrière-plan CSS ne commenceront pas à se charger tant que la structure n'est pas chargée (une fois que tout le contenu de la page Web est affiché), et le La balise img en html est la structure de la page Web. Une partie (du contenu) est chargée lors du chargement de la structure. Lorsque l'image est utilisée comme arrière-plan, lorsque l'image n'est pas chargée ou ne se charge pas, il n'y aura aucune marque d'espace réservé pour l'image et aucune croix rouge n'apparaîtra.
Quelles sont les fonctions des attributs title et alt
L'attribut title spécifie des informations supplémentaires sur l'élément. Ces informations affichent généralement un texte ToolTip lorsque la souris est déplacée sur l'élément. L'attribut alt spécifie un texte alternatif lorsque l'image ne peut pas être affichée.
background:url(abc.png) 0 0 no-repeat; Que signifie cette phrase
Cette phrase est l'abréviation de background, et url représente background-imageInsérez l'adresse de l'image d'arrière-plan. 0 0 représente la valeur de background-position, qui indique le positionnement de l'image d'arrière-plan. Les deux avant et après sont respectivement le positionnement horizontal et le positionnement vertical. Le coin supérieur gauche est 0 0 et no-repeat représente la valeur de background-repeat. Les valeurs disponibles sont répéter, sans répétition, répéter-x, répéter-y et hériter. Indique respectivement la répétition horizontale et verticale, aucune répétition, uniquement la répétition horizontale, uniquement la répétition verticale et l'héritage des éléments parents.
background-sizeQuelle est la fonction ? Comment est la compatibilité ? les valeurs sont auto |length|cover|contain|initial|inherit;
Comment centrer un div horizontalement ? Comment centrer l'image horizontalement
Centrer le div horizontalement :
1. Méthode de marge : en définissant des marges sur le div, marge : 0 auto2. affichage : méthode de bloc en ligne : parent ; élément Définir text-align:center. Vous devez définir display:inline-block sur le div dans la pièce.
3. Méthode flottante : Pour div et son élément parent, float:left, positionnement relatif, élément parent left50%, div right 50%. Centrez l'image horizontalement : placez l'image dans un élément de niveau bloc, en utilisant la méthode ci-dessus.
Comment définir la transparence des éléments ?
La transparence du débit de parole peut être définie via rgba et opcity Pour les navigateurs ie8 et les versions pires, filter:alpha(opacity=x) doit être ajouté.
L'opacité et le rgba peuvent être définis pour être transparents. Quelle est la différence ?
opacity héritera de l'attribut opacity de l'élément parent, tandis que les éléments descendants de l'élément défini par RGBA n'hériteront pas de l'attribut opacity.
, il peut être prouvé que l'opacité peut hériter des attributs de l'élément parent. De plus, l'opacité peut également définir la transparence de l'image.
<html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css">
.rgba,.opacity{ margin:0 auto; width:200px; height: 200px; text-align: center; line-height: 200px; font-size: 20px; border:1px solid black; } .rgba{ background: rgba(255,0,0,0.5); } .opacity{ background: red; opacity: 0.5; } </style> </head> <body> <div class="rgba"> 这是RGBA不透明度 </div> <div class="opacity"> 这是opacity不透明度 </div> </body> </html>
Lecture connexe :
Objets temporels JS et types de référence
Utilisez la technologie frontale la plus simple pour créer un lecteur de musique simple
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comment utiliser Bootstrap en Vue
Apr 07, 2025 pm 11:33 PM
L'utilisation de bootstrap dans vue.js est divisée en cinq étapes: installer bootstrap. Importer un bootstrap dans main.js. Utilisez le composant bootstrap directement dans le modèle. Facultatif: style personnalisé. Facultatif: utilisez des plug-ins.
Les rôles de HTML, CSS et JavaScript: responsabilités de base
Apr 08, 2025 pm 07:05 PM
HTML définit la structure Web, CSS est responsable du style et de la mise en page, et JavaScript donne une interaction dynamique. Les trois exercent leurs fonctions dans le développement Web et construisent conjointement un site Web coloré.
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.
Comprendre HTML, CSS et JavaScript: un guide pour débutant
Apr 12, 2025 am 12:02 AM
WebDevelopmentReliesOnHTML, CSS, etjavascript: 1) HTMLSTRUCTURESCONTENT, 2) CSSSTYLESIT, et3) JavascriptAdddsInterActivity, Forming TheasisofmodernweBEBExperiences.
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 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
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 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-
