Feuille de style d'apprentissage Référence CSS - CSS Knowledge_Experience Exchange couramment utilisé

1. Comparaison des éléments Block et inline

Tous les éléments HTML appartiennent à l'un des éléments block et inline. Les caractéristiques de l'élément
block sont :
commence toujours sur une nouvelle ligne ;
la hauteur, la hauteur de la ligne et les marges supérieure et inférieure peuvent toutes être contrôlées
la largeur par défaut est de 100 % de son conteneur ; sauf si vous définissez une largeur

,

,

,

,

et
• sont des exemples d'éléments de bloc.
  
  Au contraire, les caractéristiques des éléments en ligne sont :
  et les autres éléments sont sur la même ligne ;
  la hauteur, la hauteur de la ligne et les marges supérieure et inférieure ne peuvent pas être modifiées ;
  la largeur est ; son texte Ou la largeur de l'image, qui ne peut pas être modifiée.
  , , , , , et sont des exemples d'éléments en ligne.
  
  Utilisez la commande display: inline ou display: block pour modifier cette fonctionnalité d'un élément. Quand devez-vous modifier cet attribut ?
  Laissez un élément en ligne commencer sur une nouvelle ligne ;
  Gardez l'élément de bloc et les autres éléments sur la même ligne
  Contrôlez la largeur de l'élément en ligne (particulièrement utile pour les barres de navigation) ; la hauteur de l'élément en ligne ;
  Vous pouvez définir une couleur d'arrière-plan avec la même largeur que le texte pour un élément de bloc sans définir la largeur.
  
  
  2. Une autre méthode de piratage de boîte
  La raison pour laquelle il existe tant de méthodes de piratage de boîte est que la compréhension d'IE de la boîte avant 6 était différente des autres. inclure la largeur du bord et l’espace blanc. Pour rendre IE5 cohérent avec les autres navigateurs, vous pouvez utiliser CSS :
  
  padding: 2em;
  border: 1em solid green;
  width/** /:/** / 14em;
  
  La première largeur est reconnue par tous les navigateurs, mais IE5.x ne reconnaît pas le paramètre de largeur de la ligne 2, simplement parce qu'il y a un symbole de commentaire vide sur cette ligne (quelle analyse syntaxique stupide ! ) , donc IE5.
  
  
  3. La largeur minimale de la page
  min-width est une commande CSS très pratique elle peut spécifier que la largeur minimale de l'élément ne peut pas être inférieure à. une certaine largeur, afin qu'elle puisse être garantie. La disposition a toujours été correcte. Mais IE ne le reconnaît pas et traite en fait la largeur comme la largeur minimale. Afin que cette commande fonctionne également sur IE, vous pouvez mettre un
  sous la balise
  , puis spécifier une classe pour le div :
  
  
  
  

  }
  La première largeur minimale est normale ; mais la largeur de la ligne 2 utilise Javascript, qui n'est reconnu que par IE, ce qui rendra également votre document HTML moins familier. Il implémente en fait la largeur minimale via le jugement Javascript.
  
  La même méthode peut également être utilisée pour atteindre la largeur maximale pour IE :
  
  #container
  {
  min-width : 600px
  max-width : 1200px; ;
  width:expression(document.body.clientWidth
  1200? ”1200px“ : ”auto”;
  }
  
  4. Problèmes avec IE et largeur et hauteur
  IE ne reconnaît pas la définition de min-, mais en fait, il traite la largeur et la hauteur normales comme s'il y avait min. C'est un gros problème si vous utilisez uniquement la largeur et la hauteur, ces deux-là ne le feront pas. fonctionne dans les navigateurs normaux. La valeur ne changera pas. Si vous utilisez uniquement min-width et min-height, cela signifie que la largeur et la hauteur ne sont pas du tout définies sous IE
  
  Par exemple, si vous le souhaitez. pour définir une image d'arrière-plan, cette largeur est plus importante à résoudre. Cette question peut être comme ceci :
  
  .box
  {
  largeur :
  hauteur : 35px ; }
  
  html>body .box
  {
  largeur : auto ;
  hauteur : auto
  min-width : 80px
  min-height : 35px ; >}
  
  Tous les navigateurs peuvent être utilisés. Le premier paramètre de boîte, mais IE ne reconnaît pas le deuxième paramètre car le deuxième paramètre est plus spécial, il écrasera donc le premier paramètre >5. >
  
  La commande text-transform est très utile. Elle a 3 valeurs : text-transform : majuscule, text-transform : minuscules et text-transform : mettre le texte en majuscules, la deuxième lettre en majuscules. tous en minuscules, et la troisième lettre en majuscule. Ceci est très utile pour le texte en pinyin. Même s'il y a des erreurs de majuscule lors de la saisie, elles ne seront pas visibles sur la page Web. du texte de l'image disparaissant dans IE
  
  
  Parfois, vous rencontrez le problème de la disparition soudaine du texte ou de l'image d'arrière-plan, et il réapparaît après l'actualisation. Ceci est plus important lorsque vous êtes à proximité d'éléments flottants. (remarque : je ne l'ai jamais vu auparavant). À ce stade, vous pouvez définir : position : relative pour les éléments qui disparaissent, essayez de spécifier une largeur pour ces éléments
  <.>7. Texte invisible
  
  Peu importe la raison pour laquelle vous souhaitez qu'un texte Web ne soit pas affiché dans le navigateur, comme une impression ou un petit écran, vous pouvez utiliser display: none. C'est très simple, mais parfois c'est un peu inutile pour certaines personnes, et elles peuvent supprimer ce contrôle, puis utiliser : position: absolue left: -9000px .
  
  Cela précise en fait le texte à afficher en dehors de la page.
  8. Concevoir un CSS spécial pour les appareils portables
  
  
  C'est-à-dire que les utilisateurs disposant de petits écrans tels que les téléphones mobiles/PDA peuvent concevoir un CSS spécial pour afficher la page Web. plus confortable.Dazu können Sie das Browserfenster auf eine Breite von 150 Punkten einstellen, um den Effekt zu sehen. Die Syntax zum Angeben von Handheld-spezifischem CSS lautet:
  
  
  
  Sie können sich auch über die Handheld-spezifische Verfügbarkeit informieren.
  
  9. Schaltflächen mit 3D-Effekten
  
  Wenn Sie in der Vergangenheit Schaltflächen mit 3D-Effekten erstellen wollten, die sich beim Klicken änderten, mussten Sie ein Bild verwenden Jetzt erledigt das CSS den Zweck:
  
  a
  {
  display: block
  border-color: #aaa #000 #000 # aaa;
  width: 8em;
  background: #fc0; >left: 1px ;
  border-color: #000 #aaa #aaa #000;
  
  Was den Effekt betrifft, können Sie ihn auch selbst anpassen.
  
  
  10. Verwenden Sie den gleichen Navigationscode auf verschiedenen Seiten.
  
  
  Viele Webseiten verfügen über Navigationsmenüs. Beim Aufrufen einer bestimmten Seite lautet das entsprechende Element im Menü sollte grau werden und andere Seiten leuchten. Um diesen Effekt zu erzielen, müssen Sie im Allgemeinen ein Programm oder Design speziell für jede Seite schreiben. Jetzt können Sie diesen Effekt mit CSS erzielen.
  
  Verwenden Sie zunächst die CSS-Klassen in Ihrem Navigationscode:
  
  
  
  Home
  
  
  
  
  Über uns

  
  
  • Kontaktieren Sie uns
  
  
  Geben Sie dann eine ID für den Hauptteil jeder Seite an und Die obige Klasse hat den gleichen Namen. Wie zum Beispiel
  .
  • Dann entwerfen Sie das CSS wie folgt:
  #home .home, #about .about, #about .about
  {

  Befehle für die hervorgehobene Navigation finden Sie hier
  }
  Wenn hier die ID auf „Home“ gesetzt ist, wird .home wirksam, d. h. in der Navigationsleiste mit der auf „Home“ eingestellten Klasse werden Spezialeffekte angezeigt. Das Gleiche gilt auch für andere Seiten.