[Powered by Google Translate] [CSS] [Joseph Ong - Harvard University] [Þetta er CS50. - CS50.TV] 

Í dag munum við vera að tala um CSS eða Cascading Style Sheets. 

Svo hvaða einmitt er CSS? Jæja, við skulum brjóta hugtakið CSS niður í 2 hluta: Cascading Style Sheets. Cascading er svolítið flóknari, og það er eitthvað sem við munum ná í öðru vídeó. En fyrir ræsir, Style Sheets kærlega vísbending á hvað CSS gerir. Það bætir stíl til HTML vefsíðu breyta því hvernig vefsíðan fagurfræðilega útlit. Þetta þýðir allt frá letrið á textanum til að staðsetja á efni á síðunni öðrum flottum hlutum eins og gera hornum kassa ávalar eða bæta skuggum í texta. Þú getur jafnvel gert brjálaður hluti eins og gera hlutina lifandi á skjánum. 

Svo hvernig notum við CSS með HTML? Taktu þetta léleg-útlit á síðuna sem ég skrifaði bara. Ef Rob var að líta á þessa síðu núna, myndi hann líklega segja eitthvað eins og, "Vá! Kynning mín lítur hræðilegt. Joseph, þú ert ansi hönnuður." "Using the vanræksla Times letrið? Helvetica er svo miklu betri." 

Svo hvað gæti verið einfaldasta leiðin til að beita stíl Rob vill? Augljósasta leiðin hellingur af fólki skrifaði upphaflega CSS var að setja það sem við köllum stíl yfirlýsingar rétt í frumefni sig nota HTML stíl eigindi. A stíl yfirlýsingu samanstendur einfaldlega CSS eign HTML þátturinn er að við viljum breyta fylgt eftir með hreinsun fylgt er eftir með nýju verðmæti eignarinnar og semikommu á endanum. Til dæmis, segjum skulum Rob vill svartan Jaðar kynningu hans. Við setjum fyrst stíl eigindi á div Rob er hér þá inni gæsalappa setja CSS yfirlýsingu: "Border: 1px solid svart;" The 1 punkta vísar til þess að breidd landamæri, the solid átt við stíl við landamæri, og liturinn í lok ákvarðar hvaða lit Border er. 

Ef við viljum margar stíll á stak, skrifa þessar yfirlýsingar í röð. Til dæmis, ef Rob vill haus texta hans í Helvetica með bláum bakgrunni og meira pláss í kringum texta, við getum gert þetta: style = "font-family: Helvetica, background-color: blár, padding: 5px;" Síðasti semíkommu er í raun valfrjáls, en fólk yfirleitt að halda því í því mest samræmi í. 

Við munum spara útskýra sumir af the kælir og flóknari CSS eignir fyrir annað vídeó. Ef þú hefur eitthvað í huga, bara Googling áhrif sem þú vilt á eftir CSS mun líklega gefa þér nokkuð góðum árangri. The kaldur hlutur er að CSS er nokkuð breið, þannig líkurnar eru ef það er eitthvað sem þú vilt gera - innan þess - CSS getur sennilega gera það. Við köllum svona stíl inline stíl. The þáttur stíll er vel, í samræmi við byrjun merkinu. 

Fyrir fólkinu sem raunverulega vilja til að skipuleggja, þú gætir byrjað að fá smá peeved á hvernig sóðalegur þetta lítur. Ímyndaðu þér ef þú hefðir til að gera þetta fyrir hvert frumefni á síðunni, auk nú HTML og CSS eru allir blandað og ringulreið. Brúttó, ekki satt? Til að laga þetta, fólk byrjaði loksins smitandi á að aðskilja HTML Markup þeirra frá CSS stíl þeirra með því að nota eitthvað sem heitir CSS selectors. CSS selectors eru notuð til að velja atriði sem yfirlýsingar eru beitt. A val ásamt lista yfir CSS yfirlýsinga er oft vísað til sem CSS reglu. Þessar reglur væri að setja á milli opinna og loka HTML tags stíl, oft í höfuðið á skjalinu. 

