[TÓNLIST spila] 

DOUG LLOYD: Svo skulum taka eitt video til að tala um einn meiri tungumáli. Í þetta sinn munum við tala um CSS. Svo CSS, sem er stytting á Cascading Style Sheets, er annað mál að við notum við skipulagningu vefsíður. Hugsaðu um það eins og þetta. Ef HTML er það sem við notum til að skipuleggja efni sem við viljum setja á síðuna okkar, CSS er tól sem við notum almennt að aðlaga hvernig vefsíður okkar líta, og hvernig notandi reynsla raunverulega er, samskipti við heimasíðu okkar. 

Líkur á HTML, CSS er ekki forritunarmál. Það þarf ekki rökfræði. Það þarf ekki breytur. Það skiptir ekki hafa allir tegund af að renna tengjast hlutum sem C er. Það er hönnun tungumál. Og setningafræði hennar er nokkuð einfalt og bara lýsir hvernig þætti okkar síðu með ákveðnum HTML þætti ætti að vera breytt. Í því skyni, ef þú ert ekki enn horfði á vídeó okkar á HTML, eða ert ókunnur með HTML almennt, þér mega vilja til taka a líta á það fyrst, því þetta umfjöllun um CSS er að fara að ráðast á sumir þekkingu á HTML. 

Svo er hér mjög einfalt CSS stílblað. Jafnvel ef þú hefur aldrei forritað með CSS áður, Ég er nokkuð viss um að þú getur fundið út einmitt það sem þetta stílblað gerir. Hvað þýðir það að gera? Jæja, beitt líkama vefnum okkar síðu, allt milli líkama þinn á HTML okkar, og það setur bakgrunnslit þeirri síðu í blátt. Jæja, það er mjög einfalt stílblað. Það er reyndar mjög mannleg vingjarnlegur tungumál, CSS. Svo jafnvel ef þú hefur aldrei notað það áður, þú sennilega gæti giska á hvað það gerði. Í staðreynd, ef við hlaðinn síðu, þar þetta stílblað var fellt einhvern veginn, bakgrunnslit síðunni okkar myndi vera blár, og ekki staðall hvítt. 

Svo hvernig gera við að byggja Stílblöð? Jæja fyrst verðum við að þekkja val. Í síðustu dæmi, sem val var líkami. Þá höfum við opið hrokkið Brace, og við erum að fara að byrja að skilgreina sem stílblað fyrir að val. Á milli hrokkið axlabönd, við bara hafa lista yfir helstu gildi pör. Fyrri gildi par var bakgrunnur litur blár semíkommu, en við gætum gert meira og meira af þessu. Þú gætir hafa margar hlutir beita að þessi merki, að selector líkamanum. Hvert og eitt þeirra er aðskilin með semíkommu, og við köllum hvert og eitt þeirra yfirlýsing, a CSS yfirlýsingu. Þegar við erum búin með öllum stílun vér vilt eiga við viðkomandi tag, við höfum bara lokun Curly Brace til að ljúka stílblaðið, og við erum búin að skilgreina stílblaðið fyrir viðkomandi val. 

Hvað eru nokkrar algengar CSS eignir? Jæja, kannski þú vilt að setja landamæri um eitthvað. Svo er hægt að segja, landamæri, það væri lykillinn, og þá gildi yrðu, hvað stíl, lit og breidd þú vilt það til að vera. Svo stíl gæti verið solid lína, punktalína sem, með brotalínu, hálsinn lína, sem væri bylgjaður línu. Kannski þú vilt hafa það vera blár eða svartur eða grænn. Kannski þú vilt það til að vera 1 eða 2 eða 10 punktar á breidd. Þú getur tilgreint allt þetta. Kannski þú vilt að setja bakgrunn litur þinni á ákveðinn hátt. Við sáum þegar að setja á bakgrunnur af líkamanum til að vera blár. 

Þá er hægt að nota lykilorð, svo hefur CSS ákveðnum litum sem eru byggð inn í það, blár, grænn, svartur, mjög einfalt litir sem við vitum. En þú getur einnig tilgreint hvaða hex litur sem þú vilt. Muna að litir geta verið greind með a setja af þremur HEX tölum frá 0 til 255, Rg og B, sem er rauður, grænn og blár hluti. Og svo getum við skilgreint hvaða lit sem við viljum eftir, í stað þess að nota blár eða grænn eða svartur, nota pund og síðan sex stafirnir álög, og sem myndi gefa okkur sex stafa litur. Svo er það bakgrunnslit. 

