20 conseils sur l'utilisation de CSS_CSS/HTML

1. CSS字体属性简写规则

一般用CSS设定字体属性是这样做的：

font-weight: bold;
font-style: italic;
font-varient: small-caps;
font-size: 1em;
line-height: 1.5em;
font-family: verdana,sans-serif

但也可以把它们全部写到一行上去：

font: bold italic small-caps 1em/1.5em verdana,sans-serif

真不错！只有一点要提醒的：这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且，如果你没有设定font-weight, font-style, 以及 font-varient ，他们会使用缺省值，这点要记上。

2. 同时使用两个类

一般只能给一个元素设定一个类（Class），但这并不意味着不能用两个。事实上，你可以这样：

...

同时给P元素两个类，中间用空格格开，这样所有text和side两个类的属性都会加到P元素上来。如果它们两个类中的属性有冲突的话，后设置的起作用，即在CSS文件中放在后面的类的属性起作用。

3. CSS border的缺省值

通常可以设定边界的颜色，宽度和风格，如：

border: 3px solid #000

这位把边界显示成3像素宽，黑色，实线。但实际上这里只需要指定风格即可。

如果只指定了风格，其他属性就会使用缺省值。一般地，Border的宽度缺省是medium，一般等于3到4个像素；缺省的颜色是其中文字的颜色。如果这个值正好合适的话，就不用设那么多了。

4. CSS用于文档打印

许多网站上都有一个针对打印的版本，但实际上这并不需要，因为可以用CSS来设定打印风格。

也就是说，可以为页面指定两个CSS文件，一个用于屏幕显示，一个用于打印：

第1行就是显示，第2行是打印，注意其中的media属性。

但应该在打印CSS中写什么东西呢？你可以按设计普通CSS的方法来设定它。设计的同时就可以把这个CSS设成显示CSS来检查它的效果。也许你会使用 display: none 这个命令来关掉一些装饰图片，再关掉一些导航按钮。要想了解更多，可以看“打印差异”这一篇。

5. 图片替换技巧

一般都建议用标准的HTML来显示文字，而不要使用图片，这样不但快，也更具可读性。但如果你想用一些特殊字体时，就只能用图片了。

比如你想整个卖东西的图标，你就用了这个图片：

这当然可以，但对搜索引擎来说，和正常文字相比，它们对alt里面的替换文字几乎没有兴趣这是因为许多设计者在这里放许多关键词来骗搜索引擎。所以方法应该是这样的：

Buy widgets

但这样就没有特殊字体了。要想达到同样效果，可以这样设计CSS：

h1
{
background: url(widget-image.gif) no-repeat;
height: image height
text-indent: -2000px
}

注意把image height换成真的图片的高度。这里，图片会当作背景显示出来，而真正的文字由于设定了-2000像素这个缩进，它们会出现在屏幕左边2000点的地方，就看不见了。但这对于关闭图片的人来说，可能全部看不到了，这点要注意。

6. CSS box模型的另一种调整技巧

这个Box模型的调整主要是针对IE6之前的IE浏览器的，它们把边界宽度和空白都算在元素宽度上。比如：

#box
{
width: 100px;
border: 5px;
padding: 20px
}

这样调用它：

...

这时盒子的全宽应该是150点，这在除IE6之前的IE浏览器之外的所有浏览器上都是正确的。但在IE5这样的浏览器上，它的全宽仍是100点。可以用以前人发明的Box调整方法来处理这种差异。

但用CSS也可以达到同样的目的，让它们显示效果一致。

#box
{
width: 150px
}

#box div
{
border: 5px;
padding: 20px
}

这样调用：

...

这样，不管什么浏览器，宽度都是150点了。

7. 块元素居中对齐

如果想做个固定宽度的网页并且想让网页水平居中的话，通常是这样：

#content
{
width: 700px;
margin: 0 auto
}

你会使用

来围上所有元素。这很简单，但不够好，IE6之前版本会显示不出这种效果。改CSS如下：

body
{
text-align: center
}

#content
{
text-align: left;
width: 700px;
margin: 0 auto
}

这会把网页内容都居中，所以在Content中又加入了
text-align: left 。

8. 用CSS来处理垂直对齐

垂直对齐用表格可以很方便地实现，设定表格单元 vertical-align: middle 就可以了。但对CSS来说这没用。如果你想设定一个导航条是2em高，而想让导航文字垂直居中的话，设定这个属性是没用的。

CSS方法是什么呢？对了，把这些文字的行高设为 2em：line-height: 2em ，这就可以了。

9. CSS在容器内定位

