[Speel van musiek] 

DOUG LLOYD: So laat ons 'n meer video om te praat oor 'n meer taal. Hierdie keer het ons sal praat oor CSS. So CSS, wat is kort vir Cascading Style Sheets, is 'n ander taal wat ons gebruik wanneer die bou van webwerwe. Dink so daaroor. As HTML is wat ons gebruik om die te organiseer inhoud wil ons op ons bladsy te sit, CSS is die instrument wat ons in die algemeen gebruik om aan te pas hoe ons webblaaie te kyk, en hoe die gebruikers ervaring regtig is, interaksie met ons webwerf. 

Soortgelyk aan HTML, CSS is nie 'n programmeertaal. Dit hoef nie logika. Dit maak nie veranderlikes. Dit maak nie enige soort van wat vloei verwant dinge wat C doen. Dit is 'n stilering taal. En sy sintaksis is redelik eenvoudig, en net beskryf hoe die elemente van ons bladsy het sekere HTML elemente moet verander. Aan die einde, as jy nie nog gekyk ons ​​video op HTML, vertroud met of HTML algemeen, jy dalk 'n blik op wat neem Eerstens, omdat hierdie bespreking van CSS gaan afhang kennis van HTML. 

So hier is 'n baie eenvoudige CSS style. Selfs as jy nog nooit geprogrammeer met CSS voor, Ek is redelik seker jy kan uitvind presies wat hierdie style doen. Wat doen dit? Wel, toegepas op die liggaam van ons web bladsy, alles tussen liggaam tags op ons HTML, en dit stel die agtergrond van die bladsy na blou. Wel, dit is 'n baie eenvoudige style. Dit is eintlik baie menslike vriendelike taal, CSS. So selfs as jy nog nooit gebruik voor, jy waarskynlik kon raai wat dit gedoen het. In werklikheid, as ons 'n bladsy laai, waar hierdie style is een of ander manier ingebed, die agtergrond kleur van ons sou bladsy wees blou, en nie die standaard wit. 

So hoe kan ons bou style? Wel in die eerste, moet ons identifiseer 'n keurder. In die laaste voorbeeld, dat selector was liggaam. Dan het ons 'n oop krullerige brace, en ons is gaan om te begin die definisie van die style vir daardie selector. In tussen die krulhakies ons net 'n lys van sleutel waarde pare. Die vorige waarde pair was agtergrond blou kommapunt, maar ons kon meer en meer van hierdie dinge te doen. Jy kan verskeie dinge wat aansoek doen dat die tag, wat selector liggaam. Elke een van hulle is geskei deur 'n kommapunt, en ons elkeen van hulle noem 'n verklaring, 'n CSS verklaring. Wanneer ons klaar is met al die stilering ons wil aansoek doen om daardie spesifieke tag, ons het net 'n sluiting krullerige gereed om die style eindig, en ons klaar die definisie van die style vir daardie spesifieke selector. 

Wat is 'n paar algemene CSS eienskappe? Wel, dalk wil jy om te sit 'n grens rondom iets. Sodat jy kan sê, grens, dat jou sleutel sou wees, en dan jou waardes sal wees, watter styl, kleur, en breedte jy wil dit te wees. So die styl kan 'n vaste wees lyn, 'n stippellyn, 'n gebroke lyn, 'n rif lyn, wat kronkellyn sou wees. Miskien wil jy dit wees blou of swart of groen. Miskien het jy dit wil hê 1 of 2 of 10 pixels wyd nie. Jy kan al hierdie dinge gee. Miskien wil jy die agtergrond stel kleur van jou bladsy in 'n bepaalde manier. Ons het reeds dat, die opstel van die agtergrond van die liggaam blou. 

Dan kan jy 'n sleutel woord te gebruik, so CSS sekere kleure wat gebou in dit, blou, groen, swart, 'n baie eenvoudige kleure wat ons ken. Maar jy kan ook enige spesifiseer hex kleur wat jy wil. Onthou dat kleure geïdentifiseer kan word deur 'n stel van drie blok getalle 0-255, rg en b, die rooi, groen en blou komponent. En so kan ons spesifiseer enige kleur wat ons wil deur in plaas van die gebruik van blou of groen of swart, gebruik van pond en dan ses syfers van blok, en dit sou ons te gee die ses syfer kleur. So wat is die agtergrond. 

