Huit conseils pour partager du CSS

CSS a de nombreuses fonctions. Ici, l'éditeur partagera avec vous huit astuces en CSS.

1. Compatible avec tous les navigateurs pour afficher les effets translucides

<div class="transparent"></div>
.transparent {
    filter: progid:DXImageTrans
for
m.Microsoft.Alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: .5;
    
width
: 200px;
    
height
: 200px;
    
margin
: 0 auto;
    
background
: url("../img/pic.jpg");
}

2 Le rôle de _height, _width

Utiliser _height pour résoudre le float. Si le div n'est pas fermé, vous pouvez supprimer l'attribut _height pour obtenir l'effet.

<div id="wrap">
    <div class="column_
left
">
        <h1>Float left</h1>
    </div>
    <div class="column_
right
">
        <h1>Float right</h1>
    </div>
</div>
#wrap {
    b
ord
er: 6px solid #ccc;
    
overflow
: auto;
    _height: 1%;
}
.column_left {
    width: 20%;
    
padding
: 10px;
    float: left;
}
.column_right {
    float: right;
    width: 75%;
    padding: 10px;
    border-left: 6px solid #ccc;
}

3. Utilisez min-height min-width pour résoudre le problème de hauteur fixe de div ou span

Parfois, nous devons définir une hauteur fixe d'un élément, mais dans Firefox ou opera Seule la hauteur est définie ci-dessous. Lorsqu'il n'y a pas assez de contenu, l'effet attendu ne peut pas être obtenu pour le moment, nous pouvons utiliser min-height

4. Utilisez la directive media pour introduire deux types de CSS. : la version imprimée de css et l'écran affiche css

<link type="text/css" rel="stylesheet" href="url" media="screen" charset="utf-8">
<link type="text/css" rel="stylesheet" href="url" media="print" charset="utf-8">

5. Utilisez .fixTable{ table-layout: fixed; overflow:hidden; } et ajoutez la balise nobr pour masquer

6. Vous pouvez utiliser les contrôles page-break-after, page-break-before pendant l'impression

7 La fonction de *html{} doit être compatible avec les versions d'IE inférieures à 6.0. nœuds, d'autres navigateurs considèrent les balises html comme des documents. Le nœud racine, mais les versions d'IE inférieures à IE6 pensent qu'il y a un nœud racine

au-dessus de la balise HTML. 8. Utilisez text-indent pour afficher les images et masquer le texte.

h1 {    background: url(../img/pic.jpg) no-repeat;    width: 200px;    height: 200px;    text-indent: -2000px}

[Connexe recommandé]

1 Recommandation spéciale : Téléchargez la version V0.1 de "php Programmer Toolbox"

2. Tutoriel vidéo CSS en ligne gratuit

3. php.cn Dugu Jiujian (2) - Tutoriel vidéo CSS

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!