CSS Web Design pour les Nuls Cheat Sheet - mannequins

Par Richard Mansfield

Les feuilles de style en cascade (CSS) fonctionnent avec le HTML pour simplifier la conception des pages Web. Si vous comprenez comment utiliser les règles CSS, vous pouvez spécifier un style qui peut être appliqué à chaque page (ou à chaque élément particulier) de votre site Web. Une liste de conseils et astuces peut aider tous les concepteurs de sites Web à créer des sites à la fois attrayants et agréables à visiter.

Comment les feuilles de style en cascade améliorent HTML

CSS (Cascading Style Sheets) était une technologie recommandée par le World Wide Web Consortium (W3C) en 1996. Un moyen facile de comprendre le but de CSS est de le voir comme un ajout au HTML qui permet de simplifier et d'améliorer la conception de pages Web. En fait, certains effets CSS ne sont pas possibles via HTML seul.

Un autre avantage de CSS est qu'il vous permet de spécifier un style une fois, mais le navigateur peut appliquer ce style plusieurs fois dans un document. Par exemple, si vous souhaitez que certaines des images affichées sur votre site Web comportent un cadre bleu fin, vous pouvez définir ce cadre comme style dans votre feuille de style CSS. Ensuite, au lieu d'avoir à répéter une définition HTML du cadre fin et bleu - chaque fois que vous voulez ce cadre particulier - vous pouvez simplement insérer le style CSS en tant qu'attribut pour chaque élément graphique que vous voulez encadrer.

Autrement dit, vous utilisez CSS pour définir des règles générales sur le comportement des éléments de vos pages Web et leur apparence, leur emplacement, leur taille, leur opacité, etc. Ensuite, vous pouvez simplement vous référer au nom de la règle lorsque vous voulez l'appliquer dans votre page HTML.

Voici une règle CSS qui définit quelques qualités que vous décidez d'appliquer à vos plus gros titres, H1:

H1 {font-size: 16pt couleur: blue;}

Avec cette règle CSS en vigueur, tout Le code HTML contenant un élément H1 est automatiquement rendu en 16 points et coloré en bleu:



ce titre est bleu et 16 pt.

Les règles CSS peuvent être définies séparément. fichier css ou incorporé dans le fichier HTML. Voici la règle du style de titre CSS incorporée dans l'en-tête d'un fichier HTML:

h1 {font-size: 16pt couleur: bleu;}


ce titre est bleu et 16 pt.

Notez l'élément. Vous pouvez définir vos styles CSS dans cet élément. (Vous pouvez également avoir plusieurs éléments sur une page si vous le souhaitez.)

8 Trucs et astuces CSS

Même en utilisant des feuilles de style en cascade (CSS), la création d'un site Web fonctionnel (mais toujours attrayant) Planification. Voici quelques conseils qui feront ressortir votre site Web.

Permet aux utilisateurs de contrôler la taille de la police

Essayez d'éviter de spécifier la taille de la police du corps.Ne faites pas ceci, par exemple:

body {font-size: 24px;}

Les gens ont défini les options de leur navigateur à une taille de texte qui est lisible pour eux. Vous ne savez pas s'ils ont une résolution de pixel de 1680 × 1050 ou 800 × 600 pixels. Cela fait une différence. L'utilisateur devrait être celui qui décide de la taille de son texte, pas vous.

Assurez-vous que vos frontières apparaissent

Voici une tête de programmation CSS commune:

p {border: 12px;}

En dépit de cette règle, aucune bordure n'apparaît autour des paragraphes. Vous penseriez logiquement qu'en spécifiant une taille de bordure, vous verriez une bordure. Pas si. Sauf si vous spécifiez également un style de bordure , vous n'obtenez pas de bordure. Le style par défaut est none, alors changez-le pour inclure un style:

p {border: solide 12px;}

Attention aux couleurs

Et si vous spécifiez une couleur de texte, mais ne parvient pas à spécifier une couleur de fond? Cela semble inoffensif, mais cela peut être un problème. Certains utilisateurs utilisent des feuilles de style personnelles, y compris leurs couleurs préférées. Que se passe-t-il si un utilisateur spécifie une couleur marron pour son arrière-plan et une couleur blanche pour son texte? Dites que vous spécifiez marron pour votre texte:

BODY {color: brown;}

L'utilisateur ne verra pas votre texte du tout parce que la couleur d'arrière-plan et la couleur de premier plan (texte) sont identiques. La solution? Toujours spécifier un arrière-plan si vous souhaitez colorier le texte. Ensuite, vous avez le contrôle sur la façon dont le texte ressemble à ce fond:

BODY {color: brown; background-color: yellow;}

Timing floutant et autres effets

Combinez des timers, des scripts et des filtres pour créer de nombreux effets visuels dynamiques. Essayez cet effet cool dans Internet Explorer:

Imaginez que cet effet bouge, comme si l'ombre se développait lentement.

