Cascading Styles (CSS) per tutta la sua logicala semplicità consente non solo di creare una soluzione progettuale efficace, ma anche di fornire elementi con azione reale, emulare l'esecuzione di codice reale.
Qualsiasi tag di markup HTML visivo -un'area rettangolare di struttura e contenuto specifici. L'elemento contiene l'indicazione di coordinate, dimensioni, rientri, colori, carattere, il suo stile, ecc. La cornice di un elemento CSS specifica l'area occupata da esso, essendo situata dal suo bordo verso l'interno della larghezza indicata nella descrizione.
Sintassi della descrizione
L'area di posizionamento degli elementi è impostata dalle coordinaterispetto all'angolo in alto a sinistra della pagina (sinistra, in alto), orizzontalmente e verticalmente (larghezza, altezza). Tutta la progettazione e l'animazione di un elemento vengono eseguite in coppia: "proprietà: valore".
La descrizione viene eseguita direttamente nel codice della pagina, sull'inserto di stile o in un file separato, puntando ad esso con un link LINK. Sintassi:
#name {proprietà: valore; valore della proprietà; valore della proprietà; ...}
o
.name {proprietà: valore; valore della proprietà; valore della proprietà; ...}
Il nome può anche essere p, body, html, table, td ..., ovvero il nome del tag di markup HTML. È consentito includere una descrizione dello stile direttamente sull'elemento.
Prima di fare le tue opzionistili di scrittura, non farà male vedere come è fatto su siti popolari salvando il codice della pagina o premendo Ctrl-U per visualizzarlo direttamente nel browser.
Parametri di base
Viene presentato il frame CSS effettivo per l'elementostile (stile bordo), colore (colore bordo), larghezza (larghezza bordo). Tutto può essere descritto con una proprietà: il confine. È possibile descrivere ogni bordo della cornice in modo indipendente (bordo superiore, bordo inferiore, bordo sinistro, bordo destro).
Il frame CSS è descritto secondo le regole generali dei fogli di stile a cascata:
bordo: 3px;
colore del bordo: rosso;
stile bordo: doppio tratteggiato solido punteggiato.
Questa descrizione imposta la larghezza del bordo a 3 pixel, il colore al rosso, lo stile del lato: lato superiore doppio, lato destro tratteggiato, fondo solido, lato sinistro tratteggiato.
larghezza del bordo: 1px 2px 4px 8px;
colore del bordo: blu;
stile bordo: punteggiato.
Anche qui le dimensioni di ciascun lato sono sequenziali, partendo dall'alto, in senso orario, il colore è blu e lo stile è punteggiato.
colore bordo: blu rosso verde nero;
questa descrizione indica il colore di ogni lato separatamente. La proprietà border può includere diversi parametri contemporaneamente e gli angoli del bordo possono essere arrotondati:
bordo: 1px verde solido;
border-radius: 0px 4px 8px 12px;
-moz-border-radius: 0px 4px 8px 12px;
-webkit-border-radius: 0px 4px 8px 12px;
Dipende da come creare il bordo in CSSla comodità del visitatore, poiché questo effetto di stile viene solitamente utilizzato per scopi tecnici: quando è importante mostrare esattamente il luogo o le dimensioni di un'area nella pagina.
Spessore e scopo del telaio
Quando scegli lo spessore della cornice, puoi usare px, pt,em ..., ma tieni presente che è sempre all'interno dell'area dell'elemento. È difficile presumere che un bordo CSS abbia uno scopo progettuale, ma da un punto di vista tecnico è molto comodo da usare per evidenziare gli elementi della pagina.
Se il frame è bloccato nella classe principale, alloraè mancante, quindi specificandolo nella pseudo-classe: hover, è possibile mostrare l'elemento della pagina al visitatore quando il cursore del mouse si trova su di esso, ad esempio selezionare una voce di menu. A volte è necessario selezionare qualcosa facendo clic sull'immagine o trascinare qualcosa da qualche parte. È molto comodo usare un bordo tratteggiato qui piuttosto che cambiare lo sfondo di un elemento o il suo contenuto.
Alcune applicazioni devono essere evidenziatearea della pagina o selezione di articoli per ulteriori elaborazioni. In questo caso, al momento del clic, è possibile creare un div con un frame e, fino a quando il visitatore non rilascia il pulsante del mouse, ridimensionarlo, mostrando visivamente il risultato della selezione.
Oltre il previsto
Le lezioni CSS sono molto interessanti, è importante anche studiare i codici delle pagine dei siti popolari. Tuttavia, la propria risorsa deve essere unica, deve avere una propria identità.
Il bordo CSS fornito dalla sintassi non forniscetale diversità come iniziativa propria. Impromptu è un ottimo inizio e nulla impedisce a uno sviluppatore di creare il proprio framework. Inoltre, con tutti i risultati delle tecnologie Internet e le capacità degli standard esistenti, ci sono molte idee promettenti basate su vere falle nella sintassi esistente, che (per definizione) è sempre stata strettamente formale.
In particolare, se crei davvero un framework per quelli oaltri elementi, sembra opportuno farlo in modo completo. Etichettando i lati e gli angoli di un'area, puoi ottenere effetti sorprendenti. Inoltre, assegnando gestori appropriati, puoi creare elementi di pagina dinamici modificando posizione, forma e contenuto.
