SPEAKER: On käynyt ilmi, että HTML ei ole ainoa kieli, voit käyttää sisällä Web-sivun. Voit käyttää jotain kutsutaan CSS, tai Cascading Style Sheets, samoin. CSS voit määrittää paljon enemmän Juuri estetiikka web sivu, mukaan lukien layout ja koot ja värit ja fontit ja paljon muuta. Esimerkiksi nyt luoda web-sivun jota tässä kutsutaan CSS0, joka edustaa kotisivun vaikkapa John Harvard. 

Tällä sivulla meillä on John Harvardin Nimi, jonka alla on kiva viesti hänen kävijöitä, alla joka on footer, jossa sanoa, tekijänoikeustiedot. Voit tehdä tämän, nyt määritellä kolme toimialaa sivun käyttäen tag nimeltään div. Alkusulkumerkki div, John Harvard, lähellä kiinnike div toinen alkusulkumerkki div, ja nyt me määrittää jotain kuten, tervetuloa kotisivuilleni! Ja nyt sulkea tämän div samoin. 

Ja nyt kolmas ja viimeinen div, copyright. Vain olla fancy, anna minun käyttää nyt HTML kokonaisuus, symboli, joka edustaa merkki, joka olisi muuten kirjoita näppäimistöllä. Erityisesti aion tehdä et-merkki, punta, 169, puolipiste. Osoittautuu, että on numerokoodi Tekijänoikeuden symboli. Sitten Katsotaanpa määritellä John Harvard täällä alareunassa. Katsotaanpa sulje div ja tallenna tiedosto. 

Nyt, mitä tämä div tag? Div tag määritellään pelkästään jako sivun, joka on lähinnä suorakulmainen alue. Joten tällä hetkellä, minulla on kolme suorakulmainen alueita, päällekkäin muut. Joten nyt, vaikutus on lähes yhtä vaikka minulla oli kolme kappaletta. Mutta emme tule näkemään aivan yhtä paljon valkoinen tilaa niiden välillä. 

Katsotaanpa tallentaa tiedoston, muuttaa sen käyttöoikeudet, ja katsomaan varten hetki Chrome. Chmod + r CSS0.html. Katsotaanpa nyt avata Chrome ja vierailu http://localhost.CSS0.html. Todellakin, tässä kotisivu John Harvard. Katsotaanpa nyt tyylitellä sitä hieman Juuri käyttäen joitakin CSS. 

Back in gedit, mennään tähän Ensimmäinen div tag ja lisää tyyliä Yhdistän täsmennetään, että haluaisin fonttikokoa, vaikkapa 36 pikseliä tai px. Ja haluaisin paino tätä fonttia olla rohkea eikä oletus, mikä on normaalia. Toisen div, nyt määritellä toinen tyyli ominaisuus, joka on fonttikokoa 24 pikseliä, joten hieman pienempi. Sulje lainauksia jälkeen puolipiste. 

Lopuksi tässä kolmannessa div, tehdään tyyli vastaa lainaus, fontin kokoa, ja sanokaamme 12 pikseliä tällä kertaa. Sulje quote jälkeen puolipiste. Huomaa silloin, että olen ilmeisesti määritelty hieman stilisointi varten kukin näistä kolmesta divs käyttäen, se kääntyy pois, CSS. Itse asiassa, syntaksin että näet näiden lainausmerkkeihin on CSS, erityisesti CSS-ominaisuuksia arvojen kanssa. Ja että ensimmäinen merkintä, jossa minun piti kaksi sellaisia ​​ominaisuuksia, fontin kokoa ja font paino, en yksinkertaisesti erotettu ne puolipisteellä. 

Nyt, vain tyyli tähden, minä myös puolipisteet at kunkin rivin lopussa. Mutta ne eivät ole ehdottoman välttämätöntä, varsinkin kun sinulla on vain yksi omaisuutta määritelty. Katsotaanpa nyt tallenna tiedosto ja lataa Chrome, ja katso, mitä nettovaikutus on. Back in Chrome täällä, Katsotaanpa valitse Päivitä. 

Nyt meillä on hieman mielenkiintoisempi kotisivulla John Harvard, jolloin ensimmäinen rivi kanssa hänen nimensä, joka on sisällä, että Ensimmäinen div, on 36 pikseliä pitkä ja myös lihavointia, jolloin toinen rivi, joka on tässä toisessa div, on 24 pikseliä korkea, mutta ei lihavoitu. Ja jolloin kolmannen rivin kyseisessä kolmannessa div on 12 pikseliä pitkä ja myös ei lihavoitu. Mutta oletetaan nyt haluaisin siirtää kaikki tämän tekstin yli siten, että se on keskitetty. 

Voisin mukauttaa kunkin yksittäisen DIVs olevan keskellä. Mutta helpommin, voisin kietoa niitä kolme divs sisällä neljäsosa div, vanhemman div, niin sanotusti, ja määritä että div ja kaikki sen jälkeläisiä olisi Tekstin linjassa keskustassa? Katsotaanpa katsomaan. 

Sisältä gedit, mennään takaisin minun kehon ja lisätä uuden div ylös kanssa div, tyyli vastaa lainaus lainaus text align keskustassa lähellä Lainaan jälkeen puolipiste. Ja nyt, mennään eteenpäin ja luetelmakohta kaikki Näiden johtojen että me kirjoitetaan ennen. Ja sen alapuolella kolmannen div, katsotaanpa Sulje tämä uusi div. 

Toisin sanoen, koska nämä kolme alkuperäinen divs ovat nyt lapsia, niin sanotusti uusi emo div ja olen täsmensi, että haluaisin kohdistaa teksti tämän emoyrityksen div keskellä sivun, että omaisuus on perivät kaikki nämä lapset. Todellakin, nyt tallenna tiedosto ja katsomaan selaimessa. Katsotaanpa uudelleen Chrome. Ja siellä meillä on, vielä mukavampaa kotisivulla John Harvard.