1 00:00:00,270 --> 00:00:06,670 Was? Moin zu einfach komplex. 2 00:00:06,670 --> 00:00:13,950 Folge 55 mit Burkhard und Gerrit und Burkhardt Moin Gerrit So. 3 00:00:14,000 --> 00:00:16,000 Genau, Leute, ich habe es vor 2 Wochen schon gesagt, wir sind 4 00:00:16,000 --> 00:00:21,120 auf der Hannover Messe vom 22 bis 26 April, freitickets gibt 5 00:00:21,120 --> 00:00:23,520 es wieder in den Shownotes einfach auf den Link klicken 6 00:00:23,520 --> 00:00:26,960 könnt euch ein Ticket auf die heißen Wer einlösen und vorbei 7 00:00:26,960 --> 00:00:28,960 kommen Kaffeetrinken freuen wir uns drauf. 8 00:00:28,960 --> 00:00:34,240 So jetzt soll es losgehen mit CSS heute Cascading Stylesheets 9 00:00:34,760 --> 00:00:40,080 die mir bekannt sind aus HTML und CSS das kommt immer so im 10 00:00:40,080 --> 00:00:43,160 Doppelpack daher, also zumindest wenn man mal irgendwie. 11 00:00:44,080 --> 00:00:46,480 Versucht hat, eine Website selber zu erstellen oder sowas 12 00:00:47,240 --> 00:00:50,800 und da sagte Burkhard aber du sagtest Burkhard CSS müssen wir 13 00:00:50,800 --> 00:00:53,960 alleine behandeln, wieso denn eigentlich ist das kommt das 14 00:00:53,960 --> 00:00:56,680 auch mal allein daher oder ne? Ne, das kommt da eigentlich nie 15 00:00:56,680 --> 00:00:58,840 allein da. Ja, das ist ja die, ja, das ist 16 00:00:58,840 --> 00:01:03,200 die Anmal, die Anmalanleitung für das html, deswegen sagt man 17 00:01:03,200 --> 00:01:07,000 immer HTML und CSS, also ohne HTML bringt sie nichts, da 18 00:01:07,000 --> 00:01:08,680 kannst du hinschreiben, hat aber keinen Wert. 19 00:01:09,160 --> 00:01:11,440 Aber du sagst, CSS ist so wichtig und da gibt es so viel 20 00:01:11,440 --> 00:01:12,680 zu wissen. Das war mal eine ganze Folge 21 00:01:12,680 --> 00:01:14,680 machen. Ja, auf jeden Fall. 22 00:01:15,200 --> 00:01:17,160 Ich mache auch schon ein bisschen CSS, ich glaube, ich 23 00:01:17,160 --> 00:01:19,440 habe immer noch nicht alles benutzt, was das Ding kann, ja 24 00:01:19,680 --> 00:01:21,440 ziemlicher Wahnsinn. Es ist halt wie. 25 00:01:21,950 --> 00:01:24,630 Ja, du kannst das von den Frauen ne, also es ist wieder 26 00:01:24,630 --> 00:01:28,510 klamottenschrank. Ja von den Frauen, also der 27 00:01:28,510 --> 00:01:30,950 Körper selber ist mal das HTML der nackte Körper. 28 00:01:30,950 --> 00:01:36,190 Ja hat ne Hand an Kopf n Fuß n Bein n Bauch n Po, das sind so 29 00:01:36,190 --> 00:01:39,910 die Tags sage ich mal das ht m Ls also wir haben den heading 1 30 00:01:39,910 --> 00:01:43,870 Setting 2 wir haben p tech für Paragraph also für Text also das 31 00:01:43,870 --> 00:01:48,150 HTML hat keinen Anspruch darauf wie es angezogen ist, sondern es 32 00:01:48,150 --> 00:01:51,830 ist Content Inhalt, also der Körper an sich. 33 00:01:52,310 --> 00:01:53,830 Könnte. Sein oder auch ein Mann sein 34 00:01:53,830 --> 00:01:56,510 kann ne Frau sein, ja, na ja, die Männer haben nicht so viel 35 00:01:56,510 --> 00:01:58,510 im Kleiderschrank, deswegen hab ich TSS jetzt mal mit der mit 36 00:01:58,510 --> 00:02:01,030 dem Frauenkleiderschrank. Ich glaube, da gibt es solche 37 00:02:01,030 --> 00:02:02,870 und solche. Ja gut, im Schnitt würd ich 38 00:02:02,870 --> 00:02:06,270 sagen, also jedenfalls bei mir und meiner Frau ist der 39 00:02:06,310 --> 00:02:08,229 deutliche Unterschied und deutlicher Unterschied. 40 00:02:09,960 --> 00:02:12,360 In den Quadratmetern. Aber ich kenn, wie auch immer, 41 00:02:12,360 --> 00:02:13,840 es ist ein bisschen ein Beispiel, aber es ist gar nicht 42 00:02:13,840 --> 00:02:17,200 so schlecht, das Beispiel, denn genau, selbst bei gleichem 43 00:02:17,200 --> 00:02:20,520 Content kannst du, je nachdem was du für ein TSS dem Content 44 00:02:20,520 --> 00:02:23,800 anziehst, die Figur, die danach rauskommt, den Mann oder die 45 00:02:23,800 --> 00:02:27,240 Frau sehr, sehr unterschiedlich aussehen lassen, ja so, dass man 46 00:02:27,240 --> 00:02:29,360 fast gar nicht mehr erkennt, dass das mal die gleiche, dass 47 00:02:29,360 --> 00:02:31,200 das eigentlich genau der gleiche Inhalt ist. 48 00:02:32,160 --> 00:02:35,280 Ziemlich krass genau und deswegen HTML und CSS zusammen 49 00:02:35,280 --> 00:02:40,000 und CSS ist halt extrem mächtig, so mächtig wie alles Gedöns. 50 00:02:40,000 --> 00:02:42,120 Also du hast ja Hosen, t Shirts, Röcke. 51 00:02:43,320 --> 00:02:46,320 Armbänder und so weiter und du kannst sogar das nicht nur 52 00:02:46,320 --> 00:02:48,480 statisch beschreiben. Im CSS gibt also auch mit den 53 00:02:48,480 --> 00:02:50,520 neuesten Versionen die Möglichkeit zu sagen, wie sich 54 00:02:50,520 --> 00:02:52,760 auch irgendwas bewegt, dreht, skaliert. 55 00:02:53,470 --> 00:02:55,790 Von vorne nach hinten rutscht also vielleicht da der Vergleich 56 00:02:55,790 --> 00:02:59,160 irgendwie was weiß ich. Dann Klamotten. 57 00:02:59,160 --> 00:03:01,720 Also würde sich jetzt drehen und bewegen, keine Ahnung, 58 00:03:02,120 --> 00:03:05,240 propellerhut Propellerhut genau ja gar nicht schlecht, ja. 59 00:03:05,990 --> 00:03:07,990 Ja oder irgendwie so ne Art Smartwatch da irgendsowas wo 60 00:03:07,990 --> 00:03:11,150 irgendwie welche Farben leuchten oder was weiß ich ja genau ja 61 00:03:11,150 --> 00:03:13,230 nee das ist so Gerrit hast richtig verstanden, ja und weil 62 00:03:13,230 --> 00:03:15,870 das so tief ist und so viel gedünst da drinne steckt hab ich 63 00:03:15,870 --> 00:03:19,110 gedacht wir leuchten da mal mit der sogenannten 64 00:03:19,110 --> 00:03:21,990 Techniktaschenlampe einmal kurz drauf, dass man so ungefähre 65 00:03:21,990 --> 00:03:23,870 Ahnung hat, was ist das eigentlich mit? 66 00:03:23,950 --> 00:03:25,550 Dem CSS. Cool. 67 00:03:25,550 --> 00:03:28,070 Das heißt, wir gucken uns n bisschen an, was damit geht und 68 00:03:28,590 --> 00:03:31,550 vielleicht zum Start aber einmal ein bisschen zur Historie. 69 00:03:31,990 --> 00:03:34,710 Ich hab kurz mal geschaut und CSS ist ja im Grunde so alt wie 70 00:03:34,710 --> 00:03:37,030 das Internet, könnte man fast sagen. 71 00:03:37,920 --> 00:03:39,760 Ja, aber das Internet ist ja auch so n bisschen bekannt 72 00:03:39,760 --> 00:03:43,480 geworden durch die ganzen HTML Seiten ne und man also wenn man 73 00:03:43,480 --> 00:03:48,990 jetzt HTML ohne CSS anguckt. Ja, dann sieht das halt aus wie 74 00:03:48,990 --> 00:03:50,830 halt so ne Webseite in den ich weiß gar nicht. 75 00:03:50,830 --> 00:03:52,710 Seit wann gibt es das Internet, aber wie die ersten Webseiten 76 00:03:52,710 --> 00:03:55,110 halt aussahen, ziemlich grauselig ja, manchmal sieht es 77 00:03:55,110 --> 00:03:58,630 wenn das CSS nicht lädt wenn man mal so ne zerschossene Seite 78 00:03:58,630 --> 00:04:01,390 sieht, dann sieht man so boxen die so richtig lieblos aussehen 79 00:04:01,390 --> 00:04:03,830 und der ganze Text ist irgendwie oben links gebündelt irgendwie 80 00:04:03,830 --> 00:04:07,230 sieht richtig katastrophal aus, das ist der Effekt wenn CSS 81 00:04:07,230 --> 00:04:10,070 nicht geladen ist. Wenn es nicht an ist, dann sieht 82 00:04:10,070 --> 00:04:13,510 man quasi das nackte html. Weißt du, wer es erfunden hat, 83 00:04:13,510 --> 00:04:15,550 oder? Nein, ich hab tatsächlich, ich 84 00:04:15,550 --> 00:04:17,269 hab den Wikipedia Eintrag heute nicht studiert. 85 00:04:17,269 --> 00:04:19,230 Ich wollte mich ein bisschen auf den Inder, aber gut, wenn du es 86 00:04:19,230 --> 00:04:20,589 weißt. Ja, ein Norweger. 87 00:04:21,720 --> 00:04:23,800 Der weiß natürlich nicht, wie man es ausspricht, aber da ich 88 00:04:23,800 --> 00:04:27,600 sag mal der harkon veum li norweg. 89 00:04:28,110 --> 00:04:32,750 Der auch unter anderem mit Tim Berners Lee CERN gearbeitet hat. 90 00:04:32,750 --> 00:04:33,950 Unter. Anderem ja, da ist ja das 91 00:04:33,950 --> 00:04:36,350 Internet auch entstanden. Genau da passt zusammen ja 92 00:04:36,350 --> 00:04:39,310 richtig. Ja, das war 1996. 93 00:04:39,910 --> 00:04:43,560 Ja, da hat er damit angefangen. Dann war das schon. 94 00:04:43,560 --> 00:04:45,600 Ja ist ne Weile her, ja. War ich 16 oder 7? 95 00:04:46,670 --> 00:04:48,790 Gut. Genug von der Geschichtsstunde, 96 00:04:48,790 --> 00:04:50,070 aber da ging es auf jeden Fall los. 97 00:04:50,070 --> 00:04:51,670 Ja, und da hat sich auch gedacht, ja, das sieht doch 98 00:04:51,670 --> 00:04:54,750 alles ein bisschen blöd aus, nur das HTML, ich mach mal CSS genau 99 00:04:54,750 --> 00:04:56,750 und das Konzept ist ne super, ist ne super Idee, halt 100 00:04:56,750 --> 00:05:01,310 irgendwie die Visualisierung die UIUX zu trennen vom Content. 101 00:05:01,310 --> 00:05:05,270 Ja das Macht hat schon immer viel Sinn gemacht, genau da 102 00:05:05,270 --> 00:05:08,990 fangen wir mal an kurz was ist eigentlich CSS und wie kann ich 103 00:05:08,990 --> 00:05:12,400 es benutzen? Also was es ist, haben wir ja 104 00:05:12,400 --> 00:05:14,440 schon beschrieben. Und was es für eine Aufgabe hat. 105 00:05:14,440 --> 00:05:17,200 Wie sieht es aus, wenn man es jetzt technisch anguckt, also 106 00:05:17,200 --> 00:05:21,320 wenn ich so ein html Dokument habe, ein Dokument html Dokument 107 00:05:21,320 --> 00:05:26,040 gleich html file also ich kann mir, ich kann ja ein html File 108 00:05:26,040 --> 00:05:29,840 im Texteditor schreiben, ist ja nur Text, der muss halt muss 109 00:05:29,840 --> 00:05:32,880 halt dem HTML Syntax genügen, das sind ja immer diese, das 110 00:05:32,880 --> 00:05:35,880 hatten wir auch schon mal diese eckigen Klammern Sachen also ich 111 00:05:35,880 --> 00:05:38,360 habe immer eckige Klammer auf dann kommt irgendein html Tag 112 00:05:38,360 --> 00:05:41,600 zum Beispiel h 1 und dann kommt die Klammer zu. 113 00:05:42,680 --> 00:05:45,680 Und dann kommt der entsprechende, der Titeltext. 114 00:05:46,590 --> 00:05:48,030 Inhalt? Ja genau, und dann kommt der 115 00:05:48,030 --> 00:05:49,750 schließende Tag. Ne schließen Attack hat wieder 116 00:05:49,750 --> 00:05:53,070 so n kleiner Zeichen auf Slash und so weiter darum soll es aber 117 00:05:53,070 --> 00:05:56,350 nicht gehen ja was aber wichtig ist, dass HTML an sich quasi 118 00:05:56,350 --> 00:05:58,830 eine eine ja genestete Struktur hat. 119 00:05:58,830 --> 00:06:01,470 Ne, du kannst ja quasi, du kannst halt mehrere Text 120 00:06:01,470 --> 00:06:04,030 aufmachen und ineinander verschachteln und die dann 121 00:06:04,030 --> 00:06:08,550 wieder zu machen, so aber in so einem HTML Dokument wird quasi 122 00:06:08,550 --> 00:06:11,990 dann auf auf 3 verschiedene Möglichkeiten. 123 00:06:13,760 --> 00:06:15,920 Kannst du dir auswählen? Je nachdem kannst du quasi dein 124 00:06:15,920 --> 00:06:19,640 CSS verankern und ausdrücken. Ja und und diese 3 Möglichkeiten 125 00:06:19,640 --> 00:06:25,400 sind ein externes CSS File zu verlinken und das tut man in dem 126 00:06:25,400 --> 00:06:28,400 in dem also wenn man jetzt ein html Dokument hat, das teilt 127 00:06:28,400 --> 00:06:31,760 sich erstmal ganz auf der ganz obersten Ebene in Header und ein 128 00:06:31,760 --> 00:06:33,760 Body ist das vielleicht auch schon mal gesehen. 129 00:06:33,760 --> 00:06:35,440 Habe ich schon mal gesehen. Ja genau, es gibt immer so ein 130 00:06:35,440 --> 00:06:38,360 Header Tag und da stehen so Header Gedöns Sachen drinne. 131 00:06:38,360 --> 00:06:40,280 Du schreibst sie zum Beispiel wie der Viewport ist und wie 132 00:06:40,280 --> 00:06:42,960 vielleicht eine Anwendung heißen soll und so weiter sind also 133 00:06:42,960 --> 00:06:45,040 Sachen die jetzt nicht gleich direkt auf der Seite rendern, 134 00:06:45,040 --> 00:06:47,160 sondern. Mit einem Favicon. 135 00:06:47,750 --> 00:06:49,710 Und was steht da oben in einem Browser, wie das heißt und so 136 00:06:49,710 --> 00:06:52,230 weiter und im Body steht eigentlich der Content auf für 137 00:06:52,230 --> 00:06:53,950 die Seite so ne. Also da kommen dann diese ganzen 138 00:06:53,950 --> 00:06:58,270 h 1 Diff und so weiter aber im Header darum geht es also wenn 139 00:06:58,270 --> 00:07:01,150 es extern verlinkst das kannst du dir so vorstellen tatsächlich 140 00:07:01,150 --> 00:07:04,510 wie ich hab n Kleiderschrank. Mit den nur bei dem Beispiel zu 141 00:07:04,510 --> 00:07:06,670 bleiben, mit den ganzen Klamotten drin, die das CSS 142 00:07:06,670 --> 00:07:10,070 beschreibt. Dann sage ich ihr, liebe liebes 143 00:07:10,070 --> 00:07:13,470 HTML Dokument, da hinten steht mein Kleiderschrank, den nimmst 144 00:07:13,470 --> 00:07:16,510 du bitte ja, und was heißt das jetzt in Text, Sprache, da kommt 145 00:07:16,510 --> 00:07:21,950 ein Link Element rein und in dem Link Element steht der hat 33 146 00:07:21,950 --> 00:07:26,590 Attribute wie man so schön sagt, da steht rel type und href. 147 00:07:27,550 --> 00:07:30,230 Heutzutage sind in einem Link Element nur noch die Attribute 148 00:07:30,230 --> 00:07:32,510 href und rel notwendig anzugeben. 149 00:07:33,470 --> 00:07:35,870 Der Typ des verknüpften Dokuments, der durch Type 150 00:07:35,870 --> 00:07:38,670 ausgedrückt wird, ist standardmäßig auf CSS. 151 00:07:38,870 --> 00:07:41,470 Und Rell, da steht da da quasi so n stylesheet, damit dieses 152 00:07:41,470 --> 00:07:44,510 linkeding weiß, oh ich bin n stylesheet Link ja. 153 00:07:45,310 --> 00:07:48,190 Oder nochmal das href. Da steht dann quasi der Link 154 00:07:48,190 --> 00:07:51,750 drin, also wo das wo das CSS Licht aufrufbar von irgendeiner 155 00:07:51,750 --> 00:07:53,950 Stelle. Ja und dann wird dieses ganze 156 00:07:53,950 --> 00:07:57,390 CSS file eingeladen und angewendet. 157 00:07:57,390 --> 00:08:00,270 Ja das ist die externe Möglichkeit es zu einzubetten. 158 00:08:00,390 --> 00:08:02,870 Und dann gibt es noch ne ne weitere Möglichkeit ist intern 159 00:08:02,870 --> 00:08:07,230 einzubetten, also quasi in die in den Header auszuschreiben. 160 00:08:07,230 --> 00:08:10,670 Dann benutzt du sogenannte Style Tag Style, Tag auf und dann 161 00:08:10,670 --> 00:08:15,670 schreibst du CSS runter quasi live in dem HTML Dokument. 162 00:08:16,110 --> 00:08:18,270 Ja, da das schreibst du. Aber im Header sagst. 163 00:08:18,270 --> 00:08:20,710 Du fragst, schreibst du bei dir, kannst du dich immer wieder 164 00:08:20,710 --> 00:08:23,390 drauf berufen, also egal ob das jetzt extern ist oder mit 165 00:08:23,390 --> 00:08:26,350 drinne, aber du richtig, das ist sowieso so genau, also entweder 166 00:08:26,350 --> 00:08:28,670 verlinkst du es extern oder du schreibst es intern in den 167 00:08:28,670 --> 00:08:30,750 Header rein und und dann benutzt du quasi da. 168 00:08:31,830 --> 00:08:34,789 Genau, du benutzt benutzt es quasi in dem in dem Body und in 169 00:08:34,789 --> 00:08:36,030 den. Also n Beispiel, da steht zum 170 00:08:36,030 --> 00:08:38,750 Beispiel h 1, ist dann grün oder so. 171 00:08:39,070 --> 00:08:41,309 Ja, genau so sieht es aus. Genau, tatsächlich kommst du 172 00:08:41,309 --> 00:08:43,789 ehrlich später gemacht, aber genau du hast immer n Selektor, 173 00:08:43,950 --> 00:08:47,750 zum Beispiel h 1, dann geht ne geschweifte Klammer auf, dann 174 00:08:47,750 --> 00:08:51,510 kommt der sogenannte sogenannte Property, die TSS Property zum 175 00:08:51,510 --> 00:08:55,150 Beispiel Background Color und dann der Wert davon Queen 176 00:08:55,150 --> 00:08:57,950 könntest du machen, tatsächlich ja und dann kannst du sagen 177 00:08:57,990 --> 00:09:00,390 Background Color jetzt bei h 1 ist blöd, da müsstest du color 178 00:09:00,390 --> 00:09:03,710 nehmen, wenn du wenn du den Text anfärben willst ist ja meistens. 179 00:09:04,760 --> 00:09:06,720 Sonst hast du, hast du den Hintergrund grün und der Text 180 00:09:06,720 --> 00:09:09,200 ist irgendwie so ne. Also hast du also Color Green 181 00:09:09,200 --> 00:09:11,960 genau und dann und dann könntest du sagen später in deinem H 1 182 00:09:11,960 --> 00:09:15,600 Element kannst du einfach das hinschreiben und alle h 1 sind 183 00:09:15,880 --> 00:09:18,880 dann halt grün, so funktioniert es tatsächlich. 184 00:09:18,880 --> 00:09:21,520 Ja, also ist der interne Weg es aufzuschreiben und dann gibt es 185 00:09:21,520 --> 00:09:23,800 noch den sogenannten Inline weg, der Dritte. 186 00:09:25,560 --> 00:09:27,600 Da schreibst du es dann quasi nicht mehr in den Header, 187 00:09:27,600 --> 00:09:30,000 sondern direkt an das Element, was du stylen möchtest. 188 00:09:30,000 --> 00:09:33,600 Also wenn wir jetzt bei dem h 1 bleiben, sagst du halt h 1 auf 189 00:09:33,680 --> 00:09:34,870 und. Und dann gibt es n spezielles 190 00:09:34,870 --> 00:09:37,590 Attribut, was in den, was in dieser Tager mit rein muss, das 191 00:09:37,590 --> 00:09:41,150 heißt Style, dann sagst du, Style ist gleich und dann 192 00:09:41,150 --> 00:09:43,870 schreibst du direkt inline, deswegen heißt es so inline das 193 00:09:43,870 --> 00:09:47,470 CSS in ne, also in diesem Fall Style ist gleich 194 00:09:47,710 --> 00:09:51,830 Anführungszeichen oben geschweifte Klammer auf Color 195 00:09:51,830 --> 00:09:56,950 doppelpunkt, Green Semikolon, geschweifte Klammer zu rums ja 196 00:09:56,950 --> 00:10:00,750 und dann ist aber auch nur dieses h 1 wo es drin steht grün 197 00:10:00,750 --> 00:10:02,270 und alle anderen denen ist das Wurst. 198 00:10:02,510 --> 00:10:04,390 Da habe ich jetzt direkt 2 anschlussfragen. 199 00:10:04,470 --> 00:10:07,230 Schieß los. Was ist denn die Best practice? 200 00:10:07,230 --> 00:10:11,080 Also mache ich das. Mit einem externen verlinkten 201 00:10:11,080 --> 00:10:14,520 Stylesheet oder file oder mache ich das alles im Header im 202 00:10:14,880 --> 00:10:18,040 Dokument selber im html Dokument oder sogar inline? 203 00:10:18,040 --> 00:10:22,440 Und welches ist dann angenommen? Ich mixe ja was ist dann am Ende 204 00:10:22,440 --> 00:10:25,880 das was die Oberhand behält und angewendet wird tatsächlich? 205 00:10:26,240 --> 00:10:28,480 Sehr gute Frage. Die Antwort steckt schon im 206 00:10:28,480 --> 00:10:32,040 Namen. Cascading Stylesheets bezieht 207 00:10:32,040 --> 00:10:34,240 sich genau auf die Frage und die Antwort auf das Problem. 208 00:10:35,390 --> 00:10:38,030 Es hat es gibt eine Prioritätenabfolge. 209 00:10:38,030 --> 00:10:41,350 Wenn du alles 3 benutzt in in welcher Reihenfolge was los ist. 210 00:10:43,040 --> 00:10:44,440 Aber das ist jetzt schon der zweite Teil deiner Frage. 211 00:10:44,440 --> 00:10:45,960 Ich hab aufgepasst. Du hast zuerst gefragt, was ist 212 00:10:45,960 --> 00:10:48,280 die Best Practice? Die Best Practice ist? 213 00:10:48,400 --> 00:10:52,830 Ist alles 3. Es hat alles 3 seine relevanten 214 00:10:53,190 --> 00:10:56,550 Zwecke. Manchmal willst du dynamisch 215 00:10:56,550 --> 00:10:59,310 oder ganz kleinteilig eine bestimmte Sache ändern. 216 00:10:59,310 --> 00:11:02,510 Du willst aus aus einem langen Paragraphen ein Wort in rot 217 00:11:02,510 --> 00:11:04,470 schreiben und sonst nie irgendwo. 218 00:11:04,910 --> 00:11:08,430 Dann machst einen Inline Style ja direkt in dem an der Stelle, 219 00:11:08,430 --> 00:11:11,560 wo du es brauchst. Das Interne wird ganz oft 220 00:11:11,560 --> 00:11:13,960 genutzt, wenn du so Bibliotheken hast, wo du so ganze Klassen 221 00:11:14,040 --> 00:11:18,120 definierst oder Irgendsowas hat auch sein Relevanz, wo du ja so 222 00:11:18,120 --> 00:11:21,590 so mittelgroße. Abschnitte deiner Webseite 223 00:11:21,950 --> 00:11:25,350 einheitlich stylen möchtest und mit dem Externen, das ist ja so 224 00:11:25,350 --> 00:11:28,310 der Kleiderschrank, da kannst du, da kannst du so das ganz das 225 00:11:28,310 --> 00:11:32,070 die ganz großen Zusammenhänge machen wie wie rund sind meine 226 00:11:32,070 --> 00:11:35,230 meine Borders im Prinzip ne so diese diese grundsätzlichen 227 00:11:35,230 --> 00:11:37,510 Stylings du kannst du kannst ja sehr grundsätzlich sein, du 228 00:11:37,510 --> 00:11:39,670 kannst den ganzen Buddy Styles kann man später auch noch zu du 229 00:11:39,670 --> 00:11:42,830 kannst halt sagen alle Elemente die irgendwie eine Border haben 230 00:11:42,830 --> 00:11:46,030 haben die halt leicht abgerundet ja oder alles hat eine ganz 231 00:11:46,030 --> 00:11:49,670 sanfte Transparenz ja so ein bisschen Glow und so weiter das 232 00:11:49,670 --> 00:11:51,870 könnte man sehr gut über so ein externes Teil steht dann laden 233 00:11:51,870 --> 00:11:53,790 ja und dann kannst du dann kannst du auch verschiedene 234 00:11:53,790 --> 00:11:56,190 Sorten von denen haben, dann kannst du halt sagen okay das 235 00:11:56,190 --> 00:11:58,350 ist halt der eckige Style, dass du ein bisschen runderes Teil 236 00:11:58,350 --> 00:12:01,790 von meinem Kram. Es wird alles 3 auch heute noch. 237 00:12:02,800 --> 00:12:05,920 Benutzt und also ich würde nicht sagen, es gibt da irgendwie best 238 00:12:05,920 --> 00:12:08,680 practice oder sowas. So eine schriftfarbe mal als 239 00:12:08,680 --> 00:12:11,640 Beispiel. Also schwarze Schrift haben als 240 00:12:11,640 --> 00:12:15,200 Standard, die würde ich dann ja, das würde ich jetzt. 241 00:12:15,200 --> 00:12:19,040 Quasi entweder intern oder im Externen unterbringen. 242 00:12:20,670 --> 00:12:23,470 Also das würde ich jetzt, man muss sagen, die die die inline 243 00:12:23,470 --> 00:12:26,670 Styles, also wenn du immer direkt ans Dokument im Dokument, 244 00:12:26,670 --> 00:12:29,950 das also im Element das Styles ist natürlich super praktisch, 245 00:12:30,430 --> 00:12:32,550 aber es ist halt nicht Dry, das hatten wir auch schon mal ne 246 00:12:32,550 --> 00:12:35,870 also dann repetierst du wenn du andauernd wieder das gleiche 247 00:12:35,870 --> 00:12:40,150 machst repetierst du dich ja quasi don't Pete Yourself don't 248 00:12:40,150 --> 00:12:44,710 we be yourself ja genau 3 also und plus es ist, das ist 249 00:12:45,070 --> 00:12:46,990 vielleicht der wichtigste Punkt dabei, das können wir noch 250 00:12:46,990 --> 00:12:48,630 sagen, ist egal. Es forscht sich ja, es geht um 251 00:12:48,630 --> 00:12:53,360 eine html Seite, aber es ist. Die Performanz ist besser, wenn 252 00:12:53,360 --> 00:12:56,680 du es in einem Stylesheet auf globalerer Ebene ausdrückst, 253 00:12:56,920 --> 00:13:01,160 weil der Browser muss ja ständig deinen deinen Inhalt rendern, 254 00:13:01,560 --> 00:13:05,320 andauernd ja in einer hohen Abfolge, im Notfall, wenn sich 255 00:13:05,320 --> 00:13:08,960 das ändert, und dann muss ja einfach mehr Content parsen, 256 00:13:08,960 --> 00:13:12,320 wenn das inline ist. Während also das ist technisch 257 00:13:12,320 --> 00:13:15,160 immer noch so, dass es etwas besser für die Performance der 258 00:13:15,160 --> 00:13:16,600 gesamten des gesamten Webauftritts ist. 259 00:13:16,600 --> 00:13:20,520 Wenn du es externalisierst, also ja, also entweder. 260 00:13:20,670 --> 00:13:22,310 Kern oder Examin? Und wer ist jetzt Vorrang? 261 00:13:22,310 --> 00:13:27,430 Vorrang hat Inline inline, überschreibt alles ja und dann 262 00:13:27,430 --> 00:13:30,110 kommen Internal und Externe gleichzeitig. 263 00:13:30,950 --> 00:13:33,790 Er war nicht ganz gleichzeitig. Da kommt es auf die Reihenfolge 264 00:13:33,790 --> 00:13:36,270 an, indem du es im Header definierst. 265 00:13:36,270 --> 00:13:40,550 Ja, und der Letztere gewinnt ja, also würdest du quasi intern was 266 00:13:40,550 --> 00:13:44,870 hinschreiben. H 1 ist h 1 Color ist immer 267 00:13:44,870 --> 00:13:46,150 schwarz. Ja sag ich mal. 268 00:13:46,270 --> 00:13:49,430 Und dann lädst du dann nach, also da drunter, quasi in der 269 00:13:49,430 --> 00:13:53,710 Reihenfolge des des Codes des HTML Codes, quasi ein externes 270 00:13:53,710 --> 00:13:58,950 Teil she 3 wo es sagt nein h 1 Farbe ist halt immer blau, dann 271 00:13:58,950 --> 00:14:02,070 gewinnt blau, würdest du es andersrum machen und das Externe 272 00:14:02,070 --> 00:14:05,270 zuerst laden mit dem Blau, danach intern definieren, dass h 273 00:14:05,270 --> 00:14:08,550 1 immer schön schwarz ist, ist es schwarz und machst du gar 274 00:14:08,550 --> 00:14:11,790 nichts, hast du gar nichts definiert für irgendwas gibt es 275 00:14:11,790 --> 00:14:14,030 auch noch 1 habe ich mir nicht gesagt, es ist das Browser 276 00:14:14,030 --> 00:14:16,790 default, die sind unterschiedlich je nach Browser 277 00:14:16,990 --> 00:14:19,510 der so ne so ne für so bestimmte Sachen. 278 00:14:19,510 --> 00:14:22,190 Ne, dass du zum Beispiel zum Beispiel ist ein Text, wenn du 279 00:14:22,190 --> 00:14:25,550 nichts dazu sagst ist der immer schwarz, ja und nicht weiß, weil 280 00:14:25,550 --> 00:14:27,710 meistens irgendwie, weil zum Beispiel auch wenn du nichts 281 00:14:27,710 --> 00:14:31,070 dazu sagst halt die Background Color weiß ist ja also hat der 282 00:14:31,070 --> 00:14:33,550 Browser drin stehen, Background Color ist mal weiß und Text ist 283 00:14:33,550 --> 00:14:36,150 mal schwarz, da kannst du wenigstens mal was lesen ja also 284 00:14:36,150 --> 00:14:39,550 wenn das beides weiß wäre ja schon ziemlich essig genau und 285 00:14:39,550 --> 00:14:42,030 diese Defaults greifen halt wenn du gar nichts definiert hast 286 00:14:42,030 --> 00:14:45,110 selber ja die kommen zum aber zum ganz und zu ganz zum Schluss 287 00:14:45,110 --> 00:14:49,110 ja das ist die Kaskade quasi der Prioritäten. 288 00:14:50,000 --> 00:14:52,520 Deiner Style Schieds und das ist auch ganz normal, dass sich dass 289 00:14:52,520 --> 00:14:54,440 sich tatsächlich dieses Teilschieds in bestimmten 290 00:14:54,440 --> 00:14:59,080 Attributen überschreiben, nicht so schlimm, ja, und und immer 291 00:14:59,080 --> 00:15:01,720 wenn du mal was hast, was du, was du gerade nicht so willst, 292 00:15:01,720 --> 00:15:03,840 dann kannst du immer diesen inline Style nehmen und das halt 293 00:15:03,840 --> 00:15:05,720 über Brettern so, das ist schon gut gedacht. 294 00:15:05,760 --> 00:15:07,440 Okay alles klar. Ja, genau so. 295 00:15:07,440 --> 00:15:09,680 Und jetzt gucken wir mal. Wir hatten es schon ein bisschen 296 00:15:09,680 --> 00:15:11,720 angeteasert. Wie sieht dieses CSS tatsächlich 297 00:15:11,720 --> 00:15:13,520 aus, wenn ich es aufschreibe und das ist jetzt eigentlich egal, 298 00:15:13,520 --> 00:15:16,320 ob es jetzt in den Pfeil schreibe oder ob ich es jetzt 299 00:15:16,320 --> 00:15:19,000 quasi in diesen Style, also hinterher hinter diesem Style 300 00:15:19,000 --> 00:15:22,510 Tag hinschreibe. Oder auch, ob ich es quasi 301 00:15:22,510 --> 00:15:24,310 inlines schreibe. Und dann steht da halt Style 302 00:15:24,310 --> 00:15:27,400 gleich, ja. Hat das eigentlich. 303 00:15:27,720 --> 00:15:30,160 Hat das eigentlich die gleiche, den gleichen Aufbau und hat man 304 00:15:30,160 --> 00:15:33,480 immer gleich hin und es ist immer so, dass es ganz am Anfang 305 00:15:33,480 --> 00:15:37,040 sagst du erstmal wer ist mein der sogenannte Selektor auf was 306 00:15:37,040 --> 00:15:40,240 bezieht sich dieses, dieses Element, das ist aber nur 307 00:15:40,240 --> 00:15:42,400 richtig für Internet extern, weil wenn ich es natürlich 308 00:15:42,400 --> 00:15:45,240 direkt schon an Element schreibe ist der Selektor klar, nämlich 309 00:15:45,240 --> 00:15:48,720 dieses Element was ich da gerade angucke und dann kommt der die 310 00:15:48,720 --> 00:15:51,080 kommt, die sogenannte Decklaration die Declaration 311 00:15:51,080 --> 00:15:54,320 gliedert sich auf in ich würde mal sagen Key Value, aber ich 312 00:15:54,320 --> 00:15:57,120 glaube im CSS sprech heißt Property und Value. 313 00:15:58,200 --> 00:15:59,800 Und die Property ist die CSS pro Partie. 314 00:15:59,800 --> 00:16:01,960 Davon gibt es sowas wie Background Color hat man schon 315 00:16:01,960 --> 00:16:06,480 Font family, texteleien, padding margin Color border Borderradio 316 00:16:07,440 --> 00:16:09,560 und die Liste ist wahrscheinlich, ich weiß es 317 00:16:09,560 --> 00:16:14,880 nicht 300 400 Einträge lang an Properties die. 318 00:16:14,990 --> 00:16:17,230 Die halt irgendein Style hervorrufen soll. 319 00:16:17,470 --> 00:16:20,110 Richtig viele von ja und richtig viele muss man eigentlich auch 320 00:16:20,110 --> 00:16:21,710 wissen. Ja und der Value ist halt der 321 00:16:21,710 --> 00:16:23,670 Value, der bezieht sich immer auf die Property, der ist sehr 322 00:16:23,670 --> 00:16:25,110 unterschiedlich. Ja bei Color gibt es zum 323 00:16:25,110 --> 00:16:27,310 Beispiel kannst du ihn schreiben Red Queen Blue, also tatsächlich 324 00:16:27,310 --> 00:16:29,670 ausgeschrieben als Twing, da kannst du aber auch diesen, das 325 00:16:29,670 --> 00:16:32,750 kennen wir, diese diese in diesen Hacks Color nehmen, das 326 00:16:32,750 --> 00:16:35,070 fängt ja mit dem Hash an so und dann hast du halt irgendwie zum 327 00:16:35,070 --> 00:16:38,070 Beispiel Fffffffffff normalerweise sind das weiß dann 328 00:16:38,070 --> 00:16:43,030 das weiß genau, das ist quasi in Hex codiert, die die Farbe, die 329 00:16:43,030 --> 00:16:45,550 RGB Kanäle tatsächlich, das kann man mal kurz sagen, an der 330 00:16:45,550 --> 00:16:47,430 Stelle ist eigentlich ganz lustig, nämlich ganz einfach. 331 00:16:48,360 --> 00:16:55,200 Das ist quasi und RGB ist in 256 aufgeteilt, 256 aber als als 332 00:16:55,680 --> 00:16:58,440 Hexadezimal ausgedrückt. Und im Hexadezimalen ziehen wir 333 00:16:58,440 --> 00:17:01,600 immer bis nicht nur bis 10. Wir haben noch mehr Symbole 334 00:17:01,640 --> 00:17:07,440 erfunden, nämlich ABCDEF nach der Neuen kommt noch ABCDEFA 335 00:17:07,440 --> 00:17:12,040 steht für 10, b für 11, f dann für 16 und wenn der ff hast, 336 00:17:12,040 --> 00:17:16,839 dann hast du quasi 255, das ist quasi der Dezimalwert zu dem ff, 337 00:17:16,839 --> 00:17:20,359 zu dem Hex und wenn du alle 3 Farben anguckst, dann ist es 338 00:17:20,359 --> 00:17:27,030 halt ff FF für. 3 Farbkanäle, also 255, 255, 255, volles 339 00:17:27,030 --> 00:17:31,190 Programm überall und das heißt Halt weiß ja und 000. 340 00:17:31,190 --> 00:17:34,270 Also wenn du 6 Nullen ein Donnerst, dann bist du schwarz 341 00:17:34,270 --> 00:17:37,550 ja so und wenn du pur rot bist, dann hast du halt am Anfang da 342 00:17:37,550 --> 00:17:42,030 stehen FF 0000 hast du halt rot. Ja das hat jetzt mit CSS nichts 343 00:17:42,030 --> 00:17:43,710 zu tun, sondern wie man die Farben kodiert aber wollte ich 344 00:17:43,710 --> 00:17:45,870 nur mal kurz sagen, ist nämlich auch keine Raketenwissenschaft 345 00:17:45,870 --> 00:17:48,150 so ja. So, und dann kannst du auch 346 00:17:48,150 --> 00:17:51,830 immer sagen, noch RGB Klammer auf Klammer zu und dann gibt es 347 00:17:51,830 --> 00:17:55,310 halt die RGB Dinger ein und so weiter genau und aber wenn du 348 00:17:55,310 --> 00:17:59,110 zum Beispiel sagst Margin, dann gibt es auch mehrere Sachen, da 349 00:17:59,110 --> 00:18:01,430 kannst du sagen Pixel oder in Prozent und so weiter aber das 350 00:18:01,430 --> 00:18:04,350 ist alles dokumentiert, ist halt irgendwie aber Value bezieht 351 00:18:04,350 --> 00:18:06,430 sich halt immer quasi auf die Property die ich gerade habe. 352 00:18:06,550 --> 00:18:10,070 Und diese Properties, du sagst, da gibt es ein paar 100 war es 353 00:18:10,070 --> 00:18:11,750 das? Dann kann ich damit alles in 354 00:18:11,750 --> 00:18:16,110 meiner auf seiner Website durchstylen oder gibt es da noch 355 00:18:16,110 --> 00:18:19,520 Sachen, die ich noch. Andere Dinge, die ich weiß ich 356 00:18:19,520 --> 00:18:23,280 nicht erfinde, erschaffe dich noch ausstylen könnte irgendwie 357 00:18:23,280 --> 00:18:27,400 Animationen ganz besondere schaffe, die dann passieren noch 358 00:18:27,400 --> 00:18:30,760 keiner vorgesehen hat im CSS. Ist eine sehr gute. 359 00:18:30,840 --> 00:18:33,910 Frage. Heißt es so, dass da. 360 00:18:36,070 --> 00:18:39,150 Würde ich sagen, kannst du mit CSS fast alles erschlagen. 361 00:18:39,390 --> 00:18:42,110 Es gibt auch so Leute, die haben so richtigen schwarzen Gürtel 362 00:18:42,110 --> 00:18:46,150 sag ich immer im CSS und die machen die krassesten Sachen es. 363 00:18:46,350 --> 00:18:48,950 Ist aber ein ein Kompetitor zu dem CSS. 364 00:18:48,950 --> 00:18:51,150 Das ist Java Script. Jetzt muss er einmal kurz 365 00:18:51,150 --> 00:18:52,590 verstehen, wie funktioniert das eigentlich. 366 00:18:52,590 --> 00:18:56,630 Also wenn ich jetzt HTML und CSS aufschreibe in so ne Seite, dann 367 00:18:56,630 --> 00:19:00,070 hab ich das ja quasi schon zur Design Zeit Informatiker sagen 368 00:19:00,070 --> 00:19:03,870 wir mal compilet Timer, also zur Entstehungszeit statisch 369 00:19:04,110 --> 00:19:08,190 festgelegt was los ist sieht das Ding aus wenn der Browser das 370 00:19:08,190 --> 00:19:10,830 dann also ich kann ja so ein html Dokument fertig machen, 371 00:19:10,830 --> 00:19:15,110 speichern und den Browser zum Laden schreibst du html dran und 372 00:19:15,110 --> 00:19:17,990 zeigst dem Browser das Latas so ja kannst du das ja angucken, 373 00:19:17,990 --> 00:19:20,990 ist ja easy ja und dann kann da trotzdem was animiert sein und 374 00:19:20,990 --> 00:19:23,270 so weiter weil CSS auch in der Lage ist Animationen 375 00:19:23,270 --> 00:19:25,390 auszudrücken aber ich kann es als letzten Tagesordnungspunkt 376 00:19:25,910 --> 00:19:29,110 heute so und eigentlich kannst du damit fast alles machen. 377 00:19:30,160 --> 00:19:32,800 Jetzt aber doch Sachen, die du vielleicht wo du sagst so okay. 378 00:19:32,800 --> 00:19:35,600 Das hat die 340 Sachen, die ich irgendwie noch machen will, die 379 00:19:35,600 --> 00:19:37,280 hat es erst noch nicht vorgesehen. 380 00:19:37,360 --> 00:19:41,960 Jetzt kannst du mit Java Script ja immer alles manipulieren, 381 00:19:42,040 --> 00:19:45,600 also Java Script ist eine Programmiersprache und die kann 382 00:19:45,680 --> 00:19:48,750 Sachen zu Run Time. Also während das quasi läuft, 383 00:19:48,750 --> 00:19:51,670 während der Browser das Rendert, kann die wilde Sache machen. 384 00:19:51,670 --> 00:19:53,590 Ja, du kannst sagen nach 10 Sekunden, dass die Seite 385 00:19:53,590 --> 00:19:58,190 angezeigt wird, nimm halt manipulier halt den CSS Eintrag 386 00:19:58,190 --> 00:20:01,150 da wo Green steht schreibst du jetzt halt rot hin. 387 00:20:01,950 --> 00:20:04,190 Dann machst im Prinzip passiert nichts anderes als das Java 388 00:20:04,190 --> 00:20:06,950 Script als Programmiersprache dir das umbaut live ja und der 389 00:20:06,950 --> 00:20:10,430 Browser muss das Schlucken, ja. Und das hat man früher noch viel 390 00:20:10,430 --> 00:20:13,710 mehr genutzt. Das Javascript für dynamisches 391 00:20:13,710 --> 00:20:16,350 Stylen und so und für Animationseffekte. 392 00:20:17,110 --> 00:20:20,550 Und und das CSS hat aber nachgerückt, weil im Prinzip ist 393 00:20:20,550 --> 00:20:22,910 es n bisschen hacky, wenn du zu viel javascript machst um zu 394 00:20:22,910 --> 00:20:25,630 stylen, dafür ist es ja eigentlich nicht gedacht ja 395 00:20:25,630 --> 00:20:27,830 sondern javascript ist mehr so für die für die richtige 396 00:20:27,830 --> 00:20:30,590 Businesslogik ja damit willst du eigentlich Daten abholen aus dem 397 00:20:30,590 --> 00:20:32,030 Backend und so weiter und sofort ja. 398 00:20:32,790 --> 00:20:36,110 Das ist, und deswegen hat das CSS immer mehr auch von diesen 399 00:20:36,110 --> 00:20:37,950 Funktionalitäten zu früher mit javascript gemacht, hast 400 00:20:37,950 --> 00:20:40,470 übernommen und im CSS 3 gibt es wirklich viele Möglichkeiten 401 00:20:40,470 --> 00:20:43,150 ohne Javascript das zu machen. Und immer wenn du nicht 402 00:20:43,150 --> 00:20:45,190 javascript nimmst um zu manipulieren ist es auch noch 403 00:20:45,190 --> 00:20:48,990 schneller, weil CSS Halt n Standard, den kennen die Browser 404 00:20:48,990 --> 00:20:51,270 alle, alle browserhersteller müssen sich da richten müssen 405 00:20:51,270 --> 00:20:54,390 das implementieren können heute ist das war auch nicht immer so, 406 00:20:54,390 --> 00:20:57,630 also die zwischen Theorie und Realität gab es da immer auch 407 00:20:57,630 --> 00:20:59,950 schon eine Diskrepanz, es konnte halt nicht immer jeder und 408 00:20:59,950 --> 00:21:02,510 musste auch CSS Hacks einführen für bestimmte Browser und so 409 00:21:02,510 --> 00:21:05,310 weiter gibt es. Mit minus Mozilla und minus 410 00:21:05,310 --> 00:21:07,390 irgendwie Internet Explorer war da mal ganz schlimm. 411 00:21:07,390 --> 00:21:11,630 Ja, ist heute viel besser und wenn es das im CSS gibt, ist es 412 00:21:11,630 --> 00:21:13,950 Best Practice, dass man es dann auch nimmt, weil es meistens 413 00:21:14,590 --> 00:21:16,910 viel schneller performt und. Ja, cool. 414 00:21:17,390 --> 00:21:19,950 Genau, was haben wir gesagt. Also wir haben jetzt gesagt, was 415 00:21:19,950 --> 00:21:23,030 ist CSS, wie kann man es definieren, diese 3 Wege inline 416 00:21:23,030 --> 00:21:27,030 externe und internal. Es hat alles eine Priorität und 417 00:21:27,030 --> 00:21:31,110 eine Reihenfolge, deswegen heißt das Cascading Wir haben uns 418 00:21:31,110 --> 00:21:35,200 angeguckt, was ist ein Selector. Das mit dem Selector habe ich 419 00:21:35,200 --> 00:21:38,360 eben gerade gesagt, nicht genau verstanden, aber genau da sind 420 00:21:38,360 --> 00:21:41,360 wir auch noch nicht fertig. Auf was es sich beziehen soll im 421 00:21:41,360 --> 00:21:44,160 HTML. Der Selector hat auch noch mal 3 422 00:21:44,160 --> 00:21:46,440 Möglichkeiten, wir haben jetzt die haben jetzt den ersten 423 00:21:46,440 --> 00:21:49,120 einfachen Fall genommen, wo ich sage als Elektor zum Beispiel in 424 00:21:49,120 --> 00:21:53,880 so einem Stylesheet, also beim beim beim Inline Style ist das 425 00:21:53,880 --> 00:21:57,320 Selector ja ganz klar das Ding was du gerade wo das da gerade 426 00:21:57,320 --> 00:21:59,640 dransteht. Wenn du jetzt aber einen 427 00:21:59,640 --> 00:22:02,440 Internet interne oder ein externe Style shit hast ist ja 428 00:22:02,440 --> 00:22:04,440 nicht mehr klar und im einfachsten Fall sagst du Halt 429 00:22:04,440 --> 00:22:08,790 ist alle H Einsen sehen halt so aus, alle PS sehen so aus. 430 00:22:08,790 --> 00:22:12,710 Ja du nimmst quasi, dass der Selektor quasi identisch zu dem 431 00:22:12,710 --> 00:22:15,430 HTML Tag den du den du stylen willst. 432 00:22:15,430 --> 00:22:17,550 Der kann ja aber tausendmal auf der Seite vorkommen. 433 00:22:17,550 --> 00:22:20,470 Ja hast ne große Seite, hast ja zig Paragraphen da drin ja da 434 00:22:20,470 --> 00:22:22,870 geht NP auf und wieder zu Norm p auf und noch wieder zu, dann 435 00:22:22,870 --> 00:22:24,830 kommt irgend n Tiff und dann geht wieder NP auf den PC und da 436 00:22:24,830 --> 00:22:28,830 sind die alle gleich aus das reicht nicht um um gut zu 437 00:22:28,830 --> 00:22:32,550 stylen, deswegen gibt es mehr Selektoren du kannst auch dich 438 00:22:32,550 --> 00:22:35,390 auf eine ID beziehen was jetzt eine id. 439 00:22:36,360 --> 00:22:39,320 Das hat alles mit HTML zu tun. Also du kannst quasi im html Tag 440 00:22:39,320 --> 00:22:43,080 sagen, zum Beispiel so ein p Tag im Paragraph tag kannst du sagen 441 00:22:43,080 --> 00:22:45,710 id ist gleich. First Night. 442 00:22:47,070 --> 00:22:50,230 Jetzt gibst du einfach diesen Paragraph, eine ID, die muss 443 00:22:50,230 --> 00:22:52,030 unique sein für dieses ganze Dokument. 444 00:22:52,030 --> 00:22:55,870 Ja, und damit identifizierst du jetzt dieses Element ja und 445 00:22:55,870 --> 00:22:58,390 sitzt auch mal völlig Wurst ob das NP oder n Diff oder 446 00:22:58,390 --> 00:23:01,470 irgendwas ist. Ne das ist auch über die über 447 00:23:01,470 --> 00:23:03,230 die verschiedenen Elemente völlig egal. 448 00:23:03,510 --> 00:23:06,630 Es hat eine ID UNIQUE zu geben auf diesen Dingen ja, also es 449 00:23:06,630 --> 00:23:09,590 könnte eine geben, die dürfen sich halt nicht wiederholen und 450 00:23:09,590 --> 00:23:12,270 dann kannst du einfach im CSS dich auf eine ID beziehen als 451 00:23:12,270 --> 00:23:15,670 der Lektor und dann schreibst du dahin hash unsere Raute die wir 452 00:23:15,670 --> 00:23:17,350 immer benutzen wenn wir irgendwie bei linkedin oder 453 00:23:17,350 --> 00:23:18,910 irgendwas machen. Nee bei Linken ist nicht nur 454 00:23:19,150 --> 00:23:22,630 doch bei Linken ist auch diese tags also beim CSS gab es das 455 00:23:22,630 --> 00:23:25,320 Halt auch schon immer. Und das halt diese Raute. 456 00:23:25,320 --> 00:23:27,360 Und dann sagst du halt id. Also wenn ich jetzt im html 457 00:23:27,360 --> 00:23:32,480 Hinschreibe p und dann sage ich id ist gleich First Name, dann 458 00:23:32,480 --> 00:23:36,680 kann ich im CSS hinschreiben, Raute first Name und dann mache 459 00:23:36,680 --> 00:23:40,200 ich meine geschweiften Klammer auf und Style los mit property 460 00:23:40,200 --> 00:23:45,080 dann sage ich Color Green margin 4 Pixel oder irgend sowas und 461 00:23:45,080 --> 00:23:47,880 dann wird genau das Element was diese id hat gestylt und sonst 462 00:23:47,880 --> 00:23:50,520 nichts das ist die zweite Möglichkeit und die dritte 463 00:23:50,520 --> 00:23:52,560 Möglichkeit sind die Klassen classes. 464 00:23:53,030 --> 00:23:56,790 Du kannst halt auch einem html html Element eine Klasse 465 00:23:56,790 --> 00:24:01,150 zuweisen von der klasse Button. Wow, das ist ja es ist der Apply 466 00:24:01,150 --> 00:24:03,790 Button, bisschen bisschen zu generell also sowas. 467 00:24:03,790 --> 00:24:06,390 Wie die Call to Action section. Oder sowas. 468 00:24:06,390 --> 00:24:09,150 Also was du immer ganz anders auf einer Webseite bestimmte, 469 00:24:09,150 --> 00:24:12,990 unter den Futter oder sowas. Ja genau, also quasi im Prinzip 470 00:24:12,990 --> 00:24:16,670 ist das ist, das ist die Class, also während die ID ein einziges 471 00:24:17,030 --> 00:24:21,110 Single id Style ist, ist das Expliziteste während der Tag 472 00:24:21,110 --> 00:24:24,550 Name alle von der gleichen Tags Orte stylt ist es auch und die 473 00:24:24,550 --> 00:24:27,750 Klasse ist dazwischen alles was diese klasse hat kriegt dann das 474 00:24:27,750 --> 00:24:30,590 Teil und die Klasse drückst du auch wieder aus im html Element, 475 00:24:30,590 --> 00:24:34,470 da sagst du halt nicht nicht id man sagt Halt Class ist gleich 476 00:24:34,470 --> 00:24:38,600 und gibst dem Klassen Namen. Ist auch Wurst welches Element 477 00:24:38,600 --> 00:24:40,680 das ist? Ja, du kannst die gleiche Klasse 478 00:24:40,680 --> 00:24:42,640 an verschiedene html Elemente machen. 479 00:24:42,760 --> 00:24:45,000 So, und das ist eigentlich und wenn man es dann in der also 480 00:24:45,000 --> 00:24:47,240 jetzt klingt, jetzt alles sehr abstrakt, wenn man es aber live 481 00:24:47,240 --> 00:24:50,400 nutzt, hast du mit diesen 3 Möglichkeiten alle scharfen 482 00:24:50,400 --> 00:24:54,680 Waffen in der Hand um sinnvoll so ein Dokument zu alle diese 483 00:24:54,680 --> 00:24:56,990 Cases gibt es. So n. 484 00:24:56,990 --> 00:25:00,190 Sind Dinge sinnvoll zu teilen? So ja und die Klassen immer um 485 00:25:00,190 --> 00:25:02,070 das noch zu sagen, die Du schreibst auf die Klasse einfach 486 00:25:02,070 --> 00:25:05,710 hin, ne Klasse ist gleich call to action Button oder 487 00:25:05,710 --> 00:25:09,630 Irgendsowas und im TSS sagst du im Selector sagst dann Punkt ist 488 00:25:09,630 --> 00:25:13,870 wichtig der Klassenindikator ist Punkt Call To Action Button und 489 00:25:13,870 --> 00:25:17,950 dann wieder geschweifte Klassen dings auf also um das motivieren 490 00:25:17,950 --> 00:25:22,070 wir haben Selektoren die sagen wen soll ich denn hier stylen, 491 00:25:22,070 --> 00:25:24,830 welchen Content und das auszudrücken gibt es 3 492 00:25:24,830 --> 00:25:28,120 Möglichkeiten. Einfach über den Tag Name vom 493 00:25:28,120 --> 00:25:31,800 html Tag über die explizite ID die zugewiesen sein muss oder 494 00:25:31,800 --> 00:25:35,480 über die Klasse, die du selbst definiert hast im HTML. 495 00:25:36,990 --> 00:25:40,190 Ich weiß nicht, ob du noch drauf kommst auf das Thema, aber ich 496 00:25:40,190 --> 00:25:45,190 denke gerade so darüber nach, wie Styling von Webseiten früher 497 00:25:45,190 --> 00:25:47,910 war und wie es heute ist. Insbesondere wie es früher war, 498 00:25:47,910 --> 00:25:52,910 weil heute kann ich dir sagen, benutze ich, benutzen wir ja no 499 00:25:52,910 --> 00:25:57,150 Coat website Baukasten und da gibt es vorgefertigte Elemente 500 00:25:58,670 --> 00:26:03,710 und hinten wird schon noch letzten Endes das Html erzeugt, 501 00:26:03,870 --> 00:26:06,950 also die HTML Files und die CSS Files, die gibt es. 502 00:26:08,040 --> 00:26:09,720 Wahrscheinlich auch Inline CSS. Wenn ich dann ganz bestimmte 503 00:26:09,720 --> 00:26:12,400 Sachen doch lieber noch rot machen möchte oder fett oder was 504 00:26:13,040 --> 00:26:14,120 auch immer. Aber wenn ich mir das jetzt 505 00:26:14,120 --> 00:26:17,000 vorstelle, dass ich das jetzt früher gemacht habe, ja 506 00:26:17,160 --> 00:26:21,000 Webseiten zu stylen, das ist ja gar nicht so einfach gewesen, 507 00:26:21,000 --> 00:26:24,360 oder konnte man das wirklich zur Compilet Time zu Bild Time auch 508 00:26:24,360 --> 00:26:27,200 immer direkt sehen, ja. Da kannst du ja beim Browser. 509 00:26:27,200 --> 00:26:30,320 Also es gibt ja heute mit den ganzen Visual Studios und ids 510 00:26:30,320 --> 00:26:33,320 auch mit den, Wir hatten es ja gesprochen, auch die Developer 511 00:26:33,320 --> 00:26:34,800 Tools, vor allen Dingen gerade da du kannst. 512 00:26:34,800 --> 00:26:37,080 Du kannst mit der blanken html Seite anfangen und. 513 00:26:37,550 --> 00:26:41,430 Und du machst das CSS quasi im Developer Tool und der zeigt dir 514 00:26:41,430 --> 00:26:42,870 live was passiert. So, und das war früher auch 515 00:26:42,870 --> 00:26:45,070 schon so, also das war immer alles so relativ live. 516 00:26:45,310 --> 00:26:47,990 Ja, heute wird es wird immer alles angenehmer, je weiter wir 517 00:26:47,990 --> 00:26:50,590 in der Zeit fortschreiten. Aber das war schon früher auch 518 00:26:50,590 --> 00:26:52,830 ziemlich usabil. Ja und und das Laden von der 519 00:26:52,830 --> 00:26:55,470 Website, das ist ja, das muss ja nichts kompilieren, das ist ja 520 00:26:55,470 --> 00:26:58,310 alles direkt interpretiert, ja, also das ist schon nicht das 521 00:26:58,310 --> 00:27:00,670 Problem, aber ich verrate dir ein sahniges Geheimnis, selbst 522 00:27:00,670 --> 00:27:03,470 in unserem Low Court und so weiter und wir haben ja auch so 523 00:27:03,470 --> 00:27:06,310 ein, wir haben so einen Knopf, wo du die ganze Ci usw 524 00:27:06,630 --> 00:27:10,200 einstellen kannst. Aber was wirklich passiert ist 525 00:27:10,200 --> 00:27:12,080 und wir benutzen dann library, das ist auch kein Geheimnis. 526 00:27:12,080 --> 00:27:15,120 Die heißen Dev Xtreme und du hast, da ziehe ich Widgets drin 527 00:27:15,120 --> 00:27:18,640 und so weiter sehen alle toll aus, es wird aber ein riesiges 528 00:27:18,640 --> 00:27:23,440 externes externes Stylesheet erzeugt, riesengroßer das alles 529 00:27:23,440 --> 00:27:26,000 definiert wie jeder einzelne Button aussieht und so weiter 530 00:27:26,000 --> 00:27:28,200 für verschiedene Widgets und so weiter gigantisches File, die 531 00:27:28,200 --> 00:27:31,440 sind auch manchmal richtig groß, also da kannst du richtig lange 532 00:27:31,440 --> 00:27:32,880 scrollen bis da wieder zum Boden kommst. 533 00:27:32,880 --> 00:27:36,440 Ja und dieses Stylesheet wird dann live eingeladen und stylt 534 00:27:36,440 --> 00:27:38,280 hier und so kannst du zum Beispiel so eine ganze Corporate 535 00:27:38,280 --> 00:27:40,440 Identity machen, wenn du sagst immer eine Akzentfarbe ist das 536 00:27:40,440 --> 00:27:43,200 und so weiter das ist in diesem Style sehr sehr elegant 537 00:27:43,200 --> 00:27:46,550 ausgedrückt. Formt quasi den gleichen Content 538 00:27:46,550 --> 00:27:50,710 um, aber macht dann quasi alle Hintergründe aller Buttons ein 539 00:27:50,710 --> 00:27:53,070 bisschen orange in der CI Farbe und so weiter und sofort. 540 00:27:53,070 --> 00:27:54,630 Ja, das passiert tatsächlich heute immer noch. 541 00:27:54,630 --> 00:28:00,070 Also das CSS ist nichts was. Was heute anders ist, dass du 542 00:28:00,070 --> 00:28:02,070 quasi das nicht mehr so per Hand editieren musst. 543 00:28:02,070 --> 00:28:04,230 Es gibt auch zig Bibliotheken. Heute sind richtig gut. 544 00:28:04,230 --> 00:28:06,590 Also ich sag mal so einen muss ich nicht merken. 545 00:28:06,590 --> 00:28:10,510 Ja es gibt so CSS Bibliotheken die die dir so auf einer höheren 546 00:28:10,510 --> 00:28:13,190 Flugebene auf einer höheren Abstraktionsebene, wo du einfach 547 00:28:13,190 --> 00:28:15,710 nur noch so ein bisschen sagst, ich will es ein bisschen runder 548 00:28:15,710 --> 00:28:18,270 haben, ich will es mit der Akzentfarbe haben und so weiter 549 00:28:18,430 --> 00:28:21,910 dir schon sehr gute Templates machen und du sagst so 550 00:28:21,910 --> 00:28:24,670 Standardabstände und so weiter für so ein. 551 00:28:24,670 --> 00:28:27,030 Es gibt ja immer so ein bisschen so ein Look and feel sage ich 552 00:28:27,030 --> 00:28:30,190 mal so ein einheitliches und dafür gibt es Bibliotheken die 553 00:28:30,230 --> 00:28:33,350 dir da quasi die CSS Arbeit sehr stark erleichtern und schon 554 00:28:33,350 --> 00:28:37,190 quasi das CSS für Dich erzeugen du kannst immer noch das CSS per 555 00:28:37,190 --> 00:28:40,750 Hand manipulieren, ne, aber die haben ja quasi schon sehr gute 556 00:28:40,750 --> 00:28:44,430 Defaults und eine dieser sehr bekannten Library Stars talewind 557 00:28:44,630 --> 00:28:48,070 so das ist ne Libri die die kann quasi mit der kannst du quasi 558 00:28:48,070 --> 00:28:51,310 CSS erzeugen indem du es auf einem höheren Level ausdrückst. 559 00:28:52,110 --> 00:28:53,870 Ja, dann weiter im Programm. Wird weiter im Programm. 560 00:28:53,870 --> 00:28:57,110 Genau jetzt also wir haben die wichtigsten Sachen, haben wir 561 00:28:57,110 --> 00:28:59,510 schon drinne, ich will vielleicht noch mal so ein paar 562 00:28:59,510 --> 00:29:03,390 wichtige TSS Properties durchgehen, die man machen kann, 563 00:29:03,390 --> 00:29:06,470 also zum Beispiel die also ganz wichtige Sachen sind ja immer 564 00:29:06,470 --> 00:29:08,950 Farbe und Frontart und so weiter. 565 00:29:09,030 --> 00:29:14,550 Ja und wo ich immer irgendwie so mit Struggler ist sowas wie ab. 566 00:29:15,150 --> 00:29:17,630 Ne Abstände genau gibt's dann Padding und Margin. 567 00:29:17,630 --> 00:29:21,430 Ja genau, vielleicht noch mal ganz kurz klarstellen was da was 568 00:29:21,830 --> 00:29:22,910 ist. Ja genau, aber nicht brauchen 569 00:29:22,910 --> 00:29:25,310 wir nicht allzu lange drauf rum, nee aber aber das vielleicht 570 00:29:25,310 --> 00:29:28,350 dann noch mal wichtig zu sagen, es gibt nämlich weil das alles 571 00:29:28,350 --> 00:29:30,390 mit HTML zu tun hat, müssen wir jetzt einmal kurz zu HTML 572 00:29:30,390 --> 00:29:32,630 Rübergucken. Und auch 2 Sachen verstehen im 573 00:29:32,630 --> 00:29:35,190 HTML. Also es gibt es gibt ja HTML 574 00:29:35,190 --> 00:29:39,390 Elemente, die sind also sowas wie p oder IMG, also für Image 575 00:29:39,390 --> 00:29:43,710 ne oder h 1 h 2 für für Headings das sind ja alles so Elemente wo 576 00:29:43,710 --> 00:29:45,750 ganz klar ist was ist. Also das sind ja quasi Elemente 577 00:29:45,750 --> 00:29:48,510 die den Inhalt direkt irgendwie betreffen und es gibt aber 578 00:29:48,510 --> 00:29:51,470 eigentlich nur 2 Elemente die so eine Art Containerelemente sind, 579 00:29:51,470 --> 00:29:54,590 die muss man mal kennen das div und Bann. 580 00:29:54,870 --> 00:29:57,110 Ich würde sagen, dass das noch noch bekannter ist. 581 00:29:57,110 --> 00:29:59,550 Halt das div. Und jetzt müssen wir einmal kurz 582 00:29:59,550 --> 00:30:01,950 verstehen, was der Unterschied zwischen also wenn ich sage 583 00:30:01,950 --> 00:30:04,270 Containerelement, dann heißt das eigentlich nur ich kann halt 584 00:30:04,270 --> 00:30:07,160 irgendwo diffyn schreiben. Und da drin. 585 00:30:08,750 --> 00:30:13,470 Schreib ich zum Beispiel PPPH 1 und so weiter also ich ich neste 586 00:30:13,470 --> 00:30:16,790 quasi n ganzen Satz von Parametern rein ne und warum 587 00:30:16,790 --> 00:30:20,470 mach ich das weil ich dann quasi nen ganzen Satz von Anweisungen. 588 00:30:21,390 --> 00:30:24,070 Ein ein einheitliches Styling geben kann oder das Rumrutschen 589 00:30:24,070 --> 00:30:24,390 kann. Ne. 590 00:30:24,390 --> 00:30:26,550 Also wir haben, wir haben ja heute in modernen Webanwendungen 591 00:30:26,550 --> 00:30:28,870 haben wir ja immer sowieso ne Art Kacheln oder irgendsowas ja, 592 00:30:28,870 --> 00:30:30,590 also ich passe bestimmten Content. 593 00:30:32,280 --> 00:30:35,520 Zusammen, der dann quasi als Ganzes irgendwie, zum Beispiel 594 00:30:35,520 --> 00:30:37,960 wenn der Screen kleiner wird, irgendwie in die nächste Zeile 595 00:30:37,960 --> 00:30:41,200 rutscht oder irgendsowas. Dafür ist das ganz wichtig, so 596 00:30:41,200 --> 00:30:43,800 eine Art eher strukturierende Containerelemente zu haben. 597 00:30:43,800 --> 00:30:46,000 Html, damit ich das überhaupt ausdrücken kann, und das ist 598 00:30:46,000 --> 00:30:47,360 halt das div. Und das Band. 599 00:30:47,360 --> 00:30:49,680 Und wo sind die unterschiedlich? Im HTML muss man jetzt auch mal 600 00:30:49,680 --> 00:30:53,400 kurz überlegen, wenn man jetzt nur HTML HINTIPPT ohne CSS, dann 601 00:30:53,400 --> 00:30:56,440 gibt es 2 verschiedene Arten von Elementen, es gibt die inline 602 00:30:56,440 --> 00:31:00,440 Elemente und die Blockelemente und ob irgendwas ein inline 603 00:31:00,440 --> 00:31:03,440 Element oder ein Block Element ist, ist mit dem Typ des 604 00:31:03,440 --> 00:31:06,520 Elements festgelegt. Und was der Unterschied zwischen 605 00:31:06,520 --> 00:31:08,320 Inline und Blog ist? Ganz einfach. 606 00:31:08,320 --> 00:31:11,000 Wenn ich ein Blockelement habe und ich schreibe quasi 607 00:31:11,000 --> 00:31:14,480 untereinander blockelemente hin, dann sind die quasi jedes Mal 608 00:31:14,480 --> 00:31:17,800 automatisch in untereinander, also in der nächsten Zeile. 609 00:31:18,200 --> 00:31:21,040 Das ist Block und ein inline Element, wenn ich die 610 00:31:21,040 --> 00:31:24,800 untereinander im HTML Hinschreibe, dann werden die 611 00:31:24,800 --> 00:31:28,200 aber hintereinander gerendert in einer Linie. 612 00:31:29,350 --> 00:31:33,550 Und das muss man halt wissen, welches Element was macht, wenn 613 00:31:33,550 --> 00:31:35,270 man immer so ganz grob irgendwie das Teil. 614 00:31:35,590 --> 00:31:38,150 Aber deswegen gibt es 2 strukturgebende Container. 615 00:31:38,150 --> 00:31:41,790 Das Diff ist nämlich n Block Element ja das wenn wenn wenn 616 00:31:41,790 --> 00:31:43,950 ich divs hinterschreibe sind die erstmal untereinander. 617 00:31:44,070 --> 00:31:49,560 Und das Spam ist nämlich in nen. N Inline Element, danke für das 618 00:31:49,560 --> 00:31:52,320 Wort, entfaltet genau und würde sich quasi hintereinander 619 00:31:52,320 --> 00:31:54,520 schreiben. So, ja, das ist ganz wichtig und 620 00:31:54,520 --> 00:31:58,200 wenn wir jetzt und wenn wir jetzt über Margin sprechen, dann 621 00:31:58,200 --> 00:31:59,880 bin ich, deswegen hab ich jetzt kurz von von div. 622 00:31:59,880 --> 00:32:03,440 Und span und von Inlinern und so weiter gesprochen, dann macht 623 00:32:03,440 --> 00:32:05,960 man eigentlich die Margins gerne an. 624 00:32:05,960 --> 00:32:09,480 Du benutzt relativ viele diese blockelemente du versuchst und 625 00:32:09,480 --> 00:32:11,840 du hast auch Divs in Divesendives versucht halt 626 00:32:11,840 --> 00:32:15,950 quasi. Content quasi immer zu rappen in 627 00:32:15,950 --> 00:32:19,470 so in so bestimmte Einheiten. Ja, und dann kann zu dem gerne 628 00:32:19,470 --> 00:32:22,030 mal n Margin geben. Ja dann haben quasi diese diese 629 00:32:22,030 --> 00:32:25,150 Blöcke zueinander n bestimmten Abstand und es sieht schick aus 630 00:32:25,150 --> 00:32:27,830 und es fließt nicht auseinander. Und und der. 631 00:32:27,910 --> 00:32:33,230 Und der Abstand, den ein Objekt nach außen hat, das ist so, wie 632 00:32:33,230 --> 00:32:35,350 wenn ich, ich sag mal ich bin n Objekt und hab ne bestimmte 633 00:32:35,350 --> 00:32:36,990 Größe 100 * 100 Pixel sag ich mal ja. 634 00:32:37,990 --> 00:32:40,870 So, und wenn ich jetzt sagen will ich hier ganz n anderen 635 00:32:40,870 --> 00:32:43,110 Elemente der hier so Rumfleucht auf dieser Seite. 636 00:32:43,110 --> 00:32:46,830 Ihr habt Gefährlichst zu mir nach außen 10 Pixel Abstand zu 637 00:32:46,830 --> 00:32:48,910 wahren hier das ist ja meine Privatsphäre. 638 00:32:48,910 --> 00:32:51,950 Ja das ist mein wie sagt man bei den Menschen immer hier so n. 639 00:32:52,190 --> 00:32:55,230 Die Aura, das ist meine Aura, die kommt eben mal nicht rein. 640 00:32:55,230 --> 00:32:57,830 Ja, das ist der, das ist der Margin. 641 00:32:57,830 --> 00:33:00,390 Ja, es gibt aber noch n anderes Element. 642 00:33:00,390 --> 00:33:02,750 Du hattest gesagt, das Padding ja, das definiert auch n 643 00:33:02,750 --> 00:33:05,590 Abstand, aber das ist der Abstand nach innen, ne also wenn 644 00:33:05,590 --> 00:33:08,670 wir jetzt stellen wir mal vor dieser dieses Diff ist einfach 645 00:33:08,670 --> 00:33:13,710 ne Box, dann ist der Margin das was außerhalb der Box passiert 646 00:33:14,230 --> 00:33:17,910 wenn es eine schwarze Linie ist diese Box und ich hab 10 Pixel 647 00:33:17,910 --> 00:33:22,270 margin dann darf von außen keiner näher als 10 Pixel an 648 00:33:22,270 --> 00:33:25,310 meine an meinen stricheren rücken an meiner Aura. 649 00:33:26,400 --> 00:33:29,880 Und das Padding ist quasi alle Elemente die da drin sind, weil 650 00:33:29,880 --> 00:33:31,440 ich bin ja ein strukturgebendes Element. 651 00:33:31,480 --> 00:33:34,080 Also ich hab zum Beispiel gleich als erstes da drin irgendwie 652 00:33:34,080 --> 00:33:38,560 eine Zeile Text und dann sagt das Padding, wie nah dürfen die 653 00:33:38,560 --> 00:33:41,240 Elemente, die in mir sind an meiner Linie von innen 654 00:33:41,240 --> 00:33:44,200 ranrücken, das ist das Padding, ja, weil es sieht auch richtig 655 00:33:44,200 --> 00:33:46,760 Scheiße aus, wenn du, wenn du zum Beispiel tatsächlich mal ein 656 00:33:46,760 --> 00:33:51,560 Differ hast, dem du ja mit dem CSS, mit dem CSS wohl border, 657 00:33:51,640 --> 00:33:54,080 kannst du dem tatsächlich also typische Weise hat die keine 658 00:33:54,080 --> 00:33:57,240 Border und sieht nicht ist alles ist einfach nur strukturgebend, 659 00:33:57,240 --> 00:33:58,960 aber du kannst es anmalen, dann siehst du die border. 660 00:34:00,000 --> 00:34:02,440 Und wenn du dir dann einen Text elementar reinmachst und gibst 661 00:34:02,440 --> 00:34:06,200 dem keinen Padding, dann klebt dieser Text direkt an der Border 662 00:34:06,200 --> 00:34:10,590 und das sieht richtig Kacke aus. Also gibst du dem Padding von 663 00:34:10,670 --> 00:34:13,310 und das kann man sehr genau definieren, padding Top Padding 664 00:34:13,310 --> 00:34:16,710 Left padding Ride, padding Bottom und dann gibt es eben 665 00:34:16,710 --> 00:34:19,790 irgendwie sagen wir mal 8 Pixel padding nach innen, dann sei das 666 00:34:19,790 --> 00:34:21,350 schon schick. So also die Box bleibt schon bei 667 00:34:21,350 --> 00:34:25,350 100 * 100 Pixel, selbst wenn sie ein Padding hat. 668 00:34:25,389 --> 00:34:27,310 Richtig. Nur was drin ist, wird halt 669 00:34:27,510 --> 00:34:29,949 weiter zur Mitte verschoben, wenn Padding da ist. 670 00:34:29,949 --> 00:34:31,389 Ganz genau. Und die Browser, und das ist 671 00:34:31,389 --> 00:34:33,830 eigentlich, und das ist alles Verschachteln, passiert alles 672 00:34:33,830 --> 00:34:35,870 gleichzeitig und die Browser machen das richtig gut das alles 673 00:34:35,870 --> 00:34:38,710 zu machen und mit Padding und Margins arbeitest du den ganzen 674 00:34:38,710 --> 00:34:40,710 Tag so. Ist das das Boxmodell? 675 00:34:40,710 --> 00:34:43,350 Darüber habe ich ein bisschen gelesen bei CSS, das ist alles 676 00:34:43,350 --> 00:34:46,320 in so. Boxen Container sind, die du 677 00:34:46,320 --> 00:34:48,199 genannt hast. Das habe ich noch nicht gehört. 678 00:34:48,199 --> 00:34:51,440 Das Boxmodell vom CSS aber ja, also es ist also es gehört sich, 679 00:34:51,440 --> 00:34:53,719 also es gibt, es gibt da noch noch höhere Levels von diesen 680 00:34:53,719 --> 00:34:57,680 ganzen Krams, aber es gehört sich so, dass du das also da 681 00:34:57,680 --> 00:35:00,840 gibt es auch eine Kunst, gutes CSS hinzuschreiben, was kurz ist 682 00:35:00,840 --> 00:35:04,200 und irgendwie alles schön macht, so, ja genau, also es gehört 683 00:35:04,200 --> 00:35:06,400 sich eigentlich so, dass du immer relativ viele diffs und so 684 00:35:06,400 --> 00:35:08,080 weiter verwendest um Sachen schön zu strukturieren. 685 00:35:08,870 --> 00:35:11,750 Ich hab jetzt zum Beispiel auch gelesen, dass in CSS 3, also 686 00:35:12,070 --> 00:35:14,390 meinst du ja noch die neuesten aktuellste Version, aktuellste 687 00:35:14,390 --> 00:35:17,790 Version, sowas wie flexbox oder sowas drin ist. 688 00:35:18,070 --> 00:35:19,630 Was ist das? Hätte ich jetzt als nächstes 689 00:35:19,630 --> 00:35:22,310 gesagt? Ja siehste, das passt ja, also 690 00:35:22,670 --> 00:35:26,430 sag mal Flexbox ist ultra wichtig, das muss man also, das 691 00:35:26,430 --> 00:35:29,150 ist so, das ist so eine, das ist so ein Power Tool von CSS und 692 00:35:30,030 --> 00:35:32,230 das baut jetzt schön auf, haben wir einen guten roten Faden 693 00:35:32,230 --> 00:35:35,950 jetzt gerade gefunden, das braucht nämlich die Diffs, aber 694 00:35:35,950 --> 00:35:38,030 das löst jetzt quasi dieses Problem. 695 00:35:38,270 --> 00:35:40,430 Ich habe gerade gesagt inline und blockelemente. 696 00:35:41,480 --> 00:35:45,560 Und es löst jetzt einfach das auf eine Flexbox da definiert 697 00:35:45,560 --> 00:35:48,600 quasi das CSS wie der Krams fließt. 698 00:35:49,200 --> 00:35:51,240 Das ist jetzt nicht mehr notwendigerweise untereinander. 699 00:35:51,240 --> 00:35:54,800 Beim Diff kann auch schön nebeneinander sein und so weiter 700 00:35:55,160 --> 00:35:59,640 man sagt auch, also man leitet das ein im CSS mit dem mit dem, 701 00:35:59,640 --> 00:36:01,480 mit dem mit der Property Display. 702 00:36:01,480 --> 00:36:05,240 Ja und man sagt tatsächlich Display, Doppelpunkt Flex wenn 703 00:36:05,240 --> 00:36:06,600 ich jetzt zum Beispiel Hinschreibe. 704 00:36:08,360 --> 00:36:11,080 Machen wir kurz mal inline CS. Ich schreibe also in div. 705 00:36:11,160 --> 00:36:16,710 Als htt, als html Style gleich. Display, doppelpunkt, flex dann 706 00:36:16,710 --> 00:36:18,870 drücke ich es aus, dass dieser Container. 707 00:36:19,870 --> 00:36:24,470 Und alle seine Inhalte nach dem Flex Prinzip arbeiten so. 708 00:36:24,550 --> 00:36:26,790 Ja und was ist Flex, was soll das überhaupt? 709 00:36:26,790 --> 00:36:29,670 Ja, Flex ist für das Layouting da. 710 00:36:29,670 --> 00:36:33,950 Ja also und jetzt muss man eine Sache wissen, wenn man man will 711 00:36:33,950 --> 00:36:36,470 ja vermeiden als Entwickler, dass man jetzt für zum Beispiel 712 00:36:36,470 --> 00:36:39,950 für jede Plattform für jeden Screen Ratio und so weiter 713 00:36:40,630 --> 00:36:44,190 komplett den ganzen HTML Code und den CSS Code. 714 00:36:45,390 --> 00:36:49,910 Jeweils Handy sein muss. Ja, dann musst du ja 3 oder 4 715 00:36:50,110 --> 00:36:53,310 Sachen warten. Ja also Smartphone, Smartphone 716 00:36:53,310 --> 00:36:58,710 gedreht, Tablet, Tablet gedreht, Desktop ja mit 4 K oder oder 717 00:36:58,790 --> 00:37:01,990 Ultra HD und HD. Katastrophe genau, allein schon 718 00:37:02,030 --> 00:37:03,870 größere und kleinere Bildschirme, Laptop. 719 00:37:03,870 --> 00:37:06,630 Und ja, genau, und am besten Falle hast du einfach hast du 720 00:37:06,910 --> 00:37:10,750 hast du deinen CSS und dein ganzes Layout so designt, hast 721 00:37:10,750 --> 00:37:14,190 du mit einer einer Single Quelle, das ist alles 722 00:37:14,190 --> 00:37:16,070 automatisch funktioniert und flex ist da ist da eine 723 00:37:16,070 --> 00:37:19,230 Granatenlösung so ja das kannst du nämlich zum Beispiel sagen im 724 00:37:19,230 --> 00:37:21,990 Flex, meistens sagt man es so, du hast du hast einen äußeren 725 00:37:21,990 --> 00:37:24,910 Container, da sagst du jetzt da drin ist jetzt alles geflext so 726 00:37:25,430 --> 00:37:27,990 und dann hast du da drinnen noch mehrere Container wieso eine Art 727 00:37:27,990 --> 00:37:31,990 Kacheln und dann dann sagst du als erstes mal was für eine Flex 728 00:37:31,990 --> 00:37:35,550 Direction habe ich also du bist erstmal wie sich diese inneren 729 00:37:35,550 --> 00:37:38,910 Container ob. Horizontal sind oder vertikal. 730 00:37:38,910 --> 00:37:41,870 Tatsächlich gibt es diese 2. Es ist Row oder Column, Flex 731 00:37:41,870 --> 00:37:44,310 Direction Router column, das heißt du sagst jetzt jetzt 732 00:37:44,310 --> 00:37:47,190 kommen meine Kacheln, jede neue Kachel die ich jetzt 733 00:37:47,190 --> 00:37:49,350 untereinander schreibe, sie sind entweder nebeneinander oder von 734 00:37:49,350 --> 00:37:51,190 vornherein mal untereinander, ist die erste wichtige 735 00:37:51,190 --> 00:37:53,510 Entscheidung, du triffst. Und dann kannst du auf einmal 736 00:37:53,510 --> 00:37:57,470 sagen, justify Content, align items und so weiter jetzt kannst 737 00:37:57,470 --> 00:38:01,990 du sagen, diese Kacheln. Teilen Sie sich im Raum wie wie 738 00:38:01,990 --> 00:38:04,870 nehmen die den restlichen Space, der auf deiner Seite ist und das 739 00:38:04,870 --> 00:38:06,790 Macht alles Flex allein du musst dich jetzt also nicht mehr um 740 00:38:06,790 --> 00:38:09,190 die Pixelgrößen von der Bildschirm kümmern, das heißt 741 00:38:09,190 --> 00:38:11,670 alles alleine du sagst halt irgendwie, verteilt euch so im 742 00:38:11,670 --> 00:38:15,190 Raum ja zum Beispiel distribute evenly ja. 743 00:38:15,590 --> 00:38:19,430 Oder lass links, links und rechts maximal viel Abstand. 744 00:38:19,430 --> 00:38:21,870 Ja und und mach dann innen drinne irgendwie n kleines 745 00:38:21,870 --> 00:38:23,790 Spacing zwischen meinen Kacheln und so weiter das kannst du 746 00:38:23,790 --> 00:38:26,590 alles ausdrücken, ja und du kannst dann auch sagen was soll 747 00:38:26,590 --> 00:38:29,910 passieren wenn es mehr Kacheln gibt, weil die Kacheln haben ja 748 00:38:29,910 --> 00:38:32,270 ne eigene Größe kannst du sagen ne also die Items so sagt man 749 00:38:32,270 --> 00:38:35,070 das auch also du hast den den Container das ist der Flex 750 00:38:35,070 --> 00:38:38,510 Container und alles was drin ist die Kacheln das sind die Items 751 00:38:38,990 --> 00:38:41,190 und du kannst ja sagen die Items sollen schon eine feste Größe 752 00:38:41,190 --> 00:38:44,390 haben vielleicht ja und was passiert denn jetzt wenn mein 753 00:38:44,390 --> 00:38:47,230 ganzer Viewport wie man so schön sagt also der Screen kleiner 754 00:38:47,230 --> 00:38:49,600 wird? Als die Items, die ich 755 00:38:49,600 --> 00:38:52,000 ausgedrückt habe, dass die in einer Reihe sein sollten. 756 00:38:52,400 --> 00:38:54,080 Das ist eine sogenannte Flex Rap. 757 00:38:54,080 --> 00:38:56,880 Dann kannst du sagen okay, der Scheiß rappt sich halt dann ja 758 00:38:57,160 --> 00:38:59,560 und dann fallen quasi von alleine die Boxen runter mit so 759 00:38:59,560 --> 00:39:02,400 einem kleinen Animationseffekt, die sind dann passen nicht mehr 760 00:39:02,400 --> 00:39:04,640 in eine Zeile, dann fallen sie in die nächsten Zeile, da kannst 761 00:39:04,640 --> 00:39:07,600 du nur sagen Rap dich reverse oder Forward, da kannst du sagen 762 00:39:07,600 --> 00:39:10,200 also das letzte Objekt nach unten oder das erste nach unten 763 00:39:10,200 --> 00:39:12,920 und so weiter das kannst du alles auf einer ziemlich hohen 764 00:39:12,920 --> 00:39:16,120 Abstraktionslinie mit diesem Flex CSS Krempel definieren. 765 00:39:16,630 --> 00:39:21,390 Ja, und wenn du das gut machst und schön designst, dann kannst 766 00:39:21,390 --> 00:39:24,070 du schon richtig viel im anderen responsive Design machen. 767 00:39:24,070 --> 00:39:27,070 Das ist das Buzzword dazu. Responsive Design heißt es, 768 00:39:27,070 --> 00:39:30,390 sieht halt immer gut aus, egal auf welchem Screen ich gucke und 769 00:39:30,390 --> 00:39:34,470 tatsächlich ist Flex die Flex Technologie glaube Grundlage von 770 00:39:34,470 --> 00:39:38,310 sehr sehr vielen ziemlich schicken Apps, die halt bei 771 00:39:38,310 --> 00:39:41,190 gleicher Codebase sage ich mal gut sehen aussehen auf vielen 772 00:39:41,190 --> 00:39:44,710 Screenshot das mal so ganz kurz um mal Flex abzuholen, jetzt 773 00:39:44,710 --> 00:39:47,830 gibt es da noch was krasseres, angeblich habe ich aber selber 774 00:39:47,830 --> 00:39:49,470 sehr wenig Erfahrung, deswegen erlebe ich mich nicht aus dem 775 00:39:49,470 --> 00:39:53,390 Fenster, es gibt auch im CSS 3 das sogenannte Grid, also Flex 776 00:39:53,390 --> 00:39:54,830 ist ja ein bisschen eindimensional. 777 00:39:54,830 --> 00:39:57,310 Du sagst jetzt irgendwie du hast zwar einen Rapper Container und 778 00:39:57,470 --> 00:40:00,790 dann hast du da drin eine Linie von entweder untereinander 779 00:40:00,790 --> 00:40:03,470 angeordneten oder nebeneinander angeordneten Kacheln. 780 00:40:04,280 --> 00:40:06,560 Das ist aber auch nicht ganz richtig, weil du kannst quasi 781 00:40:06,560 --> 00:40:10,840 auch einen Flex Container haben, wo das Item wieder ein Flex 782 00:40:10,840 --> 00:40:13,360 Container ist. Das habe ich auch gern gerettet. 783 00:40:13,360 --> 00:40:15,480 Aber bist du noch dabei? Ja. 784 00:40:15,600 --> 00:40:17,360 Also du kannst schon die Bilder noch so ein bisschen im Kopf. 785 00:40:17,360 --> 00:40:19,440 Ich versuche es gerade alles vorzustellen, du kannst das ist 786 00:40:19,440 --> 00:40:21,880 ja eine Grund, eine Grundeigenschaft des Hdml, dass 787 00:40:21,880 --> 00:40:25,760 du es halt nesten kannst. Ja, also du kannst ja stapeln 788 00:40:25,760 --> 00:40:27,480 und deswegen kannst du auch sagen, ich div. 789 00:40:27,480 --> 00:40:30,920 Container auf, der auf der ersten Ebene bist du quasi hast 790 00:40:30,920 --> 00:40:34,720 du Kacheln horizontal und in jeder einzelnen Kachel ist quasi 791 00:40:34,720 --> 00:40:38,110 wieder ein Container. Für Unterkacheln, die auf einmal 792 00:40:38,110 --> 00:40:41,150 aber untereinander sind, die dann columbice sind und und auf 793 00:40:41,150 --> 00:40:43,270 diese Art und Weise kriegst du ja auch zweidimensionale 794 00:40:43,270 --> 00:40:45,550 Strukturen zusammen. Ja, also und sowas wie Tabellen 795 00:40:45,550 --> 00:40:47,270 und so weiter kannst du damit alles machen ja, aber du. 796 00:40:47,270 --> 00:40:49,110 Wolltest wahrscheinlich sagen, dass Skript ist besser dafür 797 00:40:49,110 --> 00:40:49,830 geeignet. Genau und. 798 00:40:49,830 --> 00:40:51,790 Jetzt gibt es das Grid irgendwie und das hat, das hat von 799 00:40:51,790 --> 00:40:53,070 vornherein so ein zweidimensionales 800 00:40:53,070 --> 00:40:55,590 zweidimensionalen Charakter, ja, das heißt irgendwie, dass das 801 00:40:55,590 --> 00:40:58,310 ist das, was es zu nutzen wäre, so, ja, ich löse das immer über 802 00:40:58,310 --> 00:41:01,110 Flexboxen, wenn ich zum Beispiel Tabelle früher, also wenn du 803 00:41:01,110 --> 00:41:05,470 einfach mal eine Tabelle hin machen willst, also mit CSS oder 804 00:41:05,470 --> 00:41:06,990 überhaupt eine Tabelle einfach mal haben willst. 805 00:41:06,990 --> 00:41:09,750 Im HTML war früher ein Riesenproblem und hat angefangen 806 00:41:09,750 --> 00:41:11,910 mit mit Tablets quasi tatsächlich, es gibt ja das 807 00:41:11,910 --> 00:41:15,560 Tablet. Das Table Element vom HTML, das 808 00:41:15,560 --> 00:41:16,960 dafür da ist. Und dann gibt es Tableau und 809 00:41:16,960 --> 00:41:19,000 Table Column. Du kannst ja alles definieren, 810 00:41:19,200 --> 00:41:22,160 du kannst eine Tabelle aufziehen, die ist aber da 811 00:41:22,160 --> 00:41:23,880 passiert. Großer Scheiß wenn du irgendwie 812 00:41:23,880 --> 00:41:25,920 wenn der Platz nicht mehr da ist in der Tabelle und so weiter 813 00:41:26,480 --> 00:41:28,760 deswegen macht man das eigentlich nicht mehr mit Table 814 00:41:28,800 --> 00:41:31,880 also Table benutzt man einfach nicht zum Layout, früher hat man 815 00:41:31,880 --> 00:41:35,320 halt das Table genommen um quasi in die Zellen dann irgendwie 816 00:41:35,320 --> 00:41:37,000 wilden Content rein zu machen und. 817 00:41:37,150 --> 00:41:39,150 Und um den um den irgendwie ne Struktur zu geben. 818 00:41:39,150 --> 00:41:40,470 Ja, weil man nichts Besseres hatte. 819 00:41:40,630 --> 00:41:42,950 Jetzt gibt es CSS 3 und jetzt machst du es gefälligst. 820 00:41:43,190 --> 00:41:45,190 Jetzt benutzt du Tables quasi nur noch, wenn du wirklich ne 821 00:41:45,190 --> 00:41:47,030 Tabelle hast. Das ist auch richtig, weil wir 822 00:41:47,030 --> 00:41:49,830 wollen semantisch den Content klar haben. 823 00:41:49,830 --> 00:41:52,110 Ja, es gibt ja auch Leute, die sind diesen blind. 824 00:41:53,030 --> 00:41:55,030 Die müssen vertrauen, dass irgendwie die, die müssen halt 825 00:41:55,030 --> 00:41:56,950 quasi wissen, muss ich jetzt hier ist es jetzt hier 826 00:41:56,950 --> 00:41:58,990 inhaltlich semantisch tatsächlich ne Tabelle und ist 827 00:41:58,990 --> 00:42:01,790 hier Content, den ich vorgelesen haben möchte oder wird hier ne 828 00:42:01,790 --> 00:42:05,710 Tabelle gehackt um Informationen die eigentlich keine Tabelle 829 00:42:05,710 --> 00:42:08,390 sind nur irgendwie in einer Art in in ne Struktur zu bringen in 830 00:42:08,390 --> 00:42:10,670 so ner Art Grid, das macht man halt nicht mehr und wenn du 831 00:42:10,670 --> 00:42:13,310 jetzt mit einem Flex Technologien Tabelle ausdrücken 832 00:42:13,310 --> 00:42:16,390 willst, dann sagst du halt hier ist mein oberer Container und 833 00:42:16,390 --> 00:42:19,310 der obere Container hat zum Beispiel hat erstmal eine 834 00:42:19,310 --> 00:42:21,910 Columrichtung das sagt also quasi wieviel Rose hat die 835 00:42:21,910 --> 00:42:25,150 Tabelle? In jedem, in jedem, in jedem 836 00:42:25,150 --> 00:42:27,750 Column Kachel, in jedem colum Container, der ist gleich wieder 837 00:42:27,750 --> 00:42:30,630 nen Flex Container, der ist aber horizontal. 838 00:42:30,630 --> 00:42:34,030 Ja jeder einzelne und dem kannst du dann, den kannst du dann 839 00:42:34,030 --> 00:42:37,350 wieder Sachen geben und dann beschubst hast ne Tabelle oder 840 00:42:38,390 --> 00:42:40,990 sagst du noch die Tabelle darf sich zum Beispiel nicht rappen 841 00:42:40,990 --> 00:42:43,270 oder sowas wenn es zu klein wird, dann darf die Role nicht 842 00:42:43,270 --> 00:42:44,910 rappen, die muss sie halt irgendwie abschneiden kannst du 843 00:42:44,910 --> 00:42:46,990 alles sagen, so macht man das quasi heute und ich glaube, dass 844 00:42:46,990 --> 00:42:49,070 Grit könnte das vielleicht noch eleganter kann ich euch aber 845 00:42:49,070 --> 00:42:52,270 nicht erklären, habe ich ja, habe ich einfach noch nicht so 846 00:42:52,270 --> 00:42:53,840 viel benutzt. Genau. 847 00:42:54,160 --> 00:42:57,160 Und jetzt sind wir fast durch. Jetzt gibt es noch, ihr merkt 848 00:42:57,160 --> 00:42:59,400 schon eine CSS nur was wir am Anfang gefragt so wow was muss 849 00:42:59,400 --> 00:43:01,840 man das extra erklären, so gibt es also was man vielleicht immer 850 00:43:01,840 --> 00:43:04,880 sagen muss, wenn man sich das mal angucken will und einfach 851 00:43:04,880 --> 00:43:07,720 echt keinen Plan hat von HTML und CSS und programmieren und so 852 00:43:07,720 --> 00:43:12,160 dann halt immer noch mit f 12 im Browser mal oder untersuchen 853 00:43:12,160 --> 00:43:14,720 also irgendwas markieren und dann mal Rechtsklick untersuchen 854 00:43:14,720 --> 00:43:16,360 klicken oder Inspect glaube ich auf Englisch denke. 855 00:43:16,360 --> 00:43:17,160 Ich mal ja genau. Und dann? 856 00:43:17,400 --> 00:43:19,840 Kann man sich mal angucken, was an HTML und CSS eigentlich 857 00:43:19,840 --> 00:43:21,480 dahinter steckt? Man kann das mal alles sehen, 858 00:43:21,480 --> 00:43:23,040 ja. Tatsächlich sogar sehr, sehr, 859 00:43:23,240 --> 00:43:26,080 sehr, sehr gut sehen. Weil also auf dem Style Tab vom 860 00:43:26,080 --> 00:43:29,840 vom Developer Tools siehst du tatsächlich alle diese CSS, er 861 00:43:29,840 --> 00:43:32,400 schreibt das auch hin, was ist von extern geladen und dieses 862 00:43:32,400 --> 00:43:35,360 Cascading das das zum Beispiel kann ja sein, dass du extern 863 00:43:35,360 --> 00:43:39,360 gesagt hast, alle h 1 sehen so aus und dann auf einmal was was. 864 00:43:39,790 --> 00:43:43,350 In der Priorität höheres überschreibt quasi das h 1. 865 00:43:43,350 --> 00:43:46,070 Ja und er zeigt dir sogar an, dass es überschrieben ist und 866 00:43:46,070 --> 00:43:48,230 auch mit welchem Value. Ja, das schreit er sogar durch 867 00:43:48,230 --> 00:43:50,350 und so weiter also das kann man wirklich sehr gut wirklich n 868 00:43:50,350 --> 00:43:51,870 gutes Beispiel. Man kann es sogar noch live 869 00:43:51,870 --> 00:43:53,350 manipulieren. Ja, du kannst ja auch, klar 870 00:43:53,350 --> 00:43:54,830 kannst du auch da reintipeln und dann die Farben. 871 00:43:54,830 --> 00:43:56,150 Werden. Du kannst es wirklich machen. 872 00:43:56,150 --> 00:43:58,270 Du kannst mich vor allen Dingen dem ganzen Kram, den inline 873 00:43:58,270 --> 00:44:01,350 Style geben, wenn du mal gucken willst, wie es das mache, ich 874 00:44:01,350 --> 00:44:02,670 zum Beispiel ganz oft, eigentlich will ich einen 875 00:44:02,670 --> 00:44:05,310 Stylesheet haben, auf Klassenebene zum Beispiel, und 876 00:44:05,310 --> 00:44:07,470 da will ich mal vorher angucken, wie wird es denn aussehen und 877 00:44:07,470 --> 00:44:10,390 dann kannst du zum Beispiel mit dem Developer Tools rangehen und 878 00:44:10,390 --> 00:44:12,630 gibst halt dem Element, das du jetzt gerade mal über designen 879 00:44:12,630 --> 00:44:16,390 willst, den Inline Style live, mit dem kannst du einenjekten. 880 00:44:17,200 --> 00:44:19,040 Und dann, und weil das die höchste Priorität hat, passiert 881 00:44:19,040 --> 00:44:20,760 das dann halt auch so. Du hattest noch irgendwas auf 882 00:44:20,760 --> 00:44:23,480 dem Zettel, oder? Ja, ich hab noch 23 Sachen auf 883 00:44:23,480 --> 00:44:26,760 dem Zettel. Eine wichtige Sache ist, jetzt 884 00:44:26,760 --> 00:44:29,280 haben wir ja quasi nur über statisches anmalen gesprochen 885 00:44:29,280 --> 00:44:32,640 und auch über Strukturiergebungen usw es. 886 00:44:32,950 --> 00:44:34,790 Es gibt so coole Sachen wie Transformation. 887 00:44:34,790 --> 00:44:37,710 Soll ich noch mal sagen. So manchmal sieht man das ja zum 888 00:44:37,710 --> 00:44:40,750 Beispiel du Hammerst über irgendwas rüber und es dreht 889 00:44:40,750 --> 00:44:43,910 sich irgendwie dreidimensional weg oder irgendsowas oder ganz 890 00:44:43,910 --> 00:44:45,110 oft haben die Buttons so n Effekt. 891 00:44:45,110 --> 00:44:47,670 Ne du kommst drüber gehovert und der wird so n bisschen größer 892 00:44:47,670 --> 00:44:49,670 oder sowas und dann macht so n Schatten oder ja ich glaub ganz 893 00:44:49,670 --> 00:44:52,350 viele neue Webseiten haben beim Scrollen ganz viel 894 00:44:52,350 --> 00:44:54,550 Transformation. Ah ganz genau so und das kannst 895 00:44:54,550 --> 00:44:58,110 du halt auch tatsächlich alles in CSS ausdrücken krasser weise 896 00:44:58,150 --> 00:45:02,550 es gibt also mal es gibt mal die Transform Property und die hat 897 00:45:02,550 --> 00:45:05,110 die hat du kannst also transformieren bestimmte 898 00:45:05,110 --> 00:45:08,350 Eigenschaften zum Beispiel kannst du sagen Rotate Scale sq 899 00:45:08,630 --> 00:45:12,230 ist quasi die. Sage ich mal und translate, ja, 900 00:45:12,230 --> 00:45:14,230 dann kannst du zum Beispiel sagen, ich hab, ich hab jetzt 901 00:45:14,230 --> 00:45:16,350 hier irgendwie n div. Ja und da drin ist irgendein 902 00:45:16,350 --> 00:45:18,830 Knopf und dann sagst du zum Beispiel Transform translate. 903 00:45:19,430 --> 00:45:22,950 Von 0 nach irgendwohin und auf einmal fliegt dieser Button quer 904 00:45:22,950 --> 00:45:24,830 über deinen Screen. Ja, und dann kannst du natürlich 905 00:45:24,830 --> 00:45:28,190 noch zu sagen, wie schnell mit, mit welcher Federung und so 906 00:45:28,190 --> 00:45:30,590 weiter dann fliegt er da irgendwie im linearen Tempo oder 907 00:45:30,590 --> 00:45:32,430 beschleunigt er langsam und bremst wieder ab und so weiter 908 00:45:32,430 --> 00:45:33,750 das kannst du alles ausdrücken, ja. 909 00:45:34,470 --> 00:45:36,070 Und wenn dir das noch nicht genug ist, dann kannst du 910 00:45:36,070 --> 00:45:37,510 sogenannte Animationen definieren. 911 00:45:37,510 --> 00:45:41,710 Das gibt es auch erst als CSS 3. Und das ist n also ist ne 912 00:45:41,710 --> 00:45:44,190 Erweiterung tatsächlich. Also während Transform den 913 00:45:44,190 --> 00:45:47,470 Gesetzen sag ich mal den ursprünglichen Gesetzen der CSS 914 00:45:47,470 --> 00:45:50,590 regeln spricht, weil du es einfach ne Property ist, ne die 915 00:45:50,590 --> 00:45:54,110 unternimmt unter dem Selektor läuft gibt es jetzt. 916 00:45:54,590 --> 00:45:57,270 Ganz krasse Sachen, Animationen zum Beispiel. 917 00:45:57,630 --> 00:46:01,790 Da hast du quasi außerhalb dieser normalen Selektoren nen 918 00:46:01,790 --> 00:46:04,350 Spezialselektor, die fangen alle mit AT an, davon gibt es 919 00:46:04,350 --> 00:46:05,550 mehrere. Ich nehm jetzt nur mal gerade 920 00:46:05,550 --> 00:46:09,110 die Animation und dann steht da quasi at keyframes und den gibst 921 00:46:09,110 --> 00:46:11,150 du n Namen. Und dann kannst du da sagen, 922 00:46:11,150 --> 00:46:14,590 from too Dadrunter, also von bis, ja du kannst zum Beispiel 923 00:46:14,590 --> 00:46:18,630 sagen from 0 to 1 und später beziehst du dich da drauf auf 924 00:46:18,630 --> 00:46:23,790 diese Keyframes mit dem mit dem mit dem CSS Property, also 925 00:46:23,790 --> 00:46:27,870 irgendwo in irgendeiner. Eintrag mit Animation Name, dann 926 00:46:27,870 --> 00:46:30,990 sagst du da quasi my Animation irgendsowas ja die du vorher 927 00:46:30,990 --> 00:46:34,110 definiert hast. Und da steht zum Beispiel 0 und 928 00:46:34,110 --> 00:46:36,750 1, da kannst du zum Beispiel sagen, Opacity ja, da wird 929 00:46:36,750 --> 00:46:40,310 irgendwas von 0 nach 1 transformiert n beliebiger Wert 930 00:46:40,310 --> 00:46:42,750 Value beliebige Values werden transformiert, quasi von 931 00:46:42,750 --> 00:46:44,990 beliebigen Keys. Ja und auf einmal wird was 932 00:46:44,990 --> 00:46:48,150 transparent und kommt wieder oder irgendsowas und wieder und 933 00:46:48,150 --> 00:46:50,430 so weiter du kannst ja also ne, du kannst dann auch sagen nur 934 00:46:50,430 --> 00:46:51,870 bei 0. Du kannst auch in Prozenten 935 00:46:51,870 --> 00:46:54,510 definieren, entweder sagst du From und Two, dann kannst du nur 936 00:46:54,510 --> 00:46:57,710 sagen Duration immer im Kreis oder von 0 25% bei 50% 75% 100% 937 00:46:57,710 --> 00:47:00,590 sieht so und so und so und so aus und du kannst das alles 938 00:47:00,590 --> 00:47:01,430 ineinander stecken, du kannst also wilde Transformationen 939 00:47:01,430 --> 00:47:03,190 machen, wo du gleichzeitig transparent wirst, die Farbe 940 00:47:03,190 --> 00:47:05,590 wechselt und Skalierst und so weiter du. 941 00:47:09,030 --> 00:47:11,150 Kurz ausgedrückt, man kennt es ein bisschen von, also wer 942 00:47:11,150 --> 00:47:14,510 powerpoint Animation schon mal gemacht hat, so ähnlich ist das 943 00:47:14,510 --> 00:47:16,110 ja. Also du kannst powerpoint, wenn 944 00:47:16,110 --> 00:47:17,910 du wahnsinnig wirst, kannst du ja auch Sachen irgendwie von A 945 00:47:17,910 --> 00:47:19,990 nach B fliegen lassen und das Stichwort wenn du wahnsinnig 946 00:47:19,990 --> 00:47:21,150 wirst. Man muss natürlich immer ein 947 00:47:21,150 --> 00:47:22,990 bisschen. Aufpassen bei den ganzen Sachen. 948 00:47:22,990 --> 00:47:25,150 Ne und aber grundsätzlich ist natürlich cool, dass so viel 949 00:47:25,150 --> 00:47:28,030 geht und funktioniert und genau ich finde es schon auf manchen 950 00:47:28,030 --> 00:47:32,230 Seiten sehr sehr gut gemacht, irgendwie cool anzusehen, alle 951 00:47:32,230 --> 00:47:34,790 übertreiben aber wenn man das richtige Dosis findet, wäre gut. 952 00:47:34,790 --> 00:47:38,990 Ein powerpoint Design kann das in CSS umsetzt, dieses Gefühl 953 00:47:38,990 --> 00:47:41,710 für eine UX, das ist ja auch nicht nur UI, das ist ja auch 954 00:47:41,710 --> 00:47:43,830 wirklich UX was man CSS ausdrückst. 955 00:47:44,920 --> 00:47:47,880 Weil, weil du auf einmal einfach mal ein viel besseres Gefühl 956 00:47:47,880 --> 00:47:50,440 kriegst für die Sachen. Ja, das ist schon ganz cool. 957 00:47:50,440 --> 00:47:53,400 Ja, ich glaube, jetzt haben wir, also das ist auch die Spitze vom 958 00:47:53,400 --> 00:47:56,840 Eisberg, trotzdem noch gewesen, aber vielleicht. 959 00:47:57,110 --> 00:47:59,150 Eine noch, die ich hatte ja gesagt, ich hab noch vielleicht 960 00:47:59,150 --> 00:48:00,910 3 Sachen, also das war die eine Sache, war die Animation. 961 00:48:00,910 --> 00:48:04,030 Es gibt auch noch eine die es mit diesem Add funktioniert, was 962 00:48:04,030 --> 00:48:08,270 also quasi hinzugefügt wurde ist vielleicht wichtig, sogenannte 963 00:48:08,270 --> 00:48:11,430 Media Curry nur für die Leute die das mal hören at mediacury. 964 00:48:11,830 --> 00:48:14,190 Und das ist so ne Art Weiche für CSS. 965 00:48:14,190 --> 00:48:16,950 Da kannst du quasi sagen, also das Atmedia Q. 966 00:48:16,950 --> 00:48:18,630 Ich schreibst du oben drüber und und und. 967 00:48:18,630 --> 00:48:21,470 Das hat ne Bedingung, du kannst halt sagen, wenn mein Bildschirm 968 00:48:21,470 --> 00:48:25,790 die und die Auflösung hat oder so und so rotiert ist also Media 969 00:48:25,790 --> 00:48:28,910 Curry heißt halt immer ich beschreibe quasi mit einer mit 970 00:48:28,910 --> 00:48:34,430 einer festgelegten Art und Weise wie mein Viewport, also wie man 971 00:48:34,430 --> 00:48:37,030 quasi meinen Schirm aussieht. Ich frage ich es ab oder ich 972 00:48:37,030 --> 00:48:38,950 gucke erstmal nach, was habe ich denn? 973 00:48:38,950 --> 00:48:39,990 Und dann überlege ich mir danach. 974 00:48:39,990 --> 00:48:42,150 Was macht das Ding selbst? Du sagst halt, wenn ich, wenn 975 00:48:42,150 --> 00:48:44,670 ich zum Beispiel kleiner als 1000 x 1000 Pixel Screen zur 976 00:48:44,670 --> 00:48:47,870 Verfügung habe, dann nimm dieses CSS was jetzt kommt. 977 00:48:48,920 --> 00:48:52,440 Und und oder oder so weiter kannst du ja viele mediacuries 978 00:48:52,440 --> 00:48:54,880 machen und dann kannst du quasi mal wenn du mal nicht mit 979 00:48:54,880 --> 00:48:57,320 flexbox also wenn du nicht Responsive Design machst mit 980 00:48:57,320 --> 00:49:00,880 einem Code aber wenn du wirklich explizit sagen willst in diesem 981 00:49:00,880 --> 00:49:03,520 Falle lasse ich sogar zum Beispiel ein ganz Element Weg du 982 00:49:03,600 --> 00:49:06,480 kannst nämlich zeige ich gar nicht an weil es mir zu groß ist 983 00:49:06,520 --> 00:49:08,680 das Bild zum Beispiel von einem Ich bin auf einem kleinen 984 00:49:08,680 --> 00:49:11,360 Telefon und Ich würde jetzt hier ein Bild was ich sonst irgendwie 985 00:49:11,360 --> 00:49:14,080 habe als zum anzeigen weil ich genug Platz habe will ich jetzt 986 00:49:14,080 --> 00:49:16,680 gar nicht mehr anzeigen dann kannst du auch mit einem Display 987 00:49:16,680 --> 00:49:20,000 gibt es auch setzt du einfach auf hin und schmeißt das ganz 988 00:49:20,000 --> 00:49:22,280 raus aus der aus der ganzen Geschichte und zeigst es gar 989 00:49:22,280 --> 00:49:25,030 nicht an. Dazu auch komplett irgendwie hin 990 00:49:25,030 --> 00:49:26,790 und her schalten. Ja, das sind die Media Curies, 991 00:49:26,790 --> 00:49:30,590 dass man es mal gehört hat und ganz zum Schluss noch eine 992 00:49:30,590 --> 00:49:31,910 Sache, die jetzt eigentlich gar nicht dazu passt. 993 00:49:31,910 --> 00:49:34,750 Hätte bisschen früher sagen können, es gibt an den 994 00:49:34,750 --> 00:49:38,430 Selektoren sogenannte Pseudoklassen. 995 00:49:39,630 --> 00:49:42,110 Denn es gibt ja so einen Effekt zum Beispiel, ich habe gesagt, 996 00:49:42,110 --> 00:49:44,230 Hover, ja, das ist ja eigentlich ein Event, du kommst jetzt mit 997 00:49:44,230 --> 00:49:48,030 einer Maus zum Beispiel über einen Link, ganz oft ist das so, 998 00:49:48,030 --> 00:49:50,990 fast jeder Linke hat irgendwie so eine Psudoklasse dran und 999 00:49:50,990 --> 00:49:53,550 dann willst du quasi den, dann willst du quasi diesen 1000 00:49:53,550 --> 00:49:57,470 unterstrich machen oder den Fett machen und ein hoher Event, das 1001 00:49:57,470 --> 00:49:59,470 drückst du aus mit Pseudoklassen, die sind von der 1002 00:49:59,470 --> 00:50:02,310 Struktur her sind Doppelpunkt, da kannst du sagen zum Beispiel 1003 00:50:02,350 --> 00:50:06,230 A, also im CSS sagst du dann a als Texte Lektor für den Link 1004 00:50:06,590 --> 00:50:10,950 Doppelpunkt Hover und dann definierst du jetzt irgendwie 1005 00:50:10,950 --> 00:50:13,270 blau werden lassen den Text oder irgendsowas wenn du drüber 1006 00:50:13,270 --> 00:50:16,270 Havas, da sind die Pseudoklassen oder nur? 1007 00:50:17,080 --> 00:50:19,360 Der Vollständigkeit halber. Und jetzt ist glaube ich mein 1008 00:50:19,360 --> 00:50:24,750 Spicker leer und euer. Soll kann man alles wunderbar 1009 00:50:24,750 --> 00:50:26,430 nachlesen. Wer das noch mal möchte und auch 1010 00:50:26,430 --> 00:50:29,670 mit coolen Tutorials, Videos und so weiter tatsächlich bei der 1011 00:50:29,670 --> 00:50:33,990 Quelle, überhaupt beim W 3 C einfach mal bei CSS reinklicken. 1012 00:50:34,070 --> 00:50:37,910 Was Burkert an dieser Stelle meinte, war die W 3 Schools, die 1013 00:50:37,910 --> 00:50:41,310 wir euch jetzt hier verlinken. Hat mit W 3 C nichts zu tun, nur 1014 00:50:41,310 --> 00:50:46,510 das W 3 NW 3 Schools steht auch für das www.also viel Spaß mit w 1015 00:50:46,510 --> 00:50:50,710 3 Schools prima, danke dir und in 2 Wochen gibt es uns wieder. 1016 00:50:51,190 --> 00:50:52,470 Ich glaube schon. Beim frischen Thema. 1017 00:50:53,600 --> 00:50:55,680 Ja, ein bisschen fernerer Zukunft, vielleicht auch noch 1018 00:50:55,680 --> 00:50:58,320 mal UX Ui Themen. Da haben wir gesagt, da muss CSS 1019 00:50:58,320 --> 00:51:01,840 vorher nochmal besprochen werden, aber dann dazu mehr und 1020 00:51:02,040 --> 00:51:04,320 für heute Danke fürs Zuhören und bis in 2 Wochen. 1021 00:51:04,480 --> 00:51:06,720 Danke für eure Ausdauer bis dahin. 1022 00:51:06,720 --> 00:51:10,070 Tschüss aus Hamburg. Einfach komplex wird präsentiert 1023 00:51:10,070 --> 00:51:12,710 und produziert von Highsomware. Wir freuen uns auf deine Fragen 1024 00:51:12,710 --> 00:51:15,310 und deinfeedbackanpodcast@heiseware.com 1025 00:51:15,510 --> 00:51:18,070 vielen Dank fürs Hören dieser Folge bis Dienstag in 2 Wochen 1026 00:51:18,070 --> 00:51:19,150 und Tschüss aus Hamburg.