1
00:00:01,300 --> 00:00:04,270
OK dus het is tijd dat we een aantal C S S. eigenlijk schrijven

2
00:00:04,290 --> 00:00:05,400
Erg opwindend.

3
00:00:05,400 --> 00:00:09,000
Voordat we dat doen hoewel we nodig hebben om een ​​aantal oude hem al dat we kunnen stijl hebben.

4
00:00:09,180 --> 00:00:18,140
Dus ik ga om verder te gaan en in sublieme Maak een nieuw bestand op te slaan het gewoon op mijn desk top voor nu en ik ga het roepen over mij.

5
00:00:18,220 --> 00:00:21,180
HMO.

6
00:00:22,470 --> 00:00:30,400
Gebruik dat trucje krijgen het skelet van de ketel plaat en dit gaat om een ​​zeer eenvoudige pagina zijn.

7
00:00:30,600 --> 00:00:34,500
Ik zeg het je nu niet van plan om mooi te zijn toen we hier klaar zijn.

8
00:00:34,590 --> 00:00:36,110
We gaan gewoon om wat kleuren te veranderen.

9
00:00:36,210 --> 00:00:38,950
We gaan gewoon over de grondbeginselen van hoe dit alles werkt samen.

10
00:00:39,240 --> 00:00:52,430
Dus ik ga gewoon en een ieder over mij en dan laten we zeggen een jeuk voor mijn hobby's.

11
00:00:52,740 --> 00:00:55,150
Voel je vrij om deze aan te passen aan jezelf.

12
00:00:55,530 --> 00:01:12,730
Laten we voegen een lijst en een paar bondgenoten en laten we vliegen teer koken en origami en sla het bestand.

13
00:01:13,110 --> 00:01:14,180
Laten we gewoon dubbel te controleren.

14
00:01:14,280 --> 00:01:16,870
Laten we open het.

15
00:01:16,920 --> 00:01:17,480
Grote.

16
00:01:17,550 --> 00:01:19,970
Hier is onze prachtige site dat we gaan stijl.

17
00:01:20,580 --> 00:01:26,650
Dus voordat we beginnen daadwerkelijk schrijven van succes hebben we om te beslissen waar het succes te zetten.

18
00:01:26,820 --> 00:01:28,520
En er zijn eigenlijk een paar keuzes.

19
00:01:28,860 --> 00:01:36,840
Dus in de noten zijn er twee die ik van verwijzingen op deze pagina en de eerste die ik zal je vertellen nu is geen goed idee.

20
00:01:36,840 --> 00:01:41,100
Ik blijkt dat u gewoon zo dat u zich bewust te zijn om twee redenen.

21
00:01:41,100 --> 00:01:51,390
Een dit is de enige manier die wordt gebruikt om te kunnen elementen voor afzonderlijke style sheet en voordat CSSA u daadwerkelijk deed dit in elk element stylen.

22
00:01:51,660 --> 00:01:55,380
Dus laat me een voorbeeld laten zien.

23
00:01:55,830 --> 00:01:59,140
Ik wil dit eerste leugen paars te maken.

24
00:01:59,340 --> 00:02:08,000
Ik zou zeggen dat de stijl en vervolgens in het citaat zeggen Color Purple en dat zal werken.

25
00:02:08,580 --> 00:02:10,800
En dit verandert paars zijn.

26
00:02:11,490 --> 00:02:20,880
Er is dus een probleem is echter dat als ik wil alle drie van deze paarse ik nodig heb om verder te gaan en te dupliceren dit elke keer te zijn.

27
00:02:20,880 --> 00:02:21,910
Dat is een hoop werk.

28
00:02:21,990 --> 00:02:28,570
En dan als ik besluit oh nee ik wil dat ze groen zijn dan moet ik om te gaan en te veranderen drie verschillende plaatsen om groen te zijn.

