Pagine Web utilizzare 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 applicano dimensioni, posizionamento e vari altri aspetti dell'aspetto visivo degli elementi HTML, sia individualmente che uno rispetto a altro. Utilizzando il codice CSS, gli sviluppatori possono selezionare particolari elementi e gruppi di elementi in una pagina, specificando le istruzioni per il browser Web per eseguirne il rendering in un certo modo.
HTML
Siti Web includono codice CSS in vari modi. Markup HTML elemento può includere CSS dichiarazioni in linea, come nel seguente esempio:
< div style = "color: #FF0000" > Hello < / div >
In alternativa, CSS può apparire all'interno della sezione head della pagina come segue:
< style type = "text/css" >
div # {
Color: #FF0000;
}
< / stile >
Infine, il codice CSS possa essere elencato all'interno di file salvati con l'estensione "CSS", con il percorso del file incluso in un collegamento all'interno della sezione head della pagina come segue:
< link rel = "stylesheet" type = "text/css" href="stylefile.css" / >
Codice CSS che appaiono in una qualsiasi di queste posizioni sarà attuate quando il browser esegue il rendering di una pagina.
Selettori di elemento
Le dichiarazioni CSS specificano gli elementi che devono essere applicate le regole di. Ad esempio, per specificare le regole di stile per tutti gli elementi di un certo tipo, potrebbe apparire la seguente sintassi:
p {
font-weight: bold;
}
Ciò significa che il testo all'interno di tutti gli elementi paragraph diverrebbe con un tipo di carattere grassetto.
CSS è possibile utilizzare l'attributo ID dell'elemento HTML nel modo seguente:
piè di pagina () {
Larghezza: 600px;
}
Questo rifletterebbe un elemento con l'attributo ID univoco "piè di pagina" elencati nel codice HTML come segue:
< div id = "footer" > il contenuto del piè di pagina < / div >
CSS può anche utilizzare una classe di elementi, elencata utilizzando la seguente sintassi:
< classe p = "contenuto" > testo </p >
CSS potrebbe selezionare questa classe come segue:
p.Content () {
colore di sfondo: #FFFFCC;
}
Layout
Codice CSS per una pagina Web può specificare il layout e le dimensioni degli elementi. Il markup HTML seguente indica un elemento con due elementi figlio all'interno di esso:
< div id = "top" >< div class = "left" > testo di lato a sinistra < / div >< div class = "right" > lato destro testo < / div >< / div >
Il seguente codice CSS potrebbe stendere questi elementi all'interno della pagina:
Top () {
Larghezza: 800px;
Height: 100px;
}
div.Left () {
Larghezza: 200px;
float: left;
}
div.Right () {
Width: 300px;
float: right;
}
Questo imporrebbe che il browser dovrebbe visualizzare i due elementi figlio all'interno dell'elemento padre galleggianti nelle direzioni destra e sinistra, che li renderà anche sedersi sulla stessa linea orizzontale.
Styling
Codice CSS può controllare più aspetti dell'elemento HTML e stile di pagina, tra cui proprietà testo, colori, sfondi, margini, padding e bordi. Nell'esempio di codice riportato di seguito consente di specificare un tipo di carattere per l'intero documento HTML:
HTML, body {
font-family: "Times New Roman", Times, serif;
}
Il codice seguente determina il testo e colori di sfondo per alcuni elementi:
p.info {
Color: #333333;
colore di sfondo: #DEDEDE;
}
Questo codice specifica margini, padding e bordi per gli elementi con un attributo ID specifico:
speciale () {
border: 1px solid #000000;
padding: 5px;
margin: 10px;
}
Chiunque lo sviluppo di un sito Web o pagina Web può utilizzare un sacco di opzioni di stile diverso per creare il design che desiderano presentare ai visitatori.