20 astuces CSS utiles pour les débutants

Auparavant, nous comptions beaucoup sur les développeurs et les programmeurs pour aider à mettre à jour le site Web, même s'il s'agissait d'un site mineur. Grâce au CSS et à sa flexibilité, les styles peuvent être extraits indépendamment des codes. Maintenant, avec quelques notions de base de CSS, même un novice peut facilement changer le style d’un site Web..

Que vous souhaitiez utiliser CSS pour créer votre propre site Web ou simplement modifier légèrement l'apparence de votre blog, il est toujours bon de commencer par les principes fondamentaux pour acquérir une base plus solide. Jetons un coup d'oeil à certains Astuces CSS nous avons pensé pourrait être utile pour débutants. Liste complète après le saut.

1. Utilisation reset.css

   En ce qui concerne le rendu des styles CSS, les navigateurs tels que Firefox et Internet Explorer utilisent différents modes de traitement.. reset.css réinitialise tous les styles fondamentaux, donc vous commencez avec de nouvelles feuilles de style vierges.

   Voici quelques-uns couramment utilisés reset.css cadres - Yahoo Reset CSS, Réinitialisation du CSS d'Eric Meyer, Tripoli

2. Utiliser le raccourci CSS

   Le raccourci CSS vous permet d'écrire vos codes CSS de manière plus rapide et surtout, il rend le code plus clair et plus facile à comprendre..

   Au lieu de créer CSS comme ça

   .header background-color: #fff; image de fond: url (image.gif); répétition de fond: non répétée; position de fond: en haut à gauche; 

   Il peut être raccourci dans les domaines suivants:

   .header background: #fff url (image.gif) non répétée en haut à gauche

   Plus - Introduction à la sténographie CSS, Propriétés de sténographie CSS utiles

3. Compréhension Classe et ID

   Ces deux sélecteurs confondent souvent les débutants. En CSS, classe est représenté par un point "." tandis que identifiant est un hash '# ". En un mot identifiant est utilisé sur un style unique qui ne se répète pas, classe de l'autre côté, peut être réutilisé.

   Plus - Classe vs ID | Quand utiliser Class, ID | Application de classe et d'ID ensemble

4. Le pouvoir de

5. La liste de liens a.k.a est très utile quand ils sont utilisés correctement avec
   ou
   , particulièrement pour styler un menu de navigation.

   • Oublier , essayer

     L’un des plus grands avantages du CSS est l’utilisation de

     pour obtenir une flexibilité totale en termes de style.

     sont différents

     , où le contenu est "verrouillé" dans un

     la cellule de. C'est sûr de dire le plus les dispositions sont réalisables avec l'utilisation de et un style approprié, et peut-être excepté le contenu tabulaire massif. Plus - Les tables sont mortes, Tableaux Vs. CSS, CSS vs tables Outils de débogage CSS Il est toujours bon d'avoir un aperçu instantané de la mise en page tout en peaufinant le CSS, cela facilite la compréhension et le débogage des styles CSS. Voici quelques outils de débogage CSS gratuits que vous pouvez installer sur votre navigateur: Développeur Web FireFox, Inspecteur DOM, Internet Explorer Developer Toolbar et Firebug. Évitez les sélecteurs superflus Parfois, votre déclaration CSS peut être plus simple, ce qui signifie que si vous codez les éléments suivants: ul li … ol li … table tr td … Ils peuvent être raccourcis à juste li … td … Explication: n'existera qu'au sein de ou et et sera seulement à l'intérieur donc il n'y a vraiment pas besoin de les réinsérer. Connaissance !important Tout style marqué avec !important sera pris en compte indépendamment s'il y a une règle d'écrasement dessous. .page background-color: blue! important; couleur de fond: rouge; Dans l'exemple ci-dessus, couleur de fond: bleu sera adapté parce qu'il est marqué avec !important, même quand il y a un couleur de fond: rouge; dessous. !important est utilisé dans les cas où vous souhaitez forcer un style sans que quelque chose ne soit écrasé, mais il risque de ne pas fonctionner dans Internet Explorer. Remplacer le texte par l'image C’est une pratique courante pour remplacer Titre d'un titre basé sur le texte à une image. Voici comment vous le faites. h1 text-indent: -9999px; fond: url ("title.jpg") no-repeat; largeur: 100px; hauteur: 50px; Explication: retrait du texte: -9999px; jette le titre de votre texte hors de l'écran, remplacé par une image déclarée par Contexte: … avec un fixe largeur et la taille. Comprendre le positionnement CSS L'article suivant vous explique clairement comment utiliser le positionnement CSS. - position: … Plus - Apprendre le positionnement CSS en dix étapes CSS @importation contre Il existe 2 façons d’appeler un fichier CSS externe - en utilisant respectivement @importation et . Si vous ne savez pas quelle méthode utiliser, voici quelques articles pour vous aider à décider. Plus - Différence entre @import et link Conception de formulaires en CSS Les formulaires Web peuvent être facilement conçus et personnalisés avec CSS. Ces articles suivants vous montrent comment: Plus - Forme sans table, Jardin de forme, Styliser encore plus de contrôles de forme Être inspiré Si vous êtes à la recherche d'une source d'inspiration pour un site Web CSS bien conçu ou cherchez simplement une bonne interface utilisateur, voici quelques sites de démonstration CSS que nous recommandons: CSS Remix CSS beauté CSS Elite CSS Mania Fuite de CSS Maintenir les codes CSS propres Si vos codes CSS sont en désordre, vous allez finir par coder dans la confusion et avoir du mal à arbitrer le code précédent. Pour commencer, vous pouvez créer une indentation appropriée, les commenter correctement. Plus - 12 principes pour garder votre code propre, Formater les codes CSS en ligne Typographie Mesure: px contre em Avoir du mal à choisir quand utiliser l'unité de mesure px ou em? Les articles suivants pourraient vous aider à mieux comprendre les unités de typographie.. Tableau de compatibilité des navigateurs CSS Nous savons tous que chaque navigateur utilise différents modes de rendu des styles CSS. Il est bon d'avoir une référence, un graphique ou une liste qui montre toute la compatibilité CSS pour chaque navigateur.. Tableau de support CSS: #1, # 2, # 3, # 4. Concevoir des multicolonnes en CSS Vous ne parvenez pas à aligner correctement les colonnes de gauche, du milieu et de droite? Voici quelques articles qui pourraient aider: À la recherche du Saint Graal Faux Colonnes Principales raisons pour lesquelles vos colonnes CSS sont gâchées Litte Boxes (exemples) Les configurations multi-colonnes sortent de la boîte Colonnes Absolues Obtenez gratuitement des éditeurs CSS Les éditeurs dédiés sont toujours mieux qu'un bloc-notes. Voici quelques conseils que nous recommandons: Plus - CSS simple, Bloc-notes ++, Un éditeur de styles CSS Comprendre les types de média Il existe peu de types de médias lorsque vous déclarez CSS avec . l’impression, la projection et l’écran sont peu utilisés. Les comprendre et les utiliser de manière appropriée permet une meilleure accessibilité de l'utilisateur. L'article suivant explique comment traiter les types de média CSS. Plus - CSS et types de média, Types de média W3, Types de médias CSS, Types de média CSS2 20 applications iPhone utiles pour les développeurs et les concepteurs 20 outils SVG utiles pour de meilleurs graphiques 20 polices ultra légères et élégantes pour les concepteurs Web Article suivant 20 Compléments utiles à la barre latérale de Firefox Article précédent 20 applications utiles pour tirer le meilleur parti d'Instagram