Les bases du codage.
- Dim 29 Juil 2012 - 16:24 Inscrit le : 08/05/2012
Age : 28
Messages : 307
Age : 28
Messages : 307
Morwen
Les bases du codage.
Qu'est-ce qu'une feuille de style ?
css.mammouthland.net a écrit:Le design d'un site évolue toujours au fil du temps. Le problème, lorsqu'on n'utilise pas de feuilles de style, c'est qu'il faut reprendre toutes les pages html une à une pour modifier une police de caractère ou une couleur de fond...
Avec les "Cascading Style Sheets" (CSS), ce lourd handicap est résolu.
C'est dans la feuille de style CSS que l'on va déclarer toute la mise en forme des pages : le positionnement des éléments, l'image de fond, les polices de caractère, les couleurs, etc.
Celle-ci sera liée à chaque page html. Ainsi, lorsqu'on en modifiera un élément, cela se répercutera immédiatement sur toutes les pages html. Puissant, pratique, bref : indispensable.
Où puis-je trouver la feuille de style de mon forum ?
- Panneau d'administration.
- Affichage.
- Couleurs.
- Feuilles de style CSS.
- Affichage.
- Couleurs.
- Feuilles de style CSS.
A quoi sert le CSS sur un forum ?
C'est le même principe que pour le site (voir explication précédente). On choisit l'un des deux sélecteurs CSS, à qui l'on définit des attributs avec une mise en page particulière. On utilisera ensuite le nom de ce sélecteur, défini au préalable, à chaque fois que cela nous sera nécessaire. Voici deux exemples afin que vous compreniez mieux.
Premier sélecteur. L'id. Probablement le moins utilisé des deux, il est approprié lorsque vous ne voulez appliquer les attributs qu'une seule fois.
Exemple : un titre de concours. Vous le voulez en rouge et en gros (30 pixels), centré. Voici ce que vous devrez copier coller sur la feuille de style de votre forum.
Et voilà ce que vous mettrez sur l'en-tête de votre concours.
Second sélecteur. La class. Très très utile. Même principe que l'id, mais il est idéal pour de multiples utilisations.
Exemple : vous définissez la mise en page du titre de vos règlements, de la description de vos catégories... Il faut que tout soit uniforme. Vous voulez ce titre vert, en gros (30 pixels), en Georgia, souligné de pointillés jaunes. Et cela, partout ! Voilà ce que vous allez mettre dans votre feuille de style.
Et voilà ce que vous mettre sur l'en-tête de vos règlements.
J'espère que vous avez compris son importance capitale. Vous changez de design et le violet n'est plus de mise ? Il suffit d'aller dans votre feuille de style, de regarder là où vous avez noté le style de vos catégories et de remplacer les couleurs violettes par celles de votre choix, et hop, votre forum est transformé !
Premier sélecteur. L'id. Probablement le moins utilisé des deux, il est approprié lorsque vous ne voulez appliquer les attributs qu'une seule fois.
Exemple : un titre de concours. Vous le voulez en rouge et en gros (30 pixels), centré. Voici ce que vous devrez copier coller sur la feuille de style de votre forum.
- Code:
#tit_concours {
color: red;
font-size: 30px;
text-align: center;
}
Et voilà ce que vous mettrez sur l'en-tête de votre concours.
- Code:
<div id="tit_concours">Votre titre de concours</div>
- Un petit complément de l'ID du site Netalya:
- Lorsqu'on désire utiliser les feuilles de style avec du Javascript on utilise les ID (appelés les identifiants).
Les ID fonctionnent exactement comme les classes.
La syntaxe est :
#nom_de_ID { propriété de style: valeur }
Et pour l'appeler :....
Notons qu'on ne pourra effectuer qu'un seul appel à #nom_de_ID par page.
Second sélecteur. La class. Très très utile. Même principe que l'id, mais il est idéal pour de multiples utilisations.
Exemple : vous définissez la mise en page du titre de vos règlements, de la description de vos catégories... Il faut que tout soit uniforme. Vous voulez ce titre vert, en gros (30 pixels), en Georgia, souligné de pointillés jaunes. Et cela, partout ! Voilà ce que vous allez mettre dans votre feuille de style.
- Code:
.mes_regles {
color: green;
font-size: 30px;
font-family: Georgia;
border: dashed 2px yellow;
}
Et voilà ce que vous mettre sur l'en-tête de vos règlements.
- Code:
<div class="mes_regles">Règlement de...</div>
J'espère que vous avez compris son importance capitale. Vous changez de design et le violet n'est plus de mise ? Il suffit d'aller dans votre feuille de style, de regarder là où vous avez noté le style de vos catégories et de remplacer les couleurs violettes par celles de votre choix, et hop, votre forum est transformé !
Comment personnaliser l'apparence de mes liens ?
Puisque l'apparence des liens est capitale pour un forum esthétique, voici deux codes qui vous soulageront. Ils sont à copier/coller tous les deux dans votre feuille de style pour supprimer le soulignement de vos liens, survolés ou non.
Pour la petite explication : le premier a, ce sont les liens en général. Le second, a:hover, c'est le lien survolé. Si vous voulez les personnaliser, cherchez des attributs CSS qui vous intéressent et rajoutez-les, comme dans cet exemple.
Ici, il sera souligné par des petits points jaunes. Je vous conseille de regarder le mémo CSS du site du Zéro, dont le lien se trouve en bas de la FAQ.
- Code:
a {text-decoration: none !important;}
a:hover {text-decoration: none !important;}
Pour la petite explication : le premier a, ce sont les liens en général. Le second, a:hover, c'est le lien survolé. Si vous voulez les personnaliser, cherchez des attributs CSS qui vous intéressent et rajoutez-les, comme dans cet exemple.
- Code:
a:hover {
text-decoration: none !important;
border: dotted 1px yellow;}
Ici, il sera souligné par des petits points jaunes. Je vous conseille de regarder le mémo CSS du site du Zéro, dont le lien se trouve en bas de la FAQ.
Personnaliser le survol d'un texte.
Ça ressemble énormément aux liens dont on a parlé ci-dessus. La manipulation au niveau du CSS est quasiment la même. Un exemple avec une class.
Là notre texte est en petites majuscules souligné de noir. Et avec ceci :
Vous ne changez pas votre html, bien sûr. Et voilà, quand vous passerez votre souris, votre bordure deviendra rose !
- Code:
.txt_survol{
border: solid 2px black;
font-variant: small caps;
}
<span class="txt_survol">Mon titre</span>
Là notre texte est en petites majuscules souligné de noir. Et avec ceci :
- Code:
.txt_survol:hover {
border: solid 2px pink;
font-variant: small caps;
}
Vous ne changez pas votre html, bien sûr. Et voilà, quand vous passerez votre souris, votre bordure deviendra rose !
Un peu de BBcode... Rappelons les bases.
Voici un recensement des balises de ForumActif, très bien fait. J'ai moi-même découvert certaines balises que je ne connaissais pas !
=> http://forum.forumactif.com/t171298-les-balises-bbcodes-de-forumactif <=
=> http://forum.forumactif.com/t171298-les-balises-bbcodes-de-forumactif <=
Ressources de codage.
Le mémo du site du Zéro dont j'ai parlé précédemment.
Un site pour apprendre le langage HTML.
Un site pour apprendre le langage HTML.
N'hésitez pas à poser vos questions, que ce soit en codage ou en BBcode !
Merci