Come definire gli stili con il selettore di tag in Dreamweaver

È possibile creare stili completamente nuovi in ​​Dreamweaver utilizzando i selettori di chiamata o ID, ma è anche possibile creare stili che modificano la formattazione dei tag HTML esistenti. Questi stili vengono creati utilizzando il selettore di tag, noto anche come selettore di elementi . Quando definisci uno stile utilizzando il selettore di tag, puoi modificare l'aspetto, la posizione e altre caratteristiche di qualsiasi tag HTML esistente.

Molti tag HTML includono già opzioni di formattazione. Ad esempio, i tag di intestazione includono la formattazione per lo stile del testo utilizzando un carattere grande in grassetto. Quando crei uno stile con un selettore di tag, devi considerare le opzioni di formattazione già associate a quel tag. Qualsiasi opzione definita verrà aggiunta alla formattazione esistente o sovrascriverà la formattazione.

Potresti chiedere: "Perché dovrei ridefinire il

tag invece di creare semplicemente un nuovo stile di titolo utilizzando il selettore di classe o ID?" Sebbene sia possibile definire un nuovo stile di classe invece di ridefinire un tag HTML, a volte è meglio utilizzare un tag HTML esistente.

Gli stili di intestazione sono particolarmente importanti sul Web perché il testo è formattato in modo an

tag è ben riconosciuto come il testo più importante in una pagina. Tra l'altro, testo formattato in an

tag può ottenere una considerazione speciale dai motori di ricerca.

Per creare uno stile che ridefinisca un tag HTML (come il

tag) con il selettore di tag, creare prima un file o aprirne uno esistente e quindi seguire questi passaggi:

1Nel pannello Selettori del pannello Designer CSS, selezionare il foglio di stile a cui si desidera aggiungere il nuovo stile.

Quando crei uno stile per un tag HTML esistente, non è necessario applicare lo stile stesso come fai con gli stili di classe e ID. Ovunque tu abbia utilizzato il tag HTML, vengono applicate le impostazioni di definizione dello stile.

2Se desideri indirizzare lo stile a uno specifico tipo di media o dimensione dello schermo, scegli o definisci una media query nel pannello @Media.

L'utilizzo di query multimediali con stili è facoltativo. Se non specifichi una media query, Dreamweaver utilizzerà la proprietà Global e il tuo stile funzionerà con tutti i formati multimediali e tutte le dimensioni dello schermo.

3Fare clic sul segno più (+) nel pannello Selettori.

Viene aggiunto un nuovo selettore al pannello Selettori.

Quando si fa clic sul segno più (+) per creare un nuovo selettore, possono verificarsi alcune cose, a seconda di ciò che è già presente nella pagina aperta in Dreamweaver. La prima volta che si crea uno stile in una pagina Web vuota, Dreamweaver inserisce il corpo nel pannello Selettori.

Se state lavorando su una pagina con testo o altro contenuto formattato con tag o stili HTML, Dreamweaver potrebbe aggiungere un selettore composto in base agli elementi che circondano ciò che avete selezionato con il cursore.

4Nel pannello Selettori, fare doppio clic sul nome del selettore. Inizia a inserire il nome del tag HTML, quindi seleziona il tag dall'elenco a discesa visualizzato.

Puoi inserire il nome di qualsiasi tag HTML per creare uno stile utilizzando il selettore di tag. Mentre digiti un tag HTML, viene visualizzato un elenco a discesa con i tag che iniziano con la stessa lettera che hai digitato. Selezionare il tag desiderato dall'elenco piuttosto che digitare l'intero nome del tag da soli è una buona pratica perché si evitano errori di battitura.

5Nel pannello Proprietà, specifica le impostazioni che desideri nella regola di stile.

Il carattere e il colore vengono applicati immediatamente al testo nella pagina formattata con il

etichetta.

Se vuoi essere in grado di utilizzare lo stesso tag HTML con una formattazione diversa in parti diverse della stessa pagina, puoi creare stili composti. Gli stili composti sono utili, ad esempio, se si desidera formattare il testo con il

tag per avere un aspetto diverso nella parte principale della pagina rispetto a una barra laterale.