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

Gaur izango CSS buruz dugu hitz egiten edo Cascading Style Sheets. 

Beraz, zer da zehazki CSS? Beno, goazen epe CSS hausteko en 2 zatitan behera: Eta kaskadako estilo-orriak. Teilakatu da apur bat konplexuagoa da, eta zerbait beste bideo batean dugu estali da. Baina, adibidez, estilo-orriak asko zer egiten du CSS at ukituak. Estiloak gehitzen da, web orri baten HTML, nola web orrian estetikoki itxura aldatuz. Honek testuaren letra-tik edukia kokatzea guztia esan orrian beste kutxa bat borobildua txoko egiteko edo itzalak gehituz testu bezala gauzak cool. Zuk egin crazy gauza bezala gauzak pantailan animatzeko. 

Beraz, nola ez, CSS erabili dugu HTML? Hartu hau pobrea begira gune idatzi zuen dut. Rob ziren, gune honetan begiratu oraintxe bada, seguruenik litzaidake zerbait esaten zuen bezala, "Wow! Nire sarrera itxura terrible. Joseph, awful diseinatzaile bat zara." "Lehenetsia Times letra-tipoa erabiliz? Helvetica da, beraz, askoz ere hobeto." 

Beraz, zer modurik errazena Sorozabal du Rob nahi aplikatzeko izan daiteke? Jendeak modu nabariagoa asko idatzi zuen, hasieran CSS izan zen zer estilo deklarazioak eskubidea deitzen dugun jarri elementu bertan HTML estilo erabiliz. Estilo deklarazio bat, besterik gabe, elementu horrek HTML CSS jabetza osatzen dute aldatu nahi dugu jabetza eta koma amaieran balio berria, eta ondoren bi puntu eta jarraian. Adibidez, demagun Rob bere sarrera inguruan ertz beltz bat nahi du. Lehenak jarri ditugu estilo atributu Rob en div hemen ondoren, komatxo barruan jarri CSS adierazpen bat: "Border: 1px ona beltzak;" 1 pixel muga zabalera dagokio, solidoaren muga estiloa aipatzen, eta amaieran kolorea zehazten du muga horrek kolorea da. 

Nahi dugun elementu bat, estilo bat baino gehiago izanez gero, idatzi sekuentzia deklarazio horiek. Adibidez, Rob bere goiburua Helvetica testua nahi izanez gero, hondo urdinaren batera eta gehiago, testuaren inguruan espazioa, hau egin dezakegu: style = "font-family: Helvetica; kolore urdina; betegarria: 5px;" Azken koma da benetan aukerakoa da, baina jendeak normalean gorde koherentzia en onerako. 

Gorde CSS freskoago eta konplexuagoa propietate batzuk azalduz dizugu beste bideo bat da. Izan beharko da kontuan, zerbait bada, besterik gabe, eragina nahi duzun CSS jarraiturik Googling ziurrenik ematen dizute nahiko emaitza onak. Cool gauza da CSS dela nahiko zabala, beraz, ez dira aurka ezer egin nahi duzu bada - Arrazoi barruan - CSS Ziurrenik do it. Inline Sorozabal estetika mota hau deitzen diogu. Elementu estiloa da, bai, hasiera-etiketa bat. 

Folks benetan gustatzen antolatu ahal izateko, hasteko nola narratsa hau guztia itxura at peeved pixka bat lortu ahal izatea. Imajinatu izan duzu hau egiteko orrian elementu bakoitzerako bada, plus orain zure HTML eta CSS dira guztiak nahas eta cluttered. Gordina da, ezta? Hori konpontzeko, azkenean, jendea hasi zen on harrapatzeko beren HTML markaketa bereizten beren CSS Sorozabal zerbait izeneko CSS Selectors erabiliz. CSS Selectors erabiltzen dira elementuak zein aitorpenetan aplikatu aukeratzeko. CSS deklarazioak zerrenda batera hautatzaile bat da askotan CSS arau bat bezala ezagutzen da. Arau hauek HTML ireki eta itxi estilo tags artean jarri beharko litzateke, sarritan dokumentuaren buruan. 