29
00:02:28,770 --> 00:02:35,940
En natuurlijk dat probleem is veel erger als je honderden van hetzelfde element met dezelfde stijl op een bepaalde pagina te hebben.

30
00:02:35,940 --> 00:02:37,200
Dus dit is een slecht idee.

31
00:02:37,470 --> 00:02:43,220
En de andere reden is dit niet een geweldig idee is dat we willen onze h tim L van RCA scheiden.

32
00:02:43,380 --> 00:02:46,050
Het is dit idee van de scheiding van bekommernissen.

33
00:02:46,200 --> 00:02:50,030
We willen dat onze CSSA om self-contained in zijn eigen bestand.

34
00:02:50,040 --> 00:02:53,270
We willen hem leeftijd zijn eigen bestand met alleen de structuur.

35
00:02:53,290 --> 00:02:55,130
C Ss is gewoon de stijl.

36
00:02:55,230 --> 00:02:58,490
Dus op dit moment is dit soort van een rare mix van de twee.

37
00:02:58,710 --> 00:03:07,010
Dus ik ga te ontdoen van die en de andere kant in de toelichting is zoiets als een stijl aanval.

38
00:03:07,360 --> 00:03:15,580
Dus een stijl tag laat ons schrijven C Ss syntax, waar we eigenlijk dingen te kiezen en we hebben de accolades die we hier niet kunnen doen.

39
00:03:16,230 --> 00:03:20,590
Maar wat we kunnen doen is dit doen binnen van een h t m l document.

40
00:03:20,700 --> 00:03:43,260
Dus in het hoofd als we doorgaan en gewoon maken van de tag genaamd stijl en we kunnen geven dit kenmerk soort gelijk tekst slash C Ss kunnen we nu schrijven een aantal C Ss-tags en selectors binnenkant van hier.

41
00:03:43,470 --> 00:03:55,240
Dus niet vergeten we hebben dit is de algemene regel selector en dan hebben we eigendom binnen de accolades en dan de waarde en vervolgens een puntkomma.

42
00:03:55,920 --> 00:03:58,990
Dus ik ga dit uit te reageren door de manier om reacties te kunnen doen.

43
00:03:59,040 --> 00:04:03,870
SS gebruiken slash en de asterisk en vervolgens asterisk en slash.

44
00:04:04,230 --> 00:04:06,060
Dus ik bedoel, ik laat dit hier.

45
00:04:06,270 --> 00:04:12,990
En laten we beginnen met het veranderen van de H-1 paars te zijn.

46
00:04:13,020 --> 00:04:16,810
Dus de manier waarop we schrijven dat als we dit patroon volgen we selecteren.

47
00:04:17,070 --> 00:04:24,680
Dus we gaan elk een en opnieuw te schrijven en we zullen besteden veel tijd op verschillende soorten selectors.

48
00:04:24,690 --> 00:04:32,860
Dus nu we leren over een zogenaamde de elementen selector die leidde tot gebaseerd off van een element type dat H-1 te selecteren.

49
00:04:33,300 --> 00:04:40,220
Dus nu gaan we een huis in hier en in deze video zijn we gewoon gaan om het zeer eenvoudig te houden en het gebruik van kleur toe te voegen.

50
00:04:40,740 --> 00:05:06,510
Dus ik zeg kleur en vervolgens paars en bewaar deze reload of page back-up en krijgen we een paarse H-1, zodat het volgende ding dat we kunnen doen is alle bondgenoten naar oranje te zijn en om dat te doen selecteren we met een element selector weer en we kunnen gewoon doen dit recht na.

51
00:05:06,520 --> 00:05:10,660
Wij geen komma's of andere leestekens nodig.

52
00:05:10,660 --> 00:05:19,390
We doen gewoon een regel hier accolades toe te passen en deze keer gaan we de kleur te zeggen is oranje.

53
00:05:19,390 --> 00:05:28,500
Dus de reden waarom we dit doen is dat ik wil u laten zien dat dit Elyse selector is niet alleen iemand selecteren selecteert alle leugens.