Við höfum einnig forgrunni lit, sem er yfirleitt að fara að vera texti á síðuna þína. Og þú getur á sama hátt gert það með lykil orð og eða sex stafa álög. Hér getur þú skilgreint hvaða lit sem þú vilja fyrir texta af síðunni þinni gegn ákveðnu bakgrunnslit, upp hér að ofan. Þú getur líka breytt og takast með leturgerð, og leið texta er veitt á síðunni. 

Svo er hægt að breyta leturgerð stærð. Þú getur notað leitarorð, svo sem auka, Mjög smá, eða xx Lítil eða Miðlungs, stór, og svo framvegis. Þú getur notað fasta punkta, 10 lið, 12 lið, og svo framvegis. Þú getur notað hlutföll, 80%, 20%, þar sem 100% er sjálfgefið letur stærð, sem er yfirleitt að fara til vera eitthvað eins og 11 eða 12 stig. Eða þú getur jafnvel byggja hana burt af nýjustu leturstærð. Ef þú skrifar bara eitthvað og þú veist það sem þú vilt er fyrir það að vera minni, en þú veist ekki nákvæmlega hvaða stærð þig vilja það að vera vel, þú getur bara sagt, Leturstærð minni. Og það mun byggja burt af, bara upp hér að ofan, það er leturstærð. Og þú getur fengið minni eða stærri. Þannig að það er mikið af mismunandi leiðir til að tilgreina leturstærð. 

Þú getur einnig tilgreint hvað Leturfjölskylda þú vilt. Ef þú hefur ákveðna nafn, það er leið í CSS-- við erum ekki að fara að tala um það here-- að skilgreina mjög sérstaka letur og embed in það inn á síðuna þína. Þú getur líka notað samheiti. There 'a einhver fjöldi af vefur öruggum letur sem eru fyrirfram skilgreind í CSS. Og ef þú ert notandi af Microsoft Office á síðustu 20 árum, þú ert líklega kunnugt a einhver fjöldi af þessum vefsíðum öruggum letur nú þegar, Times New Roman, Arial, Courier New, Georgia, Tahoma, Verdana, og svo framvegis. Þeir eru öll talin vefur Öryggisskápur letur. Og í raun hluti af Ástæðan sem þeir komu til að vera var að nota til að gera web-- hverri síðu hafði aðgang að þessum vanræksla setja letur með ýmsum serifs og allt þetta letur efni sem við munum ekki komast inn, en þetta eru yfirleitt aðgengileg í CSS þinn, jafnvel ef þú gera ekki skilgreina annars letur. Loks er hægt að samræma texta, í stað þess að það að vera sjálfgefið, takt til vinstri, þú gætir samræma það til hægri, eða þú gætir samræma það miðju, eða réttlætanlegt svo að hún lenti bæði framlegð. Þeir eru allir valkostir sem þú getur notað að breyta því sem textinn lítur út, og hvernig hún birtist á síðunni. 

Selectors Ekki að vera merki aðeins. Við sáum áður líkama tag val, og tag val hjartarskinn útlit bara svona. Þú nafn merki, og þá skilgreina stílblað fyrir þessi merki. En þú getur líka gert eitthvað kallað ID val. An ID val lítur mjög svipað. En eftir, að nú er ég ekki að nota HTML tag, ég nota, í þessu tilfelli, #unique eða kjötkássa einstakt. Ef þú manst frá okkar vídeó á HTML, talaði við um hvernig merki geta haft eiginleika. 

Og eitt eigindi sem gildir að nánast allar HTML tags, en við ekki tala um það, er eitthvað sem kallast kenni tag. Svo þetta tiltekna CSS myndi gilda einungis HTML merki sem hafa mjög sérstakur ID, sem þú hefur nefnt. Svo ef þú hefur eitthvað í kóðanum þínum, einhvers staðar í HTML skrá, merki og þig tilgreina sem eiginleiki til þess tag, ID jafngildir einstakt, þetta einkum stílblað hér mun aðeins gilda á milli sem tag með ID einstakt. 

Þú getur líka gert eitthvað kallað bekknum val. Þannig að auk þess að hafa ID eiginleiki, þú getur líka bæta bekknum eigindi HTML tags. Og þegar þú notar bekknum eigindi, það er hægt að beita til að mörg merki. Svo ef þú hefur nokkrar hluti sem eru svipuð, kannski þú vilt segja, opinn tag bla, bla, bla, bla, flokkur jafngildir nemendur. Og þá er þetta tiltekna stílblað myndi gilda hverjum tag sem bekknum er nemendur. Í þessu tilfelli, við myndum stilla bakgrunnslit til gulur, og við myndum setja ógagnsæi, sem er merki við ekki tala um, en bara fjallar um hvernig gagnsæ eitthvað er, að 70%, í þessu tilfelli. 

