|
|||
|
|
Langage de Site
Le langage CSS
Principe du CSS
Le langage CSS (ou feuilles de style en cascade) est le format utilisé pour décrire la présentation de documents HTML.
Le CSS est donc un langage de présentation, permettant de créer un vrai design sur chaque page de votre site. Vous pourrez par exemple changer la taille, le positionnement, le style et la couleur de chaque élément de vos pages comme les titres, images, etc.
Tout en étant complémentaire au language HTML, le CSS devient donc très vite indispensable si l'on veut réussir un design clair et personnalisé de ses pages web.
Pour ceux qui veulent créer leur propre site web sur Internet sans passer par des éditeurs de sites web, il est donc indispensable de connaître les bases du langage CSS.
Par ailleurs, avant d'expliquer le fonctionnement du langage css, voici un lien important vous permettant de retrouver les différentes propriétés CSS que vous pourrez utiliser afin de personnaliser le design de votre site web: Liste des propriétés CSS.
Intégrer une page CSS dans un fichier HTML
Pour appliquer une feuille de style CSS sur une page HTML, vous devez créer une balise <link> dans l'entête de votre code HTML de la façon suivante :
1 2 3 4 5 6 |
<html> <head> <link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="http://www.monsite.com/design-site.css" /> </head> <body>...</body> </html> |
Cela équivaut à dire : "Je veux que tu appliques à mon code HTML le style CSS que j'ai réalisé dans la page design-site.css de mon site."
Structuration du CSS
Une page CSS est composée de 3 éléments :
- Les noms de balises : On pourra ainsi modifier l'apparence des éléments contenus dans le code HTML comme le titre, paragraphe...
On peut également intégrer un ensemble d'éléments dans des balises universelles. - Les propriétés : Ce sonts les effets que l'on veut appliquer aux balises. Par exemple, si l'on veut changer la disposition d'un paragraphe on appliquera la propriété "text-align".
- Les valeurs : Elles indiquent la manière dont doit se comporter une propriété. En reprenant l'exemple, si l'on veut un texte centré, on mettra la valeur "center".
Au final, notre code CSS doit ressembler à ceci :
1 2 3 4 |
p { text-align: center; } |
Le CSS et les attributs id/class
L'intérêt d'avoir les attributs "id" et "class" est que l'on peut les placer sur n'importe quel balise.
Que ce soit sur des titres ou des images, ils permettent de donner à ces éléments un design personnalisé. Les valeurs que l'on donne à ces attributs, c'est-à-dire que l'on peut choisir celles qu'on veut. Cependant, il est important de bien les nommer car ces valeurs vont aussi nous servir comme point de repère dans notre feuille CSS.
Par exemple, si dans notre code HTML, on a :
<h1 class="titre">
On doit retrouver dans notre code CSS :
1 2 3 4 |
.titre { font-size: 15px; } |
Si l'on avait voulut utiliser l'attribut "id", on aurait mis un dièse "#" à la place d'un point "." dans notre code CSS.
Cependant, l'id a le souci de n'être utilisable qu'une fois. C'est pourquoi l'on préfèrera utiliser l'attribut "class" qui peut s'utiliser dans tous les cas.
Le Langage CSS et les balises universelles
L'avantage avec les balises universelles est que, contrairement aux attributs id/class (qui ne peuvent se placer que sur des balises), on peut les placer là où on veut.
Ces deux balises s'utilisent de manières différentes :
- Les balises <div></div> : ce sont des balises de type "block" (comme les titres, paragraphes...), elles permettent notemment de déplacer les éléments et de les positionner là où on le souhaite.
Exemple : Code HTML : <div class="bloc1"><p>Voici un paragraphe à l'intérieur d'une balise "DIV".</p></div>
Code CSS : - Les balises <span></span> : ce sont des balises de type "inline", qui se situent à l'intérieur d'un texte (comme les balises <em><strong>...).
Exemple : Code HTML : <p>Ce paragraphe contient une <span class="balise1">balise "SPAN"</span>.</p>
Code CSS :
1 2 3 4 |
.bloc1 { font-size: 15px; } |
1 2 3 4 |
.balise1 { color: red; } |
Le CSS et les imbrications de balises
Faire des imbrications de balises s'avère très utiles pour personnaliser sa page web, et il n'y a aucune difficulté à l'appliquer.
Voici le premier exemple :
Code CSS :
1 2 3 4 |
.bloc1 p { color: blue; } |
Cela signifie : "Tous les paragraphes contenus dans les balises de type "class" et ayant le nom "bloc1" auront un texte de couleur bleue.
Autre exemple :
Code CSS :
1 2 3 4 |
p strong { font-size: 16px; } |
Cela signifie : "Toutes les balises "strong" de tous les paragraphes doivent avoir une taille de "16px".
Utiliser efficacement le langage CSS
- Il est très important de se repérer dans sa page CSS (plus qu'en HTML qui suit un plan linéaire), il faut donc penser à organiser votre feuille de style en fonction des éléments et des pages.
- Pensez à mettre des commentaires dans votre code afin de savoir quelle partie vous êtes en train de traiter, ou les éléments que vous voudrez modifier. Pour ce faire il vous suffit de mettre /* avant votre commentaire et d'ajouter */ à la fin de celui-ci.
- Utilisez un stlyle unique sur votre site pour les éléments importants. Les visiteurs pourront mieux se répérer et naviguer sur votre site.
- N'employez pas trop de couleurs différentes ou de couleurs "flash". Conservez votre texte principal en noir, c'est toujours plus agréable à lire. Gardez toujours à l'esprit que le fond (= contenu) reste toujours plus important que la forme (= le design).
Voir - S'inscrire
.gif)
CSS : Cursor- CSS : Empty-cells
- CSS : Border-spacing
- CSS : Border-collapse
- CSS : Table-layout
- Tous les résultats
- Liste des fonctions PHP
- La balise HTML - HTML
- La balise Body - HTML
- La balise Head - HTML
- Le langage XSL
- Tous les résultats
salut, je voudrais en savoir beaucoup plus sur la methode CSS pour créer une page HTML ,est ce que il y a un logiciel pour écrire le programme ?!! merci
Bonjour adnane,
Des cours suivis de tutoriels sur le css sont prévus. Concernant votre demande de logiciel, le mieux reste de faire un codage manuel en utilisant le Bloc-notes ou mieux encore Notepad++ que vous trouverez gratuitement en téléchargement.
Page : [1]
Les articles du site vous permettent de trouver de l'info gratuit, des news, actu, définition, image et vidéo internet. Ces articles traitent de nombreux domaines (thème actuel: Langage de Site) comme le web (google, yahoo, email, navigateur, etc.), le référencement de sites web (annuaire, moteur de recherche), le langage web (html, css, php..), mais aussi la santé, l'affiliation, l'argent (gagner, economiser), les sciences, les jeux vidéo et bien d'autres encore. Vous pouvez rechercher des articles à l'aide du moteur de recherche interne du site en rentrant des mots clés (exemple avec "Le langage CSS"). Par ailleurs, le Forum du site permet de trouver des solutions et réponses à toute question ou problème rencontré et l'Annuaire de Référencement permet de référencer votre site web, blog, annuaire ou forum pour des résultats efficaces et un meilleur positionnement. Pour toute demande particulière, utilisez la rubrique Contact du site.