Ons het ook die voorgrond kleur, wat gewoonlik gaan na die teks van jou bladsy wees. En jy kan insgelyks doen met die sleutel woord en of ses syfer blok. Sodat jy kan enige kleur spesifiseer jy wil vir die teks van jou bladsy teen 'n bepaalde agtergrond, bo. Jy kan ook verander en te hanteer met font, en die manier waarop die teks gelewer op die bladsy. 

So kan jy jou font grootte te verander. Jy kan die sleutel woorde, soos ekstra te gebruik, ekstra klein, of xx klein, medium of, groot, en so aan. Jy kan vaste punte te gebruik, 10 punt, 12 punt, en so aan. Jy kan persentasies, 80%, 20% gebruik, waar 100% is die standaard font grootte, wat gewoonlik gaan wees iets soos 11 of 12 punte. Of jy kan selfs baseer dit af van die mees onlangse lettergrootte. As jy net geskryf iets en jy weet wat jy wil hê, is om dit te kleiner, maar jy weet nie presies wat die grootte wat jy dit wil hê, goed, jy kan net sê, lettergrootte kleiner. En dit sal baseer af van die, net bo, dit is lettergrootte. En jy kan kleiner of groter te kry. So daar is 'n baie verskillende maniere om lettergrootte spesifiseer. 

Jy kan ook spesifiseer watter font familie wat jy wil. As jy 'n bepaalde naam, daar is 'n manier CSS-- ons gaan nie om daaroor te praat here-- 'n baie spesifieke font definieer en embed dit in jou bladsy. Jy kan ook gebruik generiese name. Daar is 'n baie veilige web fonts wat vooraf gedefinieer in CSS. En as jy 'n gebruiker van Microsoft Kantoor in die laaste 20 jaar, is jy waarskynlik vertroud met 'n groot deel van hierdie web veilige fonts reeds Times New Roman, Arial, Courier New, Georgia, Tahoma, Verdana, en so aan. Dit is al beskou web veilige fonts. En eintlik deel van die Daarom het hulle gekom om te wees is om gebruik te word om web-- maak elke bladsy het toegang tot hierdie standaard stel fonts met verskeie serifs, en dit alles font dinge wat ons sal nie in, maar dit is gewoonlik toeganklik in jou CSS, selfs as jy dit nie doen nie die fonts anders definieer. Laastens, kan jy jou teks te pas, in plaas van dit wat by verstek in lyn na links, jy kan belyn dit na die regte, of jy kan, sluit dit gesentreer, of geregverdig sodat dit tref beide marges. So dit is al die opsies wat jy kan gebruik om te verander wat jou teks lyk, en hoe dit vertoon word op jou bladsy. 

Jou keurders nie moet net tags wees. Ons het vroeër gesien het 'n liggaam tag selector, en tag selector lyk net soos dit. Jy noem 'n tag, en dan moet jy definieer 'n stylblad vir daardie tag. Maar jy kan ook iets te doen genoem 'n ID selector. 'N ID selector lyk redelik soortgelyk. Maar sien, wat nou ek is nie die gebruik van 'n HTML tag, ek gebruik, in hierdie geval, #unique, of hash uniek. As jy onthou van ons video op HTML, het ons gepraat oor hoe tags eienskappe kan hê. 

En een kenmerk wat van toepassing is om pretty much al HTML tags, maar ons het nie daaroor praat nie, is iets genaamd 'n ID-tag. So hierdie spesifieke CSS sou slegs van toepassing op HTML tag wat 'n baie spesifieke ID, wat jy genoem het. So as jy iewers in jou kode, iewers in jou HTML-lêer, 'n tag en jy spesifiseer as 'n kenmerk dat die tag, ID gelyk unieke, hierdie bepaalde style hier sal slegs van toepassing tussen dat tag met die ID van die unieke. 

Jy kan ook iets te doen bekend as 'n klas selector. So bykomend tot met ID eienskappe, kan jy ook voeg 'n kenmerk klas HTML tags. En wanneer jy 'n kenmerk klas te gebruik, dit toegepas kan word om verskeie tags. So as jy 'n paar dinge wat is soortgelyk, miskien jy wil sê, oop tag blah, blah, blah, blah, klas gelyk studente. En dan hierdie spesifieke style van toepassing sal wees elke tag wie klas studente. In hierdie geval, sou ons stel die agtergrond tot geel, en ons wil ondeursigtigheid te stel, wat is 'n tag ons nie praat oor, maar net te doen het met hoe deursigtig iets is, tot 70%, in hierdie geval. 

