1 00:00:00,000 --> 00:00:02,000 [Powered by Google Translate] [CSS] 2 00:00:02,000 --> 00:00:04,810 [Joseph Ong - Harvard Unibertsitatea] 3 00:00:04,810 --> 00:00:07,160 [Hau CS50 da. - CS50.TV] 4 00:00:07,160 --> 00:00:11,430 >> Gaur CSS buruz dugu edo hitz egiten Cascading Style Sheets. 5 00:00:11,430 --> 00:00:14,330 >> Beraz, zer da CSS? 6 00:00:14,330 --> 00:00:17,120 Beno, epe CSS apurtu 2 zatitan behera utzi: 7 00:00:17,120 --> 00:00:19,510 Eta kaskadako estilo-orriak. 8 00:00:19,510 --> 00:00:23,900 Teilakatu apur bat konplexuagoa da, eta beste bideo bat egingo dugu estaltzeko zerbait da. 9 00:00:23,900 --> 00:00:27,930 Baina hasiberrientzat, Style Sheets ukituak oso CSS du. 10 00:00:27,930 --> 00:00:30,880 Estilo gehitzen da web orrialde baten HTML 11 00:00:30,880 --> 00:00:33,720 web orrian estetikoki itxura nola aldatzen ari dira. 12 00:00:33,720 --> 00:00:38,310 Testuaren letra-tipoa edukia posizionamendua guztia esan nahi du orrian 13 00:00:38,310 --> 00:00:43,800 biribilduko da koadro bat txoko edo itzalak gehitzen testu bezalako gauzak beste cool. 14 00:00:43,800 --> 00:00:48,230 Crazy ere egin dezakezu gauzak egiteko bezalako gauzak pantailan animatzeko. 15 00:00:48,230 --> 00:00:51,700 >> Beraz, nola ez CSS erabili dugu HTML? 16 00:00:51,700 --> 00:00:53,620 Hartu ahula begira gune hau idatzi dut. 17 00:00:53,620 --> 00:00:57,290 Rob gune honetako begiratu oraintxe bada, seguruenik litzaidake zerbait esan zuen bezala, 18 00:00:57,290 --> 00:01:01,730 "Wow! Nire sarrera itxura terrible. Joseph, diseinatzaile awful bat Oraindik duzu." 19 00:01:01,730 --> 00:01:05,110 "Default Times letra-tipoa erabiliz? Helvetica da, beraz, askoz hobeto". 20 00:01:05,110 --> 00:01:09,600 >> Beraz, zer Rob nahi estilismoa aplikatzeko modurik errazena izan daiteke? 21 00:01:09,600 --> 00:01:13,530 Pertsonak modu asko nabarmenena, hasieran idatzi CSS 22 00:01:13,530 --> 00:01:17,470 zer style adierazpenak eskuineko deitzen dugun elementu bertan jartzea 23 00:01:17,470 --> 00:01:20,560 HTML style atributua erabiliz. 24 00:01:20,560 --> 00:01:26,420 Style adierazpena A, besterik gabe, HTML elementu CSS jabetza osatzen aldatu nahi dugun 25 00:01:26,420 --> 00:01:32,140 balio berria jabetza eta amaieran puntu eta koma ondoren bi puntu eta jarraian. 26 00:01:32,140 --> 00:01:36,600 Esate baterako, demagun Rob bere sarrera inguruan ertz beltz bat nahi du. 27 00:01:36,600 --> 00:01:40,040 Lehenak jarri dugu estilo atributu Rob en div hemen 28 00:01:40,040 --> 00:01:43,830 ondoren, komatxo barruan jarri CSS adierazpen bat: 29 00:01:43,830 --> 00:01:47,880 "Border: 1 px ona beltzak;" 30 00:01:47,880 --> 00:01:52,480 1 pixel de la frontera zabalera dagokio, ona mugaz estilo dagokio, 31 00:01:52,480 --> 00:01:56,640 eta amaieran kolorea zehazten du zer mugan kolorea da. 32 00:01:56,640 --> 00:02:01,220 >> Nahi dugu elementu batean estilo bat baino gehiago izanez gero, idatzi sekuentzian adierazpen horiek. 33 00:02:01,220 --> 00:02:05,650 Esate baterako, Rob bere goiburua Helvetica testua nahi izanez gero, atzealde urdin bat 34 00:02:05,650 --> 00:02:09,270 eta espazio gehiago testuaren inguruan, hau egin ahal izango dugu: 35 00:02:09,270 --> 00:02:19,800 style = "font-family: Helvetica; background-color: blue; betegarria: 5px;" 36 00:02:22,150 --> 00:02:28,010 Azken puntu eta koma da, benetan hautazkoa da, baina jendeak normalean gorde koherentzia-en mesedetan. 37 00:02:28,010 --> 00:02:32,180 >> CSS freskoago eta konplexuagoa propietate batzuk azaltzeko gorde dugu 38 00:02:32,180 --> 00:02:34,140 beste bideo bat. 39 00:02:34,140 --> 00:02:38,780 Kontuan zerbait bada, besterik gabe, nahi duzun efektua CSS ondoren Googling 40 00:02:38,780 --> 00:02:41,590 Ziurrenik nahiko emaitza onak ematen dizute. 41 00:02:41,590 --> 00:02:44,530 Cool gauza CSS nahiko zabala da, 42 00:02:44,530 --> 00:02:48,470 beraz, odds dira ezer egin nahi duzun bada arrazoia barruan 43 00:02:48,470 --> 00:02:51,350 CSS Ziurrenik ez da. 44 00:02:51,350 --> 00:02:54,750 Inline estilismoa estilismoa mota hau deitzen diogu. 45 00:02:54,750 --> 00:02:59,030 Elementu estiloa da, bai, Irteeran tag line. 46 00:02:59,030 --> 00:03:01,770 >> Folks benetan gustatzen antolatu behar izanez gero, 47 00:03:01,770 --> 00:03:05,800 hasteko nola messy guztiak itxura peeved apur bat izatea. 48 00:03:05,800 --> 00:03:09,810 Imajinatu izan duzun Horretarako orrian elementu guztietan, 49 00:03:09,810 --> 00:03:13,690 plus orain zure HTML eta CSS guztiak intermixed eta cluttered. 50 00:03:13,690 --> 00:03:15,500 Gordina da, ezta? 51 00:03:15,500 --> 00:03:21,110 Hori konpontzeko, jendeak azkenean hasi harrapatzeko beren HTML markup bereizten 52 00:03:21,110 --> 00:03:26,370 haien CSS estiloa zerbait CSS selectors izeneko erabiliz. 53 00:03:26,370 --> 00:03:31,780 CSS selectors erabiltzen dira aukeratzeko elementu deklarazioak aplikatzen dira. 54 00:03:31,780 --> 00:03:38,600 CSS deklarazioak zerrenda bat konbinatuta hautatzaileak A askotan CSS arau bat aipatzen da. 55 00:03:38,600 --> 00:03:43,260 Arau hauek jarri HTML estilo ireki eta itxi tags arteko litzateke, 56 00:03:43,260 --> 00:03:46,120 sarritan dokumentuaren buruan. 57 00:03:46,120 --> 00:03:49,000 >> Askoz errazagoa da adibide bat ikusteko, 58 00:03:49,000 --> 00:03:53,000 dezagun hasteko CSS arau sinple bat sortuz. 59 00:03:53,000 --> 00:03:58,180 Lehenik eta behin, dezagun jarri style tags gure HTML sekzio burua. 60 00:03:58,180 --> 00:04:00,020 Ondoren, hautatzaileak. 61 00:04:00,020 --> 00:04:03,490 Hasteko off dugu selectors errazena bat, hash sinbolo bidez, 62 00:04:03,490 --> 00:04:08,080 ID atributu HTML elementu bat hautatzen du. 63 00:04:08,080 --> 00:04:11,850 Kasu honetan, Rob bere sarrera adierazten div aukeratu dugu. 64 00:04:11,850 --> 00:04:16,740 hash sinbolo div ID, rob, ondoren, idatziz. 65 00:04:16,740 --> 00:04:18,579 Orain deklarazioak. 66 00:04:18,579 --> 00:04:24,090 Ireki eta itxi giltza gehitu ditugu eta gure deklarazioak inline lehenago mugitu Rob en div 67 00:04:24,090 --> 00:04:26,880 giltza horien barruan, freskatu, 68 00:04:26,880 --> 00:04:34,160 eta, cool, Rob-en intro oraindik ertz beltza minus messy inline ugliness du. 69 00:04:34,160 --> 00:04:39,380 >> Orain, zer nahi badugu, Rob-en intro barrutik h1 hautatzeko? 70 00:04:39,380 --> 00:04:44,400 Uste duzu, agian "dezagun ID bat jarri eta gero, gure estilo lehenago mugitu." 71 00:04:44,400 --> 00:04:48,760 Lan egiten duen, baina CSS elementuak hautatu dezazun beste modu batzuk ditu 72 00:04:48,760 --> 00:04:53,490 selectors errazak nahastu combinators deitzen dugun erabiliz. 73 00:04:53,490 --> 00:04:57,740 Esate baterako, zuriuneak karaktere combinator gisa erabili ahal izango dira 74 00:04:57,740 --> 00:05:03,510 1 hautatzaileak hautatzaileak beste baten barruan bizi diren instantzia guztiak zehazteko. 75 00:05:03,510 --> 00:05:06,630 Hori asko zailagoa benetan baino da. 76 00:05:06,630 --> 00:05:08,830 Hona hemen adibide bat da. 77 00:05:08,830 --> 00:05:13,900 Idatzi # truke, hutsune bat gehitu, eta jarraitu h1 bat egingo dugu, 78 00:05:13,900 --> 00:05:18,840 simple hautatzaileak tag hautatzaileak beste izeneko elementu mota aukeratzen dituen 79 00:05:18,840 --> 00:05:21,200 divs edo paragrafo bezala. 80 00:05:21,200 --> 00:05:26,140 Espazio The, gure 2 selectors simple konbinatzen, CSS deklarazioak guztiak aplikatuz 81 00:05:26,140 --> 00:05:32,560 h1 tags id = "rob" elementu barruan bizi diren kortxeteak kurtsibak. 82 00:05:32,560 --> 00:05:38,290 Just konbentzitzea lan egiten dela, letraren kolorea aldatu dut zuri, freskatu, 83 00:05:38,290 --> 00:05:42,090 eta, begira, Rob-en goiburua zuria. 84 00:05:42,090 --> 00:05:47,510 >> Lan hau guztia doan erakusten duten arauak estilo inline ordez erabiliz 85 00:05:47,510 --> 00:05:50,510 askoz garbiagoa kodea eskuratu ahal izango dugu. 86 00:05:50,510 --> 00:05:53,900 Izan ere, estilo Bloke honetan hasten bada, pixka bat handiak, 87 00:05:53,900 --> 00:05:58,340 Estilo horiek ere I tira, fitxategi ezberdin batean guztira. 88 00:05:58,340 --> 00:06:05,120 >> CSS fitxategi berri hau dokumentu honetan bakarrik erabili dut HTML link tag. 89 00:06:05,120 --> 00:06:10,320 Hemen nago kontatzeko naiz I kanpoko estilo fitxa bat estekatze, rel atributua 90 00:06:10,320 --> 00:06:14,840 eta bidea zehazten fitxategi nire href atributurik. 91 00:06:14,840 --> 00:06:20,290 Orain nire HTML markup eta CSS antolatzen dira nicely fitxategiak erabat bereizita, 92 00:06:20,290 --> 00:06:26,090 hau da, ia beti modu diseinatzaile nahiago HTML eta CSS lan. 93 00:06:26,090 --> 00:06:30,180 >> Kasu horretan, galdetzen ari bazara, simple selectors ID selectors 94 00:06:30,180 --> 00:06:33,100 eta etiketa batzuk ikusi besterik ez dugu atsegin selectors 95 00:06:33,100 --> 00:06:38,610 , baita klase klase jakin bat duten elementuak aukeratzeko selectors 96 00:06:38,610 --> 00:06:44,000 atributu mota atributuak, adibidez, beste elementu hautatzen selectors = "radio" 97 00:06:44,000 --> 00:06:49,180 radio button inputak, eta pseudoselectors bezala pasatzean eta fokua 98 00:06:49,180 --> 00:06:55,260 estilismoa zehaztuz elkarrekintzak elementu bat gertatzen gustatzen gainetik sagua pasatzean. 99 00:06:55,260 --> 00:06:58,950 >> Komun combinators artean, besteak beste, haur guztiak zuriunez 100 00:06:58,950 --> 00:07:02,080 eta koma selectors bereizteko. 101 00:07:02,080 --> 00:07:06,370 Beste batzuk aurkituko ahal izango duzu, besteak beste, seme-alabak zuzeneko soilik arrow, 102 00:07:06,370 --> 00:07:10,440 elementu ondoren gertatzen diren anai-arrebak Tilde, 103 00:07:10,440 --> 00:07:16,010 eta 1 anaia berehala elementu ondoren datorren seinale plus. 104 00:07:16,010 --> 00:07:18,540 >> Selectors eta combinators horiek konbinatuz By, 105 00:07:18,540 --> 00:07:22,910 estilismoa sorta zabaltzeko dezakezu lortzeko dezakezu web orrian 106 00:07:22,910 --> 00:07:25,050 eta idatzi CSS gehiago eraginkortasunez. 107 00:07:25,050 --> 00:07:28,370 CSS lerro idazten hemen me ikusiko duzu pare bat besterik ez, 108 00:07:28,370 --> 00:07:34,460 Azkar, honen antzeko zerbait itxura hau atsegin dute zerbait egin ahal izango dut. 109 00:07:34,460 --> 00:07:37,080 >> Joseph naiz, eta hau da CS50. 110 00:07:37,080 --> 00:07:39,260 >> [CS50.TV] 111 00:07:39,260 --> 00:07:40,780 >> Uh, non ez dut hasi? 112 00:07:40,780 --> 00:07:44,140 Horretarako ni gabe - [barreak] Okay. 113 00:07:44,140 --> 00:07:47,300 Gehitu - idazketa hori aldatzeko me. 114 00:07:50,580 --> 00:07:52,470 Ooh. Sentitzen dugu.