March 20
Le pagine Web utilizzano markup HTML per determinare il contenuto e la struttura. Per dettare come questo contenuto dovrebbe essere presentato agli utenti del sito web, HTML utilizza CSS o Cascading Style Sheets. dichiarazioni CSS impongono dimensioni, posizionamento e vari altri aspetti l'aspetto visivo di elementi HTML sia individualmente una rispetto all'altra. Utilizzando il codice CSS, gli sviluppatori possono selezionare gli elementi particolari e gruppi di elementi in una pagina, specificando le istruzioni per il browser Web per renderli in un certo modo.
Siti web includono il codice CSS in vari modi. HTML elemento markup può includere dichiarazioni CSS in linea, come il seguente esempio:
<Div style = "color: # FF0000"> Ciao </ div>
In alternativa, CSS può apparire all'interno della sezione head pagina come segue:
<Style type = "text / css">
div {
color: # FF0000;
}
</ Style>
Infine, il codice CSS può essere elencato nel file salvati con l'estensione "css", con la posizione del file incluso in un collegamento all'interno della sezione head pagina come segue:
<Link rel = "stylesheet" type = "text / css" href = "stylefile.css" />
codice CSS che appare in uno di questi luoghi sarà attuata quando il browser esegue il rendering di una pagina.
dichiarazioni CSS specificano gli elementi che le regole dovrebbero essere applicate a. Ad esempio, secondo le regole di stile per tutti gli elementi di un certo tipo, la seguente sintassi può apparire:
p {
font-weight: bold;
}
Ciò significa che il testo all'interno di tutti gli elementi di paragrafo dovrebbe essere reso con un carattere grassetto.
CSS può utilizzare l'attributo ID di un elemento HTML nel modo seguente:
footer {
width: 600px;
}
Ciò rifletterebbe un elemento con l'ID univoco attributo "piè di pagina" elencato in HTML come segue:
<Div id = "footer"> Il contenuto piè di pagina </ div>
CSS può anche usare una classe elemento, elencate utilizzando la seguente sintassi:
<P class = "content"> testo </ p>
CSS potrebbe selezionare questa classe come segue:
p.content {
background-color: #FFFFCC;
}
codice CSS per una pagina Web può specificare il layout e dimensioni degli elementi. Il seguente codice HTML indica un elemento con due elementi figlio al suo interno:
<Div id = "top"> <div class = "left"> testo Lato sinistro </ div> <div class = "right"> text lato destro </ div> </ div>
Il codice CSS seguente potrebbe stendere questi elementi all'interno della pagina:
superiore {
width: 800px;
altezza: 100px;
}
div.left {
width: 200px;
float: left;
}
div.right {
width: 300px;
float: right;
}
Ciò vorrebbe che il browser deve visualizzare i due elementi figlio all'interno dell'elemento genitore galleggianti in direzioni sinistra e destra, che sarà anche farli sedere sulla stessa linea orizzontale.
codice CSS in grado di controllare molteplici aspetti elemento HTML e stile di pagina, inclusi testo proprietà, i colori, sfondi, margini, padding e bordi. Il codice di esempio seguente specifica un tipo di carattere per l'intero documento HTML:
html, body {
font-family: "Times New Roman", Times, serif;
}
Il codice seguente determina i colori del testo e dello sfondo per alcuni elementi:
p.info {
color: # 333333;
background-color: #DEDEDE;
}
Questo codice specifica i margini, padding e bordi per elementi con un particolare attributo ID:
speciale {
border: 1px solid # 000000;
padding: 5px;
margin: 10px;
}
Chiunque lo sviluppo di una pagina del sito o Web può utilizzare un sacco di diverse opzioni di stile per creare il design che desiderano presentare ai visitatori.