Guida Lezione di CSS [Habbo Retroservers]

Nvidia

Utente Senior
Autore del topic
16 Agosto 2012
1.732
44
Miglior risposta
0
100px-Crystal_Clear_app_stylesheet.svg.png

[attenzione]Premessa: Voi pensate che io sia un genio dell'informatica e dei linguaggi riguardante la suddetta, sappiate che io ho appena finito gli esami di terza media con l'intenzione di iscrivermi ad un liceo scientifico tradizionale, pertanto io di linguaggi non so quasi NIENTE.[/attenzione]

Di che cosa vi parlerò oggi?
Oggi vorrei condividere con voi un'esperienza fondamentale che mi ha arricchito per quanto concerne il building di un Habbo Retroserver.
Non vi aspettate la solita guida arcigna che parli di migliaia di tag incomprensibili. Io stesso non sono un programmatore, e di linguaggi informatici so veramente quanto basta per buildare un retroserver decente. Per dirla tutta sono un Content Manager System Builder/Mantainer, da ciò potete desumere che di c# e c++ so a malapena le basi fondamentali. Bando alle ciancie, oggi vi istruirò riguardo a gran parte di ciò che di Css potreste trovare in un CMS.

Cos'è il CSS?
CSS è l'acronimo della parola Cascading Style Sheets, tradizionalmente conosciuta in italiano come Foglio(i) di stile.
Riducendo ai minimi termini ciò che ho intenzione di dirvi, esso definisce la formattazione (quindi le posizioni secondo determinate proporzioni nel caso di css) di documenti Html e Xml (principalmente). Esso fu creato allo scopo di facilitare appunto la stessa formattazione dei documenti creati quindi dagli sviluppatori Html.
Il CSS si compone tenendo conto di un insieme di Recommandations, quindi raccomandazioni, regole, direttive, chiamatele come volete.

Cosa ci faccio del CSS in un retro?
Vuoi inserire un Background che si ripeta per tutta la schermata anche se esso è grande 0,1 pixel?
Vuoi inserire un Background proprio dove c'è uno scrypt HTML/PHP?
Vuoi decidere dove inserirlo?
Vuoi che esso sia vicino al margine destro, o a quello sinistro?
Vuoi che un background sia vicino al margine superiore o a quello inferiore?

Esistono miliardi di modi di utilizzare il CSS, ovviamente, non solamente per i background, ma io vi spiegherò soprattutto come lavorare sulle immagini .gif, .png, .bnp, .jpj e .jpeg.

Quali direttive ci occorre sapere per poter usufruire del linguaggio CSS?
Ecco a voi le Recomm. con i relativi output, farò in modo che gli output parlino direttamente con voi, onde facilitare la comprensione dei principianti.

.:.Sto scrivendo in php, improvvisamente dico... perchè non mettere un background o un topbackground diverso da quello normale?.:.
Semplice, basta inserire il contenuto del CSS in questo scrypt:
Codice:
Perfavore, Entra oppure Registrati per vedere i codici!
Output:"Caro PHP, in questa pagina PHP adesso scriverò un codice in CSS (capiscimi amore <3)"

.:.Come posso ora inserire il background che desidero?.:.
Codice:
Perfavore, Entra oppure Registrati per vedere i codici!
Output:"Caro CSS, voglio un background con l'immagine nell'url selezionato"

.:.Come posso inserire solo un colore di background e non un immagine?.:.
Codice:
Perfavore, Entra oppure Registrati per vedere i codici!
Output:"Caro CSS, non mi piace un'immagine, voglio che sia tutto di un colore il bg"

.:.Come posso inserire un'immagine dove voglio senza che essa si ripeta?.:.
Codice:
Perfavore, Entra oppure Registrati per vedere i codici!
Output:"Caro CSS, no-repeat, quindi non ripetere l'immagine che ti ho inviato"