dim counter fonction startTimer () timerhandle = setInterval ("sizeit", 130) fonction de fonction end stopTimer () clearTimeout (timerhandle) fonction de fonction fin sizeit () compteur = compteur + 1 si compteur> 49 puis compteur = 1 n = "flou (add = 1, direction = 125, force =" & compteur & ")" diviseur. style. filter = n fonction de fin div {position: absolute; filtre: flou (ajouter = 1, direction = 15, force = 90 ";}

Effet de flou avec le temps

Essayez de faire varier la vitesse du filtre en ajustant la valeur 130 dans cette ligne: > timerhandle = setInterval ("sizeit",

130 ) Trouver une liste à part

Une source d'excellentes idées, échantillons et articles - soumise par certains des web designers les plus talentueux - est A List Apart, qui a un forum dédié au CSS

Utiliser vos propres puces dans les listes

CSS permet de créer des puces personnalisées dans un programme graphique puis de les affecter aux éléments de la liste.

Ajoutez des puces personnalisées à vos listes de façon simple CSS

ul {

list-style-image: url ("mybullet.jpg") ; font: 32px;} first

second
third
Spécification des emplacements graphiques

Si vous stockez un fichier graphique dans le même dossier que votre fichier.htm ou.html, le code HTML doit seulement le nom du fichier graphique, comme est:

list-style-image: url ("mybullet.jpg ")

Cependant, si le fichier se trouve dans un autre emplacement, vous devez fournir le chemin d'accès à cet emplacement et effectuer des ponctuations bizarres - ajouter un ///, pour une raison ou une autre. le répertoire racine du lecteur c::

list-style-image: url (

"fichier: /// C: mause. jpg" ) Voici un fichier situé dans le sous-répertoire photos du lecteur f::

list-style-image: url ("fichier: /// F: Photosmause.jpg")

Voici la ponctuation supplémentaire bizarre (///) que vous devez ajouter pour un fichier local emplacement réseau:

list-style-image: url ("fichier: /// HpservrPHOTOSmause.jpg")

Si vous conservez vos fichiers graphiques sur un site Internet, indiquez l'adresse URL.

Enfin, si votre fichier graphique est stocké sur la navette spatiale, utilisez cette ponctuation:

"file: /// \ / ^^^ outerspaceservrPHOTOSmause. jpg "

La même ponctuation et les mêmes conventions sont utilisées lors de la spécification de l'attribut src = pour charger un graphique dans un élément HTML

Vous risquez de ne pas voir vos graphiques lorsque vous déplacez vos pages Web Si cela se produit, vérifiez les chemins d'accès aux fichiers afin de vous assurer que les fichiers graphiques se trouvent à l'endroit indiqué par votre code.La tactique la plus simple consiste à conserver tous les fichiers de dépendance (tels que les fichiers graphiques) dans votre ordinateur. le même répertoire que vos fichiers.htm et.csss De cette façon, vous pouvez utiliser des chemins

relatifs , ce qui signifie que vous ne spécifiez aucun chemin dans votre code, juste le nom de fichier. Recherchez vos graphiques dans le même chemin que le fichier HTML Combinaison de classes

Vous pouvez vous épargner du temps et des problèmes en définissant des classes qui sont combinées plus tard, comme les adjectifs se combinent avec les noms. de vos paragraphes encadrés en vert, certains en bleu, et d'autres en rose. Si vous avez une classe séparée pour chaque type de paragraphe,

ou , vous pouvez être intelligent et créer une classe de style de bordure générale, et trois classes supplémentaires pour la coloration. Voici comment cela fonctionne. D'abord, vous créez quatre styles, puis vous combinez les noms de classe dans les éléments HTML lorsque vous utilisez l'attribut class = . encadré {

bordure: solide 3px rouge; rembourrage: 6px;}. rose {background-color: rose;}. bleu {background-color: blue;}. green {background-color: green;} class = "vert encadré" >> Vous pouvez vous épargner du temps et des ennuis en définissant des classes qui sont combinées plus tard, comme les adjectifs se combinent avec les noms.
class = "blue encadré" >> Vous pouvez vous épargner du temps et des ennuis en définissant des classes qui sont combinées plus tard, comme les adjectifs se combinent avec les noms. class = "rose encadré" >> Vous pouvez vous épargner du temps et des ennuis en définissant des classes qui sont combinées plus tard, comme les adjectifs se combinent avec les noms.
Les parties d'une règle CSS La figure suivante montre les parties d'une règle CSS
. Cette règle dit: "Afficher en rouge le texte de tout paragraphe

dans le document avec un attribut de nom de classe. "

Vous pouvez composer n'importe quel nom pour le nom de classe (l'auteur du code précédent a choisi alert ), mais le nom de la règle CSS doit correspondre au nom utilisé plus tard dans l'attribut HTML.

Les tableaux suivants affichent les propriétés et valeurs CSS communes.