[Daqq tal-mużika] 

Doug LLOYD: Mela ejja tagħti wieħed aktar video biex jitkellmu dwar il-lingwa waħda aktar. Din id-darba aħna ser nitkellmu dwar CSS. Allura CSS, li huwa qasir għall Cascading Style Sheets, ilsien ieħor li nużaw meta jinbena websajts. Taħseb dwarha bħal dan. Jekk HTML huwa dak li nużaw biex torganizza l- kontenut irridu li jitqiegħdu fuq il-paġna tagħna, CSS huwa l-għodda li aħna ġeneralment jużaw customize kif websajts tagħna tfittex, u kif l-esperjenza utent verament huwa, interazzjoni mal-website tagħna. 

Simili għall HTML, CSS huwa mhux lingwa ta 'programmar. Huwa ma jkollu loġika. Huwa ma jkollu varjabbli. Huwa ma jkollu xi tip ta 'dik fluss affarijiet relatati li C ma. Huwa lingwa grafika. U s-sintassi tagħha hija pjuttost sempliċi, u biss jiddeskrivi kif l-elementi ta 'tagħna paġna għandek ċerti HTML elementi għandhom jiġu modifikati. Għal dak il-għan, jekk inti ma jkunux għadhom jarah video tagħna fuq HTML, jew ma jkunux familjari ma ' HTML ġeneralment, inti tista 'tixtieq li tagħti ħarsa lejn dak ewwel, minħabba din id-diskussjoni ta 'CSS se jiddependu fuq xi għarfien tal-HTML. 

Allura hawnhekk verament stylesheet CSS sempliċi. Anke jekk inti stajt qatt programmati ma 'CSS qabel, Jien pretty żgur li inti tista 'figura eżattament dak li dan stylesheet ma. X'tikkontrolla do? Ukoll, applikat għall-korp ta 'web tagħna paġna, kollox bejn tags ġisem fuq HTML tagħna, u hi tistipula l- kulur fl-isfond ta 'dik il-paġna għal ikħal. Ukoll, huwa stylesheet sempliċi ħafna. Huwa fil-fatt ħafna mill-bniedem lingwa friendly, CSS. Għalhekk anki jekk inti stajt qatt jintużaw qabel, inti probabilment setgħu jaqtgħu xi jfisser li għamlet. Fil-fatt, jekk aħna mgħobbija paġna, fejn dan stylesheet kien inkorporat b'xi, isfond bil-kulur tal-paġna tagħna se jkun blu, u mhux l-istandard abjad. 

Allura kif nistgħu nibnu stylesheets? Ukoll l-ewwel, irridu jidentifikaw selettur. Fl-aħħar eżempju, li selettur kien korp. Imbagħad għandna miftuħa kaboċċi Brace, u aħna qed ser tibda tiddefinixxi l- stylesheet għal dak selettur. Fil bejn il-braces kaboċċi, aħna biss jkollhom lista ta 'pari b'valur ewlenin. Il-par-valur ta 'qabel kien kulur fl-isfond punto virgola blu, imma stajna nagħmlu aktar u aktar ta 'dawn. Jista 'jkollok affarijiet multipli li japplikaw għal dak tag, dak il-korp selettur. Kull wieħed minnhom huwa separat minn virgola, u aħna sejħa kull wieħed minnhom dikjarazzjoni, dikjarazzjoni CSS. Meta aħna qed isir bl grafika l-we jridu japplikaw għal dik tag partikolari, aħna biss ikollhom kaboċċi għeluq jgħaqqad biex itemmu l-stylesheet, u aħna qed isir tiddefinixxi l-stylesheet għal dak selettur partikolari. 

Liema huma xi proprjetajiet komuni CSS? Well, forsi inti tixtieq li tqiegħed fruntiera madwar xi ħaġa. Allura inti tista 'tgħid, fuq il-fruntiera, li jkun prinċipali tiegħek, u mbagħad valuri tiegħek tkun, liema stil, kulur, u l-wisa inti tixtieq li jkun. Allura l-istil jista 'jkun solida linja, linja bit-tikek, linja dashed, linja linja, li jkun f'linja mmewġa. Forsi inti tixtieq li jkollok dan jkun blu jew suwed jew aħdar. Forsi inti tixtieq li jkun 1 jew 2 jew 10 pixels wiesgħa. Tista 'tispeċifika kollha ta' dawk l-affarijiet. Forsi inti tixtieq li twaqqaf l-isfond kulur tal-paġna tiegħek b'mod partikolari. Aħna diġà raw li, li jistabbilixxi l- isfond tal-ġisem li jkun blu. 

