[MUZIKO Ludante] 

DOUG LLOYD: Do ni prenu pli video paroli pli lingvo. Ĉi tiu fojo ni parolos pri CSS. Do CSS, kio estas mallongigo de Laŭtemaj Sheets, Estas alia lingvo ni uzas kiam konstruanta retejojn. Pensu pri ĝi kiel ĉi. Se HTML estas kion ni uzas por organizi la enhavon ni volas meti sur nia paĝo, CSS estas la ilo kiun ni ĝenerale uzos agordi kiom niaj retejoj rigardu, kaj kiel la uzanto sperto vere estas, interagante kun nia retejo. 

Similaj al HTML, CSS estas ne programlingvo. Ĝi ne havas logikon. Ĝi ne havas variabloj. Ĝi ne havas ajnan specon de tiu flui rilataj aferoj ke C faras. Estas stilo lingvon. Kaj ĝia sintakso estas bela simpla kaj simple priskribas kiom la elementoj de nia paĝo havas certajn HTML elementoj devus esti modifita. Al tiu fino, se vi ne havas tamen spektis nia vídeo en HTML, aŭ ne kutimas HTML ĝenerale, vi eble volos preni rigardi ke unua, ĉar tiu diskuto de CSS tuj dependos iun scion de HTML. 

Do jen vere simpla CSS stilfolio. Eĉ se vi neniam programita per CSS antaŭ, Mi estas sufiĉe certa ke vi povas diveni ĝuste kion ĉi stilfolio faras. Kion ĝi faras? Nu, aplikita al la korpo de nia retejo paĝo, ĉiu inter korpo etikedoj sur nia HTML, kaj ĝi fiksas la fonkoloro de tiu paĝo al blua. Nu, estas tre simpla stilfolio. Ĝi estas fakte tre homa amika lingvo CSS. Do eĉ se vi neniam uzis ĝin antaŭ, vi probable povus diveni kion tio faris. Fakte, se ni ŝarĝas paĝon, kie tiu stilfolio estis enigita iel, la fonkoloro de nia paĝo volus esti bluaj, ne la norma blanka. 

Do kiel ni konstruas stylesheets? Nu unue, ni devas identigi elektilo. En la lasta ekzemplo, ke seleccionador estis korpo. Tiam ni havas malferman krispa krampoj, kaj ni estas tuj komencos difinanta la stilfolio por ke elektilo. Intere la krispa krampoj, ni nur havas liston de ŝlosila valoro paroj. La antaŭa valoro paro estis fonkoloro blua punktokomo, sed ni povus fari pli kaj pli da tiuj. Vi povus havi multoblajn aferojn aplikanta al tiu etikedo, ke elektilo korpo. Ĉiu el ili estas apartigitaj per punktokomo, kaj ni nomas cxiun el ili deklaro, CSS deklaro. Kiam ni faris kun ĉiuj stilo ni volas apliki al tiu aparta etikedo: ni nur havas fermante krispa stegi fini la stilfolio, kaj ni faris difinanta la stilfolio por ke aparta elektilo. 

Kion estas kelkaj komunaj CSS propraĵoj? Nu, eble vi volas meti kiel limon ĉirkaŭ io. Do vi povas diri, limo, tio estus via kerna, kaj tiam viaj valoroj estus, kion stilo, koloro kaj larĝo Vi volas ke ĝi estu. Do la stilo povus esti solida linio, punktita linio, kuregita linio, kresto linio, kiu estus ondecaj linio. Eble vi volas havi ĝin esti blua aŭ nigra aŭ verda. Eble vi volas ke ĝi estu 1 aŭ 2 aŭ 10 rastrumeroj larĝa. Vi povas specifi ĉiujn tiujn aferojn. Eble vi volas agordi la fonon koloro de via paĝo en aparta maniero. Ni jam vidis, ke, metante la fono de la korpo esti blua. 

Tiam vi povas uzi ŝlosila vorto, tiel CSS havas certaj koloroj ke estas konstruitaj en ĝin, blua, verda, nigra, tre simplaj koloroj ni konas. Sed vi povas ankaŭ specifi ajnan deksesumajn koloro kiu vi ŝatus. Memoru ke koloroj povas esti identigitaj per aro de tri deksesumajn nombrojn de 0 ĝis 255, RG kaj b, la ruĝa, verda kaj blua komponantoj. Kaj tiel ni povas specifi ajna koloro ni volas per, anstataŭ uzi blua aŭ verda aŭ nigra, uzante funto kaj tiam ses ciferoj de deksesumajn, kaj tio donus al ni la ses cifera koloro. Do jen la fonkoloro. 

