Conseils d'utilisation CSS peu connus-tutoriel CSS-php.cn

Conseils d'utilisation CSS peu connus

巴扎黑

Libérer： 2017-08-09 15:50:34

original

1197 Les gens l'ont consulté

1. À propos de la façon d'écrire l'arrière-plan

DIV.comment{arrière-plan :# f0f0f0 url(adresse url) répéter-x gauche haut }

1) Vous pouvez voir que la première définition de l'arrière-plan est une valeur de couleur, ce qui signifie que la couleur prendra effet lorsque l'image d'arrière-plan sera désactivée.

2) Les guillemets entre parenthèses d'url ne sont pas nécessaires, on ne peut pas écrire les guillemets

2 Les quatre côtés ont des couleurs différentes, mais l'épaisseur et le style sont. pareil, tu peux écrire comme ceci :

DIV.special

{border:1px solid ; border-color:color1 color2 color3 color4}Le quatre couleurs sont en haut, à droite, en bas et à gauche à la fois

Afin d'être compatible avec tous les navigateurs, tous les appareils peuvent afficher l'effet de translucidité

.tranparent

{

progid:DXImageTransform.Microsoft.Alpha(opacity=50)

; -moz-opacity:

0,5

; -khtml-opacity:

0,5

; opacité :

50 %

; position:

absolue

;/*Note Doit être absolue*/ :100px

;

}

4. _height, Le rôle de _widthUtilisez _height pour résoudre le problème de la fermeture du float div. Vous pouvez supprimer l'attribut _height pour obtenir l'effet.

#wrap

{ bordure

6px

#ccc solide

débordement

auto

; _hauteur:1%;} .column_left { float :gauche; largeur :20 % remplissage :

10px

;}

.column_right{ float:droit; largeur :75% ; remplissage :10px ; bordure gauche:6px #eee solide;}

<h1>Flotteur à gaucheh1>

div>

<h1>Flotteur à droiteh1>

div>

div >

5. 使用min-height min-width解决div，或者span的固定高度问题

有时候我们需要设定某个元素固定高度，但是在firefox或者opera下面只设置高度，在内容不够多的时候，达不到预想的效果，这时候我们可以使用hauteur min

6. 使用!important改变样式的优先级

所谓的样式优先级是指，浏览器在应用样式时总是根据就近原则来应用样式，假定我们在一个页面中有三处都有对某个元素的定义，一处是在外部的css文件中，一处是在文件的head标签中定义内联css，另一处是在如果我们需要打破这种规则我们就可以使用!important指令

a.test {couleur :rouge!important}

这样即使在A元素内定义了color也不会应用，而是应用上面的定义

7. 使用media指令引入两种css：打印版本的css和屏幕显示的css

8. > symbole (actuellement non pris en charge par IE)

Nous pouvons utiliser DIV A pour définir les styles de toutes les balises A à l'intérieur du div, y compris celles situées sous le div in span ; si nous voulons uniquement définir la balise A du nœud enfant à un niveau en dessous du DIV, nous pouvons utiliser le symbole ">", par exemple :

DIV>A{color:red}

Maintenant, seule la couleur de l'étiquette A qui est le nœud enfant direct de DIV est rouge

9. :first-child :last-child Dans les navigateurs non-IE, vous pouvez utiliser ces deux indicateurs pour obtenir le premier élément ou le dernier élément de l'élément parent

20070412 21 :05 Ajouté
10. : Les pseudo-classes telles que le survol peuvent être utilisées comme ceci

<h1>Acheter des widgetsh1>

16. Afin d'éviter la confusion entre les différents navigateurs. sur différentes balises Différentes interprétations du remplissage et de la marge peuvent être définies devant la feuille de style

*{ marge:0px;remplissage: 0px;}

Ajouté à 20070422 12:00
17. Désactivez l'état de la méthode de saisie afin que l'utilisateur ne puisse saisir que des caractères dans État anglais, similaire à la saisie d'un mot de passe

entrée {mode ime : désactivé ; }

20070423 09:08
18. space:nowrap; overflow: caché; width: 17em !important ; width: 18em;
Remarque : l'espace blanc ne prend pas en charge td, th, etc.
2) Utilisez .fixTable{ table-layout: fixed; overflow:hidden } et ajoutez la balise nobr pour la masquer
La balise nobr n'est pas standard.
20070426 0848
19. Changez la taille de l'image d'une année sur l'autre
img.style.zoom = 0.5;

.menu{

}{}

.menu ul{

}{affichage :aucun}

.menu:survol{

}{}

.menu : survolez ul{

}{affichage :bloquer}

<ul>

titre du menu

<ul>

<li>premierli>

<li>dernièreli>

> li >

ul>
De cette façon, nous pouvons créer un menu contrôlé uniquement par CSS, et le test passe sous ie6, ie7, firefox1.5, opera9.0

11 On peut utiliser page-break-after, page-break-avant. pour contrôler la pagination lors de l'impression

20070413 12:13

12 * La fonction de html{} doit être compatible avec les versions d'IE inférieures à 6.0. nœuds html, d'autres navigateurs considèrent la balise html comme le nœud racine du document, et ie6 La version suivante d'IE pense qu'il y a un nœud racine au-dessus de la balise html --- grâce à calmzeal pour l'explication

13. La classe css peut avoir plusieurs valeurs, on sépare simplement plusieurs valeurs par des espaces

14 Pour l'abréviation de couleur, on peut abréger #ff0033 en #f03.

15. Utilisez text-indent pour afficher l'image et masquer le texte (cette pratique est censée aider au référencement)

h1 { arrière-plan : url(widget-image.gif) no-repeat; hauteur : image hauteur text-indent : -2000px }

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!