Casa Social media Qual è il tuo stile CSS? - dummies

Qual è il tuo stile CSS? - dummies

Video: Conosci SASS e Migliora il tuo Sviluppo CSS 2025

Video: Conosci SASS e Migliora il tuo Sviluppo CSS 2025
Anonim

Uno degli aspetti più confusi di lavorare con (Cascading Style Sheets) CSS è che si può scrivere stili in tanti modi. Simile alla scrittura in prosa, solo perché comprendi le regole di base della grammatica e della scrittura ortografica non significa che tu abbia imparato a scrivere la prosa concisa.

I designer esperti di CSS impiegano molto tempo a creare CSS brevi e chiari, facili da modificare e aggiornare. Ma coloro che sono nuovi ai CSS sono inclini a scrivere più stili del necessario e a creare stili ridondanti.

Non solo il codice ridondante richiede più tempo per essere scaricato su un browser Web, è molto più difficile da modificare o rivedere in seguito. E, più il tuo codice è ridondante, più è probabile che tu possa imbatterti in conflitti di stile.

Ecco cinque suggerimenti per scrivere stili puliti ed efficienti:

  • Non creare mai due stili quando ne bastano uno. Ad esempio, è possibile creare uno stile utilizzando il selettore di tag per tutti gli

    che cambia la famiglia di font dei vostri titoli, e quindi creare un secondo stile utilizzando un selettore di classe che è possibile applicare per i titoli di cambiare la colore.

    Ma sarebbe più efficiente definire sia il colore che la famiglia di font nello stesso stile. Ricorda che puoi sempre tornare indietro e modificare uno stile per aggiungere un'altra regola se vuoi cambiare la formattazione dello stile.

  • Abbrevia codici colore esadecimali. È possibile definire i colori nei CSS includendo l'intero codice colore esadecimale. Tuttavia, quando si utilizzano codici colore ripetitivi, è necessario includere solo i primi tre caratteri. Ad esempio #ffffff è lo stesso di #fff; entrambi creeranno il colore bianco.

  • Usa fogli di stile esterni. È possibile definire gli stili in un foglio di stile interno nella parte superiore di ciascuna pagina Web oppure è possibile salvare i propri stili in un file esterno con. estensione css e allega quel foglio di stile a tutte le tue pagine web. I fogli di stile esterni sono intrinsecamente più efficienti perché consentono di utilizzare lo stesso stile su qualsiasi o tutte le pagine del tuo sito.

    Ad esempio, se definisci uno stile che rende tutti i titoli principali in grassetto, blu e grande, salvando quello stile in un foglio di stile esterno puoi usare lo stesso stile per ogni titolo. Quindi, se in seguito decidi di voler modificare i titoli in verde, puoi cambiare lo stile in un foglio di stile esterno e modificare tutti i titoli contemporaneamente.

    Se avessi salvato gli stili in un foglio di stile interno, dovresti modificare lo stile del titolo in ogni file.

  • Sviluppa una convenzione di denominazione per i tuoi stili. Sebbene sia possibile assegnare un nome agli stili creati con selettori di classe o ID, si consiglia di scegliere stili che abbiano un significato diverso dalla formattazione.Ad esempio, se crei uno stile chiamato. redHeadlines e poi decidere di volere tutto il tuo. redHeadlines per essere blu, o si finirà con uno stile titolo titolo blu. redHeadlines o dovrà rinominare lo stile.

    E rinominare lo stile include tornare indietro e riapplicare quello stile ovunque tu abbia un titolo rosso che vuoi trasformare in blu, il che nega la potenza degli stili per fare aggiornamenti globali. Per evitare questo problema, creare nomi di stile che facciano riferimento alla posizione o all'importanza degli elementi, come ad esempio. mainHeadlines o. sidebarHeadlines.

  • * Verifica e convalida il tuo codice. Anche i progettisti CSS esperti commettono errori, ecco perché Dreamweaver include così tanti ottimi strumenti per testare e convalidare il codice nelle tue pagine web. Assicurati di testare il tuo CSS per errori comuni.

    Di seguito sono riportati due servizi di test online che è possibile utilizzare per verificare la presenza di errori nel codice CSS. Basta inserire l'URL di qualsiasi pagina Web su Internet nel campo dell'indirizzo su uno di questi siti e fare clic sul pulsante Invia per ricevere un rapporto che mostra eventuali errori nel codice:

    • Il Servizio di convalida CSS W3C

    • XHTML-CSS : Sii valido o muori l'apprendimento

Qual è il tuo stile CSS? - dummies

