Conception de sites Web Css pour les nuls

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 considérer comme un ajout à HTML qui permet de simplifier et d'améliorer la conception de page Web. En fait, certains effets CSS ne sont pas possibles via HTML seul.

Sommaire

Un autre avantage de CSS est qu'il vous permet de spécifier un style une fois, mais le navigateur ne peut appliquer ce style à plusieurs reprises dans un document. Par exemple, si vous voulez un peu des images affichées dans votre site web pour avoir une mince, cadre bleu autour d'eux, vous pouvez définir ce cadre comme un style dans votre CSS. Alors, au lieu d'avoir à répéter une définition HTML du cadre mince et bleu - chaque fois que vous voulez que cadre particulier - vous pouvez simplement insérer le style CSS comme un attribut pour chaque élément graphique que vous souhaitez encadrée.

Autrement dit, vous utilisez CSS pour définir des règles générales sur la façon dont les éléments de vos pages Web se comportent et comment ils regardent - où ils se trouvent, leur taille, leur opacité, et ainsi de suite. Ensuite, vous pouvez simplement consulter le nom de la règle chaque fois que vous souhaitez appliquer au sein de votre page HTML.

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

Avec cette règle CSS en effet, tout code HTML contenant un élément H1 est automatiquement rendu dans le type de 16 points et de couleur bleue:

ce titre est bleu et 16 pt.

Règles CSS peuvent être définis dans un fichier .css séparé ou intégrés dans le fichier HTML. Voici la règle de style CSS global intégré dans l'en-tête d'un fichier HTML:

ce titre est bleu et 16 pt.

Notez le élément. Vous pouvez définir vos styles CSS à l'intérieur de cet élément. (Vous pouvez également avoir plusieurs éléments sur une page si vous le désirez).

8 Grands Conseils et astuces CSS

Même lorsque l'aide de feuilles de style en cascade (CSS), la construction d'un site web fonctionnel (mais toujours attractif) nécessite une exécution soignée et de planification. Voici quelques conseils qui feront de votre site Web se démarquer.

Permettent aux utilisateurs de contrôler la taille de police

Essayez d'éviter de spécifier le corps taille de police. Ne pas le faire, par exemple:

body {font-size: 24px;}

Les gens ont de définir les options de leur navigateur pour une taille de texte qui est lisible pour eux. Vous ne savez pas si ils ont une résolution de 1680x1050 pixels ou 800x600 pixels. Cela fait une différence. L'utilisateur doit être le seul à décider de la taille qu'ils veulent leur texte, pas vous.

Assurez-vous que vos frontières apparaissent

Voici une programmation CSS tête-scratcher commune:

p {border: 12px;}



En dépit de cette règle que vous avez écrit, pas de frontière montre autour des paragraphes. Vous souhaitez penser que logiquement en spécifiant une taille de bordure, vous verriez une frontière. Pas du tout. Sauf si vous spécifiez également une frontière style, vous ne recevez pas une frontière. Le style par défaut est aucun, donc changer d'inclure un style:

p {border: 12px solide;}

Méfiez-vous des couleurs affrontement

Que faire si vous spécifiez une couleur de texte, mais ne parvenez pas à spécifier une couleur d'arrière-plan? Sons inoffensif, mais il peut être un problème. Certains utilisateurs utilisent des feuilles de style personnelles, y compris leurs couleurs préférées. Qu'advient-il si un utilisateur spécifie brun pour leurs origines et blanc pour leur texte? Dites que vous spécifiez brune pour votre texte:

Body {color: brun-}

L'utilisateur ne verra pas votre texte du tout parce que leur couleur de fond et votre avant-plan (texte) de couleur sont identiques. La solution? Toujours spécifier un fond si vous allez à la couleur du texte. Ensuite, vous avez le contrôle sur la façon dont le texte semble dans ce contexte:

Body {color: background-color Brown-: jaune}

Timing de flou et d'autres effets

Combiner des minuteries, des scripts et des filtres pour créer beaucoup d'effets visuels dynamiques. Essayez cet effet frais dans Internet Explorer:

Imaginez cet effet en mouvement, comme si l'ombre ont été de plus en plus lentement.
Imaginez cet effet en mouvement, comme si l'ombre ont été de plus en plus lentement.

Ceci est un effet de flou au fil du temps.

Essayez varier la vitesse de rotation du filtre par réglage de la valeur 130 dans cette ligne:

 timerhandle = setInterval ("sizeit",130)

Trouver A List Apart

Une source d'excellentes idées, des échantillons et des articles - présenté par certains des concepteurs de sites Web les plus talentueux autour de - est A List Apart, qui dispose d'un forum consacré à CSS.