54
00:05:28,600 --> 00:05:33,340
Zo vernieuwen we alle drie van hen zijn nu oranje.

55
00:05:33,340 --> 00:05:36,220
Hetzelfde geldt voor de H-1 als we hadden meerdere h degenen.

56
00:05:36,310 --> 00:05:38,190
Dus zal ik gewoon toe te voegen drie.

57
00:05:38,260 --> 00:05:42,210
Ze zouden allemaal paars.

58
00:05:42,220 --> 00:05:54,860
Een ander ding dat ik je hier laten zien voorbij is moet ik doen om een ​​andere stijl voor elke nadien te vinden en ik zeg het moet blauw blijkt blauw zijn.

59
00:05:54,910 --> 00:05:56,020
Allemaal draaien blauw.

60
00:05:56,080 --> 00:06:02,680
En dus dit wordt naar iets dat we veel meer over en dat is wat er gebeurt als er tegenstrijdige stijl informatie leert.

61
00:06:02,680 --> 00:06:05,200
En in dit geval we veranderden ze allemaal tot paars zijn.

62
00:06:05,410 --> 00:06:07,870
En toen ze allemaal achteraf veranderen we blauw te zijn.

63
00:06:07,870 --> 00:06:12,510
Dus degene die kwam later won het gevecht denk ik.

64
00:06:13,560 --> 00:06:14,040
OK.

65
00:06:14,050 --> 00:06:22,550
Dus het probleem met wat we hebben net gedaan alsof ziet er prima uit, maar helaas is het nog steeds in onze HMO.

66
00:06:22,690 --> 00:06:30,210
En ik net klaar zeggen een paar minuten geleden willen we uit te scheiden of h hem en R C S ons dat we niet willen dat ze worden aangesloten.

67
00:06:30,320 --> 00:06:35,000
Nou we willen dat ze worden aangesloten we willen niet dat de CCS worden genest binnen haar HMO.

68
00:06:35,440 --> 00:06:38,630
Dus functioneel werkt op precies dezelfde manier.

69
00:06:38,800 --> 00:06:46,880
We zien geen visuele verschil, maar ook wat we eigenlijk willen doen is gebruik maken van een link tag.

70
00:06:47,290 --> 00:07:01,580
Dus wat een link tag laat ons doen is het schrijven of zie SS in een volledig apart bestand en dan verbonden met de link tag in plaats van ons hoofd die in feite gaat krijgen van de inhoud van dat bestand en de ziel en de stijl alles in onze tijd.

71
00:07:01,580 --> 00:07:05,090
Tim L. gezien de inhoud van dat bestand.

72
00:07:07,270 --> 00:07:17,630
Zo te schrijven dat we ofwel kunt beginnen met het maken van een nieuw bestand en we gaan naar RC SS hier zet in, dus we gaan het redden en ik ben gewoon gaan om het te roepen.

73
00:07:17,690 --> 00:07:28,960
C Ss je het noemen wat je wilt, maar moet dot C Ss en ik ben waardoor het in dezelfde map als mijn HDMI-bestand.

74
00:07:29,050 --> 00:07:42,630
Het volgende wat ik ga doen is slechts een paar stijlen te definiëren en hier dus H-1 laten we zeggen dat de kleur is rood en ligt kleur is groen.

75
00:07:43,240 --> 00:07:46,870
En terwijl we hier laten we veranderen het voor ook.

76
00:07:46,870 --> 00:07:49,330
Kleur paars.

77
00:07:49,870 --> 00:07:50,830
Grote.

78
00:07:50,980 --> 00:07:58,180
Dus hebben we CSSA hier gedefinieerd natuurlijk en ik ga naar buiten reactie dit voor nu.

79
00:07:58,180 --> 00:08:00,750
Natuurlijk al zijn ze nu niet aangesloten.

80
00:08:01,120 --> 00:08:04,030
Dus hebben we een bestand, maar het is niet aangesloten.

81
00:08:04,180 --> 00:08:06,550
Dus om dat te doen moeten we de link tag.

82
00:08:06,880 --> 00:08:22,110
Dus ik zou graag willen enkel type verbinding en vervolgens het tabblad geraakt en je kunt zien dat er deze belangrijke eigenschap die sublieme tekst wil dat we in te vullen die A-Trak wordt genoemd en het werkt net als de trog op een anker tag en dat zou geef het een aankomst.

83
00:08:22,140 --> 00:08:24,900
Wij geven het een plek om het bestand te vinden.

84
00:08:24,940 --> 00:08:35,140
Dus in dit geval dit bestand is gewoon de naam apt ons, dus we gewoon schrijven ontvoert ja ons te redden en te vernieuwen.

85
00:08:35,140 --> 00:08:42,540
Nu kun je zien dat we hebben gelezen H-1 een paarse pagina 4 en groene bondgenoten dus laten we alles wat we gaan doen.

86
00:08:42,540 --> 00:08:43,920
Voor zover styling voor nu.

87
00:08:44,110 --> 00:08:57,140
Dus om hier samen te vatten het eerste ding dat we besproken wordt met behulp van de stijl attribuut om stijl toe te voegen in de lijn die eruit ziet als deze stijl is gelijk aan en geef het dan een onroerend goed en dit is een slecht idee om twee redenen.

88
00:08:57,160 --> 00:09:01,420
De eerste daarvan is dat we niet willen rommel of H Tim L met een bos van stijlen.

89
00:09:01,480 --> 00:09:02,890
We willen dat ze gescheiden zijn.

90
00:09:03,160 --> 00:09:06,860
En de tweede reden is dat het is een pijn als we willen om dingen te veranderen.

91
00:09:07,150 --> 00:09:11,500
Het is een stuk van duplicatie als we willen alle 3H een thread maken.

92
00:09:11,530 --> 00:09:14,850
We moeten die code te kopiëren naar drie verschillende plaatsen.

93
00:09:15,340 --> 00:09:23,110
Het volgende ding dat we geleerd over werd met behulp van de stijl tag en de stijl tag laat ons schrijven C S ons binnenkant van onze h Timo.

94
00:09:23,410 --> 00:09:24,940
En het werkt goed.

95
00:09:24,940 --> 00:09:30,010
Het maakt laat ons gebruik maken van de CSSA syntax waar we elkaar allemaal één tegelijk kunt selecteren.

96
00:09:30,010 --> 00:09:34,710
Het probleem is alleen dat we niet willen zetten R C S hem direct woedend.

97
00:09:35,230 --> 00:09:42,880
Maar u zult dit af en toe als je gewoon iets wat je snel wilt sommige stijlen je niet wilt naar een nieuw bestand en vervolgens aangesloten te maken toe te voegen bent debuggen.

98
00:09:42,920 --> 00:09:44,480
Je bent gewoon gaan om het daarna te verwijderen.

99
00:09:44,590 --> 00:09:46,100
Dus dat is echt de tijd waarin ik het gebruiken.

100
00:09:46,100 --> 00:09:48,530
Het is maar voor een snelle demonstratie doeleinden.

101
00:09:48,730 --> 00:09:53,670
Maar wat we eigenlijk willen gebruiken is de link tag op de link tag.

102
00:09:53,860 --> 00:09:55,810
Het is gewoon een verwijzing naar een ander bestand.

103
00:09:55,960 --> 00:10:05,800
Dus moeten we een bestand gevuld met stijlen moet eindigen met Dotsie beoordelen opslaan en sluit deze vervolgens met de H ref attribuut en dat is alles wat we moeten doen.

104
00:10:05,800 --> 00:10:12,550
Een ding dat ik vergat te vermelden is dat je zeker wilt verwijzen labels en stijlen in je hoofd te zetten.