{"id":731,"date":"2023-09-18T08:00:00","date_gmt":"2023-09-18T06:00:00","guid":{"rendered":"https:\/\/www.fuhselab.de\/?p=731"},"modified":"2024-07-24T06:12:09","modified_gmt":"2024-07-24T04:12:09","slug":"css-workshop-1","status":"publish","type":"post","link":"https:\/\/www.fuhselab.de\/index.php\/2023\/09\/18\/css-workshop-1\/","title":{"rendered":"CSS Workshop 1"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">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<!--more-->\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Gestaltung per CSS:<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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 In der HTML-Datei ist der Hyperlink bereits festgelegt\u2026:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&lt;link rel=&#8220;stylesheet&#8220; href=&#8220;01_CSS\/01_zentrale.css&#8220; type=&#8220;text\/css&#8220; \/&gt;<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Das Stylesheet, also die CSS_Datei(en) liegen in einem Ordner mit dem Namen \u201c01_CSS\u201c. Wir erstellen jetzt also diesen Ordner\u2026 In diesem Ordner soll es eine Datei mit dem Namen \u201c01_zentrale.css\u201c geben. Wir erstellen jetzt also diese Datei\u2026 Aus der zentralen CSS Datei wird auf andere CSS Dateien verlinkt, um einzelne Bereiche der Webseite zu gestalten.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@import url(02_fundament.css);\n@import url(03_body.css);\n@import url(04_wrapper.css);\n@import url(05_kopfbereich.css);\n@import url(06_navibereich.css);\n@import url(07_textbereich.css);\n@import url(08_artikel.css);<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Per \u201e@import url\u201c werden also sieben Dateien eingebunden. Die Dateinamen zeigen auch schon was genau diese Dateien gestalten. 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<p class=\"wp-block-paragraph\"><strong>Das CSS Fundament:<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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<pre class=\"wp-block-code\"><code>@media all {\n\n\/*\n\nDiese Datei dient nur dem Reset. Padding und margin werden auf null gesetzt.\n\n*\/\n\n* {\n\npadding: 0;\n\nmargin: 0;\n\n}\n\nhtml {\n\nheight: 101%;\n\n}\n\n} \/* Ende von @media nicht l\u00f6schen*\/<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Check im Browser: Jetzt klebt alles am Bildschirmrand, doch das wird mit den n\u00e4chsten Schritten wieder besser.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Der body-Bereich:<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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<pre class=\"wp-block-code\"><code>@media all {\n\nbody {\n\nbackground-color: white;\n\ncolor: black;\n\n}\n\n} \/* Ende von @media nicht l\u00f6schen*\/<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Mit der Gestaltung des wrapper-Bereiches geht es im n\u00e4chsten Webdesign-Workshop weiter\u2026<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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-731","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\/731","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=731"}],"version-history":[{"count":2,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/731\/revisions"}],"predecessor-version":[{"id":1667,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/731\/revisions\/1667"}],"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=731"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/categories?post=731"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/tags?post=731"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}