[Musiikkia] 

DOUG Lloyd: Joten ottaa yhden video puhua yhden kielen. Tällä kertaa me puhumme CSS. Joten CSS, joka on lyhyt Cascading Style Sheets, on toinen kieli käytämme rakennettaessa sivustot. Ajattele sitä näin. Jos HTML on mitä käytämme järjestää sisältöä haluamme laittaa meidän sivulla, CSS on työkalu, jonka me yleensä käyttää muokata miten sivustot näyttävät, ja miten käyttäjäkokemus todella on, vuorovaikutuksessa sivuillamme. 

Samanlaisia ​​HTML, CSS on ei ohjelmointikieli. Se ei ole logiikkaa. Se ei ole muuttujia. Sillä ei ole minkäänlaista että virtaus liittyviä asioita, jotka C tekee. Se on tyyli kieli. Ja sen syntaksi on melko yksinkertainen, ja vain kuvaa miten elementit meidän sivu on tiettyjä HTML elementtejä olisi muutettava. Tätä varten, jos et ole vielä katsonut meidän video HTML, tai tunne HTML yleisesti, sinua halutessasi vilkaista joka ensimmäinen, koska tämä keskustelu CSS on menossa riippuvat joitakin HTML-osaamista. 

Joten tässä on todella yksinkertainen CSS tyylisivu. Vaikka et ole koskaan ohjelmoida CSS ennen, Olen melko varma, että voit selvittää mitä tämä tyylitaulukkoa tekee. Mitä se tekee? No, sovelletaan ruumiin web sivu, kaikkea siltä väliltä body-tunnisteiden meidän HTML, ja se asettaa taustaväri kyseisen sivun siniseksi. No, se on hyvin yksinkertainen stylesheet. Se on oikeastaan ​​hyvin inhimillistä ystävällinen kieli, CSS. Joten vaikka et ole koskaan käyttänyt sitä ennen, luultavasti voisi arvata, mitä se teki. Itse asiassa, jos me ladattu sivulle, jossa tämä tyylitaulukko upotettiin jotenkin, taustaväri meidän sivu olisi olla sininen, eikä standardi valkoinen. 

Miten siis rakentaa tyylitaulukkoja? No ensimmäinen, meidän on tunnistaa valitsin. Viimeisessä esimerkissä, että valitsin oli ruumis. Sitten meillä on avoin kihara ahdin, ja olemme Aloitan määrittelemällä tyylitaulukon että valitsin. Välillä kihara housunkannattimet, me vain luettelo keskeisistä arvo-pareja. Edellinen arvo pari oli taustaväri sininen puolipiste, mutta voisimme tehdä enemmän ja enemmän näitä. Voisit olla useita asioita soveltamalla tähän tag, että valitsin elin. Jokainen heistä on erotettu puolipiste, ja kutsumme jokainen heistä ilmoitus, CSS ilmoitus. Kun olemme tehneet kaiken muotoilu me haluavat soveltaa kyseisen tunnisteen, meillä vain sulkemalla kihara ahdin lopettaa tyylitaulukon, ja olemme tehneet määritellään stylesheet kyseiselle valitsin. 

Mitkä ovat joitakin yhteisiä CSS-ominaisuuksia? No, ehkä haluat laittaa reunus jotain. Joten voit sanoa, raja, että olisi avain, ja sitten arvot olisi, mitä tyyliä, väriä, ja leveys haluat sen olevan. Niin tyyli voi olla kiinteä linja, pisteviiva, katkoviiva, harjun linja, mikä olisi aaltoviiva. Ehkä haluat olla sitä olla sininen tai musta tai vihreä. Ehkä haluat sen olevan 1 tai 2 tai 10 pikseliä leveä. Voit määrittää kaikki ne asiat. Ehkä haluat asettaa taustan väri sivusi tietyllä tavalla. Olemme jo näki, että, jossa tausta elin on sininen. 

Sitten voit käyttää avain sana, joten CSS on tiettyjä värejä jotka on rakennettu sen, sininen, vihreä, musta, hyvin yksinkertainen värejä tiedämme. Mutta voit myös määrittää minkä tahansa hex väri että haluaisit. Recall, että värit voidaan tunnistaa joukolla kolme hex numerot 0-255, RG ja b, punainen, vihreä ja sininen komponentti. Ja jotta voimme määrittää mikä tahansa väri haluamme mukaan, käyttämisen sijaan sininen tai vihreä tai musta, käyttäen punta ja sitten kuusi numeroa hex, ja joka antaisi meille kuusinumeroisen väri. Niin, että taustaväri. 

