>> 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.