Scelta dell'editore

Tasti di scelta rapida per Microsoft Office 2007 - dummies

Tasti di scelta rapida per Microsoft Office 2007 - dummies

Microsoft Office 2007 è pieno di scorciatoie da tastiera per risparmiare tempo. Comprimi i componenti di Office 2007 - Word, Excel, Outlook, PowerPoint e Access - utilizzando i tasti di scelta rapida utili della seguente tabella. Con poco sforzo, puoi aprire file, trovare contenuti, modificare quel contenuto e altro! Funzione Ctrl Copia Ctrl + C Taglia Ctrl + X Trova Ctrl + F Vai ...

Vantaggi di Lync Online - dummies

Vantaggi di Lync Online - dummies

Lync Online è disponibile sia in ambito professionale sia in piccole imprese (P) e aziendali (E ) piani in Office 365. Le funzionalità includono messaggistica istantanea (IM), chiamate audio e video, presenza, riunioni online, presentazioni online e la possibilità di connettersi con i contatti di Windows Live Messenger e altri utenti esterni che eseguono Lync. La tecnologia è integrata in tutto ...

Come avviare una conversazione con Lync Online - dummies

Come avviare una conversazione con Lync Online - dummies

La scheda di contatto di Lync Online è un ottimo modo per avviare una conversazione con un collega o i membri del tuo team. Oltre alle note personali, alla presenza e alla posizione, vengono visualizzate anche le informazioni sulla tua organizzazione come il titolo e i numeri di telefono. Per visualizzare la scheda di contatto, passa con il mouse sopra l'immagine di una persona e fai clic sul gallone ...

Scelta dell'editore

Come scegliere un'immagine di sfondo Twitter per Visual Social Marketing - dummies

Come scegliere un'immagine di sfondo Twitter per Visual Social Marketing - dummies

Quando si imposta su un account Twitter per il social marketing visivo, un tipo di immagine che è richiesto per il tuo profilo è l'immagine di sfondo - viene visualizzata dietro il profilo Twitter. Nella parte superiore della schermata Impostazioni disegno, Twitter ti consente di scegliere tra una serie di temi premade. Un tema premade applica un ...

Come scegliere un buon nome utente Twitter - dummy

Come scegliere un buon nome utente Twitter - dummy

Su Twitter, il tuo nome utente, o handle, è il tuo identità. Se puoi, iscriviti a Twitter usando il tuo nome o una variante di esso come nome utente (supponendo che qualcun altro non lo stia già utilizzando). Ad esempio, se il tuo nome è John Ira, potresti scegliere un nome utente Twitter come @johnira o ...

Come personalizzare il tuo profilo Twitter - dummies

Come personalizzare il tuo profilo Twitter - dummies

La tua pagina pubblica su Twitter, noto anche come profilo, è la prima impressione che gli altri utenti di Twitter hanno di te, e può fare una grande differenza nel decidere se seguirti. Personalizzare la tua pagina del profilo Twitter in modo che rifletta te o la tua azienda fa la differenza quando si tratta di persone ...

Scelta dell'editore

Perché avresti bisogno di più profili utente per Dragon Professional Individuale - manichini

Perché avresti bisogno di più profili utente per Dragon Professional Individuale - manichini

Drago Individuo professionale capisce solo quelli che si sono presentati ufficialmente come utenti e hanno creato un profilo utente. Ecco quattro motivi per cui potresti voler creare più di un profilo utente: usi diversi vocabolari o stili di scrittura per compiti diversi. Si utilizzano diversi microfoni per compiti diversi. Volete ...

Lavorare con fogli di calcolo Usare NaturallySpeaking - dummies

Lavorare con fogli di calcolo Usare NaturallySpeaking - dummies

Utilizzando fogli di calcolo con versioni precedenti di NaturallySpeaking era difficile perché non si poteva indirizzare direttamente i nomi delle celle. Volevi dire qualcosa come "Cella A5" o "Seleziona Colonna C." Ma (sospiro), niente dado. Il tuo assistente non aveva idea di cosa stavi parlando. Bene, il tuo assistente ha "up-leveled" le sue abilità! Ora è possibile ...

Su Evernote's Passcode Lock - dummies

Su Evernote's Passcode Lock - dummies

Abbonati premium e business che utilizzano determinati dispositivi ora possono bloccare l'app Evernote con un blocco Passcode . Ogni volta che torni all'app, ti viene chiesto di inserire il tuo codice. Un blocco passcode è un'ottima opzione se condividi il tuo telefono o tablet con altre persone e vuoi impedire loro di accedere a ...