Archivi tag: interno

CSS3 Base – 2.6 – Applicare uno stile incorporato 

CSS3 Base, , , , , ,

In questa lezione vi insegno ad applicare uno stile incorporato nella pagina.

CSS incorporati

Un foglio di stile incorporato è un CSS che fa parte di una pagina web e vale solo per tale pagina.

All’interno del tag <head> inserite il tag <style>, che conterrà il codice CSS:

CSS Incorporato
CSS Incorporato

Tale codice avrà selettori in grado di individuare gli elementi HTML contenuti all’interno della pagina corrente, per poter modificare la loro formattazione.

Il CSS incorporato può essere poi arricchito da stili in linea.

Nell’immagine di esempio ho assegnato il colore blu a tutti i paragrafi della pagina: come faccio a colorarne uno di nero?

Applico uno stile in linea sul tag HTML proprio di quel determinato paragrafo:

<p style=" color:black "> testo del paragrafo </p>

Lo stile del CSS in linea è più specifica del CSS incorporato, perciò avrà la meglio.

Video

CSS3 Base – 2.5 – Applicare uno stile in linea

CSS3 Base, , , , , ,

In questa lezione vi mostro come si applica uno stile interno alla pagina, in particolare uno stile in linea.

CSS in linea

Lo stile in linea, come indica il nome, viene inserito in linea col codice HTML, cioè direttamente nel tag dell’elemento a cui viene applicato.

CSS In linea
CSS In linea

L’inserimento avviene con l’attributo style, che determina lo stile per quel determinato tag.

Il valore dell’attributo style sarà poi il blocco delle dichiarazioni CSS.

Esempio:

<p style=" color:blue "> testo del paragrafo </p>

In questo esempio, il CSS è inserito nel tag del paragrafo e la dichiarazione

color:blue

modifica il colore del testo solo per quel determinato elemento: gli eventuali altri paragrafi della pagina non vengono alterati.

Ecco il vantaggio di questo tipo di CSS: applica lo stile solo dove serve.

Ovviamente, se avessimo 10 paragrafi nella pagina e li volessimo tutti di colore blu, lo stile in linea sarebbe troppo macchinoso da applicare e scomodo in caso di aggiornamenti (ad esempio cambiare il colore in futuro): ecco perché esistono altri modi per inserire lo stile.

Il CSS in linea è utile quando volete applicarlo a pochi elementi, senza interferire con gli altri.

Video

HTML5 Base – 4.5 – Collegamenti interni

HTML5 Base, , , , , ,

In questa lezione vi illustro come funzionano i collegamenti interni ad una pagina web.

I link interni

Non tutti i collegamenti del tag <a> puntano necessariamente ad un’altra pagina: esistono dei casi in cui avete bisogno di rimanere nella stessa pagina in cui siete ma spostandovi verso l’alto o verso il basso, in un punto preciso.

Per fare questo, si inserisce nel codice in corrispondenza della destinazione, ovvero nel punto in cui volete fissare la visualizzazione della pagina, un punto di ancoraggio.

Il punto di ancoraggio si inserisce sempre usando il tag <a>, ma in modo diverso:

<a name="nome">

L’attributo name indica il nome della vostra ancora: inizio, fine, articolo1, ecc.

Il passo successivo è quello di dire al collegamento che non vogliamo uscire verso un’altra pagina, ma vogliamo raggiungere l’ancora posizionata dentro questa.

<a href="#nome">testo del collegamento</a>

Video