CSS rend les mises en page frontal mieux conseils pratiques

Source : Internet
Auteur : utilisateur
Les compétences pour des mises en page frontal CSS peuvent être décrite aussi nombreux. Ici sera un novice à la mise en forme CSS page frontal des conseils résume, peut-être plus pratique valeur de référence pour vous :
1, balises UL dans Mozilla par défaut, il y a une valeur de remplissage, et dans IE que marge a une valeur.
2, le même sélecteur de classe peut être répété dans un document, mais le sélecteur d’ID ne peut apparaître qu’une seule fois, une étiquette en utilisant la classe et l’ID de la définition de CSS, si la définition est reproduite, la définition du sélecteur d’ID est valide car la valeur ID est supérieure à la classe.

3, un rajustement de compatibilité façon stupide (IE et Mozilla) :
Les débutants peuvent rencontrer une situation où les propriétés de la même étiquette sont définies pour affichage dans IE est normal et dans Mozilla doit être défini sur B pour afficher correctement, ou deux à l’envers.
Solution de contournement temporaire :

Sélecteur de {nom de la propriété : B ! important ; nom de la propriété : A}

4. s’il y a un besoin pour un espacement entre un ensemble de balises imbrication, laissez-le à la propriété margin de l’étiquette à l’intérieur, plutôt que de définir l’étiquette qui est situé à remplissage extérieur
5. l’icône devant l’étiquette Li est recommandé d’utiliser Background-image au lieu de list-style-image.
6. IE ne peut pas dire la différence entre la relation d’héritage et de la relation parent-enfant, qui sont tous des relations d’héritage.
7. lorsque vous donnez votre fou de l’étiquette et un sélecteur, n’oubliez pas d’annoter le sélecteur CSS.

Lorsque vous modifiez votre CSS plus tard, vous saurez pourquoi vous le faites.
8, si vous donnez une étiquette définie un ton sombre de l’image d’arrière-plan et ton vif de l’effet de texte.

Il est recommandé de donner votre étiquette en ce moment et puis définir une couleur d’arrière-plan de ton sombre.
9, définir les quatre États de la liaison de prêter attention à l’ordre :

Link Visited Hover Active

10, le contenu n’est pas lié à l’image s’il vous plaît utiliser a fond
Un par un, la couleur de la définition peut être abrégée #8899ff = #89F
12, tableau d’une certaine façon que d’autres performances d’étiquettes est beaucoup mieux. S’il vous plaît utilisez-le lorsque l’alignement de la colonne est requise.
13, la langue n’a pas cette propriété

Devrait être écrit comme ceci :

<script type=”text/JavaScript”>

14. le titre est le titre et le texte du titre est le texte du titre.

Parfois, le titre n’a pas nécessairement besoin d’afficher du texte, alors le : contenu titre < h1 > est remplacé par le contenu de la
15, la table parfaite de la ligne du cadre Tan Shansu (dans IE5, IE6, IE7 et FF1.0.4 ci-dessus peuvent passer le test)