Það eru tveir möguleikar fyrir skrifa Stílblöð. Þú getur skrifað þá beint inn í HTML kóðanum með því að setja Stílblöð á milli stíl tags. Og þessir stíl skipanir inni í höfuðið tags vefsíðu þinni. The kannski meira Æskilegri leið til að gera það er að skrifa sérstakt CSS skrá, og þá tengja það inn í þinn skjal með tengli. Link merki, aftur, eru frábrugðin tengla, ef þú manst frá vídeó okkar á HTML. Og tengja tags eru hvernig við draga í sérstökum skrám. Það er tegund af eins og jafngildi sem #include fyrir forritun vefnum. 

Svo skulum taka a líta á table.HTML. Ef þú manst frá okkar HTML video, ég sýndi dæmi um mjög einfalt margföldun borð sem leit nokkuð ljótur, og kannski er það leið til að gera það betur með CSS, til að gera það líta raunverulega meira eins og margföldun borð, eða eitthvað sem er ekki bara fastur saman með enginn raunverulegur deild milli raða og dálka. Svo skulum fara yfir til CS50 IDE, og kíkja hvernig CSS getur konar, klip það sem við byrjuðum með áður, og gera það eitthvað mikið betri. 

Þannig að við erum í CS50 IDE nú, og ef ókunnur, við munum draga upp í þessu borð sem HTML síðu. Table.HTML grundvallaratriðum bara skilgreinir innihald af a multiple-- það átti að vera fjögurra af fjórum margföldun borð. Það er frekar einfalt. Og við viljum halda að það væri líta nokkuð vel skipulögð. En í raun, þegar við forskoða þessa síðu, sjáum við að það er góður af ljót, ekki satt? Er augljóst að við höfum raðir og dálka hér. Það einhvers konar aðskilnað. En það er ekki þroskandi aðskilnað. Við erum í raun ekki að fá of mikið af upplýsingum hér. Og það er engin aðskilnaður á milli raðir og dálka í skilmálar lárétt eða lóðrétt reglum. Við gætum sennilega gera þetta líta svolítið betur. Svo skulum reyna. Þannig að ég ætla að loka þessum flipa hér. Og ég ætla að loka table.HTML mína, og ég hef aðra útgáfu hér kallað table2.HTML. Við munum opna það upp. Líkaminn á síðunni er laglegur mikill the sami, en ég hef breyst a svolítið efst. Og ég ætla að fletta upp hér. Takið eftir að í þetta sinn, ég er nota embed stíl tags. Ég hef opnað stíl tag, og ég er nú skilgreina CSS stílblað bara inni af því. Ég er með stílblað sem segir, borð. Það er tag val mitt. Ég er ekki að nota punkt eða kjötkássa, sem ég myndi vera að gera ef ég var að nota auðkenni eða flokks val. Ég er með tag val here-- borð. Þessi stíll er að fara að eiga við um alla töflu tag. Virðist ég vil setja einn punktur að breidd, solid blár landamæri, inni mitt borð. Það hljómar eins og það myndi líklega hjálpa ástandinu, ekki satt? Við erum að fara að hafa það líta mikið betur. Svo er þetta í lagi. Stylistically, ég hef bara embed stílblaðið minn hér. Það er vissulega ásættanlegt leið til að gera það. Við skulum sjá hvað þetta lítur út. Svo ég ætla að fara aftur niður hér, og Ég mun forsýning table2.HTML mína. Jæja, það er ekki alveg það sem ég vildi, en það er einmitt það sem við bað. Við sögðum að þetta stíll er að fara að beita við borðið okkar. Borðið okkar hefur nú einn pixla breiður, solid blár í kringum hana. Við erum í raun ekki að fá á töflunnar. Við erum bara að við borðið. Svo CSS vann. Það hefur beitt stílblað við borðið okkar. En ekki alveg að gera það sem við vildum að hún geri. Hvernig eigum við að fá að gera það sem við viljum að hún geri? 

