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

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

Pra, çfarë saktësisht është CSS? E pra, le të thyejnë CSS termin poshtë në 2 pjesë: Cascading Style Sheets dhe. Cascading ë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ë bën CSS. Ajo shton stilet në HTML e një faqe web, ndryshuar mënyrën se si web faqe aesthetically duket. Kjo do të thotë çdo gjë nga e shkronjave të tekstit në pozicionimin e përmbajtjes në faqen për gjëra të tjera të ftohtë, si duke e bërë qoshet e rrumbullakosura një kuti ose duke shtuar hijet në tekst. Ju mund edhe të bëjë gjëra të çmendur si të bëjë gjëra të gjallë në ekran. 

Pra, si nuk kemi përdorur CSS me HTML? Merrni këtë faqe dobët-looking Unë vetëm shkruante. Nëse Rob do të shikojmë në këtë vend tani, ai ndoshta do të thotë diçka si, "Wow! Prezantimi im duket e tmerrshme. Joseph, ju jeni një projektuesi të tmerrshme." "Përdorimi font 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ë të dukshme 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 e ne duam të ndryshojmë pasuar nga një zorrë e trashë e 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 thonjëza dyshe vënë një deklaratë CSS: "Border: 1px solid black;" 1 piksel referohet gjerësinë e kufirit, ngurta referohet stilin e kufirit, dhe ngjyra në fund përcakton se çfarë ngjyre të kufirit është. 

Në qoftë se ne duam stile të shumta për një element, shkruaj këto deklarata në rend. Për shembull, në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-familjare: Helvetica, background-color: blu; padding: 5px;" Pikëpresje fundit është në fakt fakultative, por njerëzit zakonisht për të mbajtur atë në për hir të konsistencës së. 

Ne do të kurseni 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 fillim. 

Për folks që 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 ç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ë gjithë pë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 janë deklaratat 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ë hapur dhe të afërt tags HTML stil, shpesh në krye 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ë seksionin kreu i HTML tonë. Tjetra, përzgjedhës. Ne do të nisem duke përdorur një nga selektorë të thjeshtë, simbol hash, e cila zgjedh një element HTML me atribut të tij të identitetit. Në këtë rast ne do të zgjidhni div që përfaqëson futjen e Rob nga shtypja simbolin hash ndjekur nga ID e Div-së, rob. Tani deklaratat. Ne shtoni formatimin e teksteve të hapura dhe të afërta dhe të zhvendoset deklaratat e mëparshme tona inline më div Rob brenda këtyre formatimin e teksteve, refresh, dhe, cool, intro Rob ende ka një kufi të zezë rreth tij minus shëmtinë çrregullt inline. 

Tani, çfarë nëse ne të kërkuar për të zgjedhur brenda h1 intro e Rob? Ju mund të mendoni, "Le të vënë mbi të një ID dhe pastaj të lëvizë stilet tona të mëparshme." Që punon, por CSS ka mënyra të tjera 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 përzgjedhës që jetojnë brenda 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 të thjeshtë quhet një përzgjedhës tag që zgjedh llojet e elementeve si divs ose paragrafeve. Hapësira kombinon selectors 2 tonë thjeshta, duke zbatuar të gjitha deklaratat CSS dhe formatimin e teksteve kaçurrel në tags H1 që jetojnë në brendësi të elementit me id = "rob". Vetëm për të bindur ju se ajo punon, unë do të ndryshuar ngjyrën font në të bardhë, refresh, dhe, shikoni, header Rob tani është e bardhë. 

Të gjithë këtë punë shkon për të treguar se, duke përdorur rregullat vend të stilet inline ne mund të merrni kodin më të pastër. Në fakt, në qoftë se ky bllok stil fillon duke marrë një pak më të madhe, Unë mund edhe të tërhiqet nga këto stile në një skedar të ndryshme krejt. 

Për të përfshirë këtë skedë të re si CSS në këtë dokument që unë do të përdorin vetëm HTML tag 's link. Këtu unë jam i thënë atë që unë jam i lidhur në një fletë stil të jashtëm, atributin rel, dhe specifikuar rrugën në dosjen time me atribut href. 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ë punuar me HTML dhe CSS. 

Në rast se ju jeni pyesin, të selectors thjeshta përfshijnë selectors identitetit dhe Selectors tag si ato që sapo pamë si selectors klasë për zgjedhjen elemente me një klasë të caktuar, selectors atribut për zgjedhjen e elementeve nga atributet e tjera si lloj = "radio" për inputet butonin radio dhe pseudoselectors si rri pezull dhe të përqëndrohet specifikuar për 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 direkte vetëm, tildë për të gjithë vëllezërit dhe motrat që ndodhin pas element, dhe shenja plus për vëlla 1 që vjen menjëherë pas elementit. 

Duke i kombinuar këto selectors dhe combinators, ju mund të zgjerojnë gamën e styling që ju mund të arrijë në një web faqe të caktuar dhe shkruani CSS mënyrë më efikase. Me vetëm disa rreshta të CSS që 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.