Imbagħad inti tista 'tuża kelma prinċipali, hekk CSS għandu ċerti kuluri li huma mibnija fih, blu, aħdar, iswed, kuluri sempliċi ħafna nafu. Iżda int tista 'wkoll tispeċifika kwalunkwe hex kulur li tixtieq. Recall li l-kuluri jista 'jiġi identifikat minn sett ta 'tliet numri hex 0-255, RG u b, il- aħmar, aħdar, blu u komponent. U hekk aħna tista 'tispeċifika kwalunkwe kulur irridu minn, minflok li jużaw blu jew aħdar jew iswed, użu lira u mbagħad sitt ċifri tan hex, u li tagħtina il-kulur sitt ċifri. Allura dak l-kulur fl-isfond. 

Għandna wkoll il-tagħrif miksub kulur, li normalment se jkun it-test tal-paġna tiegħek. U inti tista 'tagħmel dan bl-istess mod ma kelma prinċipali u jew sitt hex ċifri. Allura inti tista 'tispeċifika kwalunkwe kulur inti tixtieq għat-test tal-paġna tiegħek kontra partikolari kulur fl-isfond, up fuq. Tista 'wkoll bidla u jittrattaw ma font, u t-test mod hija mogħtija fuq il-paġna. 

Allura tista 'tbiddel id-daqs tat-tipa tiegħek. Tista 'tuża kliem ewlieni, bħal extra, extra żgħar, jew xx żgħar, jew medju, kbar, u l-bqija. Tista 'tuża punti fissi, 10 punt, 12 punt, u l-bqija. Tista 'tuża persentaġġi, 80%, 20%, fejn 100% huwa l-font default daqs, li normalment se jkun xi ħaġa bħal 11 jew 12-il punt. Jew inti tista 'anki tibbaża it off tad-daqs tat-tipa-aktar riċenti. Jekk inti biss kiteb xi ħaġa u inti taf dak li trid hi li għandha tkun iżgħar, imma ma tafx eżattament liema daqs għandek tixtieq li tkun, ukoll, inti tista 'biss jgħidu, daqs tat-tipa iżgħar. U se tibbaża off tal-, biss up hawn fuq, huwa daqs tat-tipa. U inti tista 'tikseb iżgħar jew ikbar. Allura hemm ħafna ta 'differenti modi biex tispeċifika daqs tat-tipa. 

Tista 'tispeċifika wkoll liema familja font inti tixtieq. Jekk ikollok xi partikolari isem, hemm mod fil CSS-- aħna mhux qed tmur biex jitkellmu dwar dan here-- li tiddefinixxi font speċifiċi ħafna u ssodata fis-paġna tiegħek. Tista 'wkoll tuża ismijiet ġeneriċi. Hemm ħafna ta 'web fonts sikuri li huma ddefiniti minn qabel CSS. U jekk int utent ta 'Microsoft Uffiċċju fl-aħħar 20 sena, int probabilment familjari ma ' ħafna ta 'dawn fonts web siguri diġà, Times New Roman, Arial, Courier New, il-Ġeorġja, Tahoma, Verdana, u l-bqija. Dawk huma kollha meqjusa web fonts sikuri. U fil-fatt, parti mill- raġuni beda jiġi kien li jintużaw biex jagħmlu web-- kull paġna kellhom aċċess għal din standard stabbilit ta fonts ma serifs varji, u dan kollu Jittieħed font aħna mhux se jsibu rwieħhom, iżda dawn huma ġeneralment aċċessibbli CSS tiegħek, anki jekk inti ma xort'oħra jiddefinixxu l-fonts. Fl-aħħar nett, inti tista 'tikkonforma test tiegħek, minflok ma jkun, awtomatikament, allinjati lejn ix-xellug, inti tista ' allinjata lejn il-lemin, jew inti tista allinjata ċċentrata, jew ġustifikat b'mod li tolqot żewġ marġini. Għalhekk dawn huma għażliet kollha tista 'tuża għall-bidla dak it-test tiegħek Dehra, u kif huwa muri fuq il-paġna tiegħek. 