Ni ankaŭ havas la malfono koloro, kiu kutime tuj estos la tekston de via paĝo. Kaj vi povus simile fari tion kun ĉefvorto kaj aŭ ses cifera deksesuma. Do vi povas specifi ajnan koloron vi volas por la teksto de via paĝo kontraŭ aparta fonkoloro, super. Vi povas ankaŭ ŝanĝi kaj trakti kun tiparo kaj vojon teksto estas pruntitaj sur la paĝo. 

Do vi povas ŝanĝi viajn tiparo. Vi povas uzi ŝlosila vortoj, kiel ekstra, ekstraj malgrandaj, aŭ xx malgrandaj aŭ mezaj, granda, kaj tiel plu. Vi povas uzi fiksaj punktoj, 10 punkto, 12 punkton, kaj tiel plu. Vi povas uzi procentoj, 80%, 20%, kie 100% estas la defaŭlta tiparo grandeco, kiu estas kutime tuj esti io kiel 11 aŭ 12 poentoj. Aŭ vi eĉ povas bazi ĝin de la plej lastatempa tiparo. Se vi simple skribis ion kaj vi scias kion vi volas, estas ke ĝi estu pli malgranda, sed vi ne scias precize kion grandeco vi volas esti, bone, vi povas nur diri, tiparo grandeco pli malgranda. Kaj ĝi bazos ekstere de la, nur super, estas tiparo. Kaj vi povas akiri pli malgrandaj aŭ pli grandaj. Do ekzistas multaj malsamaj manierojn por specifi tiparo. 

Vi povas ankaŭ specifi kion Tiparofamilio vi volas. Se vi havas apartan nomo, ekzistas trairejo en CSS-- ni ne tuj paroli pri ĝi here-- difini tre specifa tiparo kaj enmeti ĝin en vian paĝon. Vi povas ankaŭ uzi genraj nomoj. Ekzistas multe de retejo sekura tiparojn kiuj pre-difinita en CSS. Kaj se vi estas uzanto de Microsoft Oficejo en la lastaj 20 jaroj, vi probable konas multe de tiuj ttt sekuraj tiparoj jam, Times New Roman, Arial, Courier New, Georgia, Tahoma, Verdana, kaj tiel Plu. Tiuj estas ĉiuj konsideritaj retejo sekura tiparojn. Kaj fakte, parto de la Tial ili venis esti estis esti uzita fari web-- ĉiu paĝo havis aliron al tiu defaŭlta aro de tiparoj kun diversaj serifs, kaj ĉio ĉi tiparo aĵojn ni ne enir, sed tiuj estas kutime atingebla en via CSS, eĉ se vi faras ne alie difini la tiparoj. Fine, vi povas vicigi vian tekston, anstataŭe de ĝi estante, implicite, vicigitaj al la maldekstra, vi povis align gxi dekstren, aŭ vi povus vicigi ĝin centrita, aŭ pravigis tiel ke ĝi trafis ambaŭ randoj. Do tiuj estas ĉiuj ebloj vi povas uzi ŝanĝi kion via teksto aspektas, kaj kiel ĝi estas montrita sur via paĝo. 

Via selectores ne esti etikedoj nur. Ni antaŭe vidis korpo etikedo selector, kaj etikedo selector aspektas ĝuste tiel. Vi Nomi etikedo, kaj tiam vi difini stilfolio por tiu etikedo. Sed vi povas ankaŭ fari ion nomata ID elektilo. IRU elektilo ŝajnas sufiĉe similaj. Sed rimarki, ke nun mi ne uzas HTML tag, mi uzas, en tiu kazo, #unique, aŭ hash unika. Se vi memoras de nia video en HTML, ni parolis pri kiel etikedoj povas havi atributojn. 

Kaj unu atributo kiu aplikas al preskaux cxio HTML etikedoj, sed ni ne parolas pri tio, Estas io nomata ID etikedo. Do tiu aparta CSS volus apliki nur al HTML etikedo kiu havas tre specifa ID, kiun vi jam nomis. Do se vi havas ie en via kodo, ie en via HTML-dosieron, etikedo kaj vi specifi kiel atributo al tiu etikedo, ID egalas unika, tiu aparta stilfolio tie estos nur apliki intere ke etikedo kun la ID de unika. 

Vi povas ankaŭ fari ion nomata klaso elektilo. Do krom havi ID atributoj, vi povas ankaŭ aldonu klaso atributo al HTML etikedoj. Kiam vi uzas klaso atributo, ĝi povas esti aplikita al multoblaj etikedoj. Do se vi havas plurajn aferojn estas similaj, eble vi volas diri, malfermita etikedo bla, bla, bla, bla, klaso egalas studentojn. Kaj tiam ĉi tiu aparta stilfolio aplikus por ĉiu etikedo kies klaso estas lernantoj. En tiu kazo, ni volas agordi la fonkoloro al flava, kaj ni volas agordi opakeco, kiu estas etikedo ni ne raporti, sed gxuste traktas kiel travidebla io, al 70%, en tiu kazo. 

