Le RPG Star Wars par forum // Qualité RP, intrigues & évolution... Immergez-vous !
 
AccueilTableau de bordFAQRechercherS'enregistrerMembresGroupesConnexion

Partagez | 
 

 HTML et CSS

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Raimee Baryon
~ Padawan ~
~ Padawan ~
Raimee Baryon


Nombre de messages : 90
Âge du perso : 20 ans
Race : Humain
Binôme : Sevel'he Ean (chevalier Jedi)

Feuille de personnage
Activité actuelle:
HP:
HTML et CSS Left_b1167/67HTML et CSS Empty_10  (67/67)
PF:
HTML et CSS Left_bar_bleue82/82HTML et CSS Empty_bar_bleue  (82/82)

HTML et CSS _
MessageSujet: HTML et CSS   HTML et CSS Icon_minitimeSam 27 Avr 2019 - 1:58


Salut à tous !

J'ai remarqué que certains d'entre vous utilisaient HTML et CSS pour paginer vos posts et c'est cool parce que c'est toujours plus agréable pour la lecture et vous êtes sur que d'un seul coup d'oeil, on vous reconnaît immédiatement.

CSS est l'acronyme de Cascading Style Sheets. Je sais bien que tout le monde parle couramment l'italien, mais au cas où voici la traduction en français : "Feuilles de style en cascade". Par cascade, il ne faut pas comprendre que quelque part dans votre ordinateur, un mini Jackie Chan fait des trucs de malade en sautant de composants électroniques en composants électroniques et que des séries d'explosions gigantesques viennent agrémenter son passage. Non, en cascade, c'est dans le sens des dominos. Un seul qui tombe suffit pour faire tomber tout le reste. Là c'est pareil, sauf qu'à la place des dominos, c'est des balises HTML que vous utilisez comme div, span, blockquote, table, etc... Une seule déclaration suffit pour affecter tout le monde.

Vous en avez marre de devoir sans arrêt recopier ce CSS à chaque post que vous faîtes ? Et bien tant mieux, parce que c'est inutile. Avant de rentrer les mains dans le bantha, il y a tout de même deux notions que je dois voir avec vous, les identifiants et les classes. les identifiants servent à nommer directement et de façon unique un élément html et les classes servent à normer tous les mêmes éléments html. Différence donc entre "celui-là précisément" et "tout ceux-là". C'était rapide.

Nom
Déclaration dans une balise
Déclaration dans CSS
Identifiant
id='lenomdevotreid'
#lenomdevotreid
Classe
class='lenomdevotreclass'
.lenomdevotreclass

Exemples côté CSS :
Code:
<style>#monidentifiant{mes propriétés;} .maclasse{mes propriétés;}</style>
Exemples côté HTML :
Code:
<div id='monidentifiant'>mon contenu</div>
<div class='maclasse'>mon contenu</div>



On garde cependant en tête qu'il s'agit de cascades. Vous n'avez besoin que de déclarer une seule fois votre CSS par page Internet. Ici, c'est tous les 20 posts dans un sujet RP. La première fois que je poste sur un sujet, je place mes balises style pour déclarer mon css et c'est tout. Il se répercutera sur tous les autres posts du même sujet tant que la page internet est la même. Si vous passez en page 2, recollez une seule fois votre css.



On garde aussi en tête qu'on impose notre pagination par rapport à celle du forum. Pour ne pas fâcher le staff, on évitera donc de déclarer des propriétés pour des éléments html brutalement et on se servira donc des identifiants et des classes. Mais pour aussi être sur qu'on imposera pas notre pagination à notre partenaire rp ou à des identifiants et des classes faites par le staff, on déclarera nos identifiants et nos classes en commençant par nos pseudos.

Exemples :
Code:
<div id='saidon_titrerp'>mon contenu, trois culottes et deux résultats de dés</div>
<span class='Oracci_parle'>ma phrase lascive</span>
<blockquote class='khokhopops_recit'>mes plans pour conquérir la galaxie</blockquote>



Exemple concret :


Khorm, une planète méconnue et inhospitalière du secteur Halori. Un monde recouvert de glace et de neige, balayé par des tempêtes glaciales et ciselé de part en part de hautes montagnes et de canyons profonds. Si la vie s’était développée dans ses conditions extrêmes, c’était aussi et surtout grâce à la ténacité de ses habitants, de leurs prédispositions naturelles pour encaisser les températures glaciaires et à leurs technologies développées pour tirer le meilleur parti de n’importe quelle source de chaleur.

