[Powered by Google Translate] [CSS] [Joseph Ong - Universiteti i Harvardit] [Kjo është CS50. - CS50.TV] 

Sot ne do të flasim rreth CSS apo Cascading Style Sheets. 

Pra, çfarë saktësisht është CSS? E pra, le të thyejnë CSS termin poshtë në 2 pjesë: Dhe Cascading Style Sheets. Ujëvara është pak më komplekse, dhe kjo është diçka që ne do të mbulojë në një tjetër video. Por, për starters, Style Sheets lë të kuptohet shumë në atë që e bën CSS. Ajo shton stilet për HTML e një faqe web, ndryshimin se si web faqe aesthetically duket. Kjo do të thotë çdo gjë nga e shkronjave të tekstit me pozicionimin e përmbajtjes në faqen për gjëra të tjera të ftohtë, si bërë qoshet e një kuti rrumbullakuar ose duke shtuar hijet në tekst. Ju mund të bëni edhe gjëra të çmendur si të bëjë gjëra të gjallëronte në ekran. 

Pra, si nuk kemi përdorim CSS me HTML? Merrni këtë faqe dobët-looking Unë vetëm shkruante. Nëse Rob ishin të shikojmë në këtë vend tani, ai ndoshta do të thonë diçka si, "Uau! Futja ime duket e tmerrshme. Joseph, ju jeni një projektuesi të tmerrshme." "Duke përdorur fontin Times default? Helvetica është aq shumë më mirë." 

Pra, çfarë mund të jetë mënyra më e thjeshtë për të aplikuar styling Rob dëshiron? Shumë e më e qartë rruga e popullit fillimisht shkroi CSS ishte për të vënë atë që ne e quajmë deklaratat stil të drejtë në elementin vetë duke përdorur atributin HTML stil. Një deklaratë stil thjesht përbëhet nga CSS pronës html element-së ne duam të ndryshojmë ndjekur nga një zorrë e trashë ndjekur nga vlera e ri të pronës dhe një pikëpresje në fund. Për shembull, le të thonë se Rob dëshiron një kufi të zi rreth futjes së tij. Ne e parë vënë atribut stil më div Rob këtu pastaj brenda kuotat e dyfishtë të vënë një deklaratë CSS: "Border: 1px solid e zezë;" 1 i referohet pixel me gjerësinë e kufirit, të ngurta referohet stilin e kufirit, dhe ngjyra në fund përcakton se çfarë ngjyre kufirit është. 

Nëse duam stile të shumta në një element, shkruajnë këto deklarata në sekuencë. Për shembull, në qoftë se dëshiron Rob tekstin e tij header në Helvetica me një sfond blu dhe më shumë hapësirë ​​rreth tekstit, ne mund të bëjmë këtë: style = "font-family: Helvetica; background-color: blu; padding: 5px;" Pikëpresje fundit në fakt është fakultative, por njerëzit zakonisht mbajnë atë në për hir të konsistencës së. 

Ne do të kurseni të shpjeguar disa nga frigorifer dhe më komplekse pronave CSS për një tjetër video. Nëse keni diçka në mendje, vetëm Googling efektin që ju dëshironi ndjekur nga CSS ndoshta do t'ju japë rezultate mjaft të mira. Cool gjë është se CSS është shumë i gjerë, kështu që shanset janë në qoftë se ka ndonjë gjë që ju doni të bëni - brenda arsyes - CSS ndoshta mund të bëjë atë. Ne e quajmë këtë lloj të styling styling inline. Stili element është, mirë, në përputhje me tag start. 

Për folks të cilët me të vërtetë duan të jenë të organizuara, ju mund të filloni duke marrë një pak i acaruar se si kjo të gjithë duket e çrregullt. Paramendoni nëse keni pasur për të bërë këtë për çdo element në faqe, plus tani HTML dhe CSS tuaj janë të gjitha ndërpërzier dhe cluttered. Bruto, e drejtë? Për të rregulluar këtë, njerëzit përfundimisht filloi infektues për të ndarë Markup HTML tyre nga CSS styling e tyre duke përdorur diçka të quajtur selectors CSS. Selectors CSS janë përdorur për të zgjedhur elemente të cilat deklarata janë aplikuar. A përzgjedhës kombinuar me një listë të deklaratave CSS është përmendur shpesh si një rregull CSS. Këto rregulla do të vihet në mes të hapë dhe të mbyllë tags HTML stil, shpesh në kokë të dokumentit. 