Daar is twee opsies vir die skryf style. Jy kan hulle skryf direk in jou HTML deur die plasing van die style tussen styl tags. En dié styl tags gaan binnekant van die hoof van die tags jou webblad. Die miskien meer voorkeur manier om dit te doen dit is om 'n aparte Css lêer skryf, en skakel dit dan in jou dokumenteer behulp skakel tags. Link tags, weer, is anders hiperskakels, As jy onthou van ons video 'n HTML. En 'n skakel tags is hoe ons trek in aparte lêers. Dit soort van soos die ekwivalent van die include vir web ontwikkeling. 

So laat ons neem 'n blik op table.HTML. As jy onthou van ons HTML video, ek het 'n voorbeeld van 'n baie eenvoudige vermenigvuldiging tafel wat mooi gekyk lelik, en miskien is daar ' 'n manier om dit beter te maak met CSS, maak dit eintlik lyk meer soos 'n vermenigvuldiging tafel, of iets wat nie net saam vas met geen werklike verdeling tussen die rye en kolomme. So laat kop bo aan CS50 IDE, en neem 'n blik hoe CSS kan, soort van, tweak wat ons het begin met voor, en maak dit iets wat 'n baie beter. 

So ons is in CS50 IDE nou, en as onbekende, ons sal op trek in hierdie tabel HTML-bladsy. Table.HTML basies net definieer die inhoud van 'n multiple-- dit veronderstel was om te wees 'n vier deur vier vermenigvuldiging tafel. Dit is redelik eenvoudig. En ons sou dink dat dit sou kyk mooi goed georganiseer. Maar in werklikheid, wanneer ons 'n voorbeeld van hierdie bladsy sien ons dat dit is soort van lelik, reg? Duidelik het ons rye en kolomme hier. Daar 'n soort van skeiding. Maar dit is nie 'n betekenisvolle skeiding. Ons is nie eintlik om te veel inligting hier. En daar is geen skeiding tussen die rye en kolomme in terme horisontale of vertikale reëls. Ons kan dit waarskynlik ' kyk 'n bietjie beter. So kom ons probeer. So ek gaan hierdie blad hier te sluit. En ek gaan my table.HTML sluit, en ek het 'n ander weergawe hier genoem table2.HTML. Ons sal oop te maak. Die liggaam van die bladsy is pretty much dieselfde, maar ek het verander bietjie aan die bokant. En ek sal hier blaai. Let daarop dat hierdie tyd, ek is met behulp van ingeboude styl tags. Ek het 'n styl tag geopen, en ek is nou definisie van 'n CSS style net binne daarvan. Ek het 'n stylblad wat sê, tafel. Dit is my tag selector. Ek is nie die gebruik van dot of hash, wat ek sou as ek doen was met 'n ID of 'n klas selector. Ek het 'n tag selector here-- tafel. Hierdie styl gaan van toepassing op elke tafel tag. Blykbaar wil ek 'n een sit pixel wye, soliede blou grens, in my tafel. Dit klink soos dit sou waarskynlik help om die situasie reg? Ons gaan hê dinge lyk baie beter. So dit is goed. Stilisties, ek het net ingebed my style hier. Dit is beslis 'n aanvaarbare manier om dit te doen. Kom ons kyk wat dit lyk soos. So sal ek weer hier af te gaan, en Ek sal gaan n voorbeeld van my table2.HTML. Wel, dit is nie heeltemal wat ek wou, maar dit is presies wat ons gevra het. Ons het gesê dat hierdie styl is gaan om aansoek te doen om ons tafel. Ons tafel het nou 'n een pixel wye, soliede blou grens rondom dit. Ons is nie eintlik om by die tafel selle. Ons is net om by die tafel. So CSS gewerk. Dit het 'n aansoek gedoen style om ons tafel. Maar nie heeltemal nie wat ons wou om dit te doen. Hoe kry ons te doen wat ons wil om dit te doen? 

