SPEAKER: Het blijkt dat HTML is niet de enige taal die je binnen kunt gebruiken van een webpagina. U kunt iets genaamd CSS gebruiken, of Cascading Style Sheets, als goed. CSS kun je veel meer te specificeren precies de esthetiek van een web pagina, inclusief opmaak en maten en kleuren en lettertypen en nog veel meer. Bijvoorbeeld, laten we maken een webpagina hier genoemd CSS0 dat een vertegenwoordigt startpagina voor, zeg, John Harvard. 

Op deze pagina zullen we moeten John Harvard Namen, waar doorheen zal een leuk bericht achter voor zijn bezoekers, onder die zal een voettekst zijn, met zeggen, sommige copyright informatie. Om dit te doen, laten we drie divisies definiëren voor de pagina met behulp van een tag genoemd div. Open beugel div, John Harvard, in de buurt beugel div, een andere open beugel div, en nu gaan we iets opgeven zoals, welkom op mijn homepage! En laten we sluiten deze div, als goed. 

En nu een derde en laatste div, auteursrecht. Gewoon om fancy te zijn, laat ik nu gebruik maken van een HTML entiteit, een symbool dat staat voor een personage dat je kon niet anders typen op je toetsenbord. In het bijzonder, ga ik doen ampersand, pond, 169, puntkomma. Blijkt dat is de numerieke code voor het copyright symbool. Laten we dan opgeven John Harvard hier onder. Laten we sluiten de div en sla het bestand op. 

Nu, wat is dit div-tag? De div-tag gewoon definieert een divisie van de pagina, dat in wezen een rechthoekige gebied. Dus op dit moment in de tijd, ik heb drie rechthoekige gebieden, bovenop andere. Dus nu, het effect bijna al had ik drie alinea's. Maar we zullen niet zo veel te zien witte ruimte tussen hen in. 

Laten we sla dit bestand, verander de machtigingen en een kijkje nemen voor een moment in Chrome. Chmod a + r CSS0.html. Laten we nu openstellen Chrome en bezoek http://localhost.CSS0.html. Inderdaad, hier is een startpagina voor John Harvard. Laten we nu stileren het een beetje meer Juist met behulp van enkele CSS. 

Terug in gedit, laten we gaan in dit eerste div-tag en voeg een stijl attribuut specificeert dat Ik wil graag een lettergrootte van, zeg, 36 pixels, of px. En ik zou graag het gewicht van dit lettertype vet in plaats van de standaard te zijn, wat normaal. Voor de tweede div, laten we opgeven andere stijl attribuut dat een heeft lettergrootte van 24 pixels, dus een beetje kleiner. Sluiten citaten na de puntkomma. 

Ten slotte, in dit derde div, laten we het doen stijl is gelijk aan de grootte citaat, lettertype en laten we zeggen 12 pixels deze tijd. Sluiten citaat na de puntkomma. Merk op toen dat ik lijken te hebben gespecificeerd een beetje stilering voor elk van deze drie divs met, het blijkt, CSS. In feite is de syntaxis die u ziet in tussen die dubbele aanhalingstekens is CSS, specifiek CSS-eigenschappen met waarden. En voor die eerste tag, waar ik twee van dergelijke eigenschappen, lettergrootte en tekengewicht, ik gewoon gescheiden met een puntkomma. 

Nu, net omwille van de stijl van, ik ook puntkomma's op het eind van elke regel. Maar ze zijn niet strikt noodzakelijk is, vooral wanneer u slechts een eigenschap is gedefinieerd. Laten we nu het bestand opslaan en herladen in Chrome, en zie wat het netto-effect is. Terug in Chrome hier, laten we op Reload. 

Nu hebben we een iets interessanter startpagina voor John Harvard, waarbij de eerste lijn met zijn naam, dat is de binnenkant van dat eerste div, is 36 pixels hoog en ook vetgedrukt, waarbij de tweede lijn, die in die tweede div, is 24 pixels hoog, maar niet vetgedrukt. En waarbij de derde regel in dat derde div is 12 pixels hoog en ook niet vetgedrukt. Maar stel nu ik wil verschuiven alle van deze tekst over zodanig dat het midden. 

Elk van de afzonderlijke ik kon uitlijnen divs als gecentreerd. Maar makkelijker, kon ik wikkel die drie divs binnenkant van een vierde div, een ouder div, om zo te zeggen, en geef dat div en alle afstammelingen moet tekst uitgelijnd centrum? Laten we eens een kijkje nemen. 

Binnenkant van gedit, laten we terug gaan naar mijn lichaam en voeg een nieuwe div up top met div, is gelijk aan stijl citaat unquote tekst richt centrum, in de buurt citeer na de puntkomma. En nu, laten we verder gaan en alle streepje van die lijnen die we eerder getypt. En onder dat derde div, laten we sluit deze nieuwe div. 

Met andere woorden, omdat deze drie originele divs zijn nu kinderen, om zo te spreken van een nieuwe ouder div en ik heb aangegeven dat ik zou willen uitlijnen van de tekst van die ouder div in het centrum van de pagina, dat eigendom overgenomen door alle van die kinderen. Inderdaad, laten we het bestand opslaan en een kijkje nemen in een browser. Laten we herladen in Chrome. En daar hebben we het, een nog mooiere startpagina voor John Harvard.