>> Spreker: Dit blyk dat HTML is nie die enigste taal wat jy kan binne gebruik
van 'n web bladsy.
Jy kan iets genoem CSS gebruik, of Cascading Style Sheets, as well.
CSS kan jy baie meer om te spesifiseer juis die estetika van 'n web
bladsy, insluitende uitleg en groottes en kleure en lettertipes en nog baie meer.
Byvoorbeeld, laat ons 'n webblad hier genoem CSS0 wat verteenwoordig 'n
tuisblad vir, sê, John Harvard.
>> Op hierdie bladsy, sal ons moet John Harvard se noem, onder wat sal wees
'n mooi boodskap vir sy besoekers, onder wat sal 'n footer, met
sê, 'n paar inligting oor kopiereg.
Om dit te doen, kom ons definieer drie afdelings die bladsy gebruik van 'tag
genoem DIV.
Open bracket div, John Harvard, naby bracket div, nog 'n oop bracket div,
en nou gaan ons iets spesifiseer soos, welkom op my tuisblad!
En laat ons sluit hierdie div, as well.
>> En nou 'n derde en finale div, kopiereg.
Net om te fancy wees, laat my nou gebruik om 'n HTML entiteit, 'n simbool wat verteenwoordig
'n karakter wat jy kan nie anders tik op die sleutelbord.
In die besonder, ek gaan om te doen ampersand, pond, 169, kommapunt.
Blyk dat die numeriese kode vir die kopiereg simbool.
Toe laat spesifiseer John Harvard hier aan die onderkant.
Kom ons maak die DIV en stoor die lêer.
>> Nou, wat is hierdie div tag?
Die div tag definieer eenvoudig 'n afdeling van die bladsy, wat is in wese 'n
reghoekige gebied.
So op hierdie oomblik in die tyd, ek het drie vierkantige gebiede, een op die top
van die ander.
So vir nou, die effek is amper so al het ek drie paragrawe.
Maar ons sal nie sien nie heeltemal so veel wit ruimte tussen hulle.
>> Kom ons red van hierdie lêer, verander sy regte, en kyk vir '
oomblik in Chrome.
Chmod n + r CSS0.html.
Kom ons kyk nou oop Chrome en besoek http://localhost.CSS0.html.
Trouens, hier is 'n tuisblad John Harvard.
Kom ons kyk nou stileer dit 'n bietjie meer juis met behulp van CSS.
>> Terug in gedit, laat ons gaan in hierdie eerste div tag en voeg 'n styl
kenmerk spesifiseer dat ek wil graag 'n lettergrootte van, sê, 36 pixels, of px.
En ek wil graag die gewig van die skrif aan te durf, eerder as die standaard wees,
dit is normaal.
Vir die tweede div, laat ons spesifiseer 'n ander styl kenmerk wat 'n
lettergrootte van 24 pixels, so 'n bietjie kleiner.
Close aanhalings na die kommapunt.
>> Laastens, in die derde div, kom ons doen styl gelyk quote, lettergrootte, en
kom ons sê 12 pixels hierdie tyd.
Sluit kwotasie na die kommapunt.
Let dan dat dit lyk asof ek het gespesifiseerde 'n bietjie van stilering vir
elk van hierdie drie divs gebruik, dit blyk, CSS.
Trouens, die sintaksis wat jy sien in tussen die dubbele aanhalingstekens is CSS,
spesifiek CSS eienskappe met waardes.
En vir die eerste tag, waar ek moes twee sulke eiendomme, lettergrootte en
font gewig, het ek net geskei hulle met 'n kommapunt.
>> Nou, net ter wille van styl se, ek ook ingesluit by kommapunte
die einde van elke lyn.
Maar hulle is nie streng nodig, veral wanneer jy net een het
eiendom omskryf.
Kom ons nou die lêer stoor en herlaai in Chrome, en kyk wat
Die netto effek is.
Terug in Chrome hier, laat se kliek herlaai.
>> Nou het ons 'n bietjie meer interessant tuisblad vir John
Harvard, waar die eerste lyn met sy naam, wat is die binnekant van daardie
eerste DIV, is 36 pixels hoog en ook vetgedruk, waardeur die tweede lyn,
wat in die tweede div, is 24 pixels hoog, maar nie vetgedruk.
En waardeur die derde reël in die derde div is 12 pixels hoog en ook
nie vetgedruk.
Maar veronderstel nou Ek wil graag om te skuif al hierdie teks oor
sodanig dat dit gesentreer.
>> Ek elk van die individu kan bring divs as wat gesentreer.
Maar meer maklik, kon ek draai diegene drie divs binnekant van 'n vierde div, 'n
Ouer div, om so te praat nie, en spesifiseer dat DIV en al sy
nageslag moet wees teks in lyn sentrum?
Kom ons neem 'n blik.
>> Binnekant van gedit, laat ons gaan terug na my liggaam en voeg 'n nuwe div tot bo met
div, styl gelyk kwotasie unquote teks align sentrum, naby
haal na die kommapunt.
En nou, laat ons gaan voort en Keep alle van die lyne wat ons voor getik.
En onder die derde div, laat sluit hierdie nuwe DIV.
>> Met ander woorde, want hierdie drie oorspronklike divs nou kinders, so te
praat van 'n nuwe ouer div en ek het bepaal dat ek wil graag aan te pas die
teks van daardie ouer div in die sentrum van die bladsy, sal daardie eiendom
geërf deur al die kinders.
Inderdaad, laat ons stoor die lêer en neem 'n blik in 'n leser.
Kom ons laai in Chrome.
En daar het ons dit, 'n nog mooier tuisblad vir John Harvard.