Vai al contenuto principale

7 trucchi per imparare i CSS

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 901.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

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

Cosa devi sapere prima: per imparare a scrivere il tuo CSS, devi sapere come formattarlo correttamente. In realtà ci sono due modi decenti 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.

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

Questo è un ottimo punto di partenza per imparare a scrivere il tuo CSS e una volta iniziato 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 che ha 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.

Esiste un modo semplice per esercitarsi in queste nuove competenze e vedere davvero le modifiche apportate, senza dover avviare il tuo 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. 

box model

Questo può essere il caso di molti (o la maggior parte) cose nella vita, ma il modello della scatola deve essere un'eccezione.

Stai cercando i migliori temi e plugin per WordPress?

Scarica i migliori plugin e temi WordPress su Envato e crea facilmente il tuo sito web. Già più di 49.720.000 download. [ESCLUSIVO]

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.

Questo ti permetterà di familiarizzare con il layout dei temi di 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.

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]

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 da sapere sull'apprendimento dei CSS per il tuo blog WordPress. Sentiti libero di condividere questo tutorial con i tuoi amici sui tuoi social network preferiti.

Questo articolo contiene i commenti 0

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
6 azioni
quota6
Tweet
Enregistrer