[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 og Style Sheets. Cascading er svolítið flóknara, og það er eitthvað sem við munum ná í öðru vídeó. En til að byrja, 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 að allt frá letur textans að staðsetja á efni á síðunni öðrum flottum hlutum eins og gera hornum kassa námundað eða bæta skuggi í texta. Þú getur jafnvel gera brjálaður hluti eins og að gera hlutina lifandi á skjánum. 

Svo hvernig notum CSS við 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 minn lítur hræðilegt. Joseph, þú ert ansi hönnuður." "Notkun sjálfgefið Times letrið? Helvetica er svo miklu betri." 

Svo það gæti verið einfaldasta leiðin til að beita stíl Rob vill? The augljós leið 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 af CSS eign HTML Element er við viljum breyta fylgt eftir með hreinsun á eftir nýju eignarinnar og semíkommu í enda. Til dæmis, segjum að við skulum Rob vill svartan Jaðar kynningu hans. Við leggjum fyrst stíl eigindi á div Rob er hér þá inni gæsalöppum setja CSS yfirlýsingu: "Border: 1px solid svart;" The 1 pixla vísar til breidd við landamærin, sem solid er átt við stíl við landamærin, og liturinn í lok ákvarðar hvaða lit á landamærum er. 

Ef við viljum margar stíl á frumefni, 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-litur: blár, padding: 5px;" Síðasta semíkommu er í raun valfrjáls, en fólk yfirleitt að halda henni í því mest samræmi í. 

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

Fyrir fólkinu sem raunverulega vilja til að vera skipulögð, þú gætir byrjað að fá smá peeved á hversu sóðalegt þetta allt lítur út. Ímyndaðu þér ef þú þarft að gera þetta fyrir hvert frumefni á síðunni, plús nú HTML og CSS eru allir blandað og ringulreið. Gross, 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 kallast CSS selectors. CSS selectors eru notaðar til að velja atriði sem yfirlýsingar eru beitt. A val ásamt lista af 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. Í fyrsta lagi skulum setja stíl tags í höfuðið hluta HTML okkar. Næst er val. Við munum byrja á því að nota eitt af einföldustu selectors, kjötkássa tákn, sem velur HTML frumefni með eigindi ID hans. Í þessu tilfelli munum við velja div sem táknar kynningu Rob er með því að slá kjötkássa tákn á eftir Auðkenni deildin er, Rob. Nú yfirlýsingar. Við bætum við opna og loka axlabönd og skipta fyrr inline okkar yfirlýsingar um div Rob er inni á þessum axlabönd, hressa, og kaldur, Rob er Intro er enn svartur landamæri kringum það mínus sóðalegur inline þjáningarnar. 

Nú, hvað ef við vildum að velja H1 inni í innra Rob á? Þú might hugsa, "Við skulum setja auðkenni á það og þá fara fyrri stíl okkar." Það virkar, en CSS hefur aðrar leiðir til að láta þig velja þætti með því að nota það sem við köllum combinators að blanda einföld selectors. Til dæmis er hægt að stafabil eðli að nota sem combinator að tilgreina öll tilvik af 1 val að lifa inni annars val. Það hljómar miklu flóknara en það er í raun. Hér er dæmi. Við munum slá # ræna, setja inn bil, og fylgja henni með H1, Annað einfalt val sem kallast merki val sem velur tegund af þætti eins divs eða málsgreinum. Rýmið sameinar 2 okkar einföld selectors, beita öllum CSS yfirlýsingar og hrokkið axlabönd til h1 tags sem búa inni í frumefni með id = "ræna". Bara til 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ð þess að inline stíll við getum fengið miklu hreinni kóða. Í staðreynd, ef 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. 

Til 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, á sig eiginleika, 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ður vilja vinna með HTML og CSS. 

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

Sameiginlegt combinators eru bil öllum börnum og kommur til að aðgreina selectors. Aðrir sem þú getur fundur fela ör fyrir beina börnum eingöngu, á tilde allra systkina sem eiga sér stað eftir að frumefni, og auk tákn fyrir 1 systkini sem kemur strax eftir frumefni. 

Með því að sameina þessar selectors og combinators, þú getur stækkað á bilinu stíl sem þú getur náð á tilteknu vefsíðu og skrifa CSS skilvirkari. Með réttlátur a par af línum CSS þú sérð mig skrifa hér, Ég get fljótt gera eitthvað eins og þetta útlit eins og 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.