Präsentation herunterladen
Die Präsentation wird geladen. Bitte warten
1
BRÜCKENSEMESTER Kursthema: Frontend-Entwicklung für Webapplikationen M.Sc. Anna Prenzel, Sebastian Otto
2
CSS Kombination von Selektoren Fakultäten Leitung Verwaltung ul.menu{…}.menu li{…}.second li{…} li#first{…} #first ul{…}
3
CSS Kombination von Selektoren Fakultäten Leitung Verwaltung ul.menu{…}.menu li{…}.second li{…} li#first{…} #first ul{…}
4
CSS Kombination von Selektoren Fakultäten Leitung Verwaltung ul.menu{…}.menu li{…}.second li{…} li#first{…} #first ul{…}
5
CSS Kombination von Selektoren Fakultäten Leitung Verwaltung ul.menu{…}.menu li{…}.second li{…} li#first{…} #first ul{…}
6
CSS Kombination von Selektoren Fakultäten Leitung Verwaltung ul.menu{…}.menu li{…}.second li{…} li#first{…} #first ul{…}
7
CSS Kombination von Selektoren Fakultäten Leitung Verwaltung ul.menu{…}.menu li{…}.second li{…} li#first{…} #first ul{…}
8
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.
9
Semantisches HTML Schlecht: … Besser: … Gut: …
10
Semantisches HTML Schlecht: … Besser: … Gut: … Keine Ideen für Ids und Klassennamen Benennung nach Layout Benennung nach inhaltlicher Funktion
11
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!
12
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
Ähnliche Präsentationen
