• A
    User Newbie •

    Utilizzare un solo CSS o diversi?!

    Ciao! è il mio primo post sul forum, ho cercato prima di postare ma non ho trovato nulla, probabilmente perchè la mia è una domanda stupida...
    Sto realizzando un sito, ho un header con logo e menu, un contenitore impostato a lunghezza variabile e un footer. Nella home vorrei ci fosse una slide nel div contenitore, le altre pagine invece avranno elementi diversi, sempre all'interno del contenitore.. e dato che oggi ho dei momenti di buio totale ecco a voi la stupida domanda: devo usare un css unico per tutte le pagine (ora come ora non so come fare a cambiare elementi per le pagine interne) o devo creare un css per ogni pagina.. e facendo diversi css non si va ad appesantire il tutto?

    Sarà l'ora tarda.. ma sono in pieno blackout... :caffe:
    Spero in una vostra risposta 🙂

    Grazie, Alex.

    0
  • J
    User •

    Guarda io userei più fogli di stile settantoli così: nel primo: metterei tutti i codici che si riferiscono al contenuto di layout della pagina; nel secondo, terzo etc..: tutti i codici che vuoi che appaino su una determinata pagina che poi andrai a richiamare con i relativi nomi.
    Il primo foglio che si rifierisce di solito lo chiamo style.css; gli altri li chiamo con nomi semplici che mi dicano cosa possono contenere, es. albo_doro.css - classifiche.css - etc...
    Da quello che so il CSS va a leggerire moltissimo la struttura di un sito se settato correttamente.

    Comunque ti faccio presente che la suddivisione in più fogli di stile non è obbligatoria. Ognuno dopo ha il suo metodo di sviluppo.

    0
  • A
    User Newbie •

    Grazie! Pensavo infatti di andare a creare più fogli 🙂 nel primo stile.css ho creato il layout fisso della pagina quindi header, contenitore centrale vuoto e footer.. poi dovrei creare pagina1.css, pagina2.css, ecc?!
    Posso richiamare più fogli di stile per il documento?! Dovrei caricare per ogni pagina il file stile.css e il css per la pagina in questione..
    È giusto così?
    Alex

    0
  • J
    User •

    Esattamente, io faccio così.
    Ovviamente perché si visualizzi tutto correttamente devi mettere sempre il codice di richiamo al stile.css, e nella riga seguente il codice di richiamo per l'altro o altri CSS.
    Puoi richiamara tutti i fogli di stile che vuoi, l'importante che nei stili successivi imposti nomi (id, class) differenti, altrimenti rischi che vada in contrasto con quello di default e quindi non visualizzi più correttamente.
    Oppure se sono modifiche piccole con un codice non molto lungo puoi farlo in un unico stile.css separando e organizzandolo bene.

    0
  • N
    User Attivo •

    Ciao,

    penso che in linea generale sia meglio non utilizzare troppi fogli di stile per la stessa pagina perchè aumentando le richieste aumenta il tempo di caricamento. Nel caso specifico ti conviene realizzare un css generico per tutto il sito e aggiugerne uno con le classi specifiche per la home che caricherai solo nell'homepage insieme a quello generico. Poi non ho ben capito se vuoi diversificare tutte le singole pagine o solo la home dalle altre. Se vuoi realizzare pagine tutte diverse fra loro i consigli che ti hanno dato in precedenza mi sembrano ottimi.

    0
  • M
    User Attivo •

    Un momento, forse non ho capito bene. Stai pensando di creare una pagina CSS per ogni pagina del tuo sito? Non che ci sia qualcosa di male per carità, però va un po' fuori dal concetto con cui è stato concepito questo linguaggio (CSS). Se vuoi il mio consiglio, non utilizzare più di 5 o 6 fogli di stile, includendo eventualmente anche quelli per dispositivi mobili. Così facendo alleggerirai il template (anche a questo serve il CSS) e sarai più ordinato!
    Potresti per esempio creare il foglio di stile generico per il layout (style.css), quello per la Home Page (homepage.css), e quello per sidebars o blocchi "extra" (più, come detto prima, eventualmente un css dedicato a chi naviga sul sito da un dispositivo mobile). Non so di che sito si tratta, ma in genere l'accessibilità, l'ordine del markup e un minimo di coerenza di stile fra le pagine ci dev'essere dappertutto.

    La risposta in breve è: non appesantisci il sito includendo più file css (ok, magari se ne includi 100 e più si) ma alla lunga troppi file css (oltre a non essere necessari) creano caos per chi ci lavora.

    0
  • A
    User Newbie •

    Grazie per le risposte ragazzi! Allora sul fatto di creare un foglio di stile generico per il template (header, contenitore e footer) ci sto.
    Poi in home dovrei inserire una slide in javascript, più tre colonnine sotto tipo "Ultimi progetti". Per quanto riguarda le altre pagine che saranno chi siamo, servizi portfolio e contatti.. si avranno impostazioni diverse all'interno del div contenitore.. soprattuto la categoria portfolio.. dove ci sarà un sotto menu per selezionare il tipo di lavori da visualizzare.. quindi del tipo "Tutto, Loghi, stampa, Web". Inoltre se si clicca sulla miniatura del lavoro si apre una pagina con la scheda del lavoro con tutte le info utili.
    Quindi facendo un piccolo elenco.. saranno... stile.css (generico) poi altri del tipo "home.css" "servizi.css" portfolio.css" "pagina interna per la scheda del lavoro.css" "contatti.css" ..... dovrei trovarmi così alla fine di tutto.

    Cosa ne pensate?

    Alex

    0
  • J
    User •

    Da come dici sembrerebbero piccole modifiche, a questo punto lo farei tutto in uno strutturando all'inizio lo stile generale, poi tutti gli altri codici.
    Meglio ancora farei: stile.css (generale) e contenuti.css (con tutto quello che hai detto prima tu) ovviamente devi stare attento alla voce dei richiami ID e/o CLASS.

    0
  • A
    User Newbie •

    Giusto!! potrei accorpare tutto in contenuti... ma l'ho già detto nel messaggio iniziale che sono giorni di totale blackout, vero???
    mi spiegheresti solo bene come poter utilizzare Class nel modo corretto?
    Ti ringrazio!!
    Alex

    0
  • J
    User •

    Questo è un esempio con il class:

    p.primo{ color: blue; } 