Það er miklu auðveldara að sjá með dæmi, þannig að við skulum byrja á því að búa til einfalt CSS reglu. Fyrst, við skulum setja stíl tags í höfuðið hluta HTML okkar. Next, the val. Við munum byrja á því að nota eitt af einföldustu selectors, kjötkássa tákn, sem velur HTML frumefni með eigindi ID hennar. Í þessu tilfelli munum velja div sem táknar kynning Rob er með því að slá kjötkássa tákn á eftir ID div er, Rob. Nú yfirlýsingar. Við bætum að opna og loka axlabönd og skipta fyrr inline okkar yfirlýsingar um div Rob er inni af þessum axlabönd, hressa, og, kaldur, Rob er Intro hefur enn svarta landamæri kringum það mínus sóðalegur inline þjáningarnar. 

Nú, hvað ef við vildum að velja h1 inni innra Rob er? Þú might hugsa, "Við skulum setja kenni á það og fara svo fyrri stíl okkar." Það virkar, en CSS er aðrar leiðir láta þig velja þætti með því að nota það sem við köllum combinators að blanda einföldum selectors. Til dæmis er hægt að stafabil eðli vera notuð sem Combinator að tilgreina öll tilvik af 1 val að lifa inni annars val. Það hljómar mikið flóknara en það er í raun. Hér er dæmi. Við munum slá # ræna, bæta við bili, og fylgja henni með h1, annar einfaldur val kallast tag val sem velur gerðir af frumefni eins divs eða málsgreinum. Rýmið sameinar 2 okkar einföldu selectors, beita öllum CSS yfirlýsingar og hrokkið axlabönd til h1 tags sem búa inni í frumefni með id = "ræna". Bara að sannfæra þig um að það virkar, ég breyta lit á hvítu, hressa, og, útlit, haus Rob er nú hvítur. 

Allt þetta starf fer að sýna að með því að nota reglur stað inline stíl við getum fengið miklu hreinni kóða. Í staðreynd, ef þetta stíl blokk byrjar að fá svolítið stór, Ég get jafnvel rífa þetta stíll út í aðra skrá að öllu leyti. 

Að láta þetta nýja skrá sem CSS í þessu skjali sem ég verð bara að nota tengilinn tag HTML er. Hér er ég að segja það að ég er að tengja í utanáliggjandi stíll lak, relnofollow eiginleiki, og tilgreina the gangstígur til the skrá með eigindi href mínum. Nú HTML Markup minn og CSS eru skipulögð vel í alveg sérstaka skrá, sem er næstum alltaf leið hönnuðir vilja vinna með HTML og CSS. 

Í tilfelli þú ert að spá í, eru einföld selectors ID selectors og tag selectors eins og þær sem við sáum bara svo og flokki selectors fyrir val þætti með ákveðinni tegund, eigindi selectors um val þætti annarra eiginleika eins tegund = "radio" fyrir útvarp hnappur inntak og pseudoselectors eins sveima og einbeita fyrir tilgreina stíl þegar samskipti eins mús yfir frumefni eiga sér stað. 

Sameiginlegt combinators fela bil öllum börnum og kommur til að aðgreina selectors. Aðrir sem þú getur fundur fela á örina fyrir bein barna eingöngu, The tilde fyrir alla systkinum sem eiga sér stað eftir að frumefni, og plús tákn fyrir 1 systkini sem kemur strax eftir frumefni. 

Með því að sameina þessar selectors og combinators, þú getur auka úrval af stíl þú getur ná á tiltekinni vefsíðu og skrifa CSS skilvirkari. Með réttlátur a par af línum CSS þú sérð mig slá hér, Ég get fljótt gera eitthvað svona líta út eins eitthvað eins og this. 

Ég er Jósef, og þetta er CS50. 

[CS50.TV] 

Uh, hvar byrja ég? Leyfðu mér að gera það án þess að - [hlær] Okay. Bæta við - Leyfðu mér að breyta því orðalagi. Ooh. Því miður.