Seletturi tiegħek ma għandhom ikunu tags biss. Aħna diġà raw tag korp selettur, u selettur tag ma tfittex biss bħal dik. Semmi tikketta, u allura inti jiddefinixxu stylesheet għal dak tag. Iżda int tista 'wkoll tagħmel xi ħaġa jissejjaħ selettur ID. An selettur ID jistenna pretty simili. Iżda avviż, li issa jien ma jużawx tag HTML, jien jużaw, f'dan il-każ, #unique, jew hash uniku. Jekk inti recall minn tagħna video fuq HTML, tkellimna dwar kif lametti tista 'tħalli attributi. 

U attribut wieħed li japplika li pretty ħafna tikketti kollha HTML, imma aħna ma jitkellmu dwar dan, hija xi ħaġa imsejħa tag ID. Allura dan CSS partikolari kieku japplikaw biss għal HTML tag li għandha ID speċifiċi ħafna, li inti stajt msemmija. Mela jekk għandek xi mkien fil-kodiċi tiegħek, x'imkien fil-fajl HTML tiegħek, tag u inti jispeċifika bħala attribut għal dak tikketta, ID ugwali unika, dan partikolari stylesheet hawnhekk se japplikaw biss bejn li tag bl-ID tal unika. 

Tista 'wkoll tagħmel xi ħaġa imsejħa selettur klassi. Allura barra li ID attributi, inti tista 'ukoll żid attribut klassi biex HTML tags. U meta tuża attribut klassi, jista 'jiġi applikat għall tags multipli. Mela jekk għandek diversi affarijiet li huma simili, forsi inti trid tgħid, blah tag miftuħa, blah, blah, blah, klassi ugwali istudenti. U allura dan partikolari stylesheet tkun tapplika għal kull tag li klassi hija istudenti. F'dan il-każ, aħna'd tistabbilixxi l- kulur fl-isfond għall-isfar, u aħna'd stabbiliti opaċità, li huwa tag aħna ma jitkellmu dwar, iżda biss jittratta mal-mod kif trasparenti xi ħaġa hija, għal 70%, f'dan il-każ. 

Hemm żewġ għażliet għal kitba stylesheets. Tista 'tikteb lilhom direttament fil HTML tiegħek billi tpoġġi l-stylesheets bejniethom tags stil. U dawk tags stil mur ġewwa ta l-tags prinċipali ta page web tiegħek. Il-mod forsi aktar ippreferut biex tagħmel huwa li jiktbu fajl .css separat, u mbagħad jorbtuha tiegħek dokument jużaw tikketti rabta. Tags Link, għal darb'oħra, huma differenti minn hyperlinks, jekk inti recall minn video tagħna HTML. U tags rabta huma kif aħna pull f'fajls separati. Hija tip ta bħall-ekwivalenti ta ' l #include għall-ipprogrammar tal-web. 

Mela ejja tagħti ħarsa lejn table.HTML. Jekk inti recall minn tagħna HTML video, I wera eżempju ta 'ħafna multiplikazzjoni sempliċi tabella li ħares pretty ikrah, u forsi hemm mod li jagħmilha aħjar mal CSS, biex jagħmluha fatt tfittex aktar bħal multiplikazzjoni mejda, jew xi ħaġa li mhux biss mwaħħla flimkien bl-ebda diviżjoni attwali bejn il-ringieli u l-kolonni. Mela ejja ras fuq CS50 IDE, u tagħti ħarsa lejn kif CSS jistgħu, tip ta ', tweak dak li aħna beda bil qabel, u jagħmluha ħaġa ħafna aħjar. 

