[Powered by Google Translate] [CSS] [Joseph Ong - Harvard Universiteit] [Hierdie is CS50. - CS50.TV] 

Vandag sal ons praat oor CSS of Cascading Style Sheets. 

So wat presies is CSS? Wel, kom ons breek die term CSS in 2 dele: Waterval en style sheets. Waterval is 'n bietjie meer kompleks, en dit is iets wat ons sal dek in 'n ander video. Maar vir beginners, Style Sheets baie wenke oor wat CSS doen. Dit voeg style aan die HTML van 'n webblad, die verandering van hoe die webblad esteties lyk. Dit beteken dat alles uit die skrif van die teks na die plasing van die inhoud van die bladsy na ander cool dinge soos die maak van die hoeke van 'n boks afgerond of voeg skadu's na teks. Jy kan selfs doen mal dinge soos om dinge lewendig op die skerm. 

So hoe gebruik ons ​​CSS met HTML? Neem hierdie arm-looking site wat ek net geskryf. As Rob was om te kyk na die webwerf nou, sou hy waarskynlik iets soos sê, "Sjoe my inleiding lyk! Verskriklik. Joseph, jy is 'n vreeslike ontwerper." "Die gebruik van die standaard Times font Helvetica is? Soveel beter." 

So wat kan die eenvoudigste manier om die stilering Rob wil aansoek doen nie? Die mees voor die hand liggende manier om baie van die mense wat aanvanklik geskryf CSS was om te sit wat ons noem styl verklarings reg in die element self gebruik van die HTML styl kenmerk. 'N styl verklaring bestaan ​​eenvoudig uit die HTML element se CSS eiendom wat ons wil verander gevolg deur 'n dubbelpunt, gevolg deur die nuwe waarde van die eiendom en 'n kommapunt aan die einde. Byvoorbeeld, kom ons sê Rob wil 'n swart grens rondom sy bekendstelling. Ons het die eerste stel die styl kenmerk op Rob se div hier dan binne dubbele aanhalingstekens sit 'n CSS verklaring: "Grens: 1px soliede swart;" Die 1 pixel verwys na die wydte van die grens, die soliede verwys na die styl van die grens, en die kleur aan die einde bepaal wat die grens se kleur is. 

As ons wil hê dat verskeie style op 'n element, skryf hierdie verklarings in volgorde. Byvoorbeeld, as Rob wil sy kop teks in Helvetica met 'n blou agtergrond en meer ruimte rondom die teks, kan ons dit doen: style = "font-family: Helvetica, agtergrond-kleur: blou, padding: 5px" Die laaste kommapunt is eintlik opsioneel, maar mense gewoonlik hou dit in vir konsekwentheid se onthalwe. 

Ons sal red verduidelik sommige van die koeler en meer komplekse CSS eienskappe vir 'n ander video. As jy iets in gedagte, net Googlen die effek wat jy wil hê, gevolg deur CSS sal waarskynlik gee jou goeie resultate. Die cool ding is dat CSS is redelik breë, so die kans is indien daar enigiets is wat jy wil doen - binne perke - CSS kan seker dit doen. Ons noem hierdie soort van stilering inline stilering. Die element styl is goed, in lyn met die begin tag. 

Vir mense wat regtig graag wil georganiseer word, jy kan begin om 'n bietjie kwaad is hoe morsig dit alles lyk. Stel jou voor as jy het om dit te doen vir elke element op die bladsy, plus nou jou HTML en CSS is almal vermeng en gewy. Gross, reg? Dit op te los, mense uiteindelik begin vang op te skei hul HTML opmaak uit hul CSS styling deur iets genoem CSS keurders. CSS keurders gebruik word om elemente wat verklarings toegepas word om te kies. 'N selector gekombineer met 'n lys van CSS verklarings is dikwels na verwys as 'n CSS reël. Hierdie reëls sou word tussen oop en toe HTML styl etikette, dikwels in die kop van die dokument. 

