Ettekandja: Selgub, et HTML ei ole ainus keel, mida saab kasutada sees veebilehele. Võite kasutada midagi, mida nimetatakse CSS või Kaskaadlaadistiku, samuti. CSS võimaldab määrata palju täpselt esteetika web lehel, sealhulgas paigutust ja suurust ning värve ja fonte ja palju muud. Näiteks oletame, luua veebilehe siin nimetatakse CSS0 mis tähistab kodulehekülg, ütleme, John Harvard.
Sellel lehel on meil John Harvardi Nimi, mille all on kena sõnum oma külastajatele all mis on jalus, kus öelda, mõned autoriõiguste kohta. Et seda teha, olgem määratleda kolm osakonda lehekülje kasutades tag nimega div. Sulg div, John Harvard lähedal sulg div, teine sulg div, ja nüüd me midagi täpsustada nagu, tere tulemast minu koduleheküljele! Ja olgem sulgege see div, samuti.
Ja nüüd kolmas ja lõplik div, autoriõigus. Lihtsalt olla väljamõeldud, las ma kasutan nüüd HTML üksuse sümbol, mis tähistab märk, et sa ei saaks muidu kirjuta klaviatuuril. Eelkõige ma teen ampersand, nael, 169, semikoolon. Selgub, et on numbriline kood jaoks autoriõiguse sümbol. Siis olgem täpsustada John Harvard siin allosas. Paneme div ja salvestage fail.
Nüüd, mis on see div tag? Div tag määratletakse vaid jaotus lehe, mis on sisuliselt ristkülikukujuline piirkond. Nii praegusel ajal on mul kolm ristkülikukujuline piirkondades, üks peal ning muud. Nii et nüüd, efekt on peaaegu sama kuigi mul oli kolm lõiku. Aga me ei näe päris nii palju Valge ruumi nende vahel.
Hoiame seda faili muuta oma õigusi, ning vaatleme jaoks hetk Chrome. Chmod + r CSS0.html. Olgem nüüd avada Chrome ja külastus http://localhost.CSS0.html. Tõepoolest, siin on kodulehekülg John Harvard. Olgem nüüd Stilisoida see veidi rohkem täpselt, kasutades mõned CSS.
Tagasi gedit, lähme sinna Esimene div tag ja lisada stiilis atribuut, täpsustades, et ma tahaks fondi suurust, ütleme, 36 pikslit või px. Ja ma tahaks kaalu see font olla julge ja mitte vaikimisi mis on normaalne. Teise div, olgem täpsustada teises stiilis atribuut, mis on kirjasuurus 24 pikslit, nii natuke väiksem. Sulge hinnapakkumisi pärast semikoolonit.
Lõpuks, kolmanda div, teeme style võrdub quote, suurus ning ütleme 12 px seekord. Sulge quote pärast semikoolonit. Pange tähele siis, et ma tundub, et on täpsustatud natuke stilisatsioon eest Kõigi nende kolme divs kasutades, Selgub, et CSS. Tegelikult süntaks, et näete vahel need jutumärgid on CSS, spetsiaalselt CSS omadused väärtustega. Ja et esimene silt, kus mul oli kaks sellist kinnisvara, fondi suurus ja font kaalu, ma lihtsalt eraldada need semikooloniga.
Nüüd lihtsalt stiili pärast, ma ka semikoolonit juures iga rea lõpus. Aga nad ei ole tingimata vajalik, eriti kui sul on ainult üks kinnisvara määratletud. Olgem nüüd salvestada fail ja laadige Chrome, ja vaata, mida netomõju on. Tagasi Chrome siin olgem nuppu Reload.
Nüüd on meil veidi rohkem huvitav kodulehekülg John Harvard, kusjuures esimese kooskõlas oma nime, mis on sees, et Esimene div on 36 pikslit kõrge ja ka Paksu kirja, kus teine rida, mis on selles teises div, on 24 pikslit kõrge, kuid mitte rasvases kirjas. Ja kusjuures kolmas rida, et kolmas div on 12 pikslit kõrge ja ka ei rasvases kirjas. Aga oletame nüüd ma tahaks minna kõik selle teksti üle nii, et see on keskne.
Ma võiks viia iga üksiku DIVs olevaks keskel. Aga kergem, kas ma wrap neid kolm divs sees neljanda div, vanem div niiöelda, ja täpsustada et see div ja kõik selle järeltulijad peaksid olema tekst joondatud keskus? Võtame vaata.
Toas gedit, lähme tagasi oma keha ja lisada uue div up top div, stiili võrdub quote lõppeb Teksti joondus keskus lähedal tsiteerin pärast semikoolonit. Ja nüüd, lähme edasi ja taane kõik need read, et me kirjutada enne. Ja alla selle kolmanda div, olgem sulgege see uus div.
Teisisõnu, sest need kolm originaal divs on nüüd lapsed, nii et rääkima, uus vanem div ja ma olen täpsustada, et ma tahaks, et viia tekst selle vanema div keskel lehekülje, et vara on pärinud kõik need lapsed. Tõepoolest, oletame, salvestage fail ja vaatleme brauserit. Oletame laadida Chrome. Ja et meil on see, isegi kenamaks kodulehekülg John Harvard.