CSS的一个好处是可以把一个元素任意定位，在一个容器内也可以。比如对这个容器：

#container
{
position: relative
}

这样容器内所有的元素都会相对定位，可以这样用：

...

Si vous souhaitez localiser 30 points à partir de la gauche et 5 points à partir du haut, que pouvez-vous faire BR>
#navigation
{
position : absolue ;
gauche : 30px ;
haut : 5px
>

Bien sûr, vous pouvez aussi faire ceci :

marge : 5px 0 0 30px

Notez que l'ordre des 4 nombres est : haut, droite, bas, gauche. Bien sûr, il est parfois préférable de privilégier le positionnement plutôt que les marges.

10. Couleur de fond directement en bas de l'écran

Le contrôle dans le sens vertical dépasse les capacités du CSS. Si vous souhaitez que la barre de navigation aille directement en bas de page comme la barre de contenu, utiliser un tableau est très pratique, mais si vous n'utilisez que du CSS comme ceci :

#navigation
{
fond : bleu ;
largeur : 150px
>

Une barre de navigation plus courte n'ira pas directement vers le bas, elle se terminera lorsque le contenu se terminera à mi-chemin. Ce qu'il faut faire?

Malheureusement, la seule façon de tricher est d'ajouter une image d'arrière-plan à la colonne la plus courte, avec la même largeur que la largeur de la colonne, et de lui donner la même couleur que la couleur d'arrière-plan définie.

corps
{
arrière-plan : url(blue-image.gif) 0 0 répétition-y
>

Vous ne pouvez pas les utiliser comme unité pour le moment, car l'astuce sera alors révélée une fois que le lecteur aura modifié la taille de la police, et vous ne pourrez utiliser que px.

11. Comparaison entre les éléments Block et inline
Tous les éléments HTML sont soit en bloc, soit en ligne. Les caractéristiques de l'élément block sont :
Commencez toujours par 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 100 % de son conteneur, sauf si une largeur est définie

,

,

,

,

et
• Au contraire, les caractéristiques de l'élément inline sont :
  et d'autres éléments 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 la largeur de son texte ou de son image et ne peut pas être modifiée.
  , , , , , et

  Utilisez la commande code class="inline">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 les éléments de bloc sur une ligne avec les autres éléments

  Contrôler la largeur des éléments en ligne (particulièrement utile pour les barres de navigation

  ) ;

  Contrôlez la hauteur des éléments 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.

  12. 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 qu'avant IE 6, la compréhension de la boîte était différente des autres. Sa largeur devait inclure la largeur des bords et l'espace blanc. Pour rendre IE5 cohérent avec les autres navigateurs, vous pouvez utiliser CSS :

  rembourrage : 2em ;
  bordure : 1em vert uni ;
  largeur : 20em ;
  largeur/**/:/**/ 14em;
  

  La première largeur est reconnue par tous les navigateurs, mais IE5 utilise 20 pour soustraire un espace blanc, tandis que d'autres navigateurs utiliseront la largeur de 14 car il s'agit de la ligne 2 et couvrira la ligne 1.

  13. Largeur minimale de la page

  min-width est une commande CSS très pratique. Elle permet de spécifier que la largeur minimale d'un élément ne peut pas être inférieure à une certaine largeur, afin de garantir que la mise en page soit toujours correcte. Mais IE ne le reconnaît pas et traite en fait la largeur comme la largeur minimale. Pour que cette commande fonctionne sur IE, vous pouvez placer un

  sous la balise , puis spécifier une classe pour le div :
  

  
  

  
  

  Ensuite, le CSS est conçu comme ceci :
  

  #conteneur
  {
  largeur minimale : 600 px ;
  width:expression(document.body.clientWidth < 600? "600px": "auto" );
  >
  

  La première largeur minimale est normale ; mais la largeur de la deuxième ligne utilise Javascript, qui n'est reconnu que par IE, ce qui rendra également votre document HTML moins formel. 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 :
  

  #conteneur
  {
  largeur minimale : 600 px ;
  largeur maximale : 1 200 px ;
  width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? ”1200px“ : ”auto");
  >
  

  14. 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 valeurs ne changeront pas dans un navigateur normal. Si vous utilisez uniquement min-width et min-height, la largeur et la hauteur ne sont pas du tout définies. sous IE.

  Par exemple, si vous souhaitez définir une image de fond, cette largeur est plus importante. Pour résoudre ce problème, vous pouvez faire ceci :
  

  .boîte
  {
  largeur : 80px ;
  hauteur : 35px ;
  >

  html>body.box
  {
  largeur : auto ;
  hauteur : auto ;
  largeur minimale : 80 px ;
  hauteur min : 35 px ;
  >
  

  Tous les navigateurs peuvent utiliser le premier paramètre de case, mais IE ne reconnaît pas le deuxième paragraphe de paramètre car il utilise une commande de sous-sélecteur. Le deuxième paramètre est plus spécifique, il remplacera donc le premier paramètre.

  5. Commande de transformation de police

  La commande text-transform est utile, elle a 3 valeurs : text-transform : majuscule, text-transform : minuscule et text-transform : majuscule. Le premier changera le texte en majuscules, le second en minuscules et le troisième pour mettre la première lettre en majuscule. Ceci est très utile pour le texte pinyin. Même s'il y a des erreurs de majuscules lors de la saisie, elles ne seront pas visibles sur la page Web.

  16. Le problème de la disparition du texte dans les images dans IE

  Parfois, vous rencontrez le problème de la disparition et de la réapparition soudaine de texte ou d'images d'arrière-plan après l'actualisation. Cela est plus susceptible de se produire lorsque vous êtes à proximité d'éléments flottants (Remarque : je ne l'ai jamais vu). A ce stade, vous pouvez définir : position: relative pour les éléments qui disparaissent. Si cela ne fonctionne pas, pensez à spécifier une largeur pour ces éléments.

  17. Texte invisible

  Peu importe la raison pour laquelle vous souhaitez que le texte d'une page Web ne soit pas affiché dans le navigateur, par exemple pour 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 spécifie en fait le texte à afficher en dehors de la page.

  18. Concevoir du CSS spécialisé pour les appareils portables

  C'est-à-dire que les utilisateurs disposant de petits écrans tels que les téléphones mobiles/PDA peuvent spécialement concevoir un CSS pour rendre l'affichage de la page Web plus confortable. Pour ce faire, vous pouvez ajuster la fenêtre du navigateur à 150 points de large pour voir l'effet. La syntaxe pour spécifier le CSS spécifique à l'ordinateur de poche est :

  La disponibilité exclusive des appareils portables peut également être lue.

  19. Bouton effet 3D

  Dans le passé, si vous vouliez créer un bouton avec un effet 3D qui changerait lorsque vous cliquez dessus, vous deviez utiliser le remplacement d'image. Désormais, CSS suffit :
  .

  un
  {
  affichage : bloquer ;
  bordure : 1px solide ;
  couleur de la bordure : #aaa #000 #000 #aaa;
  largeur : 8em ;
  arrière-plan : #fc0;
  >

  a:survol
  {
  position : relative ;
  haut : 1px ;
  gauche : 1px ;
  couleur de la bordure : #000 #aaa #aaa #000;
  >
  

  Quant à l'effet, vous pouvez également l'ajuster vous-même.

  20. Utilisez le même code de navigation sur différentes pages

  De nombreuses pages Web ont des menus de navigation. Lorsque vous entrez dans une certaine page, l'élément correspondant dans le menu doit devenir gris, tandis que les autres pages doivent s'allumer. Généralement, pour obtenir cet effet, vous devez écrire un programme ou un design spécifiquement pour chaque page. Vous pouvez désormais obtenir cet effet avec CSS.

  Tout d'abord, utilisez les classes CSS dans votre code de navigation :
  

  
  
  • Accueil
  
  
  • À propos de nous
  
  
  • Contactez-nous
  
  

  
  

  Spécifiez ensuite un identifiant pour le corps de chaque page, qui porte le même nom que la classe ci-dessus. Tels que .

  Concevez ensuite le CSS comme suit :
  

  #home .home, #about .about, #about .about
  {
  les commandes pour la navigation en surbrillance vont ici
  >
  

  Ici, lorsque l'identifiant est défini sur home, .home prendra effet, c'est-à-dire que la ligne de la barre de navigation avec la classe définie sur home affichera des effets spéciaux. Il en va de même pour les autres pages.
  

  Déclaration：

  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
  Article précédent：Comment et quand utiliser sIFR_CSS/HTMLArticle suivant：Comment et quand utiliser sIFR_CSS/HTML

  Articles Liés

  Voir plus

  • Résumé de six méthodes d'implémentation de l'événement JSDOMReady
  • Exemples d'implémentation CSS de diverses dispositions de colonnes sur la page
  • Effets de diaporama réactifs plein écran CSS3 purs
  • Style de bouton 3D coloré et cool CSS3 pur
  • Superbes effets d'animation de menu hexagonal CSS3

Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！

À propos de nousClause de non-responsabilitéSitemap

© php.cn All rights reserved