Meillä on myös etualalla väri, joka on yleensä tulee teksti sivusi. Ja voit samalla tehdä keskeisten sana ja tai kuusinumeroinen hex. Joten voit määrittää värein haluamasi tekstin sivusi vastaan ​​tiettyä taustaväri, jopa edellä. Voit myös vaihtaa ja käsitellä fontin, ja miten teksti on sulatettu sivulla. 

Joten voit muuttaa fontin kokoa. Voit käyttää avainsanoja, kuten ylimääräinen, Erittäin pieni, tai xx Pieni tai Normaali, suuret, ja niin edelleen. Voit käyttää kiintopisteitä, 10 kohta, 12 kohta, ja niin edelleen. Voit käyttää prosenttiosuudet, 80%, 20%, jossa 100% on oletusarvo fontti koko, joka on yleensä menossa olla jotain 11 tai 12 pistettä. Tai voit jopa perustaa sen pois viimeisimmän kirjasinkokoa. Jos vain kirjoitti jotain ja tiedät mitä haluat on, että se olisi pienempi, mutta et tiedä tarkalleen, mikä kokosi haluat sen olevan, hyvin, voit vain sanoa, Tekstin koko Pienennä. Ja se perustaa pois, vain ylös yläpuolella, se on fontin kokoa. Ja voit saada suuremman tai pienemmän. Joten siellä on paljon erilaisia tapaa määritellä fontin kokoa. 

Voit myös määrittää, mitä kirjasinperheen haluat. Jos sinulla on tietty nimi, siellä tapa CSS-- emme aio puhua siitä here-- määritellä hyvin erityinen kirjasin ja upottaa se sivullesi. Voit myös käyttää yleisiä nimiä. Siellä on paljon web turvallinen fontteja jotka on ennalta määritelty CSS. Ja jos olet käyttäjä Microsoft Toimisto viimeisten 20 vuoden aikana, olet todennäköisesti tuttu paljon näitä web safe fontit jo, Times New Roman, Arial, Courier New, Georgia, Tahoma, Verdana, ja niin edelleen. Ne ovat kaikki pidetään web safe fontteja. Ja itse asiassa, osa syystä ne tuli olla oli tarkoitus käyttää tekemään web-- jokaiselle sivulle oli pääsy tähän oletus fonttijoukkoa eri päätteitä, ja kaikki tämä font tavaraa emme päästä, mutta nämä ovat tavallisesti saatavilla CSS, vaikka et muuten määritellä fontteja. Lopuksi voit tasata tekstin, sen sijaan että on, oletuksena, linjassa vasemmalle, voisit kohdista se oikealle, tai voit tasata sen keskellä, tai perusteltu niin, että se osui molemmat marginaalit. Joten ne ovat kaikki vaihtoehtoja voit käyttää muuttaa mitä tekstisi näyttää, ja miten se näkyy sivulla. 

Sinun valitsimet eivät on oltava tunnisteita vain. Olemme aiemmin näki body valitsin, ja tag valitsin ei katso vain. You name tag, ja sitten määritellä tyylitaulukon tag. Mutta voit myös tehdä jotain kutsutaan ID valitsin. ID valitsin näyttää melko samanlainen. Mutta huomaa, että nyt en käytä HTML-koodi, olen käyttäen, tässä tapauksessa, #unique, tai hash ainutlaatuinen. Jos muistatte meidän video HTML, puhuimme miten tunnisteet voi olla ominaisuuksia. 

Ja yksi ominaisuus, joka koskee melko paljon kaikki HTML-tunnisteet, mutta emme puhu siitä, on jotain kutsutaan tunnistuselementtiin. Joten tässä CSS olisi sovelletaan vain HTML-tunniste, joka on hyvin erityinen tunnus, että olet nimetty. Joten jos sinulla on jossain koodissa, jonnekin HTML-tiedoston, tag ja sinä täsmennettävä attribuutin että tunniste, ID vastaa ainutlaatuinen, tämä erityisesti stylesheet tässä sovelletaan ainoastaan ​​välillä että tag ID ainutlaatuisia. 

Voit myös tehdä jotain kutsutaan luokan valitsin. Joten sen lisäksi että ID attribuutteja, voit myös lisätä luokan attribuutti HTML tageja. Ja kun käytät luokan attribuutti, sitä voidaan käyttää useita tunnisteita. Joten jos sinulla on useita asioita, jotka ovat samanlaisia, ehkä haluat sanoa, avoin tag blaa, blaa, blaa, blaa, luokka vastaa opiskelijat. Ja sitten tässä stylesheet sovellettaisiin jokaiselle tag joiden luokka on opiskelijoita. Tässä tapauksessa, olimme asettaa taustaväri keltainen, ja olimme asettaa peittävyyden, joka on tunniste emme puhu, mutta vain käsittelee miten läpinäkyvä jotain on, 70%, tässä tapauksessa. 

