Tip:
Highlight text to annotate it
X
>> SPEAKER: Quindi non è in realtà il migliore progettare a mescolarsi CSS con HTML.
Piuttosto, è meglio fattorizzare la vostra CSS, metterlo da qualche parte centrale, e
in qualche modo applicare alla tag nella tua pagina web.
Per raggiungere questo obiettivo, possiamo effettivamente fermare utilizzando l'attributo di stile e invece
utilizzare un tag di stile, che appartiene alla capo di una pagina web insieme, per
esempio, il titolo.
>> Diamo a questo una prova e ri-implementare una home page per John Harvard
utilizzando il tag Style.
Ho già ottenuto noi cominciammo qui con tre div per
Homepage di John Harvard.
Ma andiamo prima ora salire a questo primo div e aggiungere un nuovo attributo,
cioè ID e specificare che un unico identificatore per questo particolare div
deve essere, per esempio, tra virgolette "Top", un nome arbitrario, ma
descrittivo che questa è div infatti in cima alla mia pagina.
>> Per il prossimo div, diamo un diverso ID di citazione unquote
"Medio", e diamo la terza div un ID tra virgolette "bottom". Noi
ora hanno tre identificatore univoco a cui possiamo applicare un po 'di CSS
proprietà, ma prima di far ritorno alla testa di questa pagina.
Appena sopra il titolo qui, io andare avanti e definire lo stile
e quindi chiudere lo stile.
>> All'interno di questo ora, sto andando a definire alcune proprietà CSS, vale a dire la
stessi che ho già avuto in stile attributi, ma qui essi saranno
definite a livello centrale.
Per farlo, ho intenzione di indicare la sterlina simbolo seguito da top, così
specificando che il seguente CSS proprietà devono applicarsi a qualunque
Elemento HTML ha l'esclusiva identificatore del top.
Ho quindi intenzione di avere un po 'aperta e parentesi graffe chiuse, e ho intenzione di
specificare, ad esempio, la dimensione è di 36 pixel, il peso del carattere è in grassetto.
>> Per mantenere le cose pulite, sto mettendo ogni di queste proprietà la società di propria
linea, ma questo è solo un convenzione stilistica.
Sotto questo, andiamo ora definire un altro selettore, per così dire.
Questo per il tag HTML che ha identificatore univoco del mezzo.
E qui, cerchiamo di specificare una dimensione di carattere di 24 pixel, che sotto un'altra
selettore per fondo, e all'interno di questo, cerchiamo di specificare un
dimensione del font di 12 pixel.
>> Vediamo ora salvarli, cambiarne i permessi su, e caricare la pagina in un browser,
chmod un plus r css-1.html.
Apriamo su Chrome e fare http://localhost/css-1.html.
Non male.
Esattamente come volevo, ma mi piacerebbe prendere le cose un passo avanti ora e
Il testo di centro John Harvard.
Ora per farlo, ho potuto avvolgere il intera pagina in un div come ho
ha fatto un esempio precedente.
Oppure posso essere più intelligente e capire che tutti questi div siano dentro
Il corpo di mia pagina, quindi perché non si applica solo una o più proprietà CSS per il corpo
tag stesso?
>> Per farlo, facciamolo.
Torniamo a gedit qui.
Facciamo scorrere indietro fino alla modifica Stile, e cerchiamo di specificare un selettore solo
utilizzando tale nome tag, corpo.
Sotto di esso, mettiamo i nostri parentesi graffe seguito dal centro text-align.
Passiamo ora salvare la pagina e ricaricare all'interno di tale browser.
Ricarica in Chrome, e voilà.
Ora abbiamo la pagina di John Harvard centrato come previsto.