MP-Hobbydesign - CSS und das Aussehen ihrer Homepage (Grundlagen)

Mit einem CSS-Style können sie das Layout ihrer Webseite steuern und so zum Beispiel Bilder anordnen, Schriftgrößen und Schriftstile einstellen oder verändern. Man kann diese CSS-Styles auf verschiedene Weise einbinden.
Die erste Methode ist der direkte Einbau in die Seite (den Bereich zwischen <head> und </head>). Hier sieht ein Code wie folgt aus:

Die interne CSS-Datei

Der Code:

<HTML>
<HEAD>
 <STYLE type="text/css">
h3 { 
	color:#FF0000; 		 /* Farbe rot */
	font-family: Verdana; 	 /* Schriftart Verdana */
	size: 14px; 		 /* Schriftgröße 14 Pixel */
	text-decoration: none;  	 /* ohne Dekoration - unterstrichen, ... */
	font-weight: medium 	 /* Schriftgewicht normal */
}
 </STYLE>
</HEAD>

Weiter kann man eine externe CSS-Datei erstellen (z.Bsp.: "schrift.css"), die an dann in der Seite integriert. Hier das Beispiel:

Die externe CSS-Datei

Der Code:


h3 { 
	color:#FF0000;		/* Farbe rot */
	font-family: Verdana;	/* Schriftart Verdana */
	size: 14px;		/* Schriftgröße 14 Pixel */
	text-decoration: none;	/* ohne Dekoration - unterstrichen, ... */
	font-weight: medium	/* Schriftgewicht normal */
}

Aufruf mit: <link rel="stylesheet" type="text/css" href="schrift.css">

Das CSS-Menü:

Hier ein Beispiel für eine Navigation (Menü), mit einem Buttonbild als Hintergrund:

Der Code in der CSS-Datei: Demo

<STYLE type="text/css">
#button {
	 /* Bild des Button nächste Zeile */ vvvv           
  background-image: url(http://www.deine-seite.de/button.gif);
  width: 180; height: 25;	/* Größe des Button */
  font-family: Arial;	/* Schriftart */
  font-weight:bold;	/* Schrift-Gewicht */
  font-style:normal;	/* Schrift-Stil */
  text-decoration: none;	/* Schrift-Dekoration */
  font-size:14px;	       /* Schrift-Größe */
  color: #FF9301;	       /* Schrift-Farbe */
  padding-left: 20px;	/* Schriftabstand v. Links */
  padding-top: 4px;	/* Schriftabstand v. oben */
}
</STYLE>

Aufrufen könnt ihr den Button dann mit diesem Code:

<div id="button"><a href="seite1.html">Test</a></div>

Download:
Dieses Zip enthält alle Dateien einer Navigation wie im Beispiel

CSS-Menue.zip

6 kB
Downloads: 423

Button im 3D-Format:

Hier Beispiele für eine CSS-Formatierung von Button

Demo

Quelle: Dynamic Drive CSS library (dynamicdrive.com)

RSS XML

Seite 1 Startseite (Home) - passt sich der Länge der Bezeichnung an.

Seite 2 - mit festgelegter Länge (hier 160px)

Aufrufen könnt ihr die Button mit diesem Code:

<a href="rss.xml" class="rssbutton">RSS</a>
<a href="seite1.html" class="rssbutton">Seite 1</a>
<a href="seite2.html" class="rssbutton">Seite 2</a>

Der Code in der CSS-Datei:

<STYLE type="text/css">
 /* RSS und XML - Button */
.rssbutton{  
background-color: #ff6600;
border: 1px #ff6600 outset;
padding: 0 2px;
color: white;
text-decoration: none;
font: bold 10px Verdana;
}

.rssbutton:visited, .rssbutton:hover, .rssbutton:active{
color: white;
}

 /* Button ohne feste Länge */
.cssbutton{
background-color: #d1ec4c;
border: 2px #d1ec4c outset;
padding: 1px 4px;
color: black;
text-decoration: none;
font: bold 90% "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
}

.cssbutton:visited{
color: black;
}

.cssbutton:hover{
border-style: inset;
background-color: #e3f48e;
padding: 2px 3px 0 5px;  /*Text 1px von rechts beginnen*/
}

.cssbutton:active{
color: black;
}


 /* Button mit fester Länge */
.cssbutton1{
width: 160px;
background-color: #92AED2;
border: 2px #EEF6FE outset;
padding: 1px 4px;
color: navy;
text-decoration: none;
font: bold 90% Verdana;
}

.cssbutton1:visited{
color: navy;
}

.cssbutton1:hover{
border-style: inset;
background-color: #EEF6FE;
padding: 2px 3px 0 5px; 
}

.cssbutton1:active{
color: navy;
}
</STYLE>

Weitere Artikel und Beispiele folgen ....!

Startseiten-Link Generator

Mit diesem Tool erzeugen sie einen Link, der es ermöglicht ihre Webseite als Startseite fest zu legen.
zum Generator...

Meine CSS-Seite