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 University] 3 00:00:04,810 --> 00:00:07,160 [Dit is CS50. - CS50.TV] 4 00:00:07,160 --> 00:00:11,430 >> Vandaag gaan we het hebben over CSS of Cascading Style Sheets. 5 00:00:11,430 --> 00:00:14,330 >> Dus wat is nu precies CSS? 6 00:00:14,330 --> 00:00:17,120 Nou, laten we breken de term CSS beneden in 2 delen: 7 00:00:17,120 --> 00:00:19,510 Cascading Style Sheets en. 8 00:00:19,510 --> 00:00:23,900 Cascadering is een beetje complexer, en het is iets wat we laten zien in een andere video. 9 00:00:23,900 --> 00:00:27,930 Maar voor starters, Style Sheets heel veel hints naar wat CSS doet. 10 00:00:27,930 --> 00:00:30,880 Het voegt stijlen om de HTML van een webpagina, 11 00:00:30,880 --> 00:00:33,720 het veranderen van hoe de webpagina ziet er esthetisch. 12 00:00:33,720 --> 00:00:38,310 Dit betekent dat alles van het lettertype van de tekst aan de positionering van de inhoud op de pagina 13 00:00:38,310 --> 00:00:43,800 om andere leuke dingen zoals het maken van de hoeken van een box afgeronde of het toevoegen van schaduwen naar tekst. 14 00:00:43,800 --> 00:00:48,230 U kunt zelfs gekke dingen doen, zoals dingen animeren op het scherm. 15 00:00:48,230 --> 00:00:51,700 >> Dus hoe kunnen we gebruik maken van CSS met HTML? 16 00:00:51,700 --> 00:00:53,620 Neem deze arme ogende site die ik net schreef. 17 00:00:53,620 --> 00:00:57,290 Als Rob waren om te kijken naar deze site op dit moment, zou hij waarschijnlijk iets zeggen als, 18 00:00:57,290 --> 00:01:01,730 "Wow! Mijn inleiding ziet er verschrikkelijk uit. Joseph, je bent een vreselijke ontwerper." 19 00:01:01,730 --> 00:01:05,110 "Met behulp van het standaard lettertype Times? Helvetica is zo veel beter." 20 00:01:05,110 --> 00:01:09,600 >> Dus wat zou de eenvoudigste manier om de styling Rob wil toe te passen? 21 00:01:09,600 --> 00:01:13,530 De meest voor de hand liggende manier om veel mensen in eerste instantie schreef CSS 22 00:01:13,530 --> 00:01:17,470 was in het element zelf om te zetten wat we stijl verklaringen recht te bellen 23 00:01:17,470 --> 00:01:20,560 met attribuut HTML stijl. 24 00:01:20,560 --> 00:01:26,420 Een verklaring stijl gewoon bestaat uit het HTML element CSS eigenschap willen we veranderen 25 00:01:26,420 --> 00:01:32,140 gevolgd door een dubbele punt, gevolgd door de nieuwe waarde van het onroerend goed en een puntkomma aan het eind. 26 00:01:32,140 --> 00:01:36,600 Bijvoorbeeld, laten we zeggen Rob wil een zwarte rand om zijn inleiding. 27 00:01:36,600 --> 00:01:40,040 We op de eerste plaats het attribuut stijl op Rob's div hier 28 00:01:40,040 --> 00:01:43,830 dan tussen dubbele aanhalingstekens zet een CSS declaratie: 29 00:01:43,830 --> 00:01:47,880 "Border: 1px solid black;" 30 00:01:47,880 --> 00:01:52,480 De 1 pixel verwijst naar de breedte van de grens, de vaste stof betrekking op de stijl van de grens, 31 00:01:52,480 --> 00:01:56,640 en de kleur aan het einde bepaalt welke kleur de grens is. 32 00:01:56,640 --> 00:02:01,220 >> Als we willen meerdere stijlen op een element, schrijf deze verklaringen in de juiste volgorde. 33 00:02:01,220 --> 00:02:05,650 Bijvoorbeeld, als Rob wil zijn kopbal tekst in Helvetica met een blauwe achtergrond 34 00:02:05,650 --> 00:02:09,270 en meer ruimte rond de tekst, kunnen we dit doen: 35 00:02:09,270 --> 00:02:19,800 style = "font-family: Helvetica; background-color: blue; padding: 5px;" 36 00:02:22,150 --> 00:02:28,010 De laatste puntkomma is eigenlijk optioneel, maar mensen blijven meestal in zo consequent zijn. 37 00:02:28,010 --> 00:02:32,180 >> We zullen besparen uitgelegd wat de koeler en meer complexe CSS-eigenschappen 38 00:02:32,180 --> 00:02:34,140 een andere video. 39 00:02:34,140 --> 00:02:38,780 Als je iets in gedachten hebben, maar het gewenste effect, gevolgd door CSS Googlen 40 00:02:38,780 --> 00:02:41,590 zal waarschijnlijk geven je vrij goede resultaten. 41 00:02:41,590 --> 00:02:44,530 Het koele ding is dat CSS is vrij breed, 42 00:02:44,530 --> 00:02:48,470 dus kansen zijn als er iets is wat je wilt doen - in redelijkheid - 43 00:02:48,470 --> 00:02:51,350 CSS kan het waarschijnlijk doen. 44 00:02:51,350 --> 00:02:54,750 We noemen deze vorm van styling inline styling. 45 00:02:54,750 --> 00:02:59,030 De stijl element is, nou ja, in lijn met de begin-tag. 46 00:02:59,030 --> 00:03:01,770 >> Voor mensen die echt graag willen worden georganiseerd, 47 00:03:01,770 --> 00:03:05,800 je zou kunnen beginnen met het krijgen van een beetje pissig op hoe rommelig dit allemaal ziet. 48 00:03:05,800 --> 00:03:09,810 Stel je voor als je moest dit doen voor elk element op de pagina, 49 00:03:09,810 --> 00:03:13,690 plus nu uw HTML en CSS zijn allemaal gemengd en rommelig. 50 00:03:13,690 --> 00:03:15,500 Gross, toch? 51 00:03:15,500 --> 00:03:21,110 Om dit op te lossen, mensen begon uiteindelijk vangen op het scheiden van hun HTML-opmaak 52 00:03:21,110 --> 00:03:26,370 uit hun CSS styling met behulp van iets genaamd CSS selectors. 53 00:03:26,370 --> 00:03:31,780 CSS selectors worden gebruikt om elementen waarop verklaringen toegepast kiezen. 54 00:03:31,780 --> 00:03:38,600 Een selector in combinatie met een lijst van CSS declaraties wordt vaak aangeduid als een CSS-regel. 55 00:03:38,600 --> 00:03:43,260 Deze regels zouden worden gebracht tussen open en dicht HTML-tags stijl, 56 00:03:43,260 --> 00:03:46,120 vaak in de kop van het document. 57 00:03:46,120 --> 00:03:49,000 >> Het is veel gemakkelijker om te zien met een voorbeeld, 58 00:03:49,000 --> 00:03:53,000 dus laten we beginnen met het maken van een eenvoudige CSS-regel. 59 00:03:53,000 --> 00:03:58,180 Laten we eerst eens gezet stijl tags in de head sectie van onze HTML. 60 00:03:58,180 --> 00:04:00,020 Vervolgens wordt de selector. 61 00:04:00,020 --> 00:04:03,490 We zullen beginnen met behulp van een van de meest eenvoudige selectors, het hekje, 62 00:04:03,490 --> 00:04:08,080 die een HTML-element door zijn ID attribuut selecteert. 63 00:04:08,080 --> 00:04:11,850 In dit geval zullen we de div dat de invoering Rob vertegenwoordigt selecteren 64 00:04:11,850 --> 00:04:16,740 openen door het hekje gevolgd door de div's ID, rob. 65 00:04:16,740 --> 00:04:18,579 Nu de aangiften. 66 00:04:18,579 --> 00:04:24,090 We voegen open en dicht beugels en verleggen onze eerdere inline verklaringen over Rob's div 67 00:04:24,090 --> 00:04:26,880 binnenkant van deze braces, vernieuwen, 68 00:04:26,880 --> 00:04:34,160 en, koele, Rob's intro heeft nog steeds een zwarte rand eromheen minus de rommelige inline lelijkheid. 69 00:04:34,160 --> 00:04:39,380 >> Nu, wat als we wilden de h1 binnenkant van Rob's intro te selecteren? 70 00:04:39,380 --> 00:04:44,400 Je zou kunnen denken, "laten we een ID op en verplaats dan onze eerdere stijlen." 71 00:04:44,400 --> 00:04:48,760 Dat werkt, maar CSS heeft andere manieren om u te laten elementen te selecteren 72 00:04:48,760 --> 00:04:53,490 door het gebruik van wat wij noemen combinatoren om eenvoudige selectors mengen. 73 00:04:53,490 --> 00:04:57,740 Bijvoorbeeld, kan een scheidingsteken worden gebruikt als een combinator 74 00:04:57,740 --> 00:05:03,510 om alle instanties van 1 selector die leven in een andere selector opgeven. 75 00:05:03,510 --> 00:05:06,630 Dat klinkt een stuk ingewikkelder dan het in werkelijkheid is. 76 00:05:06,630 --> 00:05:08,830 Hier is een voorbeeld. 77 00:05:08,830 --> 00:05:13,900 We zullen typt # beroven, voeg een spatie, en volg het met een h1, 78 00:05:13,900 --> 00:05:18,840 andere eenvoudige selector genoemd een tagkiezer dat soort elementen selecteert 79 00:05:18,840 --> 00:05:21,200 zoals divs of alinea's. 80 00:05:21,200 --> 00:05:26,140 De ruimte combineert onze 2 eenvoudige selectors, het toepassen van alle CSS-declaraties 81 00:05:26,140 --> 00:05:32,560 en de accolades te h1 tags die binnenkant van het element met id = "rob" wonen. 82 00:05:32,560 --> 00:05:38,290 Gewoon om u te overtuigen dat het werkt, zal ik de kleur van het lettertype te veranderen naar wit, vernieuwen, 83 00:05:38,290 --> 00:05:42,090 en, kijk, header Rob is nu wit. 84 00:05:42,090 --> 00:05:47,510 >> Al dit werk toont aan dat met behulp van regels in plaats van inline stijlen 85 00:05:47,510 --> 00:05:50,510 we kunnen veel schoner code te krijgen. 86 00:05:50,510 --> 00:05:53,900 In feite, als deze stijl blok begint te krijgen van een beetje groot, 87 00:05:53,900 --> 00:05:58,340 Ik kan zelfs trek deze stijlen uit in een ander bestand helemaal. 88 00:05:58,340 --> 00:06:05,120 >> Om dit nieuwe bestand als CSS zijn in dit document zal ik gewoon gebruik maken van HTML-tag koppeling. 89 00:06:05,120 --> 00:06:10,320 Hier ben ik het vertellen dat ik het koppelen aan een externe style sheet, het attribuut rel, 90 00:06:10,320 --> 00:06:14,840 en met vermelding van het pad naar het bestand met mijn href attribuut. 91 00:06:14,840 --> 00:06:20,290 Nu is mijn HTML-opmaak en CSS zijn mooi georganiseerd in volledig gescheiden bestanden, 92 00:06:20,290 --> 00:06:26,090 dat is bijna altijd de manier waarop ontwerpers de voorkeur te werken met HTML en CSS. 93 00:06:26,090 --> 00:06:30,180 >> In het geval dat je je afvraagt, de eenvoudige selectors onder ID selectors 94 00:06:30,180 --> 00:06:33,100 en tag selectors zoals we net zagen 95 00:06:33,100 --> 00:06:38,610 alsmede klasse keuzeschakelaars selecteren elementen met een bepaalde categorie, 96 00:06:38,610 --> 00:06:44,000 attribuut selectors voor het selecteren van elementen door andere attributen zoals type = "radio" 97 00:06:44,000 --> 00:06:49,180 voor radio button inputs, en pseudoselectors zoals zweven en focus 98 00:06:49,180 --> 00:06:55,260 voor het opgeven van styling als interacties zoals muis over een element optreden. 99 00:06:55,260 --> 00:06:58,950 >> De gemeenschappelijke combinatoren bevatten witruimte voor alle kinderen 100 00:06:58,950 --> 00:07:02,080 en komma's om selectors te onderscheiden. 101 00:07:02,080 --> 00:07:06,370 Anderen die u kunt tegenkomen zijn onder andere de pijl voor enige rechtstreekse kinderen, 102 00:07:06,370 --> 00:07:10,440 de tilde voor alle broers en zussen die zich voordoen na het element, 103 00:07:10,440 --> 00:07:16,010 en het plus-teken voor de 1 broer of zus die onmiddellijk na het element komt. 104 00:07:16,010 --> 00:07:18,540 >> Door het combineren van deze selectors en combinatoren, 105 00:07:18,540 --> 00:07:22,910 kunt u het bereik van styling u kunt bereiken op een bepaalde webpagina te verbreden 106 00:07:22,910 --> 00:07:25,050 en schrijf CSS efficiënter. 107 00:07:25,050 --> 00:07:28,370 Met slechts een paar regels CSS zie je me hier te typen, 108 00:07:28,370 --> 00:07:34,460 Ik kan snel te maken zoiets als dit eruit als iets als dit. 109 00:07:34,460 --> 00:07:37,080 >> Ik ben Jozef en dit is CS50. 110 00:07:37,080 --> 00:07:39,260 >> [CS50.TV] 111 00:07:39,260 --> 00:07:40,780 >> Uh, waar moet ik beginnen? 112 00:07:40,780 --> 00:07:44,140 Laat mij dat doen zonder - [lacht] Oke. 113 00:07:44,140 --> 00:07:47,300 Voeg een - Laat me dat verwoording veranderen. 114 00:07:50,580 --> 00:07:52,470 Ooh. Sorry.