BRÜCKENSEMESTER Kursthema: Frontend-Entwicklung für Webapplikationen M.Sc. Anna Prenzel, Sebastian Otto
CSS Kombination von Selektoren Fakultäten Leitung Verwaltung ul.menu{…}.menu li{…}.second li{…} li#first{…} #first ul{…}
CSS Kombination von Selektoren Fakultäten Leitung Verwaltung ul.menu{…}.menu li{…}.second li{…} li#first{…} #first ul{…}
CSS Kombination von Selektoren Fakultäten Leitung Verwaltung ul.menu{…}.menu li{…}.second li{…} li#first{…} #first ul{…}
CSS Kombination von Selektoren Fakultäten Leitung Verwaltung ul.menu{…}.menu li{…}.second li{…} li#first{…} #first ul{…}
CSS Kombination von Selektoren Fakultäten Leitung Verwaltung ul.menu{…}.menu li{…}.second li{…} li#first{…} #first ul{…}
CSS Kombination von Selektoren Fakultäten Leitung Verwaltung ul.menu{…}.menu li{…}.second li{…} li#first{…} #first ul{…}
CSS Kombination von Selektoren Fakultäten Leitung Verwaltung ul.menu{…}.menu li{…}.second li{…} li#first{…} #first ul{…} Aber: Einige Festlegungen wie z.B. font-family werden auf die Kindelemente vererbt.
Semantisches HTML Schlecht: … Besser: … Gut: …
Semantisches HTML Schlecht: … Besser: … Gut: … Keine Ideen für Ids und Klassennamen Benennung nach Layout Benennung nach inhaltlicher Funktion
Semantisches HTML Problem bei Benennung nach Layout … CSS-Stylesheets sind austauschbar In einem anderen stylesheet wird das div mit der ID „links“ vielleicht oben dargestellt … und das div mit der ID „blau“ vielleicht grün… sehr verwirrend! Regel: möglichst nur die inhaltliche Funktion kennzeichnen!
Semantisches HTML Empfehlung: Aussagekräftige Bezeichnungen für Ids und Klassen Wenn möglich mit Bezug auf inhaltliche Funktion Verwendung von semantischen Tags,,,, usw. Vorteile: Code ist leicht lesbar für Sie und Ihre Kollegen Stylesheets sind leichter anpassbar Voraussetzung für barrierefreies Internet