CSS avanzato

• 10 minuti

Cascading Style Sheets (CSS) è un linguaggio che determina lo stile di una pagina Web mediante la descrizione di come devono essere visualizzati gli elementi HTML, inclusi testo, caratteri, colori, sfondi, bordi e margini.

La modifica dello stile delle pagine del sito Web può essere un'operazione semplice quanto applicare le istruzioni CSS direttamente a una pagina. Quando si modifica il contenuto di una pagina usando Visual Studio Code, CSS è disponibile come file separato. Questo file è incluso come parte del contenuto della pagina e CSS si applica a quella pagina. Ad esempio, se è necessario aumentare l'altezza della barra di spostamento nella parte superiore di una home page per inserirvi un logo, è sufficiente modificare il file CSS e quindi aggiungere un'istruzione CSS personalizzata.

.navbar-static-top.navbar { min-height: 100px; }

Questo approccio funziona per le piccole modifiche applicate a un'unica pagina, ma l'approccio ottimale prevede la registrazione delle personalizzazioni in uno o più file CSS e quindi la loro applicazione all'intero sito Web o a parti di esso.

Temi Power Pages

Power Pages usa il framework front-end Bootstrap per controllare la struttura e il layout del sito Web. Bootstrap è un pacchetto di modelli di progettazione HTML e CSS per tipografia, moduli, pulsanti, spostamento e altri elementi, comprese le estensioni JavaScript facoltative. Una sua interessante funzionalità predefinita consente di specificare un layout reattivo che regola automaticamente il sito Web in modo che abbia un aspetto esteticamente gradevole su tutti i dispositivi, dai piccoli smartphone ai grandi desktop.

Un tema determina l'aspetto di tutte le pagine del sito Web per garantire la coerenza visiva. Controlla inoltre la struttura di spostamento, il banner, i colori e i tipi di carattere e altri elementi visivi di una pagina Web.

È possibile implementare i modelli di Power Pages usando componenti Bootstrap standard, con stili personalizzati di base minimi. Di conseguenza, è possibile usare le opzioni di personalizzazione disponibili in Bootstrap per personalizzare i temi e applicarli in modo coerente all'intero sito Web.

Applicazione delle personalizzazioni

Power Pages offre una raccolta completa di temi e strumenti per la progettazione del sito Web. Effettuare una selezione tra i diversi temi da usare nel sito Web e personalizzarli ulteriormente usando le opzioni di stile.

L'area di lavoro Stile nello studio di progettazione di Power Pages controlla quali stili CSS vengono applicati al sito Web e consente di implementare strutture di sito universali. È possibile incorporare modifiche al marchio aziendale e visualizzare i cambiamenti effettuati nell'anteprima a destra della finestra dell'app. L'area di lavoro Stile fornisce più temi predefiniti e per ognuno è possibile modificare la combinazione di colori, il colore di sfondo, i tipi di carattere, la struttura dei pulsanti e la spaziatura delle sezioni.

Temi

I temi creano un aspetto e un comportamento complessivo per il sito definendo stili per vari elementi di testo, pulsanti, collegamenti e layout di sezione. Se il sito richiede altre personalizzazioni, è possibile usare la funzionalità Gestisci CSS.

Nell'area di lavoro Stile è possibile scegliere tra i temi disponibili. Dopo aver selezionato un tema, è possibile personalizzare ulteriormente i singoli elementi per creare lo stile desiderato.

Gestione di CSS

Per accedere alla funzionalità Gestisci CSS selezionare il menu con i puntini di sospensione (...), quindi Gestisci CSS nel riquadro del tema.

In tutte le pagine di tutti i siti Web Power Pages sono già inclusi i file seguenti: bootstrap.min.css, theme.css e portalbasictheme.css. Questi file definiscono gli stili per l'intero sito Web. È possibile caricare più file CSS usando il collegamento Carica e quindi eseguendo la modifica nell'editor di Visual Studio Code. Per altre informazioni, vedere Gestire i file CSS in Power Pages.

Nel determinare l'approccio alle modifiche allo stile del sito Web, considerare i seguenti fattori:

• Creare uno stile completo per l'intero sito e quindi sostituire il contenuto di un file CSS. Questo processo funziona bene se gli addetti alla progettazione possono assicurare la definizione di tutti gli elementi pertinenti. Questo approccio permette di creare stili controllati a livello centralizzato e a garantire la coerenza in tutto il sito Web.

• Ridefinire solo gli elementi che richiedono modifiche, ad esempio il colore e la dimensione del carattere. Creare e caricare il file CSS contenente solo quelle modifiche incrementali. Questo processo funziona bene se la struttura di destinazione è simile alla struttura inclusa nel modello selezionato e sono necessarie solo minime modifiche di stile. Questo approccio consente di applicare modifiche incrementali che gli sviluppatori possono annullare.

Applicazione di personalizzazioni ad aree specifiche del sito Web

È possibile aggiungere personalizzazioni a pagine o sezioni specifiche del sito Web aggiungendo un record File Web mediante l'app Power Pages Management con un file CSS allegato. È necessario specificare la pagina padre nel record File Web affinché gli stili vengano applicati alla pagina padre e a tutte le relative pagine discendenti. Questo approccio consente di creare sezioni completamente personalizzate del sito.

Personalizzazione di Bootstrap

Il modo standard per creare una versione personalizzata di Bootstrap è usando il sito ufficiale Bootstrap. Tuttavia, a seguito della popolarità di Bootstrap, ora esistono molti altri siti che permettono di eseguire la stessa operazione. Questi siti possono fornire un'interfaccia intuitiva per la personalizzazione di Bootstrap o versioni predefinite di Bootstrap da scaricare. Per altre informazioni, visitare il sito della personalizzazione ufficiale di Bootstrap.

Dopo aver personalizzato Bootstrap, vengono generati uno o più file da caricare come file Web. A meno che la finalità non sia di sostituire completamente gli stili originali, assicurarsi di non usare i file bootstrap.css, bootstrap.min.css, theme.css o theme.min.css negli URL parziali a causa del modo in cui Power Pages gestisce i file CSS.

CSS per modifiche semplici

Gli sviluppatori spesso trascurano CSS quando la pagina richiede solo modifiche di piccola entità, ad esempio nascondere un elemento o modificare i margini per adattarli a un'etichetta grande. Il framework Bootstrap costituisce la base dello stile nei siti Web Power Pages e definisce molti stili che controllano l'aspetto e il layout reattivo a più colonne. Ad esempio, per nascondere una colonna specifica e inviare un valore predefinito anziché raccogliere l'input dell'utente, è possibile usare Metadati modulo tabella per la colonna e quindi definire i parametri seguenti:

• Nel campo Etichetta inserire un unico spazio.

• Impostare Classe CSS su hide.

• Impostare il valore predefinito, se necessario.

Invece di usare JavaScript, è possibile eseguire questa attività usando solo la configurazione. L'uso di CSS, se possibile, è caratterizzato da alcuni vantaggi:

• CSS viene applicato al caricamento e pertanto è più veloce perché non è necessario attendere il completamento del caricamento del documento.

• CSS è sempre attivo e continua a essere applicato agli elementi rilevanti, anche se JavaScript modifica la struttura del documento e aggiunge o rimuove gli elementi.

• Per alcune attività correlate alla visibilità e al layout reattivo di un elemento, CSS è più semplice da usare rispetto a JavaScript e ciò comporta meno manutenzione e minore rischio di errori.