On kaksi vaihtoehtoa kirjallisesti stylesheets. Voit kirjoittaa ne suoraan HTML asettamalla tyylitaulukkoja välillä tyyli tunnisteet. Ja ne tyylitunnisteet mennä sisälle pää tunnisteet Web-sivun. Ehkä edullisempi tapa tehdä se on kirjoittaa erilliseen .css tiedoston, ja sitten liittää se osaksi asiakirjaa käyttämällä linkin tageja. Linkki tagit, jälleen, ovat eroaa hyperlinkkejä, Jos muistatte meidän video HTML. Ja linkki tunnisteet ovat miten me vetää eri tiedostoissa. Se tavallaan kuin vastaa #include web ohjelmointi. 

Joten katsomaan table.HTML. Jos muistatte meidän HTML video, näytin esimerkki hyvin yksinkertainen kertolasku taulukko, joka näytti melko ruma, ja ehkä siellä tapa tehdä se paremmin CSS, jotta se todella näyttää enemmän kuin kerto pöytä, tai jotain että ei ole vain tarttuneet toisiinsa ilman varsinaista jako rivien ja sarakkeiden. Joten pään yli CS50 IDE, ja katsomaan kuinka CSS voi, tavallaan, nipistää mitä aloitimme ennen, ja tehdä siitä jotain paljon parempaa. 

Joten olemme CS50 IDE nyt, ja jos tunne, me vedä ylös tässä taulukko, joka HTML-sivun. Table.HTML pohjimmiltaan vain määrittelee sisällön of multiple-- se piti olla neljä neljä kertotaulun. Se on melko yksinkertainen. Ja me voisi ajatella, että se olisi näyttävät melko hyvin järjestetty. Mutta itse asiassa, kun esikatsella sivu, näemme, että se on eräänlainen ruma, eikö? Selvästi meillä on rivejä ja sarakkeita. On jonkinlainen erottelu. Mutta se ei ole mielekästä erottaminen. Emme itse palaveriin liikaa tietoa täällä. Ja ei ole erotettu toisistaan rivit ja sarakkeet kannalta vaaka- tai pystysuoraan sääntöjä. Voisimme ehkä tehdä tästä näyttää hieman paremmin. Joten kokeilla. Joten aion sulkea tämän välilehden täällä. Ja aion suljen table.HTML, ja minulla on toinen versio täällä nimeltään table2.HTML. Avaamme että jopa. Elin sivun melko sama, mutta olen muuttanut hieman huipulla. Ja minä siirry tänne. Huomaa, että tällä kertaa, olen upotettujen tyylitunnisteet. Olen avannut tyyli tag, ja olen nyt määritellään CSS-tyylitiedoston vain sisällä sitä. Minulla on stylesheet joka sanoo, pöytä. Se on minun tag valitsin. En käytä piste tai hash, jonka minä tekisi jos en käytti tunnus tai luokan valitsin. Minulla on tunniste valitsin here-- pöytä. Tämä tyyli on menossa koske kaikkia taulukossa tag. Ilmeisesti Haluan laittaa yhteen pikselin levyisenä, kiinteä sininen raja, sisällä minun taulukko. Se kuulostaa se olisi luultavasti auttaa tilanne, eikö? Aiomme olla asiat näyttävät paljon paremmin. Joten tämä on hieno. Tyylillisesti, olen juuri upotettu minun tyylitaulukon täällä. Se on varmasti hyväksyttävä tapa tehdä se. Katsotaan, mitä tämä näyttää. Joten menen takaisin tänne, ja Minä esikatsella minun table2.HTML. No, se ei ole aivan mitä halusin, mutta se on juuri sitä, mitä pyysimme. Sanoimme, että tämä tyyli on aikovansa soveltaa meidän pöytään. Meidän pöytä on nyt yksi pikseli leveä, kiinteä sininen reuna sitä. Emme itse palaveriin pöydässä soluja. Olemme juuri pöydässä. Niin CSS toimi. Se on soveltanut stylesheet meidän pöytään. Mutta ei oikein tee mitä halusimme tehdä. Miten saamme tehdä mitä me haluamme sen tehdä? 

