20 consigli utili CSS per principianti

In passato dipendevamo molto dagli sviluppatori e dai programmatori per aiutare ad aggiornare il sito Web, anche quando è solo di poco conto. Grazie al CSS e alla sua flessibilità, gli stili possono essere estratti indipendentemente dai codici. Ora, con alcune nozioni di base sui CSS, anche un principiante può facilmente cambiare lo stile di un sito web.

Se sei interessato a raccogliere CSS per creare il tuo sito web, o semplicemente a modificare l'aspetto e il feeling del tuo blog, è sempre bene iniziare con le basi per ottenere una base più solida. Diamo un'occhiata ad alcuni Suggerimenti CSS abbiamo pensato potesse essere utile principianti. Elenco completo dopo il salto.

1. Uso reset.css

   Quando si tratta di rendering di stili CSS, i browser come Firefox e Internet Explorer hanno diversi modi di gestirli. reset.css ripristina tutti gli stili fondamentali, quindi inizi con un nuovo foglio di stile completamente nuovo.

   Qui sono pochi usati comunemente reset.css quadri - Yahoo Reimposta CSS, Ripristino CSS di Eric Meyer, Tripoli

2. Usa CSS di stenografia

   CSS abbreviato ti dà un modo più breve di scrivere i tuoi codici CSS e, soprattutto, rende il codice più chiaro e più facile da capire.

   Invece di creare CSS come questo

   .header background-color: #fff; background-image: url (image.gif); background-repeat: no-repeat; posizione di sfondo: in alto a sinistra; 

   Può essere short-handed nel seguente:

   .header background: #fff url (image.gif) no-repeat in alto a sinistra

   Di Più - Introduzione alla stenografia CSS, Utili proprietà abbreviazioni CSS

3. Comprensione Classe e ID

   Questi due selettori spesso confondono i principianti. In CSS, classe è rappresentato da un punto "." mentre id è un hash '# ". In poche parole id è usato su uno stile che è unico e non si ripete, classe dall'altra parte, può essere riutilizzato.

   Di Più - Classe contro ID | Quando usare Class, ID | Applicazione di classi e ID insieme

4. Potere di

5. a.k.un elenco di link, è molto utile quando sono usati correttamente con
   o
   , in particolare per lo stile di un menu di navigazione.

   • Dimenticare , provare

     Uno dei maggiori vantaggi del CSS è l'uso di

     per ottenere una flessibilità totale in termini di stile.

     sono diversi

     , dove i contenuti sono "bloccati" all'interno di a

     La cella di s. È sicuro dire la maggior parte i layout sono realizzabili con l'uso di e uno stile adeguato, beh forse ad eccezione di enormi contenuti tabellari. Di Più - I tavoli sono morti, Tabelle vs. CSS, CSS vs tabelle Strumenti di debug CSS È sempre utile avere un'anteprima istantanea del layout mentre si modifica il CSS, aiuta a comprendere e correggere meglio gli stili CSS. Ecco alcuni strumenti di debug CSS gratuiti che puoi installare sul tuo browser: sviluppatore web FireFox, DOM Inspector, barra degli strumenti per sviluppatori di Internet Explorer e Firebug. Evitare i selettori superflui A volte la tua dichiarazione CSS può essere più semplice, nel senso che se ti ritrovi a codificare quanto segue: ul li ... ol li ... table tr td ... Possono essere ridotti a solo li ... td ... Spiegazione: esisterà solo dentro o e e sarà solo dentro quindi non c'è davvero bisogno di reinserirli. sapendo !importante Qualsiasi stile contrassegnato con !importante sarà preso in uso in modo indipendente se c'è una regola di sovrascrittura sotto di essa. .pagina colore di sfondo: blu! importante; background-color: red; Nell'esempio sopra, background-color: blue sarà adattato perché è contrassegnato con !importante, anche quando c'è un background-color: red; sotto di esso. !importante viene utilizzato nella situazione in cui si desidera forzare uno stile senza sovrascriverlo, tuttavia potrebbe non funzionare in Internet Explorer. Sostituisci testo con immagine Questa è una pratica comune da sostituire titolo da un titolo basato su testo a un'immagine. Ecco come lo fai. h1 text-indent: -9999px; background: url ("title.jpg") no-repeat; larghezza: 100px; altezza: 50px; Spiegazione: text-trattino: -9999px; getta il titolo del tuo testo fuori dallo schermo, sostituito da un'immagine dichiarata da sfondo: … con un fisso larghezza e altezza. Comprendere il posizionamento CSS Il seguente articolo offre una chiara comprensione dell'utilizzo del posizionamento CSS - posizione: ... Di Più - Impara il posizionamento CSS in dieci passi CSS @importare vs Ci sono 2 modi per chiamare un file CSS esterno - rispettivamente utilizzando @importare e . Se non sei sicuro del metodo da utilizzare, ecco alcuni articoli per aiutarti a decidere. Di Più - Differenza tra @import e link Progettare moduli in CSS I moduli Web possono essere facilmente progettati e personalizzati con i CSS. Questi articoli seguenti mostrano come: Di Più - Forma senza tabella, Forma giardino, Styling ancora più controlli di forma Fatti ispirare Se sei alla ricerca di un sito Web basato su CSS ben disegnato per l'ispirazione, o semplicemente semplicemente navigando per trovare qualche buona interfaccia utente, ecco alcuni siti vetrina CSS che consigliamo: CSS Remix Bellezza CSS Elite CSS Mania CSS Perdita CSS Mantieni i codici CSS puliti Se i tuoi codici CSS sono disordinati, finirai per codificare in confusione e avere difficoltà a arbitrare il codice precedente. Per cominciare, puoi creare indentazioni appropriate, commentarle correttamente. Di Più - 12 principi per mantenere pulito il tuo codice, Formatta i codici CSS online Misurazione tipografica: px vs em Avere problemi a scegliere quando usare l'unità di misura px o em? Questi articoli seguenti potrebbero fornirti una migliore comprensione delle unità tipografiche. Tabella di compatibilità dei browser CSS Sappiamo tutti che ogni browser ha diversi modi di rendering degli stili CSS. È utile avere un riferimento, un grafico o un elenco che mostri l'intera compatibilità CSS per ciascun browser. Tabella di supporto CSS: # 1, # 2, # 3, # 4. Progettare multicolonne in CSS Hai problemi a far allineare correttamente la colonna sinistra, quella centrale e quella destra? Ecco alcuni articoli che potrebbero aiutare: Alla ricerca del Santo Graal Colonne finte Principali motivi per cui le colonne CSS sono incasinate Litte Boxes (esempi) Layout a più colonne Arrampicati immediatamente Colonne assolute Ottieni un editor CSS gratuito Gli editor dedicati sono sempre meglio di un blocco note. Ecco alcuni che consigliamo: Di Più - CSS semplice, Bloc notes ++, Un editor CSS di stile Capire i tipi di media Ci sono pochi tipi di media quando dichiari CSS con . stampa, proiezione e schermo sono alcuni dei tipi comunemente usati. Comprenderli e usarli in modo appropriato consente una migliore accessibilità da parte dell'utente. Il seguente articolo spiega come gestire i tipi di media CSS. Di Più - CSS e tipi di media, W3 Tipi di media, Tipi di media CSS, Tipi di media CSS2 20 utili app per iPhone per sviluppatori e designer 20 utili strumenti SVG per una grafica migliore 20 caratteri ultra leggeri ed eleganti per i web designer Articolo successivo 20 utili componenti aggiuntivi di Firefox Sidebar Articolo precedente 20 app utili per sfruttare al massimo Instagram