Jæja, við skulum taka a líta á einn meiri útgáfa af þessu í table3.HTML. Þannig að ég ætla bara að fara að loka þessum flipa. Ég ætla að fara aftur hérna að mínum skrá tré, og opna table3.HTML. Aftur, það er að fara að líta nokkuð svipað hér í upphafi. En takið, í þetta sinn, í stað þess að nota a stílblað embed rétt þar, Ég ætla að tengja í stílblað því að nota tengilinn tag. Þannig að ég ætla greinilega að tengja í stílblað heitir tables.CSS, og þetta vel jafngildir stílblað bara means-- vel, hvað er þetta skrá miðað við það sem Ég doing-- er stílblað sem ég nota fyrir síðuna mína. Svo ef ég vil virkilega að sjá hvað Ég ætla að gera með CSS hér, Ég þarf að fara að opna að table.CSS skrá eins og heilbrigður. Þannig að við munum fara aftur hérna aftur til skrá tré okkar. Það er table.CSS. Við munum skjóta það opið. Nú erum við að sjá smá af CSS. Apparently, ég hafa a par af hlutum að gerast hér. Ég vil greinilega að setja fimm punktur að breidd, solid rautt landamæri, um mitt borð. Við vitum nú þegar að það er að fara að fara bara á jaðar. Við sáum að í table2.HTML. Með hverri röð, ég virðist vilja til að tilgreina að hæð raðar er 50 punktar á hæð. Svo fyrir hverja röð, man það er það sem st tag gerir, Ég er að gera það 50 punktar á hæð. 

Loks, ég hef þessa athugasemd. Og þetta er hvernig við að gera athugasemdir í CSS. Það er mjög svipuð að grípa blokk athugasemdir setningafræði rista stjörnu. Allur texti sem þú vilt. Það er engin slash slash þó í CSS. Fyrir stuttu inline athugasemdir, höfum við til nota með þessari tilteknu sniði hér. Það lítur út eins og ég er að gera a fullt af hlutum í TD tags mínum. Mundu td tags, eða borð gögn, sem í raun eru bara dálkarnir inni á raðir okkar, og virðist fyrir hvert stykki af gögn í töflu mínu, ég vil til að stilla bakgrunnslit til vera svartur, litur að vera hvítur, litur er forgrunnslitur. Þannig að þetta er að fara að vera texta síðuna mína. Ég vil stóra leturgerð, 22 benda letur, og ég vil það að vera leturfjölskyldu, Georgia. Þannig að ég ætla ekki að fara að hafa sjálfgefna leturgerð. Ég ætla að tilgreina Georgia, sem er einn af þeim vefsíðum öruggum letur sem við höfum séð áður. Ég vil texta minn til að vera í samræmi miðlægt, í the miðja af the kassi, Ég vil ekki að það að vera vinstri takt eða hægri takt. Og ég vil breidd dálki minn að vera 50 punktar á breidd eins og heilbrigður. Við skulum taka a líta á hvað þetta lítur út eins og, og sjá hvort þetta er kannski framför. Þannig að ég ætla að fara að table3.HTML, sem muna, nær table.CSS sem hlekkur, og við munum forskoða það. Það er mikið betra, ekki satt? Þetta er í raun farin að líta mikið meira eins og margföldun borð. Ég hef að rauða landamæri um mitt borð en nú Ég líka hef tilgreint sem Hver röð er 50 punktar á breidd, eða það er 50 dílar tall-- afsökun me-- hver dálkur er 50 punktar á breidd. Gögnin í hverjum dálki, og aðeins gögn, hefur svartan bakgrunn. Svo er það hvers vegna þeir hvítar línur eru. Þar sem pláss í milli allra þessara frumna, það er ekki landamæri í sjálfu sér, það er bara Ég er bara að fylla í frumur, sem í raun gerir landamæri borðið, sem virðist ekki vera til alla tíð, það var bara þunnt hvítar línur. Nú þeir eru sýnileg. Nú þeir skjóta burt á skjánum. Og svo er þetta mjög einfalt stílblað sem ég hef beitt, og nú mitt borð lítur mikið meira eins fjögurra af fjórum margföldun borð, í stað þess að bara jumbled sóðaskapur, þar allt er greinilega línur og dálka, en ekki frábær vel skipulagt. Við erum í raun bara að klóra yfirborðið um hvað þú getur gert með CSS hér. Sem betur fer CSS skjöl er nokkuð augljóst. Þú munt nota nokkur af sínum eiginleika, nokkuð oft. Þær sem við ræddum um fyrr í þessu myndbandi. Það eru nokkrir sem þig verður að öllum líkindum ekki nota allt. Og það er allt í lagi líka. En bara veit, að það er mikið af gögnum þarna úti. Svo jafnvel ef við vildum ekki yfir allt, þú ert örugglega ekki skilið eftir á eigin spýtur. En CSS er virkilega gaman að gera tilraunir með. Og ég myndi eindregið hvetja þig að leika í kring með þinn vefur blaðsíða, og sjá hvernig þú getur gert þá útlit og feel til að bæta notanda Reynsla af að heimsækja síðuna þína. Ég er Doug Lloyd. Þetta er CS50.