Tore, en sa qualité de Maitre du Conseil, était en contact depuis quelques temps déjà avec l’un des chefs de tribu khormaï. Le Whiphid n’en oubliait pas les pratiques violentes et brutales de ce peuple rude, belliqueux et esclavagiste. Il avait même eu vent de cas de cannibalisme en parcourant les rapports sur Khorm. Des aspects qui étaient contraires aux bonnes mœurs du Jedi, très éloignés de ses idéaux bien qu’ils lui rappellent la nature sauvage de son propre peuple. Cependant, un appel à l’aide restait un appel à l’aide et devait être pris en considération. Peut-être était-ce aussi là l’occasion de poser une première pierre pour faire évoluer les mentalités khormaïs.

[...]

« Brrrr… Quel froid ! Ça ne s’appelle pas la Côte Gélée pour rien. » Il était obligé de parler fort pour couvrir le bruit des bourrasques chargées de neige. « J’espère que tu t’es bien couverte Lucina. Suis-moi, je crois que notre comité d’accueil est là. »



A poster donc une seule fois par page :
Code:
<style>.tore {width : 712px;} .tore_bande{ height : 75px; border:solid 2px #009933; background : url("https://i.servimg.com/u/f35/18/10/24/47/down11.jpg") center center no-repeat;} .tore_entete{border-radius: 15% 15% 2% 2%;} .tore_post{font-family : Georgia; text-align : justify; border : solid 2px #009933; border-radius: 2px; margin-top : 4px; margin-bottom : 4px; padding : 1cm;} .tore_post div::first-letter{font-size : 18px; font-weight : bolder;} .tore_pied{border-radius: 0% 0% 15% 15%;} .tore_parle {color : #009933;} .mad_parle {color : #00CCCC;}</style>

A reprendre pour chaque post que l'on fait :
Code:
<center><div class='tore'><div class='tore_bande tore_entete'></div><div class='tore_post'><div>Mon paragraphe</div>
<div>Mon autre paragraphe</div>
<span class='tore_parle'>« Mon personnage dit un truc... »</span> Je précise deux, trois points <span class='mad_parle'>« Un PNJ lui répond »</span>

<div>Mon autre paragraphe</div></div><div class='tore_bande tore_pied'></div></div></center>

Astuces utilisées ici :
- Tout d'abord, div class='tore_bande tore_entete. Vous pouvez affilier autant d'identifiants et de classes à un élément que vous voulez. Ici, tore_bande permet d'afficher une image et de déclarer cette grosse bordure verte. En rajoutant tore_entete, je spécifie les radius, les petits coins arrondis et le tour est joué. Quand je voudrais définir la barre du bas, il me suffira de mettre div class='tore_bande tore_pied et de spécifier de nouvelles données pour les radius de ce pied de page tout en gardant les propriétés générales de l'entête. Facile, efficace et cela vous évite de devoir écrire la même chose deux fois pour rien.
- .tore_post div::first-letter. Ici, deux astuces. La première est de se servir de l'héritage. Rappelez vous de la cascade. Elle marche aussi bien de façon externe (tous les éléments visés seront paginés) que de façon interne (tous les éléments à l'intérieur de l'élément visé hériteront de ses propriétés). Et bien, là, on va encore plus loin. .tore_post div revient à dire "toutes les div qui sont dans .tore_post et uniquement celles-là." On aurait pu écrire aussi .tore_post>div mais c'est du pareil au même. La seconde astuce revient à faire appel à un "pseudo-élément" first letter et de ne cibler que la première lettre de mon élément. (Ca marche uniquement sur des éléments de type bloc ceci dit.)
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Raimee Baryon
~ Padawan ~
~ Padawan ~
Raimee Baryon


Nombre de messages : 90
Âge du perso : 20 ans
Race : Humain
Binôme : Sevel'he Ean (chevalier Jedi)

Feuille de personnage
Activité actuelle:
HP:
HTML et CSS Left_b1167/67HTML et CSS Empty_10  (67/67)
PF:
HTML et CSS Left_bar_bleue82/82HTML et CSS Empty_bar_bleue  (82/82)

HTML et CSS _
MessageSujet: Re: HTML et CSS   HTML et CSS Icon_minitimeSam 27 Avr 2019 - 12:01

Appuyez sur Citer pour vérifier que dans ce post je n'ai déclaré aucune propriété Very Happy
Mon paragraphe

Mon autre paragraphe

« Mon personnage dit un truc... » Je précise deux, trois points « Un PNJ lui répond »

Mon autre paragraphe





Si tu as des questions, des soucis, si ce que tu essaies ne marche pas, n'hésite pas à venir demander conseil ici. :salut:
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
 

HTML et CSS

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Les Enfants de la Force :: HRP :: Flood :: Zone graphique-