Definizione di un documento CSS3

October 28

Definizione di un documento CSS3


Un documento CSS3 è un foglio di stile CSS che specifica come le informazioni da un documento viene visualizzato HTML associati. La sua definizione include significativamente più funzionalità rispetto alle versioni precedenti CSS. Oltre alle funzioni grafiche aggiuntive, CSS3 permette di selezionare più tag HTML e di definire il modo in cui vengono visualizzati in una pagina Web. La struttura modulare del CSS3 permette un rilascio graduale di nuove caratteristiche, e consente di aggiornare i browser a tappe per supportare le ultime definizioni.

Scatole e ombre

CSS3 permette la creazione di scatole o altri elementi con angoli arrotondati e ombre. L'attributo "border-radius: 10px" arrotonda gli angoli di una scatola per un quarto di cerchio con un raggio di dieci pixel. L'attributo "box-shadow: 3px 3px 2px blu" crea un'ombra per la casella. L'ombra è spostata da 3 pixel verticali e tre pixel in orizzontale. Ha una sfocatura di 2 pixel e il colore blu. Lo stesso attributo, applicato al testo come "text-shadow 1px 1px rossa" darà un ombra rosso senza alcuna sfocatura spostato di 1 pixel.

transizioni

Un'altra caratteristica della definizione CSS3 è l'attributo "transizione". Permette l'animazione di un sito web grafico di transizione da un'immagine all'altra. Normalmente, quando un oggetto viene modificato, per esempio in risposta a un cursore bilico su di esso, il cambiamento è istantaneo. Con il passaggio attributo progettista può controllare il cambiamento. La sintassi "5s colore transizione facilità in 1s" significa che il colore dell'oggetto cambia dopo un ritardo di 1 secondo. Il cambiamento si verificherà più di 5 secondi e faciliterà-in, il che significa che il cambiamento inizia lentamente e accelerare. Le alternative sono la facilità-out, il che significa una finitura lenta; lineare, che significa un cambiamento costante e facilità, il che significa un avvio lento e finitura.

I selettori

I selettori consentono al progettista di applicare gli attributi di elementi selezionati. CSS comprende una vasta gamma di selettori nella sua definizione ma CSS3 aggiunge diverse nuove per determinare le caratteristiche di alcuni elementi di una serie. Questi sono i primi-figlio e last-child selettori. Ad esempio, la sintassi per colorare il primo elemento di una lista rossa, è "li: first-child {color: red;}", dove "li" è l'elemento per un elemento in un elenco. Questi selettori possono cambiare altri attributi, come centrare l'ultimo paragrafo di una pagina. La sintassi è "p: last-child {align: center}," dove p è l'elemento per parapraph.

Sfumature

Un'altra nuova caratteristica della definizione CSS3 è la possibilità di specificare i gradienti per i colori, piuttosto che sfondi monocolore. I progettisti precedentemente creato immagini con sfumature e le poste come sfondi. Con gradienti CSS3, è possibile specificare semplicemente due colori e li cambiano gradualmente da una all'altra nello sfondo della pagina Web. La sintassi "background: linear-gradient (giallo, bianco);" dà un gradiente orizzontale a partire con il giallo in alto e dissolvenza in bianco.