Das HTML-Grundger\u00fcst ist bereits fertig und auch einem Feinschliff unterzogen. In diesem Teil des Webdesign-Workshops geht es jetzt an das CSS-Grundger\u00fcst\u2026<\/p>\n\n\n\n\n\n\n\n
Gestaltung per CSS:<\/strong><\/p>\n\n\n\n CSS steht f\u00fcr Cascading Style Sheet und damit wird der HTML Quelltext jetzt gestaltet. Die CSS-Dateien die nachfolgend erstellt werden, sollten auch bereits in der passenden Ordnerstruktur erstellt werden\u2026<\/p>\n\n\n\n In der HTML-Datei ist der Hyperlink bereits festgelegt\u2026:<\/p>\n\n\n\n Das Stylesheet, also die CSS_Datei(en) liegen in einem Ordner mit dem Namen \u201c01_CSS\u201c. Wir erstellen jetzt also diesen Ordner\u2026<\/p>\n\n\n\n In diesem Ordner soll es eine Datei mit dem Namen \u201c01_zentrale.css\u201c geben. Wir erstellen jetzt also diese Datei\u2026<\/p>\n\n\n\n Aus der zentralen CSS Datei wird auf andere CSS Dateien verlinkt, um einzelne Bereiche der Webseite zu gestalten.<\/p>\n\n\n\n @import url(02_fundament.css); Per \u201e@import url\u201c werden also sieben Dateien eingebunden. Die Dateinamen zeigen auch schon was genau diese Dateien gestalten.<\/p>\n\n\n\n Schritt f\u00fcr Schritt erzeugen und f\u00fcllen wir die entsprechenden Dateien und k\u00f6nnen dabei auch im Webbrowser die \u00c4nderungen verfolgen\u2026<\/p>\n\n\n\n Das CSS Fundament:<\/strong><\/p>\n\n\n\n Diese CSS Datei dient nur dem Reset. Alle m\u00f6glichen Stylesheets vom Browser werden damit aufgehoben. Damit legen wir eine saubere Basis f\u00fcr alle weiteren Gestaltungen.<\/p>\n\n\n\n Check im Browser: Jetzt klebt alles am Bildschirmrand, doch das wird mit den n\u00e4chsten Schritten wieder besser.<\/p>\n\n\n\n Der body-Bereich:<\/strong><\/p>\n\n\n\n Diese Datei dient nur der CSS Gestaltung des body-Bereiches. Mit \u201ebackground-color\u201c wird eine Hintergrundfarbe ausgew\u00e4hlt und mit \u201ecolor\u201c eine Schriftfarbe. Diese Schriftfarbe spielt aber keine Rolle, da innerhalb des body-Bereiches gar kein Text stehen sollte. Die Angaben f\u00fcr Schrift machen erst in \u201econtent\/textbereich\u201c und \u201eartikel\u201c Sinn.<\/p>\n\n\n\n Mit der Gestaltung des wrapper-Bereiches geht es im n\u00e4chsten Webdesign-Workshop weiter\u2026<\/p>\n","protected":false},"excerpt":{"rendered":" Das HTML-Grundger\u00fcst ist bereits fertig und auch einem Feinschliff unterzogen. In diesem Teil des Webdesign-Workshops geht es jetzt an das CSS-Grundger\u00fcst\u2026<\/p>\n","protected":false},"author":1,"featured_media":53,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[23],"class_list":["post-140","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webdesign","tag-webdesign-gruppe-peine"],"_links":{"self":[{"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/140","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/comments?post=140"}],"version-history":[{"count":1,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/140\/revisions"}],"predecessor-version":[{"id":141,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/140\/revisions\/141"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/media\/53"}],"wp:attachment":[{"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/media?parent=140"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/categories?post=140"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/tags?post=140"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
@import url(03_body.css);
@import url(04_wrapper.css);
@import url(05_kopfbereich.css);
@import url(06_navibereich.css);
@import url(07_textbereich.css);
@import url(08_artikel.css);<\/p><\/blockquote>\n\n\n\n@media all {
\/*
Diese Datei dient nur dem Reset. Padding und margin werden auf null gesetzt.
*\/
* {
padding: 0;
margin: 0;
}
html {
height: 101%;
}
} \/* Ende von @media nicht l\u00f6schen*\/<\/pre>\n\n\n\n@media all { \n\nbody { \nbackground-color: white; \ncolor: black; \n} \n\n\n} \/* Ende von @media nicht l\u00f6schen*\/<\/pre>\n\n\n\n