html und css trennen?
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
arbeiten
aussehen
beispiel
bild
code
dank
datei
design
empfehlen
erstellen
fehler
gestalten
hilfe
http
leute
liegen
mache
trennen
url
vorteil
-
Es ist immer besser das CSS extra zu erstellen und dann zu verlinken. Das dient da zu das der Browser das CSS nur einmal downloaden muss (da sie gecached wird), außerdem ist es wesentlich übersichtlicher und man hat den vorteil das, wenn man ein was ändert, ändert sich alles auch auf anderen Seiten (die das selbe CSS-Document verlinkt haben)
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Html & CSS trennen!
Das heißt nicht das du nicht auch weitere Styles je Seite einsetzen kannst.
Beispiel CSS kostenlos für verschiedene Bildergrößen, Farben etc..
https://www.w3schools.com/w3css/w3css_downloads.asp
HTML 5 Aufbau mit Beispiel Metas
<!DOCTYPE html>
<head>
<meta charset="UTF-8" />
<link rel="canonical" href="http://www.example.com/" />
<meta name="robots" content="index, follow" />
<meta name="googlebot" content="index, follow, noodp, noydir" />
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
<meta name="format-detection" content="telephone=yes">
<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="152x152" href="/touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="180x180" href="/touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="/touch-icon-ipad-retina.png">
<link rel="apple-touch-startup-image" href="/launch.png">
<meta name="application-name" content="Egons Seitel"/>
<meta name="msapplication-TileImage" content="/logo/deine.png">
<meta name="msapplication-TileColor" content="#666666">
<meta name="apple-mobile-web-app-title" content="Titel deiner Seite">
<link rel="license" title="Copyright" href="/impressum.html" />
<link rel="author" title="Google+" href="https://www.google.com/+Deine Seite/" />
<link rel="Stylesheet" href="/css/screen2.css" media="print" /> //hier kann man verschieden Stylesheets einbauen
<link rel="stylesheet" href="/css/w3.css" media="screen" />
<link rel="sitemap" type="application/xml" title="Sitemap XML" href="/sitemap.xml" />
<meta name="page-topic" content="Business, Bauen, Wohnen, Haus und Garten, Shopping, Einkaufen" />
<meta name="page-type" content="Katalog, Produktinfo" />
<meta name="date" content="2017-06-12T17:49:20" />
<link rel="start" title="Zimmertüren" href="/tueren/" />
<link rel="next" title="Prüm Zimmertüren" href="/tueren/pruem/" />
<link rel="prev" title="Terrassendielen & Gartenhäuser" href="/garten/" />
<style>
.w3-circle{-webkit-box-shadow:inset 3.5px 3.5px 5px #cccccc;-ms-box-shadow:inset 3.5px 3.5px 5px #cccccc;box-shadow:inset 3.5px 3.5px 5px #cccccc;border-radius:50%!important;-webkit-animation-name:zoom;-webkit-animation-duration:0.9s;animation-name:zoom;animation-duration:0.9s;}
</style>
<title>Türen Haustüren Fenster Parkett Laminat & Möbel in Essen kaufen</title>
</head>
<body>
<img class="w3-circle" src="/logo/beispiel-logo.png" alt="solltest du bei jedem Bild haben, das alt" title="mit der Maus drüber und ein Bild Titel wird angezeigt" width="552" height="552">
<p>Noch ein Bild mit Inline CSS</p>
<img class="w3-circler" src="/logo/beispiel-logo.png" alt="solltest du bei jedem Bild haben, das alt" title="mit der Maus drüber und ein Bild Titel wird angezeigt" width="552" height="552" style="width:100%">
</body>
</html>
Der w3-cirle wird aus dem externen Stylesheet w3.css geladen, man kann mit einem Style im head Bereich die Eigenschaften überschreiben. Inline Style kann man auch verwenden.
Baut eure Seiten nicht für google, sondern für die Leser!
Nachteil bei einem externen Stylesheet ist das dieses mit der zeit riesig werden kann, und schnell das rendern der Seite nachteilig beeinflussen kann.
Daher sollte man sich immer die Frage stellen was einfacher ist. Für mich selbst ist es einfacher ein externes Stylesheet zu bearbeiten, als im Quelltest meine Inline Styles zu suchen, oder gar PHP und Javascript zu benutzen um etwas zu ändern.
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage