Tag: selettori

Lezione 37: Costruiamo un template (Parte 7^)

Impariamo a costruire un sito Web

Lezione 37: Costruiamo un template (Parte 7^)

Terminato il menu ci occupiamo adesso del corpo della nostra pagina web. Il corpo che è tutto ciò che sta tra la header ed il footer (vedi l’immagine fornita a proposito alla lezione 31) lo includiamo in un blocco contenitore entro al quale inseriremo la sidebar ed il contenuto. Il codice html è:

<div class="ww_corpo_wrapper">
  <div class="ww_corpo_row">
    <div class="ww_corpo_cell ww_sidebar1"> ... </div>
    <div class="ww_corpo_cell ww_contenuto"> ... </div>
  </div>
</div>

Continua a leggere…

Lezione 36: Costruiamo un template (Parte 6^): Il Menu

Impariamo a costruire un sito Web

Lezione 36: Costruiamo un template (Parte 6^)

Terminiamo con questa lezione la costruzione del nostro menu. Continuiamo con le definizioni necessarie per stilizzare il secondo livello di menu.

Cominciamo con inserire nel CSS le caratteristiche della lista di secondo livello:

#nav ul {
  background: #edf2f6;
  display: none;
  margin: 0;
  padding: 0;
  width: 185px;
  position: absolute;
  top: 35px;
  left: 0;
  border: solid 1px #B4B4B4;
  border-radius: 3px;
  box-shadow: 0 1px 3px #B4B4B4;
}

 
Continua a leggere…

Lezione 35: Costruiamo un template (Parte 5^): Il Menu

Impariamo a costruire un sito Web

Lezione 35: Costruiamo un template (Parte 5^)

Continuiamo a costruire il nostro menu. Abbiamo inserito nel css la formattazione della barra del menu co l’id #nav. Adesso dobbiamo assegnare le proprietà alle voci di menu.

Innanzitutto vediamo quali dichiarazioni occorrono per le voci di menu del 1° livello (quello sulla barra del menu). Se ricordate nella lezione precedente avevamo scritto nella pagina html le voci di menu utilizzando il tag delle liste <ul>.
Continua a leggere…

Lezione 34: Costruiamo un template (Parte 4^): Il Menu

Impariamo a costruire un sito Web

Lezione 34: Costruiamo un template (Parte 4^)

Siamo quindi arrivati al punto più complesso del menu.

Quello che dovremo scrivere nella pagina html in realtà è piuttosto semplice. La parte complessa come sempre sarà quella di assegnare le proprietà adeguate perché il menu assuma l’aspetto che ci siamo prefissati.

Continua a leggere…

Lezione 33: Costruiamo un template (Parte 3^)

Impariamo a costruire un sito Web

Lezione 33: Costruiamo un template (Parte 3^).

Dopo aver esaminato la parte iniziale relativa allo sfondo, affrontiamo il contenuto vero e proprio della pagina (ricordiamo che facciamo riferimento alla pagina mostrata nelle immagini nella lez.31). Cominciamo ovviamente dalla testata e dal menu immediatamente successivo all’immagine di testata.

Alla fine della lezione precedente abbiamo proposto l’intelaiatura della nostra pagina con i commenti che ci dicono cosa andremo ad inserire nei vari blocchi. Vediamo dunque che tutti i blocchi di contenuto (header, menu, sidebar ecc.) sono stati racchiusi in un unico contenitore che abbiamo indicato così:

Continua a leggere…

Lezione 32: Costruiamo un template (Parte 2^)

Impariamo a costruire un sito Web

Lezione 32: Costruiamo un template (Parte 2^).

Cominciamo, prima di procedere all’esame dettagliato del css e della pagina html, a vedere come organizziamo le cartelle del nostro sito web sell’hard disk del nostro PC. La cartella principale noi la chiamiamo ‘esempio‘ e come sottocartelle creiamo ‘css‘ dove metteremo il/i fogli di stile e ‘images‘ dove metteremo le nostre immagini. Per il nostro sito di esempio non avremo bisogno d’altro, ma in situazione normale potrebbe esserci per esempio una sottocartella dedicata agli script javascript. Questa organizzazione non è naturalmente obbligatoria (potremmo buttare tutto nella directory principale), ma è quantomeno consigliabile per un’organizzazione ‘ordinata’ del nostro sito.

Continua a leggere…

Corso HTML e CSS (Lezione 16): I selettori CSS (Parte 4^)

Impariamo a costruire un sito Web

Lezione 16: CSS: Pseudo-elementi

 

Gli pseudo-elementi sono usati per aggiungere effetti ad alcuni selettori.

La sintassi è: selettore:pseudo-elemento {proprietà:valore;}

oppure

selettore.classe:pseudo-elemento {proprietà:valore;}

in quanto anche le classi CSS possono essere usate insieme ad un pseudo-elemento.

 

Continua a leggere…