Allura aħna qed fil CS50 IDE issa, u jekk familjari, aħna ser pull up f'dan tabella dik il-paġna HTML. Table.HTML bażikament biss jiddefinixxi l-kontenut ta 'multiple-- li suppost kellha tkun tabella multiplikazzjoni erbgħa mill erbgħa. Huwa pjuttost sempliċi. U aħna ser jaħseb li dan iwassal tħares organizzati pretty ukoll. Imma fil-fatt, meta aħna preview din il-paġna, naraw li huwa tip ta ikrah, right? Ovvjament għandna ringieli u kolonni hawn. Hemm xi tip ta 'separazzjoni. Imma din mhix separazzjoni sinifikanti. Aħna mhux attwalment jkollna informazzjoni wisq hawn. U hemm l-ebda separazzjoni bejn l-ringieli kolonni fl f'termini ta 'regoli orizzontali jew vertikali. Nistgħu probabbilment jagħmlu dan tfittex ftit aħjar. Mela ejja tipprova. Hekk jien ser tagħlaq din tab up here. U jien ser tagħlaq table.HTML tiegħi, u għandi ieħor verżjoni hawn imsejħa table2.HTML. Aħna ser tkun miftuħa dik up. Il-korp tal-paġna hija pretty ħafna l-istess, imma stajt inbidlet a ftit fil-quċċata. U jien ser iscroll up here. Avviż li din id-darba, jien jużaw tikketti stil integrati. Stajt fetaħ tag stil, u jien issa definizzjoni ta 'stylesheet CSS biss ġewwa ta 'dan. I jkollhom stylesheet li tgħid, tabella. C'est selettur tag tiegħi. Jien ma jużawx dot jew hash, li Inkun tagħmel jekk I kienet qed tuża ID jew selettur klassi. I jkollhom tabella here-- selettur tag. Dan l-istil se japplikaw għal kull tag tabella. Apparentement I tixtieq li jitqiegħed wieħed Pixel wiesgħa, bordura blu solidu, ġewwa mejda tiegħi. Li ħsejjes simili probabilment jgħinu s-sitwazzjoni, id-dritt? Aħna qed tmur biex ikollhom affarijiet jidhru ħafna aħjar. Allura dan huwa multa. Stylistically, stajt biss inkorporati stylesheet tiegħi fil hawn. Huwa ċertament mod aċċettabbli biex tagħmel dan. Ejja naraw dak li dan qisu. So I ser imorru lura stabbiliti hawn, u I ser ser preview table2.HTML tiegħi. Ukoll, li ma tantx huwa dak li ridt, iżda huwa eżattament dak li aħna mitluba. Aħna qal li dan l-istil huwa ser japplikaw għall-mejda tagħna. Mejda tagħna issa għandha pixel wieħed wiesgħa, bordura blu solidu madwaru. Aħna mhux attwalment jkollna fil-ċelluli tal-mejda. Aħna biss jkollna fuq il-mejda. Allura CSS maħduma. Hija applikat stylesheet għall-mejda tagħna. Iżda ma pjuttost tagħmel dak li ridna li tagħmel. Kif nikbru biex jagħmlu dak li rridu li tagħmel? 

Well, ejja tagħti ħarsa lejn wieħed aktar verżjoni ta 'dan table3.HTML. Hekk jien biss se tagħlaq dawn tabs. Jien se jmorru lura fuq hawn biex tiegħi fajl siġra, u jiftħu table3.HTML. Għal darb'oħra, li għaddej biex tfittex pretty simili hawn fil-bidu. Iżda avviż, dan iż-żmien, minflok li jużaw a stylesheet integrati dritt fil hemm, Jien ser link fil- stylesheet tuża l-link tag. Hekk jien apparentement jgħaqqdu fi stylesheet imsejħa tables.CSS, u dan ukoll huwa ekwivalenti stylesheet biss means-- ukoll, dak li huwa dan il-fajl relattiv għal dak Jien doing-- huwa stylesheet li jien użu għal paġna tiegħi. Mela jekk jien verament trid tara dak Li qed nagħmel mal-CSS hawn, I bżonn biex tmur miftuħ li table.CSS fajl kif ukoll. Allura aħna ser imorru lura minn hawn għal darb'oħra biex siġra fajl tagħna. Hemm table.CSS. Aħna ser pop miftuħa. Issa aħna qed jaraw ftit tal-CSS. Apparentement, I jkollhom koppja ta 'affarijiet għaddejjin hawn. I apparentement tixtieq li jitqiegħed ħamsa Pixel wiesgħa, burdura ħamra solidu, madwar mejda tiegħi. Aħna diġà jafu li li għaddej li jmorru biss fuq il-perimetru. Rajna li fil table2.HTML. Ma 'kull ringiela, I apparentement jridu jispeċifikaw li l-għoli ringiela hija 50 pixels għoli. Allura għal kull ringiela, ftakar dan huwa dak il-lametta tr ma, Jien jagħmilha 50 pixels għoli. 

