Les prochaines étapes sur la voie de devenir un maître jedi css

CSS est absolument l`une des technologies les plus importantes autour sur l`Internet aujourd`hui, et alors que la plupart des gens admettent connaître un peu HTML, nous sommes généralement aucune idée sur CSS.

Dernière fois Je vous ai présenté les étapes de débutant requises pour apprendre comment le style des sites Web avec CSS. Aujourd`hui, je voudrais continuer d`examiner quelques points de base, jetez un oeil à la puissance Firebug est, vous montrer comment faire des effets de survol CSS et vous orienter dans la bonne direction pour savoir où aller.5 étapes pour bébé à l`apprentissage CSS & Devenir un Sorcier CSS Kick-Ass5 étapes pour bébé à l`apprentissage CSS & Devenir un Sorcier CSS Kick-AssCSS est les pages Web de changement le plus important ont vu dans la dernière décennie, et il a ouvert la voie à la séparation du style et de contenu. Dans la façon moderne, XHTML définit la structure sémantique ...Lire la suite

Le modèle de boîte

L`un des concepts clés derrière CSS est le modèle de boîte qui entoure tous les éléments HTML de la page. La dernière fois que je vous ai présenté un utilitaire fantastique appelé Firebug et l`équivalent Chrome intégré. Si vous avez déjà installé et a eu la chance de jouer avec elle, vous devriez avoir remarqué que planant au-dessus de tout élément en vue de source HTML en bas à gauche met en évidence une boîte autour de l`élément sur la vue de la page en haut. Ce point culminant est le modèle de boîte.

Video: petit padawan deviendra maitre jedi

L`une des premières erreurs tout apprenant CSS va faire est de semer la confusion et l`utilisation MARGE et REMBOURRAGE de manière interchangeable. Consultez le diagramme suivant des écoles w3, et notez qu`ils sont des propriétés très différentes.

Il est également intéressant de noter que la propriété border prend l`espace réel et affecte donc le positionnement. MARGE détermine l`espace autour de la frontière d`un élément. REMBOURRAGE détermine l`espace à l`intérieur de la frontière. rembourrage seulement a des propriétés de fond appliquées.

Plus Firebug magique

Non seulement Firebug vous permet de visualiser la hiérarchie précise dans laquelle les propriétés ont été choisis parmi les sélecteurs contradictoires, il vous permet également à la fois modifier et désactiver règles CSS, en direct sur la page. Chaque règle CSS dans la partie droite aura une case à cocher à côté. Vous pouvez décocher cela simplement désactiver cette règle.

Plus utile cependant, est la possibilité de modifier ces règles. Double-cliquez pour ajuster les valeurs ou le nom propriété, ou vous pouvez même ajouter de nouvelles règles en double-cliquant sur l`espace vide. Il est un outil incroyablement puissant pour déboguer de petits changements à la CSS sans avoir à enregistrer et d`actualiser chaque fois, mais garder à l`esprit les changements ne sont pas enregistrés - ajuster pour seulement quelques à un moment avant de les transférer au principal fichier CSS.

Une autre caractéristique utile de ces outils de développement montre le fichier CSS exacte et le numéro de ligne les règles proviennent. Je trouve cela particulièrement utile pour les sites WordPress quand les plugins souvent importer leur propre feuille de style, ou quand un thème est composé de plus d`une feuille de style.

: hover Rollover Effets

L`une des premières choses que tout le monde veut faire avec leur site est d`ajouter les renversements flashy. Dans le passé, les renversements d`effets (éléments ou des liens qui changent lorsque vous passez la souris sur eux) ont été obtenus en utilisant javascript de base. Avec CSS, vous pouvez appliquer :flotter effets à tout élément, pas juste des liens - mais étant donné que les utilisateurs attendent quelque chose à cliquable quand il change sous leur souris, il est préférable si vous utilisez uniquement dans l`interface du site pour des liens ou lorsque javascript est également impliqué d`invoquer une sorte d`action.

Pour appliquer des effets de vol stationnaire à quelque chose, utilisez le même sélecteur comme l`élément principal, mais il suffit d`ajouter :flotter à la fin de celui-ci.

a {color:} black- a: hover {color:} rouge-

Vol stationnaire fait partie d`une gamme de pseudo-sélecteurs à votre disposition dans CSS. Bien que la version CSS 3 a introduit beaucoup d`autres, vous pouvez lire les plus largement pris en charge à des écoles w3.

Video: Conte de magie la guerre des étoiles ambiance Marina animation 2014

Certains de mes favoris sont:

:première lettre

Il est utilisé pour créer des effets « de dropcap » sur juste la première lettre d`un paragraphe.

:premier enfant

Cette cible seule la première occurrence de quelque chose, utile si vous créez | (bars) entre les liens en utilisant uniquement CSS, mais il faut éviter de dupliquer une au début ou à la fin de la liste des liens.

Qu`est-ce que la propriété? Cheat Sheets & Editeurs prédictifs

Bien sûr, vous ne pouvez pas vous attendre à connaître toutes les propriétés que vous pouvez jouer avec CSS - c`est la raison pour laquelle je garde quelques feuilles de triche sur mon mur quand je dessine un blanc. Le meilleur que je l`ai trouvé sont de pxleyes.com.

Video: ..parodie counter strike

Une autre façon utile d`assurer que vous utilisez les noms de propriété correcte est d`utiliser un éditeur de CSS ou éditeur de texte qui reconnaît le code CSS et prédit le nom de la propriété que vous tapez. Mon outil de choix personnel est Edit CSS (40 $) sur le Mac - s`il vous plaît laissez-nous savoir dans les commentaires si vous utilisez des alternatives gratuites que vous préconisez.

Lectures complémentaires

Cela a seulement été une très brève introduction à CSS, mais je l`espère vous a donné une bonne mise à la terre. Vous pouvez également aller voir mon article CSS3 Cool Tricks aussi, et voici quelques-uns de mes favoris personnels pour le développement des compétences CSS:5 Effets CSS3 cool que vous allez voir plus de5 Effets CSS3 cool que vous allez voir plus deCSS3 (combinée avec la puissance de HTML5) est rapidement pris en charge par tous les principaux navigateurs (lire - tout sauf Internet Explorer), donc je pensais que ce serait le bon moment pour voir des ...Lire la suite

• Tizag ont un tutoriel longtemps que vous donne une bonne compréhension de toutes les propriétés de base, et prend une pratique très approche de l`apprentissage. Ils ont été autour depuis longtemps et il est le site que j`ai d`abord appris MySQL et PHP aussi. ressource fantastique.
• CSS-Tricks est faite par un individu très talentueux et le site lui-même est un témoignage de la puissance fantastique de CSS. Certains des tutoriels sont assez haut niveau, mais il est un grand site de motivation pour moi.
• W3-écoles peut être votre référence ultime pour les propriétés CSS, où vous allez chercher quelque chose plutôt que d`apprendre dans un style tutoriel.
• Smashing Magazine est un autre site d`inspiration pour moi, et ils publient régulièrement des tutoriels en profondeur non seulement CSS, mais toute la longueur et la largeur du processus de conception.

CSS est étonnamment amusant par rapport à HTML ou d`autres programmes, donc j`espère que vous trouverez une étincelle en vous - le web pourrait certainement utiliser quelques bons designers. Commentaires, suggestions et plus de liens bienvenus, ou poser des questions CSS spécifiques dans le support technique section du site.