Coin Pub
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Le deal à ne pas rater :
TCL C74 Series 55C743 – TV 55” 4K QLED 144 Hz Google TV (Via ODR ...
499 €
Voir le deal

Les bases du codage. Empty Les bases du codage.

- Dim 29 Juil 2012 - 16:24
Féminin Inscrit le : 08/05/2012
Age : 27
Messages : 307
Morwen
Membre

Morwen
Les bases du codage.



Arrow 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.

Arrow Où puis-je trouver la feuille de style de mon forum ?


- Panneau d'administration.
- Affichage.
- Couleurs.
- Feuilles de style CSS.


Arrow 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.

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:

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é !


Arrow 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.

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.


Arrow 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.

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 !


Arrow 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 <=


Arrow 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.


N'hésitez pas à poser vos questions, que ce soit en codage ou en BBcode !

Tutoriel réalisé par Morwen et complété par le staff


Les bases du codage. Empty Re: Les bases du codage.

- Mer 12 Nov 2014 - 18:39
Invité
Invité
Anonymous
Merci Wink
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum