L'apprendimento dei CSS può essere doloroso, soprattutto quando non sai da dove iniziare.
CSS è un linguaggio di stile e non un linguaggio di programmazione come JavaScript o PHP, in realtà è abbastanza facile da imparare, soprattutto se hai una certa conoscenza dell'HTML.
Oggi ti offrirò alcuni suggerimenti che possono aiutarti a imparare i CSS.
1. Costruzione di base
Quello che devi sapere prima: A impara a scrivere il tuo CSS, devi sapere come formattarlo correttamente. In realtà ci sono due modi corretti per farlo, ma uno di questi ti tiene organizzato.
Poiché è comune che l'HTML sia la prima lingua che le persone imparano quando vogliono lavorare con i siti WordPress, aiuta a imparare la sintassi CSS scrivendola prima in modo simile all'HTML.
Ecco la struttura di base dei CSS:
.class selector {proprietà: valore;} #id selector {proprietà: valore;}
È abbastanza semplice quando non ci sono molti stili che vuoi implementare per un elemento sul tuo sito, ma quando inizi a prendere confidenza con i CSS avrai bisogno di molto più di uno stile. per un elemento, che renderà tale struttura inappropriata.
Ecco perché esiste un modo più efficiente e organizzato per scrivere il tuo CSS:
.class selector {proprietà: valore; Proprietà 2: valore 2; Proprietà 3: valore 3; } #id selector {proprietà: valore; Proprietà 2: valore 2; Proprietà 3: valore 3; }
Ora puoi iniziare a esaminare i termini utilizzati in questo esempio. Ciascuno di questi termini sono gli elementi costitutivi di base dei CSS: classe, ID, selettore, proprietà e valore. Proprietà e valori sono anche chiamati dichiarazione.
Questo è un ottimo punto di partenza per impara a scrivere il tuo CSS e una volta che inizi potresti chiederti dove dovresti scrivere tutto questo alla fine dei tuoi file WordPress.
Nella tua installazione di WordPress, qualsiasi file con estensione .css è un file CSS, come probabilmente avrai già intuito. Il file principale che dovresti cercare è il tuo foglio di stile con il nome " style.css". È in questo file che generalmente troverai tutto lo stile del tema.
2. Conveniente con semplici selettori
Successivamente, è necessario conoscere i selettori e le proprietà di base, ma soprattutto come funzionano in un tema. Selettori come h1, h2 et h3 per le intestazioni e p per esempio testo di paragrafo e proprietà come font-family e "background-color" per il colore di sfondo.
C'è un modo semplice per praticare queste nuove abilità e vedere effettivamente i cambiamenti che stai facendo, senza dover iniziare da solo. blog WordPress. W3Schools ha un sacco di informazioni sui CSS ed esempi in cui puoi modificare il loro codice per esercitarti rapidamente. Puoi anche leggere questo Durante Mathier Nebra sulla OpenClassrooms.
3. Memorizza il modello Box
Puoi facilmente trovare selettori e proprietà che non conosci in pochissimo tempo. Tutto quello che devi fare è fare una semplice ricerca su Google o Bing.
Questo può essere il caso di molti (o la maggior parte) cose nella vita, ma il modello della scatola deve essere un'eccezione.
Essenzialmente, questi sono gli elementi base del layout CSS che devi padroneggiare per dare un senso a molte proprietà. Il layout della scatola include anche molti elementi che è possibile personalizzare.
Fortunatamente, non è difficile da imparare e in tutta onestà se riesco a memorizzarlo non dovresti avere problemi con esso. In sostanza, il modello di casella include un'area di contenuto, i margini interni o il riempimento, i bordi o il bordo e il margine o margine esterno.
4. Learning by doing
Una volta che inizi a familiarizzare con i CSS, è una buona idea fare pratica scegliendo un tema che abbia un design completamente di base, su cui apportare le tue modifiche.
È importante capire come semplici cambiamenti possono influenzare drasticamente un tema a volte e altre volte non così tanto. In definitiva, esercitandoti il più possibile, dovrebbe aiutarti a vedere visivamente i cambiamenti che stai apportando.
Nel progetto delle cose, una volta che sei in grado di collegare i punti, non solo puoi scrivere CSS rapidamente, ma devi anche essere in grado di risolvere i problemi in futuro, il che diventa un compito vitale per te. web design e sviluppo.
5. Dai contenuti in base alla larghezza e l'altezza
Dopo aver installato un tema semplice su cui lavorare, è possibile iniziare immediatamente a modificare il layout specificando lunghezze e larghezze diverse per le aree di contenuto.
Ciò ti consentirà di familiarizzare con i layout di Temi WordPress
6. galleggianti e posizionamento
È qui che i CSS tendono a diventare un po 'complicati, poiché puoi creare un layout solo con CSS e soprattutto con float e posizionamento. Il problema è che queste proprietà non sono progettate per creare intere presentazioni.
In questo momento, questo è il numero di persone che mostrano un layout completamente corretto. esplora il codice del tema su cui hai scelto di lavorare.
7. CSS avanzato
A questo punto, inizierai a rimanere fedele ai CSS, ma c'è molto altro da scoprire:
- classi Nickname - Utilizzato per impostare uno stato specifico di un elemento come il passaggio del mouse e il posizionamento dell'immagine.
- Selettori complessi - puoi mettere a punto il tuo stile con selettori più avanzati.
- animazioni CSS3 - Creazione di un'animazione di dissolvenza o altre transizioni.
- Reattivo con le media query CSS3 - ti consentirà di creare temi reattivi in pochissimo tempo.
- trasforma - Controlla la dimensione e la forma delle aree di contenuto selezionate.
- A-regole - utilizzato per importare cose come caratteri e fogli di stile nel tuo tema.
- gradienti - Aggiunta di una sfumatura al tema senza la necessità di utilizzare un'immagine.
Questi sono molti elementi in cui puoi davvero iniziare a imparare a dare più stile al tuo tema.
Questo è tutto ciò che c'era per imparare i CSS per il tuo blog WordPress. Sentiti libero di condividere questo tutorial con i tuoi amici sui tuoi social network preferiti.
