Cours
- Algorithmes
- Économie
- Écriture multimédia
- Bases CSS
- Bases HTML
- Droit
- Faire un Autorun pour un CD
- Gestion de projet
- Marketing
- Communication :
- Flash :
- Photoshop :
CV Web
Mes réalisations
- Antartica’s cup
- Batofar
- Carte de voeux 2006
- Carte de voeux 2007
- Carte de voeux 2009
- Carte de voeux 2010
- Disque Paul Mac
- HotKeys Windows
- Logo SRC
- Manga
- Mode vestimentaire
- Monsieur Patate
- PC Watercoolé
- Site agavestudio.com
- Site web www.fcasset.fr
- Snowboard Salomon
- Whisky Charbay
Blog
Newsletter
Demande de devis
Les classes et id en CSS
Une classe CSS peut s’appliquer à autant de balises que l’on veut. En notation CSS, on la marque ’.nom_classe’. En HTML, pour déclarer une classe, il suffit de rajouter l’attribut class="nom_classe" à la balise concernée. Une balise peut contenir autant de classes que désiré, il suffit de séparer les classes par un espace.
Un id CSS ne peut s’appliquer qu’à une balise. En notation CSS, on le note ’#nom_id’. En HTML, pour déclarer un id, il faut rajouter l’attribut id="nom_id" sur la balise concernée. Une balise ne peut avoir qu’un id, contrairement aux classes.
Écrire du style
Il existe deux manières d’appeler votre code CSS dans une page web :
- Dans la page web
- Dans un fichier externe
Quelle que soit la méthode utilisée, le code CSS reste le même.
Dans une page web, pour écrire du CSS, il vous suffit d’écrire (de préférence dans le <head>) :
<style type="text/css">
votre style
</style>
Dans un fichier externe, il vous suffit d’écrire :
<link rel="stylesheet" type="text/css" href="url_du_style.css" />
Dans le fichier .css, vous mettrez votre code CSS en brut.
Le code CSS
La structure du code
Le code CSS est basé sur une syntaxe simple, qui se base base sur l’imbrication des balises. On déclare d’abord une propriété, puis ’ :’, les valeurs de la propriété, et enfin un ’ ;’ pour finir la propriété :
.ma_classe{
/* contenu CSS */
propriété:valeurs;
}
#mon_id{
/* contenu CSS */
propriété:valeurs;
}
Ou encore
div p.ma_classe{
/* contenu CSS */
propriété:valeurs;
}
div.ma_classe table tr td.ma_classe2{
/* contenu CSS */
propriété:valeurs;
}
Les propriétés
Voici les propriétés de base du CSS, pour chaque propriété, il existe plusieurs éléments qui sont facultatifs (mais il en faut au minimum un de déclaré !)
- Les unités de dimensions sont définies en pixels (px), pourcent (%), largeur de la police (em), points (pt). Les unités standards (mm, cm etc...) existent, mais sont déconseillées.
- Les unités de couleurs sont en RVB codé en hexadécimal (#ffffff) ou rvb (rvb(255, 255, 255)). Les couleurs sont (dans l’ordre) Rouge Vert Bleu (ou RGB : Red, Green, Blue)
background-color:#ffffff url(image_ar_plan) no-repeat left top;
Indique la couleur d’arrière plan (en hexadécimal), l’image d’arrière plan, la répétition de l’image, et la position de cette dernière.color:#ffffff;
Indique la couleur du texte en hexadécimalmargin:1%;
Force une marge externe de 1% sur tous les côtésmargin-left:1px;
Force une marge gauche externe de 1px (aussi dispo en top, right, bottom)padding:10px;
Force une marge interne de 10px sur tous les côtés (dispo aussi en côté par côté)border:1px solid #FF0000;
Indique une bordure rouge sur tous les côtés de 1px
Voici l’implémentation des marges dans le CSS :
line-height:14px;
Force la hauteur de la ligne à la taille indiquéefont-size:10px;
Indique que le texte aura une police de 10px de hautfont-weight:bold;
Passe le texte en gras (la valeur ’normal’ existe aussi)font-family:Arial, Verdana, sans-serif;
Indique la police utilisée pour le texte. Garder des polices standard pour que tout le monde puisse lire le texte correctement.height:500px;
>Fixe la hauteur d’un bloc (sur internet explorer, ceci correspond à la hauteur minimale et non pas à une hauteur fixe).
width:50%;
Fixe la largeur d’un bloc (sur internet explorer, ceci correspond à la largeur minimale et non pas à une largeur fixe).
Les polices standard
Il existe 11 polices disponibles sur le net, pour être sur que tous les utilisateurs puisse voir le texte correctement.
- Arial
- Courrier
- ’Courrier New’
- Cursive
- Helvetica
- Monospace
- Times
- ’Times New Roman’
- ’Trebuchet MS’
- serif
- sans-serif
Il est conseillé de sélectionner plusieurs polices par sécurité, au cas ou l’internaute n’a pas la police désirée sur son poste.
CSS sur la police
Text-transform:uppercase/lowercase
Met le texte en majuscules/minusculesText-decoration:none/underline/overline
Souligne, Surligne ou enlève le soulignementfont-family:Arial, times, sans-serif
Spécifie la police à utiliser dans l’ordre de déclarationfont-size:12px
Spécifie la taille de la policefont-weight:bold
Met du gras ou l’enlèvefont-style:italic/normal
Gère l’italique/normal
Il existe d’autres CSS pour les polices, mais ils sont déconseillés, donc je ne vous les met pas.