Ekzistas du ebloj por skribo stylesheets. Vi povas skribi ilin rekte al via HTML metante la stylesheets intere stilo etikedoj. Kaj tiuj stilo etikedoj iras ene de la kapo etikedoj de via retpaĝo. La eble plej prefera maniero fari ĝi estas skribi apartan Css dosiero, kaj tiam ligi ĝin en vian dokumenti uzante ligilon etikedoj. Link etikedoj, denove, estas malsama hiperligiloj, se vi memoras de nia vídeo HTML. Kaj karmo etikedoj estas kiel ni tiri en apartaj dosieroj. Ĝi ia kiel la ekvivalento de la include por ttt programado. 

Do ni rigardu table.HTML. Se vi memoras de nia HTML vídeo, mi montris ekzemplo de tre simpla multipliko tablo kiu aspektis bela malbela, kaj eble tie estas maniero por fari ĝin pli bone kun CSS, por fari ĝin vere aspektas pli kiel multipliko tablo, aŭ io kiu ne ĝuste kungluiĝis sen fakta divido inter la vicoj kaj la kolumnoj. Do ni estrus super al CS50 IDE, kaj rigardu ĉe kiel CSS povas, ia, tweak kion ni komencis kun antaŭe, kaj fari ion multe pli bonan. 

Do ni estas en CS50 IDE nun, kaj se ne konas, ni tiri supren en tiu tablo ke HTML-paĝo. Table.HTML esence nur difinas la enhavon de multiple-- ĝi laŭsupoze estis kvar de kvar multipliko tablo. Ĝi estas bela simpla. Kaj ni pensus ke estus belaspektas bone organizita. Sed fakte, kiam ni antaŭrigardi ĉi paĝo, ni vidas ke ĝi estas speco de malbelaj, ĉu ne? Klare ni havas vicoj kaj kolumnoj tie. Ekzistas ia disiĝo. Sed ĝi ne estas signfa disiĝo. Ni fakte ne ricevas tro da informo ĉi tie. Kaj ekzistas neniu apartigo inter la vicoj kaj kolumnoj en terminoj de horizontala aŭ vertikala reguloj. Ni povus probable faras ĉi aspektas iomete pli bone. Do ni provu. Do mi tuj fermi ĉi langeto tien. Kaj mi tuj fermi mian table.HTML, kaj mi havas alia versio tien nomata table2.HTML. Ni malfermu ke ĝis. La korpo de la paĝo estas preskaux la samo, sed mi ŝanĝis la iomete ĉe la supro. Kaj mi rulumu supren tie. Rimarku ke tiu tempo, mi estas uzante enigita stilo etikedoj. Mi malfermis stilo etikedo, kaj mi estas nun difinanta CSS stilfolio ĝuste interne de ĝi. Mi havas stilfolion kiu diras, tablo. Jen mia etikedo selector. Mi ne uzas punkton aŭ hash, kion mi farus se mi estis uzanta ID aŭ klaso elektilo. Mi havas etikedo selector here-- tablo. Tiu stilo tuj apliki por cxiu tablo etikedo. Ŝajne mi volas meti unu rastrumera, solida blua limo, ene mia tablo. Tio sonas kiel ĝi volus verŝajne helpi la situacio, ĉu ne? Ni tuj devas tion aspektas multe pli bone. Do tio estas bone. Stile, mi ĵus enigita mia stilfolio tien. Estas certe akceptebla maniero fari ĝin. Ni vidu kion ĉi aspektas. Do mi reiros tie, kaj Mi estos antaŭrigardi mia table2.HTML. Nu, tio ne estas tre kion mi volis, sed estas precize kion ni petis. Ni diris ke tiu stilo estas tuj apliki al nia tablo. Nia tablo nun havas unu rastrumero larĝe, solida blua limo ĉirkaŭ ĝi. Ni fakte ne ricevas ĉe la tablo ĉeloj. Ni nur nun ĉe la tablo. Do CSS laboris. Oni aplikis stilfolion al nia tablo. Sed ne precize fari kion ni volis fari. Kiel ni akiras fari kion ni volas fari? 

