[Powered by Google Translate] [CSS] [Joseph Ong - Harvard Unibertsitatea] [Hau CS50 da. - CS50.TV] 

Gaur CSS buruz dugu edo hitz egiten Cascading Style Sheets. 

Beraz, zer da CSS? Beno, epe CSS apurtu 2 zatitan behera utzi: Eta kaskadako estilo-orriak. Teilakatu apur bat konplexuagoa da, eta beste bideo bat egingo dugu estaltzeko zerbait da. Baina hasiberrientzat, Style Sheets ukituak oso CSS du. Estilo gehitzen da web orrialde baten HTML web orrian estetikoki itxura nola aldatzen ari dira. Testuaren letra-tipoa edukia posizionamendua guztia esan nahi du orrian biribilduko da koadro bat txoko edo itzalak gehitzen testu bezalako gauzak beste cool. Crazy ere egin dezakezu gauzak egiteko bezalako gauzak pantailan animatzeko. 

Beraz, nola ez CSS erabili dugu HTML? Hartu ahula begira gune hau idatzi dut. Rob gune honetako begiratu oraintxe bada, seguruenik litzaidake zerbait esan zuen bezala, "Wow! Nire sarrera itxura terrible. Joseph, diseinatzaile awful bat Oraindik duzu." "Default Times letra-tipoa erabiliz? Helvetica da, beraz, askoz hobeto". 

Beraz, zer Rob nahi estilismoa aplikatzeko modurik errazena izan daiteke? Pertsonak modu asko nabarmenena, hasieran idatzi CSS zer style adierazpenak eskuineko deitzen dugun elementu bertan jartzea HTML style atributua erabiliz. Style adierazpena A, besterik gabe, HTML elementu CSS jabetza osatzen aldatu nahi dugun balio berria jabetza eta amaieran puntu eta koma ondoren bi puntu eta jarraian. Esate baterako, demagun Rob bere sarrera inguruan ertz beltz bat nahi du. Lehenak jarri dugu estilo atributu Rob en div hemen ondoren, komatxo barruan jarri CSS adierazpen bat: "Border: 1 px ona beltzak;" 1 pixel de la frontera zabalera dagokio, ona mugaz estilo dagokio, eta amaieran kolorea zehazten du zer mugan kolorea da. 

Nahi dugu elementu batean estilo bat baino gehiago izanez gero, idatzi sekuentzian adierazpen horiek. Esate baterako, Rob bere goiburua Helvetica testua nahi izanez gero, atzealde urdin bat eta espazio gehiago testuaren inguruan, hau egin ahal izango dugu: style = "font-family: Helvetica; background-color: blue; betegarria: 5px;" Azken puntu eta koma da, benetan hautazkoa da, baina jendeak normalean gorde koherentzia-en mesedetan. 

CSS freskoago eta konplexuagoa propietate batzuk azaltzeko gorde dugu beste bideo bat. Kontuan zerbait bada, besterik gabe, nahi duzun efektua CSS ondoren Googling Ziurrenik nahiko emaitza onak ematen dizute. Cool gauza CSS nahiko zabala da, beraz, odds dira ezer egin nahi duzun bada arrazoia barruan CSS Ziurrenik ez da. Inline estilismoa estilismoa mota hau deitzen diogu. Elementu estiloa da, bai, Irteeran tag line. 

Folks benetan gustatzen antolatu behar izanez gero, hasteko nola messy guztiak itxura peeved apur bat izatea. Imajinatu izan duzun Horretarako orrian elementu guztietan, plus orain zure HTML eta CSS guztiak intermixed eta cluttered. Gordina da, ezta? Hori konpontzeko, jendeak azkenean hasi harrapatzeko beren HTML markup bereizten haien CSS estiloa zerbait CSS selectors izeneko erabiliz. CSS selectors erabiltzen dira aukeratzeko elementu deklarazioak aplikatzen dira. CSS deklarazioak zerrenda bat konbinatuta hautatzaileak A askotan CSS arau bat aipatzen da. Arau hauek jarri HTML estilo ireki eta itxi tags arteko litzateke, sarritan dokumentuaren buruan. 

