willkommen bei teil 3 wir haben die vererbung strukturen hinter uns gelassen und sind jetzt profis in der beschreibung von irgendwelchen verehrten stil anweisungen können hat also als abgehakt betrachten und nun kommen wir zu dem grandiosen bereich der und darüber aufklären warum kaskaden stylesheets eigentlich kaskade stylesheets heißen bzw dieses wort er hat mit sicherheit ein stück weit dazu beigetragen ja es ich begrüße sie einander wir fangen mit einem problem an und ich empfehle euch einmal jetzt am computer ihr vieh einmal ganz kurz pause zu drücken und euch einmal irgendwie das was ihr jetzt auf dem bildschirm sehen ist das einmal auf euch wir können last und mal versucht für euch herauszufinden welche schrift farbe das wort hund hat ja nach wie so rund wie steht man ja wie gesagt ein bisschen aufgeregt wir erinnern dass wir ganz kurz ab wir wollen herausfinden und welche schrift farbe das wort 9 hat so jetzt haben wir es dann auch denn die möglichkeiten welche schrift fahren was annehmen kann findet ihr hier und wir kennen uns haben wir vererbung strukturen aus das heißt alle diese stil anweisungen hier die hier versammelt sind finden anwendungen auf genau diesen tag drückt mal ruhig pause genau jetzt und ja ich nehme jetzt wieder weil seit dann überlegen wir war kurz also das wir lösen das beispiel erst am ende ich möchte nur kurz sein wo eigentlich die problematik liegt einfach so an und haben das typische lektoren den body und als schrift farbe rot zugewiesen im sinne der vererbung hat also alles was an tags innerhalb des bullys steht nun die schrift farbe rot folglich auch das worden im nächsten schritt haben wir eine klasse definiert die 1.1 und der klasse punkt eins haben wir die die farbe blau zugegeben wir schauen mal kurz wir haben in diesem dürfte die klasse 1 und das würde dazu führen dass ich jetzt eben dieses neuen gegebenenfalls auch in einer blauen schrift farbe zu sehen ab wir gehen immer etwas weiter unten eins raus wenn er mal hier wir haben die klasse 1 gebunden an den tag an den selektiv und dann haben wir noch die nachfragen kombinatorik heißt also für alle it takes die innerhalb einer division stehen mit der klasse 1 soll jetzt die schriftfarbe geld zugewiesen werden gut das wort mann hatte selbst die farbe rot blau oder gelb oder eben eins dieser anderen farben die hier noch zwischen stehen die erste überlegung sicher die idee und die habe ich auch im ersten video der vererbung angesprochen dass grundsätzlich gilt was in css später definiert wird überschreibt das was vorher definiert wurde das heißt dieses blau müsste theoretisch dieses rot überschreiben das tut es aber nur dann wenn ich hier als typ c lektor wieder body hin schreibe dann über schreibe ich meine ursprüngliche stil anweisung ansonsten findet nämlich diese überschreitung schreibens regelung so nicht statt das heißt in diesem fall hier arbeitet der browser nach einem speziellen regelsystem welches er für sich da irgendwie aufschlüsselt wie denn jetzt dieses wort neuen farblich dargestellt werden soll oder anders ausgedrückt welches dieser ganzen see lektoren hier angewendet werden soll und warum ist das ganze jetzt problematisch zum einen wie gesagt das war später definiert wird überschreibt das vorhergehende das funktioniert aber nur bei gleichen select ohren punkt eins ist ein anderes elektro als body nur wissen das ist eine klasse und das hier ist ein typs elektro heißt also chronologische überschreibung sind nicht das war ja auch ein bisschen so einfach da ihr könnt ihr das ganze video aufsparen überschreibung nicht möglich punkt gut nächste frage warum entscheidet er sich dann nicht ja oder wonach sollte er sich vielleicht sonst entscheiden wenn wir sagen wir haben global für den body die farbe rot definiert dann könnte man sagen okay je spezieller ich werde das heißt je näher an dem wort 9 in diesem fall wäre das vielleicht der hier haben wir aber nicht wir haben aber irgendwo g-punkt index das ist auch falsch die wehrpflicht punkt sondern p heftig index das wäre jetzt der selecta de ml die am nächsten steht ist in dieser ebene das heisst also im sinne der ebenen struktur wir die stil anweisungen angewendet die am nächsten am tag ist auch das haben wir schon mal gehört aber auch das ist hier mit ein wenig problematischeren sachen zu verstehen warum denn ich habe hier eine id festgelegt und diese id ist ja so gesehen schon relativ speziell ich will mit dieser idee etwas erreichen in diesem fall möchte ich erreichen dass die schrift farbe grün ist unten sehen wir aber dass ich zweimal die habe ich habe einmal die id rapper haben wo dies auch ein fehler drin sehe ich gerade hier muss artikel stehen sonst würde das gar nicht anwendbar sein so ich habe also einmal die rapper die gebunden ist an den artikel tags das ist das hier oben und dann sage ich habe darunter noch den index der muss aber nachfahre von genau diesem ding sein inzwischen ist also der kombinate der nachfrage der nachfahren kombinat ohr und dann würde ich sagen pink das heißt dieser weit ausgeprägteres thiele anweisung müsste doch im grunde eher gelten als das hier oben heißt also auch im sinne der ebenen hierarchie ist eine überschreibung so gesehen erst mal nicht eindeutig eigentlich auch ab und zu können im sinne der ebenen hierarchie nicht eindeutig gut jetzt könnt ihr euch zuhause vom computer vielleicht mal überlegen nach welcher reihenfolge über lichter der computer jetzt wohl wonach er denn dann welches elektro anwendet naja also wenn es sich die chronologische geschichte ist und wenn es eben auch nicht diese ebenen hier reicht es die ich ja hier nochmal dargestellt habe durch diese einzelnen linien tja wonach entscheidet der computer dem wohl dann welche der schrift haben an dieser stelle anbieten ja und die lösung es ist vermutlich jetzt auch nicht so verwunderlich lautet cascadia das heißt die kaskadierung kaskadierung die ist nichts anderes als ein computer internes oder auch cs inhärente regelsystem welches festlegt welche c leg tor nehme ich für eine spezielle stil anweisung wenn eben mehrere verschiedene stil anweisung sich widersprechen und das tun sie ja alle in diesem fall alle schriftfarbe widersprechen sich gegenseitig naja ich kannte ich sage ich habe viele anweisungen orange und ich habe es dir dabei sind blau dann muss der computer sich eben für eine der beiden entscheiden weil das geht um dieses wort 9 und beide würden für dieses wort moment gelten nicht direkt aber im sinne der vererbung stücke ja und in diesem video geht es im grunde darum kurz zu verschrieben wonach denn jetzt eigentlich dieses regelsystem arbeitet so das ist sinn und zweck der ganzen übung und die kaskadierung ist genau dieses regelsystem und dass er leute ich euch jetzt einmal ganz kurz und ihr werdet sehen das ist auch wirklich nicht schwer man muss es nur einmal strukturiert angehen jetzt kommen wir wieder nach unten sondern das sieht jetzt vielleicht wieder alles so ein bisschen will aus das regelsystem der kaskadierung ja die grundlage wonach eben der computer entscheidet welche weise angewendet wird ist eine gewichtung vorlesen also die grundlage ist die gewichtung aller vorhandenen see lektoren und dazu bestimmt der browser bei der interpretation des css code sogenannte spezifität also die gewichte spezifität ist nur im fremdwort für die gewichtung und wir haben gesagt aller vorhandenen select ohren was war das zu bedeuten nein wir rein schauen da geht es nicht darum dass wir hier alle vorhandenen elektronen von oben nach unten durch gehen sondern es geht um diese lektoren die ich hier gebaut haben wir haben ja hier typs elektronen drin 123 stück die sind halt mit dem nachfahren kombinat ohr hier verbunden aber darum geht es und die gewichte ich jetzt also bitte nicht ganz so ernst nehmen aber grunde geht es darum die stil anweisungen die die geileres elektronen hat die kriegt am ende den zuschlag naja da sieht so ein bully ganz alleine als typs elektro schon relativ weit aus gut wie genau funktioniert das jetzt wir haben für die gewichtung von selek toren vier verschiedene bereiche und der allererste bereich denen kann man hier eine schon mal so ein bisschen den klammern setzen weil wir den wirklich nur in ausnahmefällen betrachten da ist also für unsere relevanz sind nun diese 3 warum können wir den ersten als ausnahmefall betrachten weil der am höchsten gewichtete selek tor ist der select ot sich direkt im tag befindet das heißt da befinden wir uns gar nicht in der css datei und das ist eben das attribut style innerhalb eines html element und deswegen klammer wir das einmal wir haben von uns ja auch schon mal festgelegt dass es am meisten sinn macht alle stieler weisungen zentral an einer in einer externen datei zu haben und eben nicht für jede html datei selbst immer wieder eine neue style anweisung festzulegen okay was ist wohl am zweitwichtigsten bei der konstruktion von unseren gesamten see lektoren wir haben typ c lektoren wir haben klasse lektoren und wir haben dies und bei dies ist es so dass ich diese auch nur ein einziges mal in der html datei anwenden darf das heißt mit der id geht eine besondere wichtigkeit einher ich will dort schon wirklich speziell format vor anweisung des dealer weisung festlegen die ich danach auch nicht mehr in irgendeiner art und weise überschreiben deswegen ist der zweite bereich der bereich b für die id es gedacht na ja das heißt also die style elemente aus bereich würden dies überschreiben der bereich cae wiederum ist dann wieder ein wenig unspezifischer und ein wenig unspezifischer sind klassen klassen lege ich schon direkt an weil ich irgendwas speziell formatieren möchte allerdings sind dies spezifischer als klassen warum die kein mal festlegen klasse neben ja und was bleibt am ende über am ende bleiben unsere schnöseligen typ select ohren über weil die wirklich unspezifisch sind ich läge also für bohli bereich zb eigenschaften fest das ist nicht sonderlich speziell oder wenn ich sage ich habe im artikel tag und sprechen über einen typ sektor an da werden automatisch auch alle anderen artikeltext damit angesprochen es wird also relativ gering gewichtet das würde also bedeuten wenn ich jetzt eben so ein artikel tag ansprechen und sagen okay beim artikel habe ich die schriftform rot und lege später eine klasse fest dann würde diese klasse eben diesen typs elektro überschreiben warum weil die klasse höher gewichtet ist als die typs elektro darüber hinaus eine id würde klassen überschreiben und die typs e lektoren und wenn ich natürlich im tag am ende dann eine stille wahl festgelegt habe überschreibt die alles das was ich dann irgendwie in externen dateien angelegt hat er eine ähnliche form haben wir auch schon mal in der vergangenheit gesehen nein wir hatten ja mal so für uns gesagt was näher am tag ist wird als erstes angewendet da ging es aber ja darum wo kann ich sowieso überhaupt mal eine css befehle definieren und an definitions bereich war eben in dem tag wir haben dort schon gesagt wenn ich das im tag hinein schreibe dann findet auf jeden fall diese viele weisung anwendung diese würde halt eben alles über schreiben was im heckbereich steht und das was im heckbereich steht würde alles über schreiben was ihm der externen datei steht aber das ist wiederum noch eine andere geschichte hier geht es darum wer dich wirklich konkurrierende elektrorad gut also das grundprinzip sollte bis jetzt eigentlich klar sein an der die über schreibt eine klasse an der klasse über schreibt ein typ sektoren wir haben aber hier eigentlich noch ein anderes problem denn und das ist das was ich ja sagte ich habe hier eine id und ich habe ich noch eine id und diese hier könnten ja irgendwie die hierüber schreiben obwohl das doch eigentlich das gleiche ist wenn wir jetzt von heidis reden das heißt auch innerhalb von dies innerhalb von klassen innerhalb von typs elektronen muss ich eine gewichtung festlegen und das ist jetzt nicht ganz so schwierig die lösung habt ihr vielleicht schon gesehen am ende wird gezählt wie viel von welchem see lektoren vorliegen die höhe gibt an welcher select den zuschlag erhält heißt also welches dieser weisung anwendung findet und die notation wie man eben diese gewichtung aufschreiben kann das kann man für sich sichtbar machen und ich zeige im letzten video auch wo ihr eben genau diese spezifität im visual studio code einsehen könnt die sieht so aus und wir wissen orange ist also bereich rotes bereich grünes bereich cae und lila ist bereich de und wir lesen das ganze im von links nach rechts alles was weiter links steht überschreibt alles was daneben weiter rechts steht gut wir wollen das jetzt einmal an dem ausgangs beispiel theoretisch aber durchexerzieren dann denke ich ist durchaus klar wie man damit umzugehen hat und dann werden wir sicherlich auch die frage beantworten können welche farbe denn jetzt das wort main hat ich habe nämlich das ganze ding ja nochmal in klein dargestellt das ist das gleiche beispiel wie oben nur allerdings muss ich jetzt hier der richtigkeit halber zwei sachen abändern weil sonst sagen alle der koch macht videos die vollständig falsch sind oben hatte ich schon geändert machen wir das hier noch mal eben fix hier muss ein hashtag zwischen weil das eingebundene gebunden heidis und unten muss ich eben artikel schreiben und dann sollte das richtig sein und wir wollen jetzt herausfinden welche farbe hat das wort 9 und dazu wenden wir genau das gleiche regelsysteme was der browser später auch machen wird und ich habe das hier mal tabellarische aufgeschrieben alles das was wir hier sehen sind diese elektronen die oben da in den css bereich angegeben waren und ich habe hier jetzt mal kurz als spalten überschriften meine einzelnen bereiche angegeben wir haben also dem bereich dass wir die stil anweisungen innerhalb des tags definieren ich habe jetzt schon über eine million geschrieben weil das in diesem beispiel nicht der fall ist und das ist zwar schon uns auch in den meisten fällen nicht der fall und auch in visual studio kohl werdet ihr nur die diese drei finden danach haben wir die idee die class und den typs elektro gut und wir schreiben jetzt immer die zahl dahin das heißt die anzahl des bereichs dingens hier wie häufig eben der einzige bereich in dem ganzen sektor wochen gültig fangen wir mal an wir schauen uns an die bereich der id haben wir diesem see lektorieren wohnen nein haben wir nicht deswegen schreiben wir hier haben wir dieses elektro irgendwo eine klasse ich sehe jetzt keine nein haben wir nicht also schreiben wir eine nullen haben wir in diesem bereich einen typ selek tor und jetzt müssen alle alarmglocken klingeln den haben wir weil body ist nun mal ein typ c lektor und es schrie beschreiben wir hier 10 1 dh die gewichtung des ersten direktors ist 000 1 na ja also wir können sie klammern umsätzen komma komma komma und dann haben wir auch genau die notationen die wir oben immer schauen wir uns im nächsten fall ist das ja eine idee nein könnte man überlegen ist das eine klasse ja und da werde ich mir zu hause wahrscheinlich alle vom rechner gesagt haben ja ist es deswegen schreiben wir nur eins sind hier steht ein punkt vor danach ein willkürlicher name punkte willkürlicher name bedeutet das ist eine klasse frage ist dass er jetzt ein typ select das ist kein chip sektor deswegen strand wir hinten an der null aber zu noch mal zu und damit habe ich jetzt diese gewichtung wir sehen also schon wir haben ihren ermitteln a1 hier am ende und wenn man sich das komm mal weg denken würde achtung das darf man sich nur wegdenken das ist keine mathematische richtigkeit 10 würde höher als 1 sein wir haben also eine höhere gewichtung hätten wir nur diese beiden würde diese klasse angemeldet werden gott nächster fall wir sehen uns den see lektor ahnung was wir haben ist eben eine id eine idee es weder eine klasse noch ein typ select also können wir hier in schreiben 1,00 klammer zu und wenn ich jetzt nur diese drei hätte würde das wort 9 also in der farbe orange dort stehen so jetzt wird es ein bisschen differenzierter also das ist quasi die drei dinger die solide einfachsten sind und wir wissen eben das klassen überschreiben klassen in rom typs elektronen und so weiter und so fort jetzt habe ich aber ein bisschen was anderes wir zählen aber weiter ganz normal durch so wie wir sonst auch gemacht haben und schauen uns hier an habe ich in diesem ding irgendwo eine ip versteckt nein habe ich nicht ich finde dort keine raupe also habe ich in diesem ding denn irgendwo eine klasse versteckt ich sehe gerade naja ich habe das hier oben abgeändert in klein das muss ich natürlich ja auch abändern ja ich bin auch so ein idiot nicht dass wir uns also wundern warum ist die falsche anweisungen an gewinnen wird so jetzt soll es aber korrekt zu annullieren wie dir ich noch mal das was ich gerade gesagt habe haben wir hier drin eine id jetzt klingen die alarmglocken ja wir haben eine idee warum ihr steht ein hashtag und dahinter ein willkürlicher name das heißt wir haben eine idee schreiben also bei der id einer einzelnen so weitergeht haben wir in diesem ding irgendwo eine klasse also irgendwas mit punkt und einem namen punkt sind wir nicht wir haben keine klasse also schreiben wir bei der klasse null komma nix bereich haben wir irgendwo ein typ c lektor und dort haben wir hier ein ppp steht vor dem index index ist angebunden an sich ist aber ein typ select deswegen schreibt wir hinten jetzt in eine 1 dh das ist die gewichtung für diesen sektor und was wir jetzt schon sehen ist wir haben mit 101 eine höhere gewichtung als 100 das heißt das wort 9 erscheint in grün gut nächster bereich haben wir eine id nein wir sehen keinen hashtag haben wir hier eine klasse was mit punkt name nein haben wir auch nicht haben wir typ sektoren ich hab mir haben artikel ist ein typischer lektor ul ist ein typs elektro rallye ist ein typ sein lektor heißt also wir haben drei typs elektronen heißt die gewichtung ist 0,003 tiefsee lektoren klammer zu naja die kommt natürlich nicht gegen denen darüber an weil vorher zwei nullen haben schauen uns im nächsten bereich an wir haben wir haben punkt eins und wir haben einen lauf und sind zwei typ c lektoren wie notieren eine 2 punkt eins ist ein klassen selecta heißt wir schreiben also bei der klasse hin 1 haben wir jetzt noch ihr wo eine id nein haben wir nicht deswegen schreiben wir hier eine null in die gewichtung ist also 0,0 0,0 1,2 das heißt bislang bleibt das wort 9 in der farbe grün denn das ding hier hat die höchste gewichtung gut schauen wir uns den letzten apparat noch mal an welche spezifität hier vorliegt haben wir es und wir haben die rapper wir haben die id index das heißt hier schreiben wir eine 2 haben wir klassen select ohren finden wir irgendwas wir punkt lobt daher eine 0 und haben wir ihren typ c lektoren ja wohl vorne steht ein artikel artikel des typs elektro schreiben eine einzelne wir haben also eine gewichtung von 20 und 1 und mit 2 0 und 1 schlagen wir die bis dato angewandte regelung hier mit der 101 weil wir hier eine id mehr haben heißt also dieser ganze apparat hier ist spezieller als die apparate davor heißt also dieses ding hier bekommt also dieses ziel anweisung bekommt den zuschlag und damit erscheint das wort main in einem pink und das ist die ganze kunst der kaskadierung und es empfiehlt sich in diesem fall eben das ganze so tabellarisch aufzubauen und dann eben zu ermitteln wie hoch ist die spezifität und die spezifität ist immer die darstellung in klammern mit diesen vier zahlen und je weiter links die höchste zahl steht desto besser ist das ganze und das ich euch jetzt hier keinen mucks erzählt habe zeige ich euch dann gleich nochmal in vielen video kurz und knapp und dort zeige ich euch dann auch noch mal wie man eigentlich in visual studio die spezifität eines elektro sich an gelassen kann und zusammen mit vererbung und kaskadierung und kombinat ohren kann man wirklich schon sehr effizient arbeiten und das sieht dann auch schon wirklich magic aus was ihr dann in teilen für euch zu recht gestalten könnte