Nu, ni rigardu pli versio de tiu en table3.HTML. Do mi simple tuj fermi tiujn langetoj. Mi tuj reiros tien al mia file arbo, kaj malfermu table3.HTML. Denove, ĝi tuj belaspektas simila tie komence. Sed avizo, ĉifoje, anstataŭ uzi a stilfolio enigita dekstre en tie, Mi tuj ligas en stilfolio uzante la ligilon etikedo. Do mi ŝajne interliganta en stilfolio nomita tables.CSS, kaj tio bone egalas stilfolio nur means-- bone, kio estas la dosiero relativa al kio Mi doing-- estas stilfolio ke mi estas uzante mian paĝon. Do, se mi vere volas vidi kia Mi faras kun la CSS tie, Mi bezonas iri malfermita tiu table.CSS file tiel. Do ni revenu ĉi tien denove al nia dosiero arbo. Ekzistas table.CSS. Ni pop ĝin malferma. Nun ni vidas iom el la CSS. Ŝajne, mi havas paron de aferoj okazas ĉi tie. Mi ŝajne volas meti kvin rastrumera, solida ruĝa limo, ĉirkaŭ mia tablo. Ni jam scias ke tio okazas nur iri sur la perimetro. Ni vidis, ke en table2.HTML. Kun ĉiu vico, mi ŝajne volas specifi ke la vico alteco estas 50 rastrumeroj alta. Do por ĉiu vico, memori jen kion la tr etikedo faras, Mi faras gxin 50 rastrumeroj alta. 

Finfine, mi havas komenton. Kaj jen kiel ni faras komentojn en CSS. Ĝi estas tre simila al konfiski bloko komentoj sintakso oblikvo stelo. La tuta teksto kiun vi volas. Mankas oblikvo oblikvo kvankam en CSS. Por mallonga inline komentojn, ni havas uzi ĉi aparta formato ĉi tie. Aspektas kiel mi faras Multon en mia td etikedoj. Memoru td etikedoj, aŭ tablo datumo, kiu vere estas nur la kolumnoj ene de niaj vicoj, kaj ŝajne por ĉiu peco de datumoj en mia tablo, mi volas por agordi la fonan koloron por esti nigra, la koloro esti blanka, koloro estas malfona koloro. Do tiu tuj estos la teksto de mia paĝo. Mi volas grandan tiparon, 22 atentigi tiparo, kaj mi volas ĝin esti de la tipara familio, Kartvelio. Do mi ne tuj havas la defaŭlta tiparo. Mi tuj entajpi Kartvelio, kiu Estas unu el tiuj ttt sekuraj tiparoj ke ni vidis antaŭe. Mi volas mian tekston vicigitaj centre, en la mezo de la skatolo, Mi ne volas ke ĝi restu vicigitaj aŭ dekstra vicigitaj. Mi volas mian kolumno larĝa esti 50 rastrumeroj larĝa tiel. Ni rigardu kion tio aspektas kiel, kaj vidi se tiu estas eble plibonigo. Do mi tuj iras al table3.HTML, kiu revokon, inkludas table.CSS kiel ligilo, kaj ni antaŭrigardi ĝin. Tio estas multe pli bone, ĉu ne? Tiu estas efektive komencas aspekti multe pli kiel multipliko tablo. Mi havas tion ruĝan limon ĉirkaŭ mia tablo sed nun Mi ankaŭ indikis, ke ĉiu vico estas 50 rastrumeroj larĝa, aŭ ĝi estas 50 rastrumeroj tall-- ekskuzo kunulinon ĉiu kolumno estas 50 rastrumeroj larĝa. La datumoj en ĉiu kolumno, kaj nur la datumoj, havas nigran fonon. Tial do tiuj, blankaj linioj estas tie. Ĉar la spaco en inter ĉiuj el tiuj ĉeloj, ĝi ne estas limo en kaj de sin, estas nur Mi nur plenigi la ĉeloj, kiuj reale faras la limojn de la tablo, kiu ŝajne ekzistas ĉiuj kune, ĝi estis nur maldikaj blankaj linioj. Nun ili estas videblaj. Nun ili pop off sur la ekrano. Kaj tiel tio estas tre simpla stilfolio ke mi aplikis, kaj nun mia tablo aspektas multe pli kiel kvar de kvar multipliko tablo anstataŭ ĝuste senorda amaso, kie ĉio estas klare vicoj kaj kolumnoj, sed ne súper bone organizita. Ni vere nur skrapi la surfaco de kio vi povas fari kun CSS tie. Feliĉe la CSS dokumentado Estas bela simpla. Vi uzos pluraj de liaj atributoj, sufiĉe ofte. La ones ni parolis pri pli frue en ĉi tiu video. Ekzistas pluraj kiu vi probable ne uzos ĉiujn. Kaj tio estas bone, tro. Sed ĝuste scias, ke tie estas Multa dokumentado tie. Do eĉ se ni ne kovris ĉion, vi certe ne lasita sur via propra. Sed CSS estas vere amuza eksperimenti kun. Kaj mi forte kuraĝigas vin ludi proksimume kun viaj retpaĝoj, kaj vidi kiel vin povas fari ilin fasadon por plibonigi la uzanto sperto de viziti vian paĝon. Mi Doug Lloyd. Jen CS50.