1 00:00:01,020 --> 00:00:06,030 Dus in deze video gaan we focussen op drie CSSA selectors. 2 00:00:06,030 --> 00:00:08,490 Dat zijn element ID in de klas. 3 00:00:08,610 --> 00:00:11,610 Dus er zijn veel meer opties voor het selecteren van elementen. 4 00:00:11,730 --> 00:00:15,630 We gaan om te leren over hen later we gewoon gaan richten op deze drie om te beginnen. 5 00:00:15,960 --> 00:00:28,370 En als ik zeg selector denk terug aan deze algemene regel dat we gesproken over vroeg op toen het begon CSSA een paar video's geleden waar we een selector en vervolgens accolades en vervolgens een aantal eigenschappen. 6 00:00:28,860 --> 00:00:32,660 Dus we gaan een paar verschillende selecteurs dat we hier kunnen zetten te zien. 7 00:00:33,030 --> 00:00:38,340 En de manier waarop we gaan dat doen we eigenlijk gaan bouwen aan een heel eenvoudig om de lijst samen te doen. 8 00:00:38,340 --> 00:00:39,980 Dus ik ga een nieuw bestand te maken. 9 00:00:40,170 --> 00:00:51,740 Ik ga om het op te slaan en ik ga het bellen om lijst die HMO zodra we dat dan gaan we door en voeg de HMO doen. 10 00:00:52,530 --> 00:01:01,550 En de manier waarop het gaat werken dat het gaat om een ​​H1 zijn en dan gaan we een goed te hebben met bondgenoten. 11 00:01:02,010 --> 00:01:20,090 Maar in elk bondgenoot gaan we wat tekst hebben en we gaan een beetje checkbox hebben dus kijk of je kunt herinneren hoe checkbox doen is input type gelijk checkbox en vervolgens onder dat of na dat we onze tekst hebben . 12 00:01:20,220 --> 00:01:30,210 Dus we zullen moeten lopen roestige dan ga ik gewoon gaan om dit te dupliceren. 13 00:01:30,210 --> 00:01:39,020 Dus dan moeten we drie van hen lopen hier Rusty alleen om boodschappen te kopen. 14 00:01:40,590 --> 00:01:48,660 En dan tot slot eindigt de opname te zien beoordelen Phidias. 15 00:01:48,960 --> 00:01:56,940 Dus als we dit openen in een browser gaan we een saai en gestileerde versie van ons eindproduct te zien, maar het skelet is er. 16 00:01:57,090 --> 00:02:01,520 We hebben onze twee do's en een ieder die een beetje checkbox ernaast. 17 00:02:02,650 --> 00:02:03,390 OK. 18 00:02:04,050 --> 00:02:08,590 Dus de volgende ding dat we willen doen is het aansluiten van een style sheet. 19 00:02:09,060 --> 00:02:18,480 Dus om dat te doen deze keer laten we beginnen met het aansluiten van een niet-bestaand style sheet en dan zullen we doorgaan en het creëren van een style sheet. 20 00:02:18,480 --> 00:02:26,960 Dus sommige mensen zou deze fout driven development, waar we iets dat we weten zal niet werken en dan maken we het daarna werken schrijven noemen. 21 00:02:26,970 --> 00:02:34,060 Dus ik ga om dit te bellen om te doen het beoordelen introduceren C zie beoordelen die niet bestaat. 22 00:02:34,670 --> 00:02:40,820 Het volgende wat we gaan doen is ga je gang en maak dat bestand te Dewes dat C beoordelen. 23 00:02:40,920 --> 00:02:43,860 En dit hoeft te worden op dezelfde plaats als een onderzoek te doen. 24 00:02:43,860 --> 00:02:48,550 Tim Ik zal behalve dat en alleen maar om ervoor te zorgen dat deze is aangesloten. 25 00:02:48,660 --> 00:02:57,870 Laten we iets als het lichaam achtergrond oranje gewoon doen en je weet dat dit is eigenlijk wat ik het over had in de kleur video. 26 00:02:57,870 --> 00:03:01,380 Dit is een van de weinige keren dat ik zou echt een kleuren zoals oranje te gebruiken. 27 00:03:01,380 --> 00:03:06,870 Afgezien van het onderwijs zou ik gewoon gebruiken om te controleren of er iets is Ik wil gewoon een felle kleur te maken. 28 00:03:06,930 --> 00:03:11,760 Ik wil zien of deze te gebruiken dat C Ss juist hier wordt verwezen. 29 00:03:11,820 --> 00:03:12,920 Dus als we fris. 30 00:03:13,170 --> 00:03:16,320 Okay grote dingen zijn aangesloten. 31 00:03:16,320 --> 00:03:27,180 Dus wat we gaan doen is terug te keren naar de dia's hier en praten over de elementen selector eerste die is degene die we eigenlijk veel tijd hebben besteed aan zijn klaar. 32 00:03:27,180 --> 00:03:38,240 Het is eigenlijk het type aanvallen als je div of paragraaf of het lichaam te geven en dan zal het alle bijbehorende elementen van alle instanties die overeenkomen met die te selecteren. 33 00:03:38,610 --> 00:03:54,900 Dus in dit geval hebben we twee divs en elke div heeft twee alinea's en dus zetten we alle divs die achtergrond paars we twee paarse apparaat dat we stel alle paragraaf aan kleur geel krijgen we vier gele paragrafen zijn. 34 00:03:55,140 --> 00:03:57,840 Dus dat is wat we hier doen als we het lichaam te kiezen. 35 00:03:57,840 --> 00:04:10,320 We kunnen ook doen voor alle Alwis en geef ze een bestelling of laten piepen rand van twee pixels stevige rode. 36 00:04:10,910 --> 00:04:14,560 Nu natuurlijk dat werkt op alle bondgenoten. 37 00:04:15,360 --> 00:04:15,970 OK. 38 00:04:16,380 --> 00:04:24,850 Dus de volgende ding dat wij zouden willen doen is één uit een bondgenoot of een H-1 of één exemplaar van iets. 39 00:04:24,870 --> 00:04:30,510 Dus in dit voorbeeld gaan we de keuze van de derde leugen en draaien geel. 40 00:04:30,690 --> 00:04:41,800 En de manier waarop we dat doen is eigenlijk door het veranderen van het team iets en vervolgens met behulp van een haak die we toevoegen aan de H T M L en R C Ss allemaal terug te verwijzen naar het en draai het geel. 41 00:04:42,180 --> 00:04:45,700 De eerste stap is om deze haak dat een ID wordt genoemd voegen. 42 00:04:46,050 --> 00:04:52,420 En dus is de manier waarop een idee werkt u toe te voegen als een attribuut op elk element ID gelijk. 43 00:04:52,440 --> 00:04:57,120 En dan tussen aanhalingstekens elke naam die u wilt dat kan van alles zijn. 44 00:04:57,360 --> 00:05:08,420 En wat we doen is verwijzen naar die later door het schrijven van Octa Thorpe of hekje en vervolgens de naam van de ID en dat zal de één element dat overeenkomt met de ID-naam te selecteren. 45 00:05:08,820 --> 00:05:18,510 Dus als een voorbeeld laten we zeggen dat ik wil deze laatste bondgenoot hier iets anders te kijken. 46 00:05:19,080 --> 00:05:23,790 Wat ik kon doen is hier Ally en laten we geven het een ID. 47 00:05:23,970 --> 00:05:25,860 En dit kan elke naam op alle. 48 00:05:25,950 --> 00:05:40,210 Laten we deze bijzondere en de reden waarom ik zeg dat ik het bijzonder noemde het is niet echt een grote naam noemen, maar het doet je laten zien dat het punt van het gebruik van een ID is enkel iets uit. 49 00:05:40,330 --> 00:05:46,490 Het is een manier om een ​​individueel element en één opmerking over een ID te richten. 50 00:05:46,560 --> 00:05:49,300 Het kan alleen worden weergegeven op een pagina een keer. 51 00:05:49,480 --> 00:05:56,270 Dus als ik dit doe en dan proberen en geven de ID speciaal voor twee elementen die eigenlijk ongeldig HMO. 52 00:05:56,530 --> 00:05:58,920 Dus het is altijd de bedoeling om daar een keer op de pagina zijn. 53 00:05:59,130 --> 00:06:02,640 Het wordt uitsluitend gebruikt om een ​​enkel element out single. 54 00:06:02,680 --> 00:06:09,280 We kunnen echter meerdere IDs op een pagina zolang zij niet meer dan één keer voorkomen. 55 00:06:09,590 --> 00:06:09,830 OK. 56 00:06:09,850 --> 00:06:12,180 Dus laten we gaan met deze speciale. 57 00:06:12,240 --> 00:06:17,180 Laten we dit laten we eens een kijkje nemen op het hier. 58 00:06:17,350 --> 00:06:18,550 Het is dit laatste hier. 59 00:06:18,790 --> 00:06:20,390 Laten we het een achtergrondkleur. 60 00:06:20,650 --> 00:06:24,470 Dus om dat te doen Id De naam is bijzonder. 61 00:06:24,490 --> 00:06:37,220 We gaan naar onze CSSA bestand en wij schrijven speciaal en we zetten een octaaf omhoog voor het en dat alleen maar vertelt ons dat we praten over een ID. 62 00:06:37,500 --> 00:06:48,020 Dus dan alles wat we doen is schrijven of C S S in hier, dus laten we het doen achtergrondkleur en laten we het geel. 63 00:06:48,250 --> 00:06:54,730 Sla het bestand vernieuwen en kunt u alleen zien wanneer het geel. 64 00:06:54,790 --> 00:06:56,770 Dus er zijn een paar dingen die ik wil wijzen. 65 00:06:56,830 --> 00:06:59,890 De eerste is dat deze code werkt nog steeds. 66 00:06:59,880 --> 00:07:01,760 Het blijkt allemaal bondgenoten. 67 00:07:01,930 --> 00:07:05,310 Het geeft hen een rode rand met inbegrip van dit één van de laatste. 68 00:07:05,650 --> 00:07:15,520 En dan voegen we op de top van dat door toevoeging van een gele achtergrond alleen aan de laatste gebaseerd off van deze haak die we hebben toegevoegd en belde in ID. 69 00:07:15,580 --> 00:07:24,480 Dus kort samengevat een idee als een manier om enkel uit een element kunt u alleen gebruik maken van een ID eenmaal per pagina, maar kunnen we zoveel ID's als we willen op een pagina. 70 00:07:24,730 --> 00:07:34,380 Dus id's zijn geweldig om enkel uit individuele elementen, maar vaak willen we meerdere elementen die er hetzelfde uitzien, maar we willen niet alle bondgenoten bijvoorbeeld. 71 00:07:34,450 --> 00:07:43,410 Dus laten we zeggen dat ik wilde de helft van de geallieerden een weg en de helft van hen op een andere manier kunnen we een klasse te gebruiken om dat te bereiken stylen. 72 00:07:43,420 --> 00:07:51,410 Dus de manier waarop een klasse werkt het is net als een ID behalve dat het een klasse heet en we kunnen toepassen op een aantal elementen op een pagina. 73 00:07:51,430 --> 00:08:05,240 Dus zoals je hier kunt zien we het aanbrengen van een klasse met de naam het hoogtepunt van de eerste paragraaf en de derde paragraaf en dan verwijzen we het in ons succes met een punt in plaats van een octaaf Thorpe. 74 00:08:05,250 --> 00:08:13,350 weer zo om te contrasteren die hier om een ​​ID gebruiken we de hekje of de octaaf Thorpe hier om een ​​klasse te selecteren. 75 00:08:13,380 --> 00:08:14,540 We maken gebruik van dot. 76 00:08:14,710 --> 00:08:16,600 Anders werken ze op dezelfde manier. 77 00:08:16,660 --> 00:08:19,030 Dus laten we een voorbeeld. 78 00:08:19,230 --> 00:08:28,390 Ik ga een klasse en de manier waarop ik wil dat dit werken we gaan om te beweren dat deze twee zijn afgevinkt toe te voegen. 79 00:08:28,480 --> 00:08:32,720 Dus ik wil er een lijn door de tekst zijn. 80 00:08:32,760 --> 00:08:40,810 Dus als we kijken naar buy boodschappen en liep Resti moet er een staking door middel van het doorlopen van deze tekst, maar niet de laatste zijn. 81 00:08:40,840 --> 00:08:44,320 Dus de manier waarop we dat doen, of een manier om dat te doen is met de klas. 82 00:08:44,400 --> 00:08:58,050 Dus op de vlieg ik ga om verder te gaan en voeg een klasse en het gaat om te bellen dit ingevulde en een andere klasse evenaart afgerond en ik ga op te slaan dat en als ik te vernieuwen. 83 00:08:58,170 --> 00:09:00,560 Er gebeurt niets, want ik heb geen stijlen hebben. 84 00:09:00,900 --> 00:09:10,850 Dus nu ga ik naar mijn C Ss en ik gelijk dot en vervolgens de naam van de klasse voltooide accolades en nu stijl. 85 00:09:11,050 --> 00:09:19,920 Dus ik ga hier welke tekst decoratie en de tekst decoratie heet iets nieuws te introduceren is een manier om een ​​regel toe te voegen door. 86 00:09:20,080 --> 00:09:22,030 Maar er zijn een paar dingen die je kunt doen. 87 00:09:22,020 --> 00:09:35,800 U kunt een onderstreping toevoegen en je kunt een golvende onderstreping toevoegen Blijkbaar Ik wist niet dat een lijn door en een over lijn die is net als een onderstreping, behalve op de top. 88 00:09:35,800 --> 00:09:40,560 Dus we gaan lijn te gebruiken door en dat zou het moeten zijn. 89 00:09:40,810 --> 00:09:42,060 Dus als ik te vernieuwen. 90 00:09:42,120 --> 00:09:44,420 Houd uw oog op deze top twee. 91 00:09:44,470 --> 00:09:46,400 We krijgen nu een streep door. 92 00:09:46,840 --> 00:09:49,680 Grote. 93 00:09:49,990 --> 00:09:56,340 Een korte opmerking, terwijl ik hier ben, is dat als ik wil keuzevak in om te controleren wanneer de pagina wordt geladen. 94 00:09:56,500 --> 00:10:06,410 Dus nu zijn ze niet gecontroleerd en ik moet ze handmatig te controleren, maar als ik wil dat de bovenste twee te controleren Ik kan hier gaan en voeg in een attribuut genaamd gecontroleerd. 95 00:10:06,550 --> 00:10:10,370 En dit werkt op checkbox ingangen. 96 00:10:10,380 --> 00:10:15,580 Dus door te doen dat als ik waren vers Nu wanneer de pagina wordt geladen ze gecontroleerd. 97 00:10:15,750 --> 00:10:20,450 Dus laten we niet echt beoordelen, maar het is belangrijk maar om te weten dat je dat kunt doen. 98 00:10:20,830 --> 00:10:21,100 OK. 99 00:10:21,100 --> 00:10:24,140 Dus laten we dit wrap up heel snel. 100 00:10:24,250 --> 00:10:28,680 Wij hebben de elementen selector om alle van een bepaald element selecteren. 101 00:10:28,720 --> 00:10:31,780 Al Alwis al divs alle alinea's. 102 00:10:32,120 --> 00:10:41,120 We hebben de ID-selector die het ene element zal selecteren met de bijpassende ID en we moeten altijd een octaaf te gebruiken voor. 103 00:10:41,240 --> 00:10:42,590 Of een hekje.