Scarica Riassunto HTML&CSS e più Appunti in PDF di Elementi di Informatica solo su Docsity!
Css Ci sono molti diversi tipi di selettore CSS che consentono di indirizzare le regole a elementi specifici in un documento HTML.
Universal Si applica a tutti gli elementi del documento
Type Corrisponde al nome degli elementi h1, h2, h Class Cossrisponde a un elemento il cui class ha il valore che corrisponde a quello specificato dopo il .(punto)
.list (esempio) .menu
Id Corrisponde a un elemento il cui attributo id ha un valore che corrisponde a quello specificato dopo #
#list #menu
Child Corrisponde a un elemento che è figlio diretto di un altro
li> a {} Obiettivi elementi che sono figli di un elemento (ma non di altri elementi nella pagina)
Descendant Corrisponde ad un elemento che è discendente di un altro elemento specificato (non solo figlio diretto di quell’elemento)
p {} un target elementi che si trovano all'interno di un elemento
, anche se ci sono altri elementi annidati tra loro
Adiacent Sibling Corrisponde a un elemento che è il prossimo fratello di un altro
h1 + p {} gli obiettivi del primo elemento
dopo ogni elemento
(ma non altri
elementi)
General Sibling Corrisponde a un elemento che è fratello di un altro, anche se non deve essere l’elemento immediatamente precedente
h1 ~ p {} Se tu avessi due
elementi che sono fratelli di un elemento
, questa regola si applica a entrambi
Eretità Se si specificano le proprietà font-family o color su l'elemento si applicano anche alla maggior parte degli elementi figlio. Questo perché il valore della proprietà font-family viene ereditata da elementi figli. E si evita di dover applicare queste proprietà per il maggior numero di elementi (e risultati nei fogli di stile più semplici). Invece le proprietà background-color o border non sono ereditate da elementi figli. Se questi sono stati ereditati da tutti gli elementi figlio allora la pagina potrebbe apparire piuttosto confusa. Color La proprietà del colore consente di specificare il colore del testo all'interno di un elemento. È possibile specificare qualsiasi colore nei CSS in uno dei tre modi:
- Con il metoro RGB. Per esempio p { Color: rgb (100, 100, 90); }
- Con i codici esadecimali. Per esempio p { color: #00000; }
- Con i nomi dei colori. Ci sono 147 nomi di colori predefiniti che sono riconosciuti dai browser. Per esempio: DarkCyan. Background-color La proprietà background-color imposta il colore dello sfondo del box. È possibile specificare la vostra scelta del colore di sfondo negli stessi tre modi in cui è possibile specificare colori di primo piano: valori RGB, codici esadecimali, e nomi dei colori (coperto nella pagina successiva). Se non si specifica un colore di sfondo, poi lo sfondo è trasparente. Per impostazione predefinita, la maggior parte delle finestre del browser hanno uno sfondo bianco, ma gli utenti del browser possono impostare un colore di sfondo per le loro finestre, quindi se si vuole essere sicuri che lo sfondo è bianco è possibile utilizzare la proprietà background-color sull'elemento . Contrasto Basso. Il testo è più difficile da leggere quando c'è basso contrasto tra sfondo e colore di primo piano. La mancanza di contrasto è particolarmente un problema per le persone con disabilità visive e la cecità di colore. Colpisce anche quelli con monitor poveri e la luce del sole sui loro schermi (che è sempre più comune come le persone utilizzano dispositivi palmari all'aperto). Alto. Il testo è più facile da leggere quando c'è maggiore contrasto tra sfondo e colore di primo piano. Se si desidera che le persone leggano un sacco di testo sulla pagina, però, troppo contrasto può rendere più difficile la lettura. Medio. Per lunghi campate di testo, riducendo il contrasto un po 'migliora la leggibilità. È possibile ridurre il contrasto utilizzando il testo di colore grigio scuro su uno sfondo bianco o di un testo bianco sporco su uno sfondo scuro. Opacità CSS3 introduce la proprietà di opacità, che consente di specificare l'opacità di un elemento e uno dei suoi elementi secondari. Il valore è un numero compreso tra 0,0 e 1,0 (quindi un valore di 0,5 è opacità 50% e 0,15 è del 15% di opacità). La proprietà CSS3 RGBA consente di specificare un colore, proprio come si farebbe con un valore RGB, ma aggiunge un quarto valore per indicare l'opacità. Questo valore è noto come valore alfa ed è un numero compreso tra 0,0 e 1, (quindi un valore di 0,5 è opacità 50% e 0,15 è del 15% di opacità). Il valore RGBA interesserà solo l'elemento su cui è applicato (non elementi secondari). Poiché alcuni browser non riconosceranno i colori RGBA, si può offrire un ripiego in modo che essi mostrano un colore solido. Se ci sono due regole che si applicano allo stesso elemento, quest'ultimo dei due avrà la priorità. Per creare il fallback, è possibile specificare un colore come un codice esadecimale, nome del colore o il valore RGB, seguita dalla regola che specifica un valore RGBA. Se il browser riconosce i colori RGBA userà questa regola. In caso contrario, verrà utilizzato il valore RGB. HSL e HSLA La proprietà di colore HSL è stato introdotto in CSS3 come un modo alternativo per specificare i colori. Il valore della proprietà inizia con le lettere HSL, seguiti da valori individuali all'interno delle parentesi per: Hue Questa è espressa in un angolo (tra 0 e 360 gradi). saturazione Ciò è espresso in percentuale. leggerezza Questo viene espresso in percentuale con 0% essendo bianco, 50% è normale, e il 100% è nero.
Font Squirrel fornisce anche con il codice CSS per la regola @ font-face. Questo è molto utile perché, quando hai a che fare con diversi formati di font, le proprietà src e il formato del regola @ font-face possono ottenere piuttosto complicato. I vari formati di font dovrebbero apparire nel codice in questo ordine:
- 1: eot
- 2: woff
- 3: ttf/otf
- 4: svg Font-weight La proprietà font-weight consente di creare testo in grassetto. Ci sono due valori che questa struttura prende comunemente:
- Normal. Questo fa sì che il testo appaia ad un peso normale.
- Bold. Questo fa sì che il testo appaia in grassetto. Font-style Se si desidera creare testo in corsivo, è possibile utilizzare la proprietà font-style. Ci sono tre valori questa proprietà può assumere:
- Normal. Questo fa sì che il testo appaia in uno stile normale (al contrario di corsivo o obliquo).
- Italic. Questo fa sì che il testo appaia in corsivo.
- Oblique. Questo fa sì che il testo appaia obliquo. Text-transform La proprietà text-transform è utilizzata per modificare il caso di testo dandogli uno dei seguenti valori:
- Uppercase. Questo fa sì che il testo da visualizzare in maiuscolo.
- Lowercase. Questo fa sì che il testo da visualizzare in minuscolo.
- Capitalize. Questo fa sì che la prima lettera di ogni parola ad apparire in maiuscolo. Text-decoration La proprietà text-decoration permette di specificare i seguenti valori:
- None. Ciò elimina qualsiasi decorazione già applicato al testo.
- Underline. questo si aggiunge una linea sotto il testo.
- Overline. Questo aggiunge una linea sopra la parte superiore del testo.
- Line-through. Questo aggiunge una linea attraverso le parole.
- Blink. Questo anima il testo per renderlo lampeggiare (ma questo è generalmente malvista, in quanto è considerato piuttosto fastidioso). Line-heigth
In CSS, la proprietà line-height imposta l'altezza di un'intera riga di testo, quindi l’interlina del testo. Aumentando la line-height rende il divario verticale tra le righe di testo più grande.
Letter-spacing , Word-spacing La crenatura è il tipografi termine utilizzare per lo spazio tra ogni lettera. È possibile controllare lo spazio tra ogni lettera con la proprietà letter-spacing. E 'particolarmente utile per aumentare la crenatura quando la vostra voce o frase è tutto in maiuscolo. Se il testo è in frase (o normale) caso, aumentando o diminuendo la crenatura può rendere più difficile da leggere. È inoltre possibile controllare il divario tra le parole utilizzando la proprietà word-spacing. Quando si specifica un valore per queste proprietà, dovrebbe essere dato in em, e sarà aggiunto in cima al valore di default specificato dal tipo di carattere. Il divario tra le parole di default è impostato dal carattere (spesso intorno 0.25em), ed è improbabile che si avrebbe bisogno di cambiare questa proprietà regolarmente. Se il tipo di carattere è in grassetto o si è aumentato lo spazio tra le lettere, poi un divario più ampio tra le parole può aumentare la leggibilità. Text-align La proprietà text-align permette di controllare l'allineamento del testo. La proprietà può assumere uno dei quattro valori:
- Left. Questo indica che il testo dovrebbe essere allineato a sinistra.
- Rigth. Questo indica che il testo dovrebbe essere allineato a destra.
- Center. Ciò consente di centrare il testo.
- Justify. Questo indica che ogni riga di un paragrafo, tranne l'ultima riga, deve essere impostato a prendere l'intera larghezza della scatola contenente. Vertical-align La proprietà vertical-align è una fonte comune di confusione. Esso non è destinato a consentire di allineare verticalmente il testo nel mezzo di elementi a livello di blocco, come
e
, anche se ha questo effetto quando viene utilizzato con celle di tabella (il e elementi). E 'più comunemente usato con elementi in linea come , o elementi. Quando viene utilizzato con questi elementi, esegue un compito molto simile a l'attributo align HTML utilizzato sul l'elemento , che hai incontrato nelle pagine 103-106. I valori che può assumere sono: - baseline
- sub
- super
- top
- text-top
- middle
- bottom
- text-bottom
:active. Questa viene applicata quando un elemento viene attivato da un utente; per esempio, quando un tasto viene premuto o un collegamento di essere cliccato. A volte questo è usato per fare un pulsante o un collegamento sentono più come esso viene premuto modificando lo stile o posizione dell'elemento leggermente. :focus. Questo si applica quando un elemento è messa a fuoco. Ogni elemento che è possibile interagire con, ad esempio un collegamento si può cliccare su o qualsiasi controllo di modulo può avere attenzione. Focus si verifica quando un browser scopre che si è pronti a interagire con un elemento della pagina. Ad esempio, quando il cursore si trova in un ingresso e pronto ad accettare la digitazione, quell'elemento si dice che abbia messa a fuoco. È altresì possibile utilizzare il tasto TAB della tastiera per spostarsi tra gli elementi interattivi su una pagina. Quando si utilizzano pseudo-classi, che dovrebbero apparire in questo ordine:
- : link
- :visited
- :hover
- :focus
- :active Width e Heigth Per impostare le dimensioni di un Box si usano le proprietà width e heigth. I modi più usati per specificare le dimensioni di un Box sono da utilizzare pixel, percentuali, o SME.
- Tradizionalmente, i pixel sono stati il metodo più popolari perché consentono ai progettisti di controllare con precisione la loro dimensione.
- Quando si utilizza percentuali, la dimensione della scatola è relativo alla dimensione della finestra del browser o, se la casella è racchiuso all'interno di un altro contenitore, si tratta di una percentuale delle dimensioni della scatola contenente.
- Quando si utilizza lo SME, la dimensione della casella si basa sulla dimensione del testo all'interno di esso. I progettisti hanno recentemente iniziato ad utilizzare percentuali e SME di più per le misurazioni, nel cercare di creare disegni che sono flessibili su tutti i dispositivi che hanno schermi di diverse dimensioni. Min-Width e Max Width Alcune pagine si espandono e si restringono per adattarsi alle dimensioni dello schermo dell'utente. Qui le proprietà min-width specifica la dimensione più piccola di una scatola può essere visualizzata quando la finestra del browser è stretta, e la proprietà max-width indica la larghezza massima di un box può allungare a quando la finestra del browser è ampia. Questi sono molto utili proprietà al fine di garantire che il contenuto delle pagine siano leggibili (soprattutto sui piccoli schermi dei dispositivi palmari). Ad esempio, è possibile utilizzare la proprietà max-width per garantire che le righe di testo non appaiono troppo ampia all'interno di una grande finestra del browser ed è possibile utilizzare la proprietà min-width per fare in modo che essi non appaiono troppo stretto. Lo stesso vale per min-height e max-height. Overflow La proprietà overflow dice al browser che cosa fare se il contenuto presente all'interno di un box è più grande del box stesso. Può avere uno dei due valori:
- Hidden. Questa struttura nasconde semplicemente qualsiasi contenuto aggiuntivo che non rientra nella scatola.
- Scoll. Questa struttura aggiunge una barra di scorrimento alla casella in modo che gli utenti possono scorrere per vedere il contenuto mancante. Border Ogni scatola ha un bordo (anche se non è visibile o è specificato per essere largo 0 pixel). Il confine separa il bordo di una scatola da un altro. Margin I margini stanno fuori dal bordo. È possibile impostare la larghezza di un margine per creare un divario tra i confini di due caselle adiacenti. Padding Padding è lo spazio tra il bordo di una scatola e contenuti in esso contenute. L'aggiunta di imbottitura può aumentare la leggibilità dei suoi contenuti. Border-width La proprietà border-width è utilizzato per controllare la larghezza di un bordo. Il valore di questa proprietà può essere somministrato in pixel o utilizzando uno dei seguenti valori: thin – medium – thick. (Non è possibile usare le percentuali con questa proprietà.) È possibile controllare la dimensione individuale delle frontiere utilizzando quattro proprietà separate:
- border-top-width
- border-right-width
- border-bottom-width
- border-left-width È anche possibile specificare larghezze diverse per i quattro valori di confine in una proprietà, in questo modo: border-width: 1px 1px 2px 2px; (I valori qui vengono visualizzati in senso orario: in alto, a destra, in basso, a sinistra.) Border-style È possibile controllare lo stile di un bordo utilizzando la proprietà border-style. Questa proprietà può assumere i seguenti valori:
- Solid. Un'unica linea continua
- Dotted. (punteggiatura) Una serie di puntini quadrati (se il confine è 2px larga, poi i punti sono 2px squadrate con un gap 2px tra ogni punto)
- Dashed. (tratteggiato) una serie di linee brevi
- Duble. Due linee continue (il valore della proprietà border-width crea la somma delle due linee)
- Grove. (scanalatura) sembra essere scolpito nella pagina
- Ridge (cresta) sembra sporgere dalla pagina
- Inset (inserto) appare incorporato nella pagina
- Outset(inizio) sembra che è venuta fuori dallo schermo
- hidden / none viene mostrato nessun bordo È possibile modificare singolarmente gli stili dei diversi confini usando:
È inoltre possibile utilizzare la scorciatoia (dove i valori sono in senso orario: in alto, a destra, in basso, a sinistra): margin: 1px 2px 3px 4px; Centrare il contenuto Se si vuole centrare il contenuto di un box nella pagina, bisogna utilizzare la funzione left-margin:auto e right- margin:auto. Gli elementi all’interno del box dovrebbero avere la proprietà text-align con il valore impostato al center. La proprietà text-align viene ereditata da elementi figli. È quindi anche necessario specificare la proprietà text-align sul box centrato se non si desidera che il testo al suo interno per essere centrato. Display La proprietà del display consente di attivare un elemento inline in un elemento a livello di blocco o viceversa, e può anche essere utilizzato per nascondere un elemento della pagina. I valori di questa proprietà può assumere sono:
- Inline. Questo fa sì che un elemento a livello di blocco di agire come un elemento inline.
- Block. Questo fa sì che un elemento in linea di agire come un elemento a livello di blocco.
- inline-block. Questo fa sì che un elemento a livello di blocco a scorrere come un elemento inline, pur mantenendo le altre caratteristiche di un elemento a livello di blocco.
- None. Questa nasconde un elemento dalla pagina. In questo caso, l'elemento si comporta come se non è sulla pagina a tutti (anche se un utente potrebbe ancora vedere il contenuto della scatola se hanno usato l'opzione visualizza sorgente nel browser). Visibility La proprietà di visibilità permette di nascondere i box da parte degli utenti, ma lascia uno spazio in cui l'elemento sarebbe stato. Questa proprietà può assumere due valori:
- Hidden.Questo nasconde l'elemento.
- Visible. Questo mostra l'elemento. Se la visibilità di un elemento è impostato su hidden , uno spazio vuoto apparirà al suo posto. Box-shadow La proprietà box-shadow permette di aggiungere un'ombra intorno a una scatola. Si deve utilizzare almeno il primo di questi due valori, nonché un colore:
- Horizontal Offset. Valori in negativi per inserire l'ombra alla sinistra della casella.
- Vertical Offset. Valori in negativi per inserire l'ombra alla parte superiore della scatola.
- Blur Distance. Se omesso, l'ombra è una linea continua come un confine.
- Spread of shadow. Se utilizzato, un valore positivo farà sì che l'ombra di espandersi in tutte le direzioni, e un valore negativo renderà contratto. La parola chiave inset può essere utilizzato anche prima di questi valori per creare un inner-shadow. Border-radius
CSS3 introduce la possibilità di creare angoli arrotondati su ogni scatola, utilizzando una proprietà chiamata border- radius. Il valore indica la dimensione del raggio in pixel. È possibile specificare i valori individuali per ogni angolo di una scatola con:
- border-top-right-radius
- border-bottom-right-radius
- border-bottom-left-radius
- border-top-left-radius È inoltre possibile utilizzare una scorciatoia di queste quattro proprietà (in senso orario: in alto, a destra, in basso, a sinistra). Per esempio: border-radius: 5px, 10px, 5px, 10px; Per creare forme più complesse, è possibile specificare distanze diverse per l'orizzontale e le parti verticali degli angoli arrotondati.
List-style-type La proprietà list-style-type consente di controllare la forma del marcatore. Può essere utilizzato su regole che si applicano agli elementi , e . Per una lista non ordinata è possibile utilizzare i seguenti valori: none / disc / circle / square. Per un elenco ordinato, è ossibile usare i seguenti valori: decimal (1 2 3)/ decimal-leading-zero (01 02 03)/ lower- alpha (a b c) / upepr-alpha (A B C) / lower-roman (i. ii. iii.) / upper-roman (I II II). List-style-image È possibile specificare un'immagine di agire come un marcatore utilizzando la proprietà list-style-image. Il valore inizia con le lettere URL ed è seguito da una coppia di parentesi. All'interno delle parentesi, il percorso per l'immagine viene data all'interno di doppi apici. Questa proprietà può essere utilizzato sulle regole che si applicano ai e elementi. List-style-position Le liste sono rientrati nella pagina di default e la proprietà list-style-position indica se il marcatore dovrebbe comparire all'interno o all'esterno della scatola contenente i punti principali. Questa proprietà può assumere uno dei due valori:
- Outside. Il marcatore siede alla sinistra del blocco di testo. (Questo è il comportamento di default se questa proprietà non viene utilizzata.)
- Inside. Il marcatore si trova all'interno della casella di testo (che è rientrato). Hai già incontrato diverse proprietà che sono comunemente utilizzate con le tabelle. Qui li metteremo insieme in un solo esempio utilizzando la seguente:
- Width. Per impostare la larghezza della tabella
- Padding. Per impostare lo spazio tra il bordo di ogni cella e il suo contenuto
- Text-transform. Per convertire il contenuto delle intestazioni di tabella in maiuscolo
- Letter-spacing, font-size. Per aggiungere styling aggiuntivi per il contenuto delle intestazioni di tabella
- : focus. È una pseudo-classe viene utilizzata per modificare il colore di sfondo il metodo di scrittura quando viene utilizzato, e: hover pseudo-classe si applica gli stessi stili quando l'utente passa sopra di loro.
- background-image: aggiunge un'immagine di sfondo per la casella. Poiché vi è un'immagine diversa per ciascun ingresso, stiamo usando un selettore di attributo cercando il valore dell'attributo id su ogni ingresso. Proprietà usate per modificare gli input del bottone di invio (submit buttons):
- Color. Viene utilizzato per modificare il colore del testo sul pulsante.
- Text-shadow. può dare un aspetto 3D al testo nei browser che supportano questa proprietà.
- Border-bottom. è stato utilizzato per rendere il bordo inferiore del pulsante leggermente più spessa, che gli conferisce un aspetto più 3D.
- Background-color. può rendere il pulsante di invio si distinguono da altri oggetti che lo circondano.
- : hover. È una pseudo-classe è stato utilizzato per modificare l'aspetto del pulsante quando l'utente passa sopra di esso. In questo caso, lo sfondo cambia, il testo diventa più scuro, e il bordo più spesso viene applicata alla parte superiore del pulsante. Fieldsets sono particolarmente utili per determinare i bordi di una forma. In un lungo modulo possono aiutare gruppo informazioni insieme relative al suo interno. La l egend è utilizzata per indicare le informazioni richieste nel fieldset.
Proprietà comunemente usati con questi due elementi sono:
- Width. viene utilizzato per controllare la larghezza del fieldset. In questo esempio, la larghezza del fieldset costringe gli elementi del modulo per avvolgere su una nuova riga nella posizione corretta. (Se fosse più ampio, le voci potrebbero sedersi su una sola riga.)
- Color. è usato per controllare il colore del testo.
- Background-color. viene utilizzata per modificare il colore dietro questi articoli.
- Border. viene utilizzato per controllare l'aspetto del bordo attorno fieldset e / o legenda.
- Border-radius. viene utilizzato per ammorbidire i bordi di questi elementi nei browser che supportano questa proprietà.
- Padding. può essere usato per aggiungere spazio all'interno di questi elementi. La proprietà cursor consente di controllare il tipo di cursore del mouse che dovrebbe essere visualizzato per gli utenti. Ad esempio, su un modulo è possibile impostare il cursore su una mano quando l'utente passa sopra di esso. Ecco i valori più comunemente utilizzati per questa struttura:
- Auto
- Crosshair
- Default
- Pointer
- Move Text
Wait Help url("cursor.gif") Si consiglia di utilizzare solo questi valori per aggiungere informazioni utili per gli utenti in luoghi che si aspettano di vedere che il cursore. (Ad esempio, utilizzando un mirino su un link potrebbe confondere gli utenti, perché non sono abituati a vederlo.) Position:static Nel normal flow (flusso), ciascun elemento di blocco si trova sulla parte superiore della successiva. Dal momento che questo è il modo di default in cui i browser trattano elementi HTML, non è necessario una proprietà CSS per indicare che gli elementi dovrebbero apparire nel flusso normale, ma la sintassi sarebbe: Position: static; Position:relative Il posizionamento relativo muove un elemento in relazione a dove sarebbe stato in flusso normale. Ad esempio, è possibile spostarla di 10 pixel inferiore a quello che sarebbe stato in flusso normale o al 20% a destra. È possibile indicare che un elemento deve essere posizionato in modo relativo utilizzando la proprietà di posizione con un valore di relativa. È quindi utilizzare le proprietà di offset (top o bottom e left o rigth) per indicare fino a che punto per spostare l'elemento da cui sarebbe stato in flusso normale.
Position:absolute Quando alla proprietà position viene dato un valore assoluto, il box è prelevata dal flusso normale e non influisce sulla posizione degli altri elementi della pagina. (Si comportano come se non c'è.)Le proprietà di offset (top o bottom e left o right) specificano dove l'elemento dovrebbe apparire in relazione al suo elemento contenitore. Position:fixed posizionamento fisso è un tipo di posizionamento assoluto che richiede la proprietà condizione di avere un valore fisso. Si posiziona l'elemento in relazione alla finestra del browser. Pertanto, quando un utente scorre in basso nella pagina, rimane nella stessa identica posizione. E 'una buona idea provare questo esempio nel browser per vedere l'effetto. Z-index Quando si utilizza relativa, fisso, o il posizionamento assoluto, scatole possono sovrapporsi. Se scatole si sovrappongono, gli elementi che appaiono più avanti nel codice HTML si siedono in cima a quelli che sono in precedenza nella pagina. Se si desidera controllare quale elemento si trova sulla cima, è possibile utilizzare la proprietà z-index. Il suo valore è un numero, e maggiore è il numero più quella elemento è al fronte. Ad esempio, apparirà un elemento con un z-index 10 sopra la parte superiore di una con z-index 5. Float
Invece di utilizzare l'attributo align dell'elemento , autori di pagine web sono sempre più utilizzando la proprietà float per allineare le immagini. Ci sono due modi in cui questo è realizzato comunemente:
- La proprietà float viene aggiunto alla classe creata per rappresentare la dimensione dell'immagine.
- Nuove classi vengono creati con nomi come align-left o align-right per allineare le immagini a sinistra o a destra della pagina. Questi nomi di classe vengono utilizzate in aggiunta alle classi che indicano la dimensione dell'immagine. Per impostazione predefinita, le immagini sono elementi inline. Ciò significa che fluiscono all'interno del testo circostante. Per centrare un'immagine, dovrebbe essere trasformato in un elemento blocklevel utilizzando la proprietà display:block. Una volta che è stata fatta in un elemento a livello di blocco, ci sono due modi comuni in cui è possibile orizzontale centrare un'immagine:
- Sul elemento che contiene, è possibile utilizzare la proprietà text-align con un valore del centro.
- Sulla stessa immagine, è possibile utilizzare l'uso della proprietà margin e impostare i valori dei margini destra e sinistra per auto. È possibile specificare i nomi delle classi che permettono ogni elemento di essere centrato, nello stesso modo in cui è possibile per le dimensioni o l'allineamento delle immagini. La proprietà background-image permette di inserire un'immagine dietro qualsiasi elemento HTML. Questo potrebbe essere l'intera pagina o solo parte della pagina. Per impostazione predefinita, un'immagine di sfondo si ripeterà per riempire l'intera scatola. Il percorso per l'immagine segue l'url lettere, e si è messo tra parentesi e virgolette.
La proprietà background-repeat può avere quattro valori:
- Repeat. L'immagine di sfondo viene ripetuta sia orizzontalmente che verticalmente (il modo di default è mostrato se la proprietà backgroundrepeat non è utilizzato).
- repeat-x. L'immagine viene ripetuta solo orizzontalmente (come mostrato nel primo esempio a sinistra).
- repeat-y. L'immagine viene ripetuta solo verticalmente.
- no-repeat. L'immagine viene mostrata solo una volta. La proprietà background-attachment specifica se una immagine di sfondo deve rimanere in una posizione o muoversi come l'utente scorre su e giù nella pagina. Può avere uno dei due valori:
- Fixed. L'immagine di sfondo rimane nella stessa posizione sulla pagina.
- Scroll. L'immagine di sfondo si muove su e giù come l'utente scorre su e giù per la pagina. Quando un'immagine non si ripete, è possibile utilizzare la proprietà background-position per specificare dove nella finestra del browser l'immagine di sfondo deve essere collocato. Questa struttura ha di solito una coppia di valori. Il primo rappresenta la posizione orizzontale e la seconda e se si specifica un solo valore, il secondo valore sarà di default al centro. È inoltre possibile utilizzare un paio di pixel o percentuali. Questi rappresentano la distanza dall'angolo in alto a sinistra della finestra del browser (o scatola contenente). L'angolo in alto a sinistra è uguale a 0% 0%. L'esempio mostrato, con valori di 50% 50%, centra l'immagine orizzontalmente e verticalmente.
La funzione background agisce come una scorciatoia per tutte le altre proprietà dello sfondo che avete appena visto, e anche la proprietà background-color. Le proprietà devono essere specificati nel seguente ordine, ma si può perdere qualsiasi valore se non si desidera specificare esso.
- background-color
- background-image
- background-repeat
- background-attachment
- background-position Layout HTML Nell’elemento **** sta tutto ciò che sta nella parte superiore della pagina, mentre nell’elemento **** tutto ciò che sta in basso, ai piedi appunto. L’elemento **** viene utilizzato per contenere i principali blocchi di navigazione sul sito, come la navigazione del sito primario. (esempio il menu della testata che serve per la navigazione nel sito) L'elemento **** funge da contenitore per qualsiasi sezione di una pagina che potrebbe stare da solo. Questo potrebbe essere un singolo articolo o post di blog, un post commento o forum, o di qualsiasi altro pezzo indipendente dal contenuto. Se una pagina contiene diversi articoli (o anche una sintesi di diversi articoli), ogni singolo articolo potrebbe vivere dentro il proprio elemento . Gli elementi possono anche essere annidati uno dentro l'altro. Ad esempio, un post potrebbe vivere dentro un elemento e ogni commento sull'articolo potrebbe vivere all'interno del suo proprio elemento figlio . Il **** elemento ha due scopi, a seconda che si trova all'interno di un elemento o no. Quando l’elemento viene utilizzato all'interno di un elemento , dovrebbe contenere informazioni che è legato all'articolo, ma non è essenziale per il suo significato generale. Ad esempio, un pullquote o glossario potrebbero essere considerati come parte per l'articolo si riferisce. Quando lìelemento viene utilizzato al di fuori di un elemento , funge da contenitore per il contenuto che è legato alla intera pagina. Ad esempio, potrebbe contenere dei link ad altre sezioni del sito, un elenco di post recenti, una casella di ricerca, o tweet recenti dall'autore. Gli elementi **** sono gruppi di contenuti legati insieme, e in genere ogni sezione dovrebbero avere la propria voce. Per esempio, su una homepage ci possono essere più elementi per contenere diverse sezioni della pagina, ad esempio ultime notizie, prodotti di punta, e iscrizione a una newsletter. Perché le gruppi di elementi elementi correlati insieme, essa può contenere diversi elementi distinti che hanno un tema comune o scopo. In alternativa, se si dispone di una pagina con un lungo articolo, l'elemento può essere usato per dividere l'articolo in sezioni separate. L'elemento non deve essere utilizzato come involucro per l'intera pagina (a meno che la pagina contiene solo un pezzo distinto di contenuto). Se si desidera un elemento contenente per l'intera pagina, che il lavoro è ancora meglio lasciare l'elemento .