p.secondo{ color: red; }

    [HTML]<p>Paragrafo Normale</p>
    <p class="primo">Paragrafo che prende dal CSS il codice p.primo</p>
    <p class="secondo">Paragrafo che prende dal CSS il codice p.secondo</p>[/HTML]

    Questo è un esempio con ID:

    div#primo{ color: blue; } 
div#secondo{ color: red; }

    [HTML]<p>Paragrafo Normale</p>
    <div id="primo">Paragrafo che prende dal CSS il codice div#primo</div>
    <div id="secondo">Paragrafo che prende dal CSS il codice div#secondo</div>[/HTML]
    Tutto questo vale sia per la class, sia per gli ID ad eccezzione del codice iniziale di richiamo.
    Per ID nel CSS devi mettere il codice #primo; invece per la class devi usare .primo con l'aggiunta del tag in questo caso P (1 esempio) e DIV (2 esempio).

    Comunque ti consiglio di fare una ricerca in internet su come funzionano, è molto ben spiegato e facile, basta ovviamente prenderci l'abitudine 😉

    0
  • A
    User Newbie •

    Grazie!! Quindi potrei creare un div tipo dove metto la mianiatura e la classe hover per far si che quando ci passo il mouse abbia un effetto diverso.. quindi il div sarà ripetuto nell'html per creare tipo griglia di lavori eseguiti e avranno tutti le stesse impostazioni sia di id che di class.. giusto? L'unica cosa, se imposto tutte le miniature con id e class uguali.. come faccio ad allinearli in orizzontale e in verticale tipo griglia?

    0
  • M
    User Attivo •

    Ogni miniatura può avere la sua id o class (di solito una class si usa quando si usa più volte e un id quando lo si usa una sola volta, esempio: id #contenitore class .allineato-a-sinistra) e comunque è tutto fattibile con i margini e i float.
    Comunque i files CSS si possono ordinare anche così (come faccio io):

    
/* Generale-------------------------------------------------------------------------------*/


body {
    background: #fff;
    font: 14px;
}



/* Links
-------------------------------------------------------------------------------*/


a {color: #03f;}


a:hover {color: #69f;}


a:link {-webkit-tap-highlight-color: #fcd700;}


/* Homepage
-------------------------------------------------------------------------------*/

................

/* Chi siamo
-------------------------------------------------------------------------------*/

....................
    0
  • A
    User Newbie •

    anche io metto gli elementi in ordine nel css 🙂 mi da fastidio vedere le cose storte 🙂

    Proverò con i metodi che mi avete detto! Grazie a tutti per i chiarimenti! 🙂

    Alex

    0
  • J
    User •

    Ti faccio un esempio su quello che ho capito:
    Codice HTML:
    [HTML]<link rel="stylesheet" href="codice.css" type="text/css" />
    <div id="contenuto">
    <div class="left">1</div>
    <div class="center">2</div>
    <div class="right">3</div>
    </div>[/HTML]
    Codice CSS:

    div#contenuto{ width:100%; position:relative;}
div.left,div.right,div.center{width:32%;position:absolute;text-align:center;}

div.left {top:0;left:0;background-color:#ff0000;}
div.center {top:0;left:33%;background-color:#ff0000;}
div.right {top:0;left:66%;background-color:#ff0000;}

    Prova a fare una prova e dimmi se intendevi così.

    0
  • M
    User Attivo •

    Non c'è di che e se hai altre domande non esitare :sun:

    0
  • A
    User Newbie •

    si esatto.. però hai usato la percentuale, invece per la larghezza fissa? ho impostato il template a 960px di larghezza.

    aspetta ti faccio vedere il link: aaronrudd.co.uk/our-work
    vorrei creare una cosa del genere...

    Alex

    0
  • J
    User •

    Il link che hai inserito non funziona, per il discorso della larghezza io ho fatto una cosa test... Ovviamente se metti a larghezza fissa, devi modificare gli altri valori, sennò non torna la visualizzazione.

    EDIT: ho trovato il link funzionante, il codice che ti ho dato ha la stessa funzione, devi inserire l'immagine e la scritta sotto ed il gioco è fatto. poi perché si illumino quando passi con il mause esiste un codice da inserire nel collegamento 😉

    0
  • A
    User Newbie •

    grazie allora prendo il codice che mi hai scritto e parto da quello 🙂

    Thanks!

    0
Effettua l'accesso per rispondere