TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

Come aggiungere CSS nel sito Weebly?

8

CSS sta per C ascading S tyle S enzuoli e utilizzato per definire lo stile di un elemento. Ogni elemento HTML su un tema Weebly è controllato con il parametro definito su come apparirà su un sito pubblicato e tutti questi parametri sono memorizzati nel file "main_style.css" a cui è possibile accedere tramite il percorso "Design > Modifica HTML / CSS > Assets". Non è sempre necessario modificare il foglio di stile principale, è anche possibile controllare lo stile di un elemento sia a livello di pagina che a livello di singolo elemento. Nel nostro precedente articolo avevamo spiegato come utilizzare gli script su un Sito Weebly e in questo articolo discuteremo in dettaglio dei vari modi per aggiungere CSS nel sito Weebly.

I CSS possono essere aggiunti a un sito nei seguenti tre modi:

  • Stile in linea
  • Stile interno
  • Foglio di stile esterno

Lo stile interno è definito all’interno della sezione di un documento HTML che interessa tutti gli elementi particolari su quella pagina.

Gli stili esterni sono definiti in un file di testo esterno con estensione .css e collegati al documento HTML tramite tag all’interno della sezione.

Lo stile in linea è definito direttamente su un elemento HTML all’interno di una pagina web che interessa solo quell’elemento.

Lo stile interno è definito all’interno della sezione di un documento HTML che interessa tutti gli elementi particolari su quella pagina.

Gli stili esterni sono definiti in un file di testo esterno con estensione .css e collegati al documento HTML tramite tag all’interno della sezione.

Lo stile in linea è definito direttamente su un elemento HTML all’interno di una pagina web che interessa solo quell’elemento.

Lo stile interno è definito all’interno della sezione di un documento HTML che interessa tutti gli elementi particolari su quella pagina.

Utilizzo degli stili in linea in Weebly

Gli stili in linea vengono utilizzati a livello di elemento senza influenzare altri elementi nella stessa pagina. Ad esempio, se si desidera modificare il paragrafo in particolare in colore rosso con dimensione del carattere 18px mantenendo gli altri paragrafi come per il colore predefinito, incollare il codice sottostante all’interno dell’elemento "Codice da incorporare".

<p style="font-size:18px; color:green;"> Here is the paragraph content…. </p>

Utilizzo degli stili interni in Weebly

Gli stili incorporati vengono generalmente applicati a livello di pagina e interessano tutti gli elementi simili all’interno di una pagina. Ad esempio, puoi incollare il codice seguente in "Pagine> Seleziona una pagina> Impostazioni avanzate> Codice intestazione" per rendere tutto il testo del paragrafo su una pagina di colore rosso.

<style type="text/css"> p {color: red;} </style>

Come aggiungere CSS nel sito Weebly?

Aggiungi codice nell’intestazione della pagina Weebly

Puoi anche incorporare lo stile all’interno dell’elemento “Embed Code" usando i tag < style >…< / style > per renderlo effettivo solo per quell’elemento.

Utilizzo di fogli di stile esterni in Weebly

Questo è il modo altamente efficace e consigliato di usare i CSS poiché gli stili sono separati dall’HTML, è facile manutenzione e modifica. Di seguito sono riportati alcuni punti di base sull’utilizzo del foglio di stile esterno predefinito in Weebly:

  • Ogni tema Weebly utilizza un solo foglio di stile esterno che sarà disponibile in "Design > Modifica HTML / CSS > Risorse" con il nome "main_style.css".
  • Qualsiasi modifica a questo foglio di stile principale sarà efficace in tutto il sito.
  • La modifica del foglio di stile richiede il salvataggio come tema con un nome diverso e il tema modificato sarà disponibile in "Progettazione > Cambia tema > Tema personalizzato".
  • Quando un tema viene modificato, tutte le modifiche all’interno del foglio di stile principale andranno perse poiché il nuovo tema utilizzerà il foglio di stile predefinito per quel tema.

Ad esempio, se desideri modificare lo stile dell’elemento block quote in tutto il sito, modifica il codice all’interno di blockquote {……} nel file "main_style.css". Questo cambierà lo stile di tutte le virgolette di blocco esistenti e di tutte le nuove virgolette di blocco.

Come aggiungere CSS nel sito Weebly?

Modifica dello stile principale CSS in Weebly

Se hai un nuovo foglio di stile, caricalo facendo clic sull’icona + accanto a "Risorse" e scegli l’opzione "Carica file…". Assicurati che il file abbia estensione .css e collega il foglio di stile alle pagine richieste nella sezione "Pagine > Seleziona una pagina > Impostazioni avanzate > Codice intestazione" utilizzando il codice seguente:

Il percorso del file per i file caricati sarà del tipo " http://yoursite.weebly.com/files/theme/your-style-sheet.css ". Quando colleghi il foglio di stile a una pagina, puoi utilizzare il collegamento assoluto " http://yoursite.weebly.com/files/theme/your-stylesheet.css " o utilizzare un collegamento relativo come "/files/theme/your -foglio di stile.css”.

Per la dimensione del carattere, il peso e la modifica del colore, dovresti utilizzare la funzione predefinita disponibile in "Design> Cambia caratteri" e non è necessario modificare il CSS.

Fonte di registrazione: www.webnots.com
Lascia una risposta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More