Është shumë më e lehtë për të parë me një shembull, kështu që le të fillojë duke krijuar një rregull të thjeshtë CSS. Së pari, le të vënë tags stil në pjesën e kokës të HTML tonë. Tjetra, përzgjedhës. Ne do të nisem duke përdorur një nga selektorë të thjeshtë, simbolin hash, e cila zgjedh një element HTML nga atributi i tij të identitetit. Në këtë rast ne do të zgjidhni div që përfaqëson futjen e Rob nga shtypja e simbol hash ndjekur nga ID DIV-së, Rob. Tani deklaratave. Ne shtoni formatimin e teksteve të hapura dhe të afërta dhe të zhvendoset deklaratat tona të mëparshme Inline më div Rob-së brenda këtyre formatimin e teksteve, refresh, dhe, cool, intro Rob ende ka një kufi të zi rreth tij minus shëmtinë çrregullt inline. 

Tani, çfarë nëse ne të kërkuar për të zgjedhur brenda h1 intro e Rob-së? Ju mund të mendoni, "Le të vënë një ID mbi të dhe pastaj të lëvizë stilet tona të mëparshme." Që punon, por CSS ka mënyra të tjera për të lënë ju të zgjidhni elemente duke përdorur atë që ne e quajmë combinators për përzierje selectors thjeshta. Për shembull, një karakter hapësira të bardha mund të përdoret si një combinator të specifikojë të gjitha instancat e 1 selektor që jetojnë brenda e një tjetër përzgjedhës. Kjo tingëllon shumë më e komplikuar se sa ai në fakt është. Ja një shembull. Ne do të tipit # vjedh, shtoni një hapësirë, dhe të ndjekë atë me një h1, një tjetër përzgjedhës thjeshtë e quajtur një përzgjedhës tag që zgjedh llojet e elementeve si divs ose paragrafeve. Hapësira kombinon 2 selectors tonë të thjeshtë, duke zbatuar të gjitha deklaratat CSS dhe formatimin e teksteve kaçurrel të TAGS h1 që jetojnë në brendësi të elementit me id = "rob". Vetëm për t'ju bindur se ajo punon, unë do të ndryshojë ngjyrën e shkronjave të bardhë, refresh, dhe, shikoni, header Rob tani është e bardhë. 

E gjithë kjo punë shkon për të treguar se, duke përdorur rregullat vend të stilet inline ne mund të merrni kodin shumë më të pastër. Në fakt, në qoftë se ky bllok stil fillon të marrë një pak më të mëdha, Unë edhe mund të tërheqë këto stile jashtë në një skedë të ndryshme krejt. 

Për të përfshijë këtë skedë të re si CSS në këtë dokument unë vetëm do të përdorin HTML tag s link. Këtu unë jam i thënë atë që unë jam i lidhur në një fletë të jashtëm stil, atributin rel, dhe duke specifikuar shtegun te skedari me atribut href tim. Tani Markup HTML im dhe CSS janë të organizuar mirë në fotografi krejtësisht të veçanta, e cila është pothuajse gjithmonë mënyra designers preferojnë duke punuar me HTML dhe CSS. 

Në rast se ju jeni pyesin, selectors thjeshta përfshijnë selectors identitetit dhe Selectors tag si ato ne vetëm e pa si selectors klasë për zgjedhjen elemente me një klasë të caktuar, selectors atribut për zgjedhjen e elementeve nga atributet e tjera si lloji = "radio" për inputet butonin e radios, dhe pseudoselectors si rri pezull dhe të përqëndrohet për specifikimin styling kur ndërveprimet pëlqen mousing mbi një element të ndodhë. 

Të combinators zakonshme përfshijnë whitespace për të gjithë fëmijët dhe presje për të dalluar selectors. Të tjerët ju mund të hasni përfshijnë arrow për fëmijët të drejtpërdrejta vetëm, tilde për të gjithë vëllezërit dhe motrat që ndodhin pas element, dhe shenja plus për 1 vëlla që vjen menjëherë pas elementit. 

Duke i kombinuar këto selectors dhe combinators, ju mund të zgjerojë gamën e styling ju mund të arrijë në një web faqe të caktuar dhe shkruani CSS mënyrë më efikase. Me vetëm një e dy linjave të CSS ju shihni mua duke shtypur këtu, Unë mund të shpejt të bëjë diçka si kjo të duket si diçka si kjo. 

Unë jam Jozefi, dhe kjo është CS50. 

[CS50.TV] 

Uh, ku mund të fillojë? Më lejoni të bëjë këtë pa - [qesh] Okay. Shto një - Më lejoni të ndryshojë këtë formulim. Ooh. Më vjen keq.