[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: Cascading en Style Sheets. Cascading is 'n bietjie meer kompleks, en dit is iets wat ons toevou in 'n ander video. Maar vir starters, Style Sheets baie wenke wat CSS doen. Dit voeg style aan die HTML-kode van 'n web bladsy, die verandering van hoe die webblad esteties lyk. Dit beteken dat alles van die font van die teks na die posisionering van die inhoud op die bladsy na ander cool dinge soos die maak van die hoeke van 'n boks afgerond of die skadu's na teks voeg. Jy kan selfs doen mal dinge soos maak dinge lewendig op die skerm. 

So, hoe gebruik ons ​​CSS met HTML? Neem hierdie arm-looking site Ek het net geskryf. As Rob was om te kyk op hierdie site right now, sou hy waarskynlik iets soos sê, "Sjoe lyk my inleiding! Verskriklik. Josef, jy is 'n vreeslike ontwerper." "Die gebruik van die standaard Times font Helvetica is soveel beter." 

So, wat sou die eenvoudigste manier om die stilering Rob wil om aansoek te doen? Die mees voor die hand liggende manier om baie van die mense aanvanklik geskryf CSS was om te sit wat ons noem styl verklarings reg in die element self deur gebruik te maak van die HTML-styl kenmerk. 'N styl verklaring bestaan ​​eenvoudig van die HTML element se CSS-eiendom wat ons wil om te verander gevolg deur 'n dubbelpunt en dan 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 inleiding. Ons het eers die styl kenmerk op Rob se div hier dan binne dubbele aanhalingstekens het 'n CSS-verklaring: "Border: 1px solid 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 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, background-color: blou; padding: 5px" Die laaste kommapunt is eintlik opsioneel, maar mense gewoonlik hou dit in ter wille van konsekwentheid se. 

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 redelik goeie resultate gee. 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 waarskynlik dit doen. Ons noem hierdie soort van die stilering van inline stilering. Die element styl is goed, in lyn met die begin tag. 

Vir mense wat regtig graag wil word georganiseer, jy kan begin om 'n bietjie kwaad oor hoe morsig dit alles lyk. Verbeel jou 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? Om dit op te los, mense uiteindelik begin vang tot die skeiding van hul HTML opmaak van hul CSS styling deur gebruik te maak van iets genaamd CSS keurders. CSS keurders word gebruik om elemente wat verklarings toegepas word om te kies. 'N keurder gekombineer met 'n lys van CSS verklarings is dikwels na verwys as 'n CSS reël. Hierdie reëls sou word tussen oop en beslote HTML styl tags, 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. Eers, laat se styl tags in die kop gedeelte van ons HTML. Volgende, die keurder. Ons sal begin deur die gebruik van een van die eenvoudigste keurders, die hash simbool, wat kies 'n HTML-element deur sy ID-attribuut. In hierdie geval sal ons kies die div wat verteenwoordig Rob se bekendstelling deur die tik van 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 hierdie draadjies, herstel, en koel, Rob se intro het nog 'n swart grens rondom dit minus die morsige inline lelikheid. 

Nou, wat as ons wou die h1 binnekant van Rob se intro te kies? U mag dink, "Kom ons stel 'n ID op dit en dan beweeg ons vroeëre style." Wat werk, maar CSS het ander maniere om jou te laat kies elemente deur gebruik te maak 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 leef binnekant van 'n ander keurder te spesifiseer. Dit klink 'n baie meer ingewikkeld as wat dit werklik is. Hier is 'n voorbeeld. Ons sal tik # beroof, voeg 'n spasie, en volg dit met 'n h1, 'n ander eenvoudige keurder het 'n tag selector wat kies tipes van elemente soos divs of paragrawe. Die ruimte kombineer ons 2 eenvoudige keurders, om alle CSS verklarings en die kode tussen krulhakies H1 tags wat leef binnekant van die element met id = "rob". Net om jou te oortuig dat dit werk, sal ek die lettertipe 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 hierdie style trek uit in 'n ander lêer heeltemal. 

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

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

Die gemeenskaplike combinators sluit spasie vir alle kinders en kommas keurders te onderskei. Ander wat jy mag teëkom sluit die pyltjie slegs vir direkte kinders, die tilde vir al die broers en susters wat na die element voorkom, en die plus teken vir die 1 broer of suster wat kom onmiddellik na die element. 

Deur kombinasie van hierdie keurders en combinators, jy kan verbreed die omvang van die stilering wat jy kan bereik op 'n gegewe webblad en CSS skryf meer doeltreffend. Met net 'n paar lyne van CSS jy my sien tik hier, Kan ek vinnig iets soos hierdie lyk 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 dat die bewoording verander. Ooh. Jammer.