[Powered by Google Translate] [CSS] [Joseph Ong - Università ta 'Harvard] [Dan huwa CS50. - CS50.TV] 

Illum aħna ser tkun jitkellem dwar CSS jew Cascading Style Sheets. 

Allura x'inhi eżattament CSS? Well, ejja jiksru l-CSS terminu isfel fis-2 partijiet: Cascading Style Sheets u. Cascading huwa ftit aktar kumplessi, u huwa xi ħaġa aħna ser ikopru b'mod ieħor video. Iżda għal starters, Style Sheets ideat ħafna fil-livelli dak CSS ma. Hija żżid stili għall-HTML ta 'paġna web, jinbidlu kif il-paġna web estetikament jistenna. Dan ifisser kollox mill-font tat-test għall-ippożizzjonar tal-kontenut fuq il-paġna għal affarijiet oħra simili jibred jagħmlu l-irkejjen ta 'kaxxa tond jew li żżid dellijiet għat-test. Tista 'anki tagħmel affarijiet crazy simili tagħmel affarijiet janimaw fuq l-iskrin. 

Allura kif nistgħu jużaw CSS ma HTML? Ħu dan is-sit foqra li tħares I biss kiteb. Jekk Rob kienu li tħares lejn dan is-sit dritt issa, hu d probabbilment ngħid xi ħaġa simili, "Ara naqra! Introduzzjoni tiegħi jistenna terribbli. Joseph, int disinjatur orribbli." "Uża l-Times font default? Helvetica huwa tant aħjar." 

Allura x'jista 'jkun l-eħfef mod biex japplikaw l-grafika Rob trid? Il-lottijiet aktar mod ovvju ta 'nies inizjalment kiteb CSS kien li tpoġġi nsejħu dikjarazzjonijiet stil dritt fl-element innifsu jużaw l-attribut stil HTML. Dikjarazzjoni stil tikkonsisti sempliċement proprjetà CSS l-element HTML li rridu bidla segwit minn punt doppju segwita mill-valur il-ġdid tal-proprjetà u ta 'semikowlin fl-aħħar. Per eżempju, ejja ngħidu Rob trid b'bordura sewda madwar l-introduzzjoni tiegħu. Aħna l-ewwel tpoġġi l-attribut istil fuq div Rob tal here allura ġewwa kwotazzjonijiet doppja tpoġġi dikjarazzjoni CSS: "Fruntiera: 1px solida sewda;" Il-pixel 1 jirreferi għall-wisa 'tal-fruntiera, il-solidu tirreferi għall-istil tal-fruntiera, u l-kulur fl-aħħar jiddetermina liema kulur il-fruntiera huwa. 

Jekk irridu stili multipli fuq element, jiktbu dawn id-dikjarazzjonijiet fis-sekwenza. Per eżempju, jekk Rob trid header test tiegħu Helvetica bi sfond blu u aktar spazju madwar it-test, nistgħu nagħmlu dan: stil = "font-familja: Helvetica; isfond bil-kulur: blu; ikkuttunar: 5px;" L-aħħar virgola hija attwalment obbligatorja, iżda in-nies normalment jżommha ħsieb tal-koerenza. 

Aħna ser tiffranka tispjega xi wħud mill-proprjetajiet jkessaħ u aktar kumplessi CSS għal ieħor video. Jekk għandek xi ħaġa f'moħħu, biss Googling-effett trid segwit minn CSS probabbilment se jagħtuk riżultati pretty tajba. Il-ħaġa jibred hija li CSS hija pjuttost wiesgħa, hekk odds huma jekk hemm xi ħaġa li trid tagħmel - fil-raġuni - CSS tista 'probabbilment jagħmlu dan. Aħna nsejħu dan it-tip ta 'grafika grafika inline. L-istil element hija, ukoll, konformi mal-tag bidu. 

Għal folks li verament jixtieq li jiġu organizzati, inti tista 'tibda jkollna ftit peeved lejn kif messy dan kollu jistenna. Immaġina jekk inti kellha tagħmel dan għal kull element fuq il-paġna, plus issa HTML tiegħek u CSS huma kollha intermixed u cluttered. Gross, id-dritt? Biex tissolva din, in-nies eventwalment bdew qbid fuq separazzjoni Markup HTML tagħhom minn grafika CSS tagħhom billi jużaw xi ħaġa imsejħa seletturi CSS. Seletturi CSS huma użati biex jagħżlu elementi li għalihom huma applikati dikjarazzjonijiet. A selettur flimkien ma 'lista ta' dikjarazzjonijiet CSS huwa spiss imsejjaħ bħala regola CSS. Dawn ir-regoli se jitpoġġew bejn tags miftuħa u qrib stil HTML, spiss fir-ras tad-dokument. 

Huwa ħafna aktar faċli biex tara aktar b'eżempju, Mela ejja nibdew bil-ħolqien ta 'regola CSS sempliċi. Ewwelnett, ejja tpoġġi tags stil fit-taqsima kap ta 'HTML tagħna. Sussegwentement, is-selettur. Aħna ser tibda off billi juża waħda mill-seletturi sempliċi, is-simbolu hash, li jagħżel element HTML billi attribut ID tiegħu. F'dan il-każ aħna ser jagħżlu l-div li tirrappreżenta l-introduzzjoni Rob tal billi jittajpja-simbolu hash segwita mill-div tal ID, rob. Issa d-dikjarazzjonijiet. Aħna żid braces miftuħa u mill-qrib u neqilbu dikjarazzjonijiet inline preċedenti tagħna fuq div Rob tal ġewwa ta 'dawn ċingi, jġedded, u, berred, intro Rob tal għad għandu bordura sewda madwaru nieqes l-kruha inline messy. 

Issa, dak li jekk ridna li jagħżlu l-ġewwa h1 ta intro Rob tal-? Inti tista 'taħseb, "Ejja tpoġġi ID fuqha u mbagħad jimxu stili preċedenti tagħna." Li x-xogħlijiet, iżda CSS għandha modi oħra ta 'kiri inti tagħżel elementi bl-użu nsejħu combinators biex tħallat seletturi sempliċi. Per eżempju, karattru whitespace jistgħu jintużaw bħala combinator li tispeċifikax każijiet kollha ta '1 selettur li jgħixu ġewwa tal selettur ieħor. Li tinstema 'ħafna aktar ikkumplikata milli fil-fatt hu. Hawn eżempju. Aħna se tip # Rob, żid spazju, u jimxi ma 'h1, selettur ieħor sempliċi tissejjaħ selettur tag li tagħżel it-tipi ta 'elementi bħal divs jew paragrafi. L-ispazju jgħaqqad 2 seletturi tagħna sempliċi, applikazzjoni dikjarazzjonijiet kollha CSS u l-braces kaboċċi għall h1 tags li jgħixu ġewwa tal-element bl id = "rob". Just biex jikkonvinċu inti li taħdem, jien ser jibdlu l-kulur font għall-abjad, jġedded, u, tfittex, header Rob issa huwa abjad. 

Kollha ta 'dan ix-xogħol tmur biex turi li bl-użu regoli minflok stili inline nistgħu nibdew kodiċi ħafna aktar nodfa. Fil-fatt, jekk din il-blokka istil jibda jkollna ftit kbira, I jistgħu anki pull out dawn l-istili fis-fajl differenti għal kollox. 

Biex tinkludi dan il-fajl ġdid kif CSS f'dan id-dokument I ser tuża biss link tag HTML tal. Hawnhekk jien javżak li jien jgħaqqdu fi stil folja esterna, l-attribut rel, u jispeċifika il-passaġġ għall-fajl bl-attribut href tiegħi. Issa Markup HTML tiegħi u CSS huma organizzati nicely fil-fajls kompletament separati, li huwa kważi dejjem l-mod disinjaturi jippreferu li jaħdmu ma HTML u CSS. 

Fil-każ li int mintix, l-seletturi sempliċi jinkludu seletturi ID u seletturi tag bħal dawk aħna biss raw kif ukoll seletturi klassi għall-għażla elementi b'ċertu klassi, seletturi attribut għall-għażla skond l-attribwiti elementi oħra bħall tip = "radju" għal inputs buttuna tar-radju, u pseudoselectors bħal imbagħad jerġgħu u tiffoka biex jispeċifika grafika meta interazzjonijiet simili mousing fuq element jseħħu. 

Il combinators komuni jinkludu whitespace għat-tfal kollha u virgoli li ssir distinzjoni seletturi. Oħrajn inti tista 'tiltaqa' tinkludi l-vleġġa għat-tfal diretti biss, l-tilde għal kull aħwa li jseħħu wara l-element, u s-sinjal plus għall-aħwa 1 li jiġi immedjatament wara l-element. 

Billi tgħaqqad dawn seletturi u combinators, inti tista 'twessa' l-firxa ta 'grafika inti tista' tikseb fuq paġna web partikolari u jiktbu CSS aktar effiċjenti. Bil biss ftit linji ta 'CSS tara lili ittajpjar hawn, I tista 'tagħmel malajr xi ħaġa bħal din look like xi ħaġa bħal din. 

Jien Joseph, u dan huwa CS50. 

[CS50.TV] 

Uh, fejn nista tibda? Let me tagħmel dan mingħajr - [laughs] Okay. Żid - Let me bidla li kliem. Ooh. Jiddispjacini.