En utilisant vos propres balles dans les listes

Avec CSS, la conception de puces personnalisées dans un programme graphique et puis leur attribuant à la liste des pièces est facile. Le code suivant produit le résultat montré dans la figure qui suit immédiatement.

Ajouter balles conçus sur mesure à vos listes le chemin de CSS facile.
Ajouter balles conçus sur mesure à vos listes le chemin de CSS facile.
  • premier
  • deuxième
  • troisième

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 besoin que le nom du fichier graphique, comme ceci:

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

Cependant, si le fichier est dans un autre emplacement, vous devez fournir le chemin à cet endroit, et faire un peu bizarre ponctuer ainsi - l'ajout d'un ///, pour une raison quelconque. L'exemple suivant trouve ce fichier dans le répertoire racine de l'unité C::

list-style-image: url ("file: /// C: mause.jpg")

Voici un fichier situé dans le sous-répertoire Photos de la f: Drive:

list-style-image: url ("file: /// F: Photos mause.jpg")

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

list-style-image: url ("file: /// Hp SERVR Photos mause.jpg")

Si vous gardez vos fichiers graphiques sur un site Internet, fournir l'adresse URL.

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

"file: /// / ^^^ outerspace SERVR Photos mause.jpg"

La même ponctuation et conventions sont utilisées lorsque vous spécifiez le src = attribuer à charger une image dans une page HTML élément.

Vous pourriez ne pas voir certains de vos graphiques lorsque vous déplacez vos pages web à partir de votre ordinateur local vers un serveur à les poster sur Internet. Si cela se produit, les chemins de fichiers de vérifier que les fichiers graphiques sont situés là où votre code dit qu'ils sont. La tactique simple consiste à conserver tous les fichiers de dépendance (tels que les fichiers graphiques) dans le même répertoire que votre fichiers .htm et css. De cette façon, vous pouvez utiliser relatif chemins, ce qui signifie que vous ne spécifiez pas de chemin d'accès du tout dans votre code, juste le nom du fichier. Le navigateur comprend il devrait ressembler pour vos graphiques dans le même chemin qu'il a trouvé le fichier HTML.

Combinant des classes

Vous pouvez vous épargner un certain temps et la difficulté en définissant des classes qui sont ensuite associées, comme des adjectifs se combinent avec des noms. Dites que vous voulez un peu de vos paragraphes dans un cadre vert, certains en bleu, et d'autres en rose. Vous pouvez créer une catégorie distincte pour chaque type de paragraphe, ou vous pourriez être intelligent et de créer une classe générale de style de bordure, et trois classes supplémentaires pour la coloration. Voici comment cela fonctionne. Tout d'abord, vous créez quatre styles, et ensuite vous combinez les noms de classe dans les éléments HTML lorsque vous utilisez le class = attribut:

class = "encadré vert"> Vous pouvez vous épargner un certain temps et la difficulté en définissant des classes qui sont ensuite associées, comme des adjectifs se combinent avec des noms.

class = "encadrée blue"> Vous pouvez vous épargner un certain temps et la difficulté en définissant des classes qui sont ensuite associées, comme des adjectifs se combinent avec des noms.

class = "encadré rose"> Vous pouvez vous épargner un certain temps et la difficulté en définissant des classes qui sont ensuite associées, comme des adjectifs se combinent avec des noms.

Les parties d'une règle CSS

La figure suivante montre les parties d'un CSS règle. Cette règle dit, "Affichage en rouge le texte de toute l'alinéa

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

image0.jpg

Vous pouvez faire jusqu'à un nom pour le nom de classe (l'auteur du code précédent choisi alerte), Mais le nom de la règle CSS doit correspondre au nom utilisé plus tard dans l'attribut HTML.

Les tableaux suivants présentent des propriétés et valeurs de CSS communes.

Unités de mesure
pxpixels
emM-largeur
ptpoint
danspouces
mmmillimètre
cmcentimètre
ordinateur personnelpicas
exhauteur x
Les propriétés de police
police
famille de polices
taille de police
le style de police
variante police
poids police
Les propriétés de texte
l'espacement des lettres
word-spacing
hauteur de la ligne
vertical-align
text-align
text-decoration
text-indent
text-transform
Les propriétés de bordure
border-top-color
border-right; couleur
border-left; couleur
-fond-couleur de la bordure
-top-style de bordure
border-right; le style
border-left; le style
-bottom-style de bordure
Les propriétés de positionnement
position
haut
bas
droit
afficher
clair
z-index