Askoz ere errazagoa da adibide bat ikusi, Hargatik hasi simple CSS arau bat sortuz. Lehenik eta behin, jarri dezagun gure estiloa tags HTML atalean buruan. Hurrengoa, hautatzaileak. Hasten dizugu errazena Selectors bat, hash ikurra erabiliz, bere identifikazio atributua by HTML elementu bat hautatzen. Kasu honetan div duten Rob Aurkezpena adierazten hautatu dugu div en IDa, rob, ondoren, hash ikurra idatziz. Orain deklarazioak. Ireki eta itxi giltza gehitu dugu eta gure lehenago inline deklarazioak mugitzeko Rob en div an giltza horien barruan, freskatu, eta, cool, Rob en intro oraindik ere inguruko ertz beltzak ken bat narratsa inline itsuskeriaren ditu. 

Orain, zer nahi izan badugu Rob en intro barruan H1 aukeratzeko? Uste, izan dezakezu "dezagun jarri on ID bat eta, ondoren, gure estilo mugitu lehenago". Lan egiten duen, baina CSS elementuak hautatu dezazun beste modu batzuk ditu zer combinators simple Selectors nahastu deitzen dugun erabiliz. Adibidez, zuriune-karaktere bat combinator gisa erabili ahal izango dira 1 hautatzaile bizi hautatzailea beste baten barruan instantzia guztiak zehazteko. Soinuak asko zailagoa benetan baino da. Hona hemen adibide bat. Idatz # lapurtzen, hutsune bat, eta hari jarraituko h1 batekin egingo dugu, simple hautatzailea beste izeneko etiketa hautatzailea aukeratzen duten elementu motak divs edo paragrafo bezala. Espazioa uztartzen gure 2 simple Selectors, CSS deklarazio guztiak aplikatuz eta h1 etiketa duten id = "rob" elementu barruan bizi giltza kizkur du. Besterik ez duzu konbentzitu nahi du lan hori, letra kolorea aldatu dut zuri, freskatu, Eta, begira, Rob en goiburua da orain zuri. 

Lan honen Dena dela erakusteko arau ordez inline estiloak erabiliz askoz garbiagoa kodea lor dezakegu. Izan ere, estilo bloke hau galtzen hasten pixka bat handiak lortzean, Nahiz eta ezin dut tira estilo horiek ezberdin fitxategi elkarrekin. 

CSS fitxategi berri honetan, besteak beste, dokumentu honetan besterik ez dut erabili HTML horrek lotura etiketa. Hemen nago kontatzen dut beti estilo kanpo xafla estekatze, rel atributua, eta bidea zehazten dute fitxategi nire href atributu dituzten. Orain nire HTML markaketa eta CSS antolatzen dira nicely fitxategiak erabat aparte, hau da, ia beti modu diseinatzaile nahiago HTML eta CSS lanean. 

Kasu honetan ez galdetzen ari bazara, simple Selectors barne ID Selectors eta etiketa direnak ikusi besterik ez dugu atsegin Selectors baita klase jakin bat klase elementuak hautatzeko Selectors, atributu elementu hautatzen mota atributuak, adibidez beste egilea Selectors = "radio" botoia sarrera, eta pseudoselectors bezalako pasatzean eta fokua Sorozabal zehaztuz denean elkarrekintzak gustatzen elementu baten gainetik sagua pasatzean gertatzen da. 

Komun combinators artean daude Hutsune, haur guztientzat eta koma Selectors bereizteko. Beste batzuk aurkituko ahal izango duzu, besteak beste, seme-zuzena soilik gezi, anai-arrebak guztiek elementu ondoren gertatzen tilde du, eta 1 anaia datorren berehala elementu ondoren ikurra baita. 

Selectors horiek eta combinators konbinatuz, duen estiloa sorta bat web-orrian eman dezakezu lortzeko zabaldu dezakezu idatzi eta CSS gehiago eraginkortasunez. Besterik CSS ildo idazten hemen me ikusiko duzu pare bat, Azkar egin ahal izango dut honen antzeko zerbait itxura honen antzeko zerbait. 

Joseph naiz, eta hau da CS50. 

[CS50.TV] 

Uh, non ez dut hasi? Dezagun hori ni gabe - [barreak] Larreina. Gehitu - Let idazketa aldatzen dit. Ooh. Sentitzen dut.