Dit is baie makliker om te sien met 'n voorbeeld, so laat ons begin deur die skep van 'n eenvoudige CSS reël. Eerstens, laat ons styl tags in die hoof afdeling van ons HTML. Volgende, die selector. Ons sal begin deur die gebruik van een van die eenvoudigste keurders, die hash simbool, wat kies 'n HTML-element deur sy ID kenmerk. In hierdie geval sal ons kies die div wat verteenwoordig Rob se bekendstelling deur te tik die hash simbool, gevolg deur die DIV se ID, Rob. Nou die verklarings. Ons voeg oop en toe draadjies en skuif ons vroeër inline verklarings op Rob se div binnekant van die draadjies, verfris, en, koel, Rob se intro het nog 'n swart grens rondom dit minus die morsige inline lelik. 

Nou, wat as ons wou die H1 binnekant van Rob se intro te kies? Jy mag dalk dink, "Kom ons sit 'n ID-op dit en dan beweeg ons vroeëre style." Dit werk, maar CSS het ander maniere om jou te laat kies elemente deur die gebruik van wat ons noem combinators eenvoudige keurders te meng. Byvoorbeeld, kan 'n spasie karakter gebruik word as 'n Combinator alle gevalle van 1 selector wat woon in 'n ander keuse te gee. Dit klink 'n baie meer ingewikkeld as wat dit eintlik is. Hier is 'n voorbeeld. Ons sal tik # beroof, voeg 'n ruimte, en volg dit met 'n H1, 'n ander eenvoudige selector bekend as 'n tag selector wat kies tipes elemente soos divs of paragrawe. Die ruimte kombineer ons 2 eenvoudige keurders, die toepassing van al CSS verklarings en die krulhakies te H1 tags wat leef binnekant van die element met id = "beroof". Net om jou te oortuig dat dit werk, sal ek die skrif kleur verander na wit, verfris, en kyk, Rob se kop is nou wit. 

Al hierdie werk gaan om te wys dat deur die gebruik van reëls in plaas van inline style ons kan kry baie skoner kode. In werklikheid, as hierdie styl blok begin om 'n bietjie groot, Ek kan selfs trek hierdie style uit in 'n ander lêer geheel en al. 

Hierdie nuwe lêer as CSS te sluit in hierdie dokument sal ek net HTML gebruik se skakel tag. Hier ek vertel dat ek 'n skakel in 'n eksterne styl blad, die rel kenmerk, en wat die pad van die lêer met my href kenmerk. Nou My eie HTML code opmaak en CSS is mooi georganiseer in heeltemal afsonderlike lêers, Dit is byna altyd die manier waarop ontwerpers verkies om te werk met HTML en CSS. 

In geval jy wonder, die eenvoudige keurders sluit ID keurders en tag keurders soos die wat ons nou net gesien het sowel as klas keurders vir die kies van elemente met 'n sekere klas, eienskap keurders vir die kies van elemente deur die ander eienskappe soos type = "radio" vir radio knoppie insette, en pseudoselectors soos sweef en fokus vir die spesifiseer stilering toe interaksies hou muis oor 'n element voorkom. 

Die algemene combinators sluit spasie vir alle kinders en kommas keurders te onderskei. Ander wat jy mag ondervind, sluit die pyl vir direkte kinders alleen nie, die tilde vir al die broers en susters wat plaasvind nadat die element, en die plus teken vir die 1 broer wat kom onmiddellik na die element. 

Deur die kombinasie van hierdie keurders en combinators, jy kan verbreed die omvang van die stilering jy kan bereik op 'n gegewe webblad en CSS skryf meer doeltreffend. Met net 'n paar lyne van CSS jy my sien tik hier, Ek kan vinnig maak iets soos hierdie lyk soos iets soos hierdie. 

Ek is Josef, en dit is CS50. 

[CS50.TV] 

Uh, waar ek begin? Laat my doen sonder dat - [lag] Goed. Voeg 'n - Laat my verander bewoording. Ooh. Jammer.