.:.L'immagine me la mette attaccata ad un margine, come la posso posizionare?.:.
Codice:
Perfavore, Entra oppure Registrati per vedere i codici!
Output:"Caro CSS, posiziona la mia immagine con le proporzioni che ti ho riferito: Distanza dall'alto (top) es.20px, Distanza da sinistra/destra es.15px"
ATTENZIONE: I numeri possono essere positivi o negativi, come in un piano cartesiano: es. -20px; 20px

.:.Voglio cambiare scrittura nella pagina dove introduco il mio css, come faccio?.:. *Eseguibile in HTML*
Codice:
Perfavore, Entra oppure Registrati per vedere i codici!
Output:"Caro CSS, la scrittura che mi dai sempre a me fa schifo :'(, voglio utilizzare queste scritture sopracitate"

.:.Voglio cambiare la misura della scrittura nella pagina dove introduco il mio css, come faccio?.:. *Eseguibile in HTML*
Codice:
Perfavore, Entra oppure Registrati per vedere i codici!
Output:"Caro CSS, la grandezza di testo che mi dai sempre non mi piace, voglio utilizzare la misura sopracitata, es. 10px".

Ovviamente questa è una piccola parte di CSS, ma questi accenni vi saranno utili quando l'HTML e il PHP saranno impossibilitati a compiere determinate azioni citate poc'anzi.
Ora vi porgo un pezzo di scrypt in CSS prelevato dal frontpage.css, il quale indica tramite recommandations le proporzioni riguardanti i form dove inserite Nome e Password.

Codice:
Perfavore, Entra oppure Registrati per vedere i codici!
Capite tutto no?
.. lo sapevo, non ci siete arrivati!
#login-form indica ciò a cui stiamo mettendo mani, quindi i form. Sappiamo quanto dista dal margine superiore, dal margine sinistro, quindi il margine di regolazione (float), il colore dei form. Il resto non sarà utile ad ulteriori modifiche grafiche, per questo non ve l'ho spiegato, ma qualora vi interessasse, potrete contattarmi in Private Message e vi spiegherò il significato di queste ulteriori recomm. in CSS.

Ecco a voi un piccolo esempio di scrypt, utilizzato coi codici da me postati.
PHP:
Perfavore, Entra oppure Registrati per vedere i codici!

Lo avete capito?
Alla prossima, Copyright NVIDIA dello Sciax2.it Forum
 
Ultima modifica:
Riferimento: Lezione di CSS [Habbo Retroservers]

Bella Guida, Ottimo, tutto spiegato nel modo più comprensibile, complimenti, Sono cose intelligenti mettere es:
Codice:
Perfavore, Entra oppure Registrati per vedere i codici!
Bravo. :emoji_slight_smile:
 
Riferimento: Lezione di CSS [Habbo Retroservers]

Bella Guida, Ottimo, tutto spiegato nel modo più comprensibile, complimenti, Sono cose intelligenti mettere es:
Codice:
Perfavore, Entra oppure Registrati per vedere i codici!
Bravo. :emoji_slight_smile:

Ti ringrazio! Credo che sia il miglior modo per definire un output senza screen fare in modo che il linguaggio comunichi direttamente con te :emoji_relieved:!
@orlando1994 potresti modificare il prefix in Guida?
 
Ultima modifica:
Riferimento: Lezione di CSS [Habbo Retroservers]

Ottima Guida bravo ben dettagliata se ne trovano poche cosi fatte bene Complimenti ;) VOTO: 9/10
 
Riferimento: Lezione di CSS [Habbo Retroservers]

Modifico il prefix ;)
 
Riferimento: Lezione di CSS [Habbo Retroservers]

Piccola guida ma molto interessate per i meno esperti BRAVO :fighetto:
 
Riferimento: Lezione di CSS [Habbo Retroservers]

Guida molto utile per i meno esperti, veramente ben fatta e semplice :emoji_slight_smile: