501 Shares 8346 views

CSS Framework: Impromptu ed Effetto

Gli stili di cascata (CSS) per tutta la sua semplicità logica consentono non solo di creare una soluzione di progettazione efficace, ma anche di fornire elementi con un'azione reale, per emulare l'esecuzione del codice reale.

Qualsiasi tag visuale del markup HTML è un'area rettangolare di una struttura e un contenuto specifici. L'elemento contiene l'indicazione delle coordinate, delle dimensioni, dei rientri, dei colori, del carattere, dei suoi contorni, ecc. La struttura dell'elemento CSS specifica l'area occupata da essa, situata dal suo bordo verso l'interno, alla larghezza indicata nella descrizione.

Descrizione Sintassi

La posizione dell'elemento è specificata dalle coordinate relative all'angolo superiore sinistro della pagina (a sinistra, in alto), alla dimensione orizzontale e verticale (larghezza, altezza). Tutto il design e l'animazione dell'elemento vengono eseguiti in coppie: "property: value".

La descrizione viene eseguita direttamente nel codice di pagina, nell'inserto stile o in un file separato, indicandolo con il collegamento LINK. sintassi:

#name {property: valore; Proprietà: valore; Proprietà: valore; …}

o

.name {property: valore; Proprietà: valore; Proprietà: valore; …}

Il nome può anche essere p, corpo, html, tabella, td …, cioè il nome del tag HTML markup. È consentito collegare direttamente la descrizione dello stile all'elemento.

Prima di apportare le proprie variazioni allo stile di scrittura, non fa male a vedere come è stato fatto nei siti popolari, salvando il codice della pagina o premendo Ctrl-U per visualizzarlo direttamente nel browser.

Parametri di base

Il frame effettivo CSS per l'elemento è rappresentato dallo stile ( stile di bordo), dal colore (bordo-colore), dalla larghezza (larghezza di bordo). Potete descrivere tutto per una proprietà – bordo. È possibile descrivere in modo indipendente ciascun bordo del fotogramma (bordo superiore, bordo inferiore, bordo a sinistra, bordo destro).

Il framework CSS è descritto dalle regole generali dei fogli di stile a cascata:

Bordo: 3px;
Bordo-colore: rosso;
Border-style: doppio tratteggiato punteggiato punteggiato.

Questa descrizione imposta la larghezza del telaio a 3 pixel, il colore è rosso, lo stile laterale: il lato superiore è doppio, il lato destro è tratteggiato, il fondo è solido, la sinistra è quello punteggiato.

Larghezza del bordo: 1px 2px 4px 8px;
Bordo-colore: blu;
Border-style: punteggiato.

Qui vengono illustrate anche le dimensioni di ciascun lato in sequenza, a partire dall'alto, in senso orario, il colore è blu e lo stile è punteggiato.

Bordo-colore: blu rosso verde nero;

In questa descrizione, il colore di ciascun lato è indicato separatamente. La proprietà di confine può includere più parametri contemporaneamente e gli angoli del bordo possono essere arrotondati:

Bordo: 1px solido verde;
Raggio di frontiera: 0px 4px 8px 12px;
-moz-bound-radius: 0px 4px 8px 12px;
-webkit-border-radius: 0px 4px 8px 12px;

Da come creare un fotogramma in CSS, dipende la comodità del visitatore, poiché di solito questo effetto di stile viene utilizzato per scopi tecnici: quando è importante mostrare esattamente il luogo o la dimensione dell'area nella pagina.

Lo spessore del telaio e il suo scopo

Scegliendo lo spessore del telaio, è possibile utilizzare px, pt, em …, ma è necessario tenere presente che è sempre all'interno della regione dell'elemento. È difficile immaginare che il framework CSS abbia un scopo di progettazione, ma tecnicamente è molto conveniente utilizzarlo per evidenziare gli elementi della pagina.

Se il fotogramma è bloccato nella classe principale, vale a dire che manca, quindi, indirizzandolo nella pseudo-classe: hover, puoi mostrare al visitatore l'elemento della pagina quando il cursore del mouse è sopra, ad esempio, selezionare la voce di menu. A volte è necessario selezionare qualcosa cliccando sull'immagine, o trascinate qualcosa da qualche parte. È molto conveniente utilizzare un telaio punteggiato e non cambiare lo sfondo dell'elemento o del suo contenuto.

Alcune applicazioni devono selezionare una regione di pagina o selezionare elementi per l'elaborazione successiva. In questo caso, è possibile creare un div con il frame al momento del clic e fino a quando il visitatore rilascia il pulsante del mouse, ridimensionarlo, mostrando visivamente il risultato della selezione.

Fuori del previsto

Le lezioni di CSS sono molto interessanti, ed è anche importante ricercare codici pagine popolari. Tuttavia, la risorsa propria deve essere unica, deve avere il proprio volto.

Il framework CSS fornito dalla sintassi non offre altrettanto varietà quanto la propria iniziativa. Impromptu è un grande inizio e nulla impedisce allo sviluppatore di formare la propria struttura. Soprattutto con tutti i risultati delle tecnologie Internet e le capacità degli standard esistenti, ci sono molte idee promettenti basate su difetti reali nella sintassi esistente, che (per definizione) è sempre stata strettamente formale.

In particolare, se vogliamo creare il quadro di questi o altri elementi, sembra ragionevole farlo in modo globale. Sottolineando i lati e gli angoli di una determinata area in tag separati, puoi ottenere effetti straordinari. E assegnando i gestori appropriati, è possibile creare elementi di pagina dinamici modificando la posizione, la forma e il contenuto.