Fl-aħħar nett, għandi dan il-kumment. U dan huwa kif aħna jagħmlu kummenti CSS. Dan huwa simili ħafna għal jaħtfu blokk kummenti star slash sintassi. It-test kollu li trid. M'hemm l-ebda slash slash għalkemm CSS. Għall-kummenti inline qasir, għandna biex jużaw dan il-format partikolari hawnhekk. Jidher qisu qed nagħmel ħafna affarijiet fil tags TD tiegħi. Ftakar tags TD, jew tabella data, li verament huma biss il-kolonni ġewwa ta ringieli tagħna, u apparentement għal kull biċċa ta 'data fit-tabella tiegħi, nixtieq li tiffissa l-kulur fl-isfond li jkun iswed, il-kulur li jkun abjad, kulur huwa kulur miksub. Allura dan se jkun it-test tal-paġna tiegħi. Irrid font kbar, 22 punt font, u nixtieq li jkun tal-familja font, Georgia. Hekk jien mhux ser għandhom il-font default. Jien ser tispeċifika Ġeorġja, li hija waħda minn dawk fonts web siguri li konna rajna qabel. Irrid test tiegħi li jiġu allinjati ċentralment, fin-nofs tal-kaxxa, Ma rridx li titħalla allinjati jew dritt allinjati. U nixtieq wisa kolonna tiegħi li jkun 50 pixels wiesgħa kif ukoll. Ejja tagħti ħarsa lejn dak li dan qisu, u ara jekk dan huwa forsi titjib. Hekk jien se jmorru biex table3.HTML, li irtirar, jinkludi table.CSS bħala rabta, u aħna ser preview. Li ħafna aħjar, id-dritt? Dan huwa attwalment tibda tfittex ħafna aktar bħal tabella multiplikazzjoni. Għandi dik il-fruntiera aħmar madwar mejda tiegħi iżda issa Għandi wkoll speċifikat li kull ringiela hija ta '50 pixels wiesgħa, jew huwa 50 pixels tall-- skuża me-- kull kolonna hija 50 pixels wiesgħa. Id-data f'kull kolonna, u biss id-data, għandha sfond iswed. Allura hu għalhekk li dawk linji bojod hemm. Minħabba li l-ispazju fil bejn kollha ta 'dawk iċ-ċelluli, mhuwiex fruntiera fil u fih innifsu, huwa biss Jien biss timla l- ċelluli, li attwalment jagħmel il-fruntieri tat-tabella, li apparentament ma jeżistu kollha flimkien, huwa kien linji bojod biss rqiqa. Issa dawn qed viżibbli. Issa pop off fuq l-iskrin. U għalhekk dan huwa sempliċi ħafna stylesheet li stajt applikati, u issa mejda tiegħi jistenna ħafna aktar bħal tabella erbgħa mill-erba multiplikazzjoni, minflok mess biss jumbled, fejn kollox huwa ċar ringieli u kolonni, iżda mhux super organizzati tajjeb. Aħna verament ftit grif tal-wiċċ ta 'x'tista' tagħmel ma 'CSS hawn. Fortunatament id-dokumentazzjoni CSS huwa pjuttost sempliċi. Inti ser tuża diversi tagħha attributi, pjuttost spiss. Dawk tkellimna dwar aktar kmieni f'dan il-video. Hemm diversi li inti probabbilment mhux se jużaw xejn. U li l-multa, wisq. Iżda biss jafu, li hemm Ħafna dokumentazzjoni hemmhekk. Għalhekk anki jekk aħna ma kinux ikopru kollox, int żgur jkunux ħallew fuq tiegħek. Imma CSS huwa verament gost għall-esperimentazzjoni. U nixtieq inħeġġiġkom li play madwar paġni web tiegħek, u tara kif tista 'tagħmel minnhom dehra u sensazzjoni biex itejbu l-utent esperjenza ta 'jżuru paġna tiegħek. Jien Doug Lloyd. Dan huwa CS50.