No, katsotaanpa katsomaan yksi versio tästä table3.HTML. Joten olen juuri menossa sulkea nämä välilehdet. Aion palata tänne minun tiedosto puu, ja avata table3.HTML. Jälleen se tulee näyttää aika samanlainen täällä alussa. Mutta ilmoitusta, tällä kertaa, käyttämisen sijaan tyylisivu upotettu oikeus siellä, Aion linkkiä tyylitiedoston linkin tag. Joten olen ilmeisesti linkitys stylesheet kutsutaan tables.CSS, ja tämä hyvin vastaa stylesheet vain means-- hyvin, mikä on tämä tiedosto suhteessa mitä Olen doing-- on stylesheet että olen käyttäen minun sivu. Joten jos en todellakaan halua nähdä, mitä Mulla kanssa CSS täällä, Minun täytyy mennä auki että table.CSS tiedoston samoin. Joten palaamme tänne jälleen meidän tiedoston puu. On table.CSS. Me pop auki. Nyt näemme hieman CSS. Ilmeisesti minulla on pari asioita täällä. Olen ilmeisesti haluavat laittaa viisi pikselin levyisenä, punaisena raja, noin minun pöydän. Tiedämme jo, että se on menossa vain mennä kehä. Näimme, että table2.HTML. Jokaisen rivi, I ilmeisesti haluavat määritellä että rivi korkeus on 50 pikseliä korkea. Joten jokainen rivi, muistaa sitähän tr tag tekee, Teen sen 50 pikseliä korkea. 

Lopuksi minulla on tämä kommentti. Ja näin teemme kommentit CSS. Se on hyvin samankaltainen tarttumaan lohko kommentit syntaksin slash tähti. Kaikki haluamasi teksti. Ei ole slash slash vaikka CSS. Lyhyillä kommenttejaan, meillä on käyttää tässä muodossa tästä. Näyttää siltä, ​​olen tekemässä paljon asioita minun td tageja. Muista td tunnisteet tai pöydän tiedot, jotka todella ovat vain sarakkeet sisällä meidän riviä, ja ilmeisesti Kunkin osan tietojen minun pöytä, haluan asettaa taustaväri olla musta, väri on valkoinen, väri on etualalla väri. Joten tämä tulee olemaan teksti sivuni. Haluan iso fontti, 22 kohta fontti, ja haluan sen olevan kirjasinperheen, Georgia. Joten en aio on oletusfontin. Aion täsmentää Georgia, joka on yksi niistä web safe fontit että olemme nähneet aiemmin. Haluan teksti on yhdenmukaistettava keskitetysti, keskellä laatikko, En halua sitä jäädä linjassa tai oikealle kohdistettu. Ja haluan palstan leveys olevan 50 pikseliä leveä samoin. Katsotaanpa katsomaan mitä tämä näyttää, ja katso, jos tämä on ehkä parannus. Joten aion mennä table3.HTML, joka Recall, sisältää table.CSS linkkinä, ja me esikatsella sitä. Se on paljon parempi, eikö? Tämä on todella alkaa näyttää paljon enemmän kuin kertotaulu. Olen että punainen reunus noin minun pöydän mutta nyt Olen myös määrittänyt, että kukin rivi on 50 pikseliä leveä, tai se on 50 pikseliä tall-- tekosyy me-- kukin sarake on 50 pikseliä leveä. Jokaisen sarakkeen tiedot, ja vain tiedot, on musta tausta. Joten siksi ne valkoinen linjat ovat siellä. Koska tilaa kaikkien näiden solujen, se ei ole rajaa ja sellaisenaan, se on vain Olen vain täyttämällä soluja, jotka itse asiassa tekee rajojen taulukon, joka ilmeisesti olemassa koko ajan, se oli vain ohut valkoisia viivoja. Nyt he ovat näkyvissä. Nyt ne pop pois ruudulle. Ja niin tämä on hyvin yksinkertainen stylesheet että olen soveltanut, ja nyt minun pöytä näyttää paljon enemmän kuin neljä neljä kertotaulu, sijasta vain sekaisin sotku, jossa kaikki on selvästi rivejä ja sarakkeita, mutta ei Super hyvin järjestetty. Olemme todella vain esimakua mitä voit tehdä CSS täällä. Onneksi CSS asiakirjat on melko yksinkertainen. Voit käyttää useita sen attribuutteja, melko usein. Ne puhuimme aiemmin tässä video. On olemassa useita, jotka olet luultavasti ei käytä kaikkia. Ja se on hieno, liian. Mutta vain tietää, että on olemassa paljon asiakirjojen siellä. Joten vaikka emme kattavat kaiken, et varmasti ei jää itse. Mutta CSS on todella hauskaa kokeilla. Ja haluan voimakkaasti rohkaista teitä leikkiä Web-sivuja, ja miten voit tehdä niistä näyttää ja tuntuu parantaa käyttäjäkokemusta kokemus vierailevat sivusi. Olen Doug Lloyd. Tämä on CS50.