August 25
La maggior parte dei siti web oggi utilizzano una combinazione di CSS (Cascading Style Sheets) e HTML (Hypertext Markup Language) o XHTML (Extensible Hypertext Markup Language). Mentre il codice HTML / XHTML gestire la struttura e il contenuto del tuo sito, il CSS determina lo stile e l'aspetto di elementi della pagina.
1 Prima di iniziare a scrivere il foglio di stile, si vuole impostare il layout di base per il tuo sito. Per fare ciò, copiare e incollare il seguente struttura in un documento blocco note in bianco:
<Html>
<Head>
<Title> Basic CSS Tutorial </ title>
</ Head>
<Body>
</ Body>
</ Html>
2 Una volta copiato e incollato il testo, salvare il file come \ "index.html \" in una nuova cartella denominata \ "Sito CSS. \" Quando si salva, assicurarsi che il tipo di file è \ ". Html \".
3 Aprire un nuovo documento in un editor di testo e nella parte superiore, scrivere il seguente:
/ * Sito web CSS semplice
Master Stylesheet
Author: Your Name Here
* /
Questo inizio del foglio di stile dichiara il titolo del foglio di stile e l'autore. Anche se non è essenziale, è una buona pratica e dovrebbe essere incluso nella parte superiore di ogni file CSS.
4 Una volta scritto il testo, salvare il file come \ "style.css \" nella cartella denominata \ "CSS Sito \". Assicurarsi di cambiare il tipo di file da \ ". Html \" a \ ". Css \". Questo è assolutamente necessario, come il foglio di stile non funzionerà correttamente senza il ". Css \" estensione \.
5 Ora che avete i vostri HTML e CSS documenti, è necessario collegarli. Per fare ciò, aggiungere un paio di spazi sotto la linea \ "<title> CSS sito web di base </ title> \" e scrivere il seguente:
<Link rel = \ tipo "stylesheet \" = \ "text / css \" href = \ "style.css \" />
Una volta fatto questo, il tuo foglio di stile e markup saranno collegati. A questo punto è possibile iniziare a costruire il tuo sito utilizzando i CSS.
6 La prima cosa che faremo con i CSS è creare un layout di pagina di base. Nel suo \ "index.html \" tra i tag <body> </ body> tag, scrivere i seguenti:
<Div id = "contenitore \" \> <! - Il contenitore contiene tutte le pagine di contenuto ->
<Div id = \ "header \">
</ Div>
<Div id = \ "colonna-1 \">
</ Div>
<Div id = \ "colonna-2 \">
</ Div>
<Div id = \ "footer \">
</ Div>
</ Div> <! - La DIV container finisce qui ->
Questo codice crea elementi chiamati \ "div, \", che è l'abbreviazione di divisioni. Queste scatole invisibili avvolgono contenuti del tuo sito. Con il vostro foglio di stile, si può dire queste caselle in cui a comparire sulla pagina.
7 Ora, faremo apparire un paio di cose. Nel foglio di stile etichettato style.css, scrivere il seguente sotto la dichiarazione:
body {
margin: 0
ANDARE
padding: 0
ANDARE
}
contenitore {
Larghezza: 960px
ANDARE
margin: auto
ANDARE
}
intestazione {
background: # 000
ANDARE
Altezza: 250px
ANDARE
}
Abbiamo aggiunto un sacco qui quindi cerchiamo di abbattere quello che abbiamo fatto. In primo luogo, abbiamo impostato i confini e l'imbottitura della finestra del browser a 0. Questo assicura che il nostro sito è a filo con la finestra del browser e non aggiunge la spaziatura inutili.
Successivamente, abbiamo dato il nostro contenitore DIV una larghezza e impostare il margine per l'auto. Si noterà che il DIV contenitore contiene tutti gli elementi di una pagina. Impostando il margine per l'auto, stiamo raccontando questa casella e il suo contenuto per centrare nella finestra del browser. La larghezza, 960px, racconta la scatola la larghezza di essere. Questo può essere cambiato, tuttavia, tenere presente che l'utente medio ha una larghezza 1024px schermo.
Infine, abbiamo aggiunto un po 'di stile al DIV intestazione. Abbiamo impostato il colore di sfondo al nero (utilizzando il codice esadecimale # 000) e dato che una altezza di 250px.
Quando si visualizza l'anteprima del file \ "index.html \" in un browser, si dovrebbe ora vedere una scatola nera che è 250px di altezza e filo con la parte superiore della finestra.
8 Avanti, finiremo styling il resto delle caselle di contenuto. Scrivere il seguente nel file style.css:
column1 {
float: left
ANDARE
chiara: a destra
ANDARE
background: # 0099FF
ANDARE
Larghezza: 480px
ANDARE
Altezza: 350px
ANDARE
}
colonna2 {
float: right
ANDARE
background: # 999
ANDARE
Larghezza: 480px
ANDARE
Altezza: 350px
ANDARE
}
footer {
clear: both
ANDARE
background: # 555
ANDARE
Altezza: 50px
ANDARE
}
Si noterà che oltre a cambiare lo sfondo di queste scatole, abbiamo anche aggiunto un paio di più elementi: galleggiante, chiaro, e la larghezza. L'elemento galleggiante indica la casella da che parte andare. In questo esempio, stiamo dicendo la casella column1 di galleggiare o spostarsi a sinistra e la casella column2 di galleggiare o spostarsi a destra. L'elemento trasparente sulla prima colonna, consente la seconda scatola ad direttamente accanto ad essa. La proprietà width aggiunta a queste due colonne è quello di determinare il modo in cui riempire la casella. Per impostazione predefinita, (vuoto) galleggiavano caselle non verranno visualizzati a meno dato una larghezza.
9 Ora che è possibile vedere i tuoi quattro scatole, è il momento di iniziare ad aggiungere e styling nostri contenuti. Nel vostro \ file "index.html \", scrivere il seguente:
1.) tra i tag <div id = \ "header \"> </ div> tag, scrivere: <p> Basic CSS Tutorial </ p>.
2.) tra i tag <div id = \ "column1 \"> </ div> tag, scrivere: <p> Questo è un tutorial di base circa l'uso di fogli di stile </ p>..
3.) tra i tag <div id = \ "Column2 \"> </ div> tag, scrivere: <p> Questo tutorial è stato creato dall'autore e seguito da me </ p>..
4.) tra i tag <div id = \ "footer \"> </ div> tag, scrivere: <p> 200X me. Tutti i diritti riservati. </ P>.
Quello che abbiamo fatto si aggiunge un testo al nostro sito che è pronto per lo styling. Ora, torniamo al file \ "style.css \" e faremo lo stile nostro testo.
10 Con il vostro \ "style.css \" file aperto, scrivere il seguente sotto le proprietà esistenti:
intestazione p {
font-family: Arial, Helvetica, sans-serif
ANDARE
font-size: 30px
ANDARE
text-align: top
ANDARE
colore: #fff
ANDARE
text-transform: uppercase
ANDARE
}
column1 p {
font-family: Arial, Helvetica, sans-serif
ANDARE
font-size: 18px
ANDARE
colore: #fff
ANDARE
text-transform: capitalizzare
ANDARE
}
colonna2 p {
font-family: Arial, Helvetica, sans-serif
ANDARE
font-size: 18px
ANDARE
colore: #fff
ANDARE
}
piè di pagina p {
font-family: Arial, Helvetica, sans-serif
ANDARE
font-size: 14px
ANDARE
colore: #fff
ANDARE
}
Abbiamo fatto un sacco, così diamo un'occhiata a ciò che è stato aggiunto. In primo luogo, tutto il testo è stato dato tre proprietà simili: font-family, font-size, e il colore. La proprietà font-family definisce quale tipo di carattere del testo verrà visualizzato in. Dimensione Carattere imposta la dimensione del testo, e il colore imposta il colore. Un'altra proprietà aggiunto l'intestazione e colonna 1 del testo è: text-transform. Questo consente di controllare la capitalizzazione del testo. Per l'intestazione, abbiamo impostato tutto il testo in maiuscolo e nella colonna 1, la prima lettera di ogni parola è in maiuscolo.