![]() |
![]() |
|||
Sezione del telaio dedicata alla realizzazione e |
||||
![]() |
![]() |
|||
..:: CSS elemento div ::.. Un div è un contenitore molto versatile e quindi utilizzato per varie necessità nelle pagine web,dalla realizzazione di layout molto complessi, a box di qualunque misura, può essere invisibile o visibile tramite colori e grafica in base a ciò che si vuole realizzare Per lo style css possiamo utilizzare una classe class da richiamare dove serve nella pagina o il selettore id per un elemento unico, in entrambi i casi si può personalizzare per ogni esigenza, larghezza e altezza, bordi, sfondi, testo, ecc, inserire i parametri specifici per la posizione che deve occupare nella pagina e si può aggiungere lo scroll ![]() class , che si può richiamare su vari elementi di una pagina web,div, table, td e paragrafo, si utilizza il punto e un nome .mia_classe ovviamente sei parametri inseriti sono compatibili con i vari elementi, altrimenti si scrivono classi specifiche Per un identificatore unico id si utilizza il cancelletto e un nome #mio_id Classe "generica" che si può richiamare nel div e in altri elementi html
In base alle necessità si può aggiungere il parametro per lo sfondo, con un colore background-color: #******; Testo o un'immagine background-image: url('https://url immagine'); Testo ![]() padding-top padding-right padding-bottom padding-left * Si possono scrivere singolarmente o abbreviati
![]() e le proprietà - static - absolute - relative - fixed - sticky - con indicazionitramite "top, bottom, left, e right", tranne static che è una posizione di default Il parametro position: absolute; si utilizza per visualizzare un elemento in un punto specifico della pagina che manterrà la posizione ovvero non seguirà lo scroll
Il parametro position: relative; si visualizza in base alle impostazioni delle proprietà "top, bottom, left, e right" nel contenitore in cui viene inserito
Un esempio pratico con position: fixed; (bottom:0px; right:15px;) lo vedete con il bottone in basso a destra che permette di tornare velocemente su in alto alla pagina, è un'impostazione che consente di visualizzare un elemento fisso nella pagina, sempre nella stessa posizione anche quando si usa lo scroll, se vi può interessare leggete il tutorial Box fisso nella pagina Con il parametro position: sticky; si può visualizzare un elemento che rimane fisso dopo lo scroll della pagina, molto utile per link, info o messaggi
![]() specifici per la posizione dei contenitori e i box dei vari "spazi" che compongono il layout, vi consiglio una ricerca mirata in base alle vostre esigenze, ecco alcuni nomi da cui iniziare - float - clear - flex - grid - ![]() "auto e scroll" si aggiunge lo scroll,utile per box con contenuti corposi che occuperebbero troppo spazio nella pagina
* Classe con selettore id per uno specifico elemento div La classe con selettore id si può usare per un solo elemento della pagina, utili ad esempioper realizzare le parti specifiche di un layout, che avrà ovviamente un solo header, un body e un footer o anche per un particolare menu, o un box per le news Si possono inserire tutti i parametri descritti sopra, l'unica differenza è nel simbolo che lo definisce e nel tag di richiamo nella pagina Si può scrivere la classe con div#nome_classe o #nome_classe, io per abitudine e per non fare confusione con altri elementi e/o classi preferisco la prima versione
![]() celle, ecc, ma considerando che si possono utilizzare una sola volta nella pagina è preferibile scrivere classi "generiche" e utilizzare gli id dove è indispensabile Spero di essere stata chiara in tutti i passaggi ^_^ Vi auguro buon lavoro ma sopratutto buon divertimento! Ciao alla prossima^^ Penelope ♥
|
|
Scrivi qui per lasciare un saluto, una richiesta di aiuto, un suggerimento o una critica ^_^ |
H:
Buon Inverno
!
..:: Basi ::..
..:: html ::..
..:: Script page ::..
..:: Script gadget ::..
Accessori e gadget del telaio...
Spazio web...
Realizzare e gestire un sito web
nell'hosting free più famoso...
Materiale grafico
Gif, mini gif, pixel, immagini, png...
Tutto il materiale grafico che ti serve,
raccolto e messo a tua disposizione!
I vostri messaggi...
|
|
|