table{border-collapse:collapse;}td{border:#000 solid 1px;}

16, valeur négative marge peut jouer le rôle d’un positionnement relatif lorsque l’étiquette utilise le positionnement absolu

Lorsque la page est centrée, la couche qui utilise le positionnement absolu n’est pas adaptée pour l’utilisation de la propriété de gauche : XXpx. C’est un bon moyen de mettre cette couche à côté de l’étiquette que vous souhaitez positionner relatif à et ensuite utiliser la valeur négative de marge.
17, absolue de positionnement lors de l’utilisation de la valeur de la marge positionnement peut être comparée à leur propre position, qui est différente de la partie supérieure, gauche et autres propriétés que le positionnement de rebord de fenêtre. L’avantage de positionnement absolu, c’est qu’il permet d’autres éléments à ignorer son existence.

18, si le texte est trop long, alors la partie trop longue dans un affichage de points de suspension : IE5, FF invalide, mais peut être caché, IE6 efficace

≪ P STYLE = « width : 120px ; height : 50px ; border : 1px solid bleu débordement : caché ; text-overflow : ellipsis » >< NOBR Le. < / NOBR > est, par exemple, une ligne de texte, très longue, une ligne dans la table ne s’affiche pas

19, dans IE peut être due à commentaires causés par la répétition de texte problèmes peuvent être changés pour :

<!–[if !IE]>Put your commentary in here…<![endif]–>

20. comment appeler des polices externes avec CSS
Grammaire :

@font-face{font-family:name;src:url(url);sRules}

Prendre la valeur :
Nom : Nom de police. La valeur de toute propriété font-family possible
URL (URL) : Spécifiez un fichier de polices OpenType avec adresse URL absolue ou relative
SRules : Définition de feuille de Style
21. Comment puis-je faire le texte dans une zone de texte dans un centre de forme verticale ?
Si le groupe à hauteur de ligne et hauteur n’est pas efficace dans FF, la méthode consiste à définir la partie supérieure et inférieure blanchissant peut obtenir l’effet de la pensée.
22, définissez une étiquette de prêter attention à ce petit problème :
Lorsque nous définissons un {color : red ;} , Il représente le style de A et de quatre États, si vous souhaitez définir une souris sur l’état à ce stade, juste définir une : vol stationnaire et les trois autres États sont les styles définis dans A.
Lorsque vous définissez un seul a : link, veillez à ne pas oublier de définir les trois autres États !
23. pas tous styles doivent être abrégés :
Lorsque la feuille de style est défini en face de la p {padding : 1px 2px 3px 4px}, un style est ajouté au projet ultérieur 5px, sous 6px de blanchiment de blanchiment. Nous n’avons à écrire p.style1{padding:5px 6px 3px 4px}. Peut être écrite comme une p.style1 {padding-top : 5px ; padding-droit : 6px ;}, vous pouvez vous sentir qu’il n’est pas aussi bon qu’il l’habitude d’être, mais vous ne pensez pas que votre écrit à plusieurs reprises définit le style, En outre, vous ne pouvez pas avoir trouver l’original sous le blanchiment et gauche valeur de blanchiment, c’est combien ! Si le style précédent P change plus tard, le style de la p.style1 que vous définissez changera également.
24, la plus grande et le site Web, les plus de styles CSS, avant de commencer à faire, s’il vous plaît faire un bon travail de préparation et de planification, y compris de nommage des règles. La page division de bloc, classification de style interne et ainsi de suite.
25, quelques-uns des styles CSS couramment :
1) Alignez les deux extrémités du texte chinois :

text-align:justify;text-justify:inter-ideograph;

2) troncature de largeur fixe de caractère chinois :

overflow:hidden;text-overflow:ellipsis;white-space:nowrap;

(Toutefois, vous ne pouvez gérer la troncature du texte sur une seule ligne et ne peut pas gérer plusieurs lignes.) ) (IE5 ci-dessus) FF ne peut pas, il est seulement caché.
3) caractère chinois de largeur fixe (mot) ligne de pliage :

table-layout:fixed; word-break:break-all;

FF (IE5 ci-dessus) ne peut pas.
4) < titre acronyme = « Entrez le texte que vous souhaitez inviter » style = « CURSOR : HELP ; » Le texte de _ _ est utilisé avec la souris sur le texte avant de voir l’effet. Cet effet peut être vu dans de nombreux sites à l’étranger et il y a peu et peu dans le pays.
5) l’image est réglée sur translucide :

.halfalpha { background-color:#000000;filter:Alpha(Opacity=50)}

Dans IE6 et IE5 essai passé, FF n’a pas réussi, c’est parce que ce style est IE choses privées ;
6) flash Transparent :

Sélectionnez le fichier SWF, ouvrez la fenêtre de Code originale et entrez < param name = « wmode » value = « Transparent » au-dessus de la _ _ _ _ le code pour IE.
Une semblable wmode paramètre = « Transparent » a été ajouté à l’étiquette de page pour FIREFOX
7) en faisant Web pages utilisent souvent de mettre la souris sur l’image apparaîtra pour égayer l’effet de l’image, vous pouvez remplacer l’image par la technique, vous pouvez également utiliser le filtre suivant :

.pictures img {filter: alpha(opacity=45); }.pictures a:hover img {filter: alpha(opacity=90); }

Nous contacter

Le contenu de cette page provient d'Internet et ne reflète pas l'opinion d'Alibaba Cloud ; les produits et services mentionnés sur cette page n'ont aucune relation avec Alibaba Cloud. Si le contenu de la page vous semble problématique, veuillez nous écrire un courriel, nous traiterons le problème dans les 5 jours suivant la réception de votre message.

Si vous constatez des cas de plagiat de la part de la communauté, veuillez envoyer un courriel à : info-contact@alibabacloud.com et fournir des preuves pertinentes. Un membre de notre équipe vous contactera dans les 5 jours ouvrables.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.