Framework CSS: Impromptu ed Effect
Cascading Styles (CSS) con tutto il suo logicola semplicità consente non solo di creare una soluzione di design spettacolare, ma anche di fornire agli elementi un'azione reale, per emulare l'esecuzione del codice reale.
Qualsiasi tag di markup HTML visuale -area rettangolare di una certa struttura e contenuto. L'elemento contiene le coordinate, le dimensioni, i rientri, i colori, i caratteri, i contorni, ecc. La cornice dell'elemento CSS specifica l'area che occupa, dall'interno del bordo alla larghezza indicata nella descrizione.
Descrizione Sintassi
L'area dell'elemento è data da coordinaterelativo all'angolo in alto a sinistra della pagina (a sinistra, in alto), alla dimensione orizzontale e verticale (larghezza, altezza). Tutti gli stili e le animazioni degli elementi sono eseguiti in coppia: "proprietà: valore".
La descrizione viene eseguita direttamente nel codice della pagina, nell'inserto dello stile o in un file separato, puntandolo con un link LINK. sintassi:
#name {property: value; proprietà: valore; proprietà: valore; ...}
o
.name {proprietà: valore; proprietà: valore; proprietà: valore; ...}
Il nome può anche essere p, body, html, table, td ..., cioè il nome del tag markup HTML. Puoi collegare una descrizione di stile direttamente sull'elemento.
Prima di fare le tue opzioniscrivere stili non fa male vedere come viene fatto su siti popolari, salvando il codice della pagina o premendo Ctrl-U per vederlo direttamente nel browser.
Parametri di base
La cornice CSS reale per l'elemento è rappresentatastile (stile bordo), colore (bordo-colore), larghezza (bordo-larghezza). Puoi tutti descrivere una proprietà - confine. È possibile descrivere indipendentemente ciascun bordo del riquadro (bordo superiore, bordo inferiore, bordo sinistro, bordo destro).
Il frame CSS è descritto dalle regole generali dei fogli di stile CSS:
confine: 3px;
border-color: rosso;
stile di bordo: doppio tratto tratteggiato a tinta unita.
Questa descrizione imposta la larghezza del frame su 3 pixel, il colore è rosso, lo stile dei lati: il lato superiore è doppio, il lato destro è tratteggiato, quello inferiore è solido, il lato sinistro è punteggiato.
border-width: 1px 2px 4px 8px;
border-color: blu;
stile di confine: punteggiato.
Qui, le dimensioni di ciascun lato sono anche mostrate in sequenza, partendo dall'alto, in senso orario, il colore è blu e lo stile è punteggiato.
border-color: blu rosso verde nero;
In questa descrizione, il colore di ciascun lato è indicato separatamente. La proprietà border può includere diversi parametri contemporaneamente e gli angoli del frame possono essere arrotondati:
bordo: 1px solido verde;
border-radius: 0px 4px 8px 12px;
-moz-border-radius: 0px 4px 8px 12px;
-webkit-border-radius: 0px 4px 8px 12px;
Come fare un frame in CSS dipendeConvenienza del visitatore, perché solitamente questo effetto di stile viene utilizzato per scopi tecnici: quando è importante mostrare esattamente il luogo o la dimensione dell'area sulla pagina.
Lo spessore del telaio e il suo scopo
Scegliendo lo spessore della cornice, puoi usare px, pt,em ..., ma nota che è sempre all'interno della regione dell'elemento. È difficile ipotizzare che il frame CSS abbia uno scopo progettuale, ma dal punto di vista tecnico è molto comodo utilizzarlo per selezionare elementi della pagina.
Se il frame è bloccato nella classe principale,manca, quindi specificandolo nella pseudo-classe: hover, è possibile mostrare al visitatore l'elemento della pagina quando il cursore del mouse è su di esso, ad esempio, selezionare la voce di menu. A volte è necessario selezionare qualcosa facendo clic su un'immagine o trascinare qualcosa da qualche parte. Qui è molto comodo usare una cornice punteggiata, piuttosto che modificare lo sfondo dell'elemento o del suo contenuto.
Alcune applicazioni richiedono l'evidenziazionearea della pagina o selezione di elementi per ulteriori elaborazioni. In questo caso, al momento del clic è possibile creare un div con una cornice e, finché il visitatore non rilascia il pulsante del mouse, ridimensionarlo, mostrando il risultato visivo della selezione.
Al di fuori del previsto
Le lezioni di CSS sono molto interessanti, anche lo studio dei codici di pagine di siti popolari è importante. Tuttavia, la sua risorsa deve essere unica, deve avere il suo volto.
La sintassi fornita dal frame CSS non viene fornitauna tale diversità come la tua iniziativa. Impromptu: un ottimo inizio e nulla impedisce allo sviluppatore di creare il proprio framework. Soprattutto con tutti i risultati delle tecnologie Internet e le capacità degli standard esistenti, ci sono molte idee promettenti basate su vere e proprie falle nella sintassi esistente, che (per definizione) è sempre stata rigorosamente formale.
In particolare, se crei davvero la struttura di quelli oaltri elementi, sembra opportuno farlo in un complesso. Evidenziando i lati e gli angoli di una determinata area in tag separati, puoi ottenere effetti sorprendenti. E assegnando i gestori appropriati, è possibile creare elementi di pagina dinamici modificando posizione, forma e contenuto.
