CSS

Da Skypedia.
Stub Questa voce  è solo un stub: contribuisci a migliorarla seguendo l'aiuto.

CSS è l'acronimo di Cascading Style Sheets e vengono utilizzati per impaginare una o più pagine web utilizzando delle regole condivise che vengono applicate agli elementi del DOM. Questi ultimi possono essere suddivisi per classi e ID creando così delle regole univoche o raggruppando degli elementi cono caratteristiche comuni.

Nella maggior parte dei casi è bene seguire delle regole di base per la creazione di una pagina web (chiamate normalmente regole di webdesign) o di un intero sito. I CSS, anche se adibiti alla definizione delle regole relative al posizionamento, alla dimensione e all'aspetto di un elemento, risultano essere fondamentali per molti aspetti della programmazione javascript.


Attribute selectors

Per selezionare degli elementi che sono caratterizzati da un dato attributo con valore possiamo utilizzare un selettore che richiama molto Xpath:

input[type="text"]

In questo modo possiamo selezionare un input di con type="text" (la classica input box).

Posizionare un elemento relativamente ad un contenitore

Per posizionare un dato elemento all'interno di un contenitore e associare la sua posizione alla pagina, con il normale flusso degli elementi block o inline, oppure in maniera assoluta in merito alla finestra esistono diverse possibilità offerte dal CSS. Bisogna creare il contenitore dell'elemento e un box all'interno

<div id="container">
   <div id="box"> </div>
</div>
#container {
  position: relative;
}

#box {
  position: absolute;
  top: 100px;
  left: 50px;
}

Con position: relative diciamo al browser di posizionare l'elemento in relazione a se stesso e al suo contenitore. In altre parole l'elemento è renderizzato nel normale flusso della pagina e poi viene posizionato in base ai valori specificati come top, right, bottom, left. Bisogna fare attenzione al fatto che gli altri elementi attorno a quello appena definito come relative non saranno spostati con lui

Position: absolute, invece, posiziona l'elemento relativamente al proprio contenitore. Di default l'elemento contenitore è la finestra del browser, ma se l'elemento genitore ha position relative o absolute allora questo calcolerà la propria posizione. L'elemento con absolute sarà posizionato in rapporto al suo div container solo se esso avrà una position property con un valore differente da 'static' (default).