Askoz errazagoa da adibide bat ikusteko, dezagun hasteko CSS arau sinple bat sortuz. Lehenik eta behin, dezagun jarri style tags gure HTML sekzio burua. Ondoren, hautatzaileak. Hasteko off dugu selectors errazena bat, hash sinbolo bidez, ID atributu HTML elementu bat hautatzen du. Kasu honetan, Rob bere sarrera adierazten div aukeratu dugu. hash sinbolo div ID, rob, ondoren, idatziz. Orain deklarazioak. Ireki eta itxi giltza gehitu ditugu eta gure deklarazioak inline lehenago mugitu Rob en div giltza horien barruan, freskatu, eta, cool, Rob-en intro oraindik ertz beltza minus messy inline ugliness du. 

Orain, zer nahi badugu, Rob-en intro barrutik h1 hautatzeko? Uste duzu, agian "dezagun ID bat jarri eta gero, gure estilo lehenago mugitu." Lan egiten duen, baina CSS elementuak hautatu dezazun beste modu batzuk ditu selectors errazak nahastu combinators deitzen dugun erabiliz. Esate baterako, zuriuneak karaktere combinator gisa erabili ahal izango dira 1 hautatzaileak hautatzaileak beste baten barruan bizi diren instantzia guztiak zehazteko. Hori asko zailagoa benetan baino da. Hona hemen adibide bat da. Idatzi # truke, hutsune bat gehitu, eta jarraitu h1 bat egingo dugu, simple hautatzaileak tag hautatzaileak beste izeneko elementu mota aukeratzen dituen divs edo paragrafo bezala. Espazio The, gure 2 selectors simple konbinatzen, CSS deklarazioak guztiak aplikatuz h1 tags id = "rob" elementu barruan bizi diren kortxeteak kurtsibak. Just konbentzitzea lan egiten dela, letraren kolorea aldatu dut zuri, freskatu, eta, begira, Rob-en goiburua zuria. 

Lan hau guztia doan erakusten duten arauak estilo inline ordez erabiliz askoz garbiagoa kodea eskuratu ahal izango dugu. Izan ere, estilo Bloke honetan hasten bada, pixka bat handiak, Estilo horiek ere I tira, fitxategi ezberdin batean guztira. 

CSS fitxategi berri hau dokumentu honetan bakarrik erabili dut HTML link tag. Hemen nago kontatzeko naiz I kanpoko estilo fitxa bat estekatze, rel atributua eta bidea zehazten fitxategi nire href atributurik. Orain nire HTML markup eta CSS antolatzen dira nicely fitxategiak erabat bereizita, hau da, ia beti modu diseinatzaile nahiago HTML eta CSS lan. 

Kasu horretan, galdetzen ari bazara, simple selectors ID selectors eta etiketa batzuk ikusi besterik ez dugu atsegin selectors , baita klase klase jakin bat duten elementuak aukeratzeko selectors atributu mota atributuak, adibidez, beste elementu hautatzen selectors = "radio" radio button inputak, eta pseudoselectors bezala pasatzean eta fokua estilismoa zehaztuz elkarrekintzak elementu bat gertatzen gustatzen gainetik sagua pasatzean. 

Komun combinators artean, besteak beste, haur guztiak zuriunez eta koma selectors bereizteko. Beste batzuk aurkituko ahal izango duzu, besteak beste, seme-alabak zuzeneko soilik arrow, elementu ondoren gertatzen diren anai-arrebak Tilde, eta 1 anaia berehala elementu ondoren datorren seinale plus. 

Selectors eta combinators horiek konbinatuz By, estilismoa sorta zabaltzeko dezakezu lortzeko dezakezu web orrian eta idatzi CSS gehiago eraginkortasunez. CSS lerro idazten hemen me ikusiko duzu pare bat besterik ez, Azkar, honen antzeko zerbait itxura hau atsegin dute zerbait egin ahal izango dut. 

Joseph naiz, eta hau da CS50. 

[CS50.TV] 

Uh, non ez dut hasi? Horretarako ni gabe - [barreak] Okay. Gehitu - idazketa hori aldatzeko me. Ooh. Sentitzen dugu.