Wel, laat ons neem 'n blik op 'n meer weergawe van hierdie in table3.HTML. So is ek net gaan hierdie oortjies toemaak. Ek gaan hier terug oor gaan na my lêer boom en maak table3.HTML. Weereens, dit gaan kyk mooi soortgelyke hier aan die begin. Maar kennisgewing, hierdie tyd, in plaas van die gebruik van 'n stylblad ingebed reg daar, Ek gaan om te skakel in 'n style met behulp van die skakel tag. So ek glo in 'n koppel style genoem tables.CSS, en dit goed gelyk style net means-- goed, wat is hierdie lêer relatief tot wat Ek is doing-- is 'n stylblad dat ek die gebruik van vir my bladsy. So as ek wil regtig om te sien wat Ek doen met die CSS hier Ek nodig het om oop te gaan wat table.CSS lêer as well. So ons sal terug te gaan oor hier weer ons lêer boom. Daar is table.CSS. Ons sal dit pop oop. Nou ons sien 'n bietjie van die CSS. Blykbaar, ek het 'n paar dinge hier aangaan nie. Ek wil glo 'n vyf te sit pixel wye, soliede rooi grens, rondom my tafel. Ons weet reeds dat dit gaan om net te gaan op die omtrek. Ons het gesien dat in table2.HTML. Met elke ry, ek blykbaar wil spesifiseer dat die ryhoogte is 50 pixels hoog. So vir elke ry, onthou dit is wat die tr tag doen, Ek maak dit 50 pixels hoog. 

Laastens, ek het hierdie kommentaar. En dit is hoe ons kommentaar in CSS. Dit is baie soortgelyk aan blok te gryp kommentaar sintaksis slash ster. Al die teks wat jy wil. Daar is geen slash slash al in CSS. Vir 'n kort inline kommentaar, ons het hierdie spesifieke formaat hier te gebruik. Dit lyk asof ek 'n doen Baie van die dinge in my td tags. Onthou td tags, of tafel data, wat eintlik net die kolomme binnekant van ons rye, en blykbaar vir elke stukkie van data in my tafel, ek wil op die agtergrond kleur te stel om wees swart, die kleur wit wees, kleur is voorgrond kleur. So dit gaan wees die teks van my bladsy. Ek wil 'n groot font, 22 wys font, en ek wil dit moet wees van die font familie, Georgia. So ek is nie van plan om die verstek skrif. Ek gaan Georgia, spesifiseer watter is een van daardie web veilige fonts dat ons voorheen gesien het. Ek wil my teks in lyn sentraal, in die middel van die boks, Ek wil dit nie gelaat word lyn of regs belyn. En ek wil my kolomwydte te wees 50 pixels wyd as well. Kom ons neem 'n blik op wat dit lyk, en kyk of dit is dalk 'n verbetering. So ek gaan om te gaan na table3.HTML, wat Onthou, sluit table.CSS as 'n skakel, en ons sal dit 'n voorbeeld. Dit is 'n baie beter, reg? Dit is eintlik begin om 'n lyk baie meer soos 'n tafel van vermenigvuldiging. Ek het daardie rooi grens rondom my tafel maar nou Ek het ook bepaal dat elke ry is 50 pixels wyd, of is dit 50 pixels tall-- verskoning me-- elke kolom is 50 pixels wyd nie. Die data in elke kolom, en slegs die data, het 'n swart agtergrond. So dit is waarom diegene wit lyne is daar. Omdat die ruimte in tussen al die selle, dit is nie 'n grens in en van die self, dit is net Ek is maar net in te vul die selle, wat eintlik maak die grense van die tafel, wat blykbaar bestaan ​​het nie almal saam, dit was net dun wit lyne. Nou is hulle sigbaar. Nou pop hulle af op die skerm. En so is dit 'n baie eenvoudige style wat ek gedoen het, en nou my tafel lyk baie meer soos 'n vier deur vier vermenigvuldiging tafel, in plaas van 'n regverdige deurmekaar gemors, waar alles is duidelik rye en kolomme, maar nie super goed georganiseer. Ons is regtig net krap die oppervlak van wat jy hier kan doen met CSS. Gelukkig het die CSS dokumentasie is redelik eenvoudig. Jy sal 'n paar van die gebruik van sy eienskappe, redelik gereeld. Die mense het ons gepraat oor vroeër in hierdie video. Daar is verskeie dat jy sal waarskynlik nie gebruik nie. En dit is ook goed. Maar net weet, dat daar 'n baie dokumentasie wat daar is. So selfs as ons nie dek alles, jy beslis nie links op jou eie. Maar CSS is regtig pret om te eksperimenteer met. En ek sou raai u om te speel met jou web bladsye, en sien hoe jy hulle kan maak lyk en voel aan die gebruiker te verbeter ervaring van die besoek van jou bladsy. Ek is Doug Lloyd. Dit is CS50.