Tutorialwelt.de » CSS Anfänger http://www.tutorialwelt.de Tutorials aus der IT-Welt Sat, 22 May 2010 13:24:43 +0000 http://wordpress.org/?v=2.8.6 en hourly 1 CSS Tutorial mit Video – Hintergrund für Internet Seite erstellen http://www.tutorialwelt.de/514/css-tutorial-mit-video-hintergrund-fur-internet-seite-erstellen.htm http://www.tutorialwelt.de/514/css-tutorial-mit-video-hintergrund-fur-internet-seite-erstellen.htm#comments Wed, 27 Jan 2010 11:00:17 +0000 admin http://www.tutorialwelt.de/?p=514 bgpatterns.com www.tartanmaker.com www.stripegenerator.com gradient-maker.com Letzteres ist eine Seite mit der man Farbverläufe generieren kann. Dazu später mehr. Ein Bild, daß man mit den ersten drei Seiten generiert und heruntergealden hat kann man mit folgendem Code in den Hintergrund der eigenen Seite einbinden.... Related posts:
  1. Webdesign Tutorial – Farbverlauf für den Hintergrund einer Webseite erstellen Es gibt verschiedene Möglichkeiten einen Farbverlauf für den Hintergrund seiner...
  2. CSS – Tutorial – die Hintergrundfarbe per CSS ändern Heute möchte ich Ihnen zeigen, wie Sie per CSS die...
  3. HTML Tutorial mit Video – Der Quirks Modus und margin auto im Internet Explorer Wer schon einmal versucht hat, im Internet Explorer Divs per...
Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.]]> CSS Tutorial – Hintergrund für Internet Seite erstellen

Hier können Sie das Video in voller Größe ansehen

Um einen Hintergrund für eine Webseite zu erstellen kann man verschiedene kostenlose Internet-Dienste nutzen:

Diese Seiten kann ich empfehlen:
bgpatterns.com
www.tartanmaker.com
www.stripegenerator.com
gradient-maker.com

Letzteres ist eine Seite mit der man Farbverläufe generieren kann. Dazu später mehr.

Ein Bild, daß man mit den ersten drei Seiten generiert und heruntergealden hat kann man mit folgendem Code in den Hintergrund der eigenen Seite einbinden:

Beispielcode HTML:

<html>
 <head>
  <style type="text/css">
   body {
                 background: url('derdateiname.jpg');
   }
  </style>
 </head>
 <body>
 </body>
</html>

Verwendet man den letzten Link zur Erstellung eines Farbverlaufes muss man noch ein repeat-x in das CSS mit einfügen:

Beispielcode HTML:

<html>
 <head>
  <style type="text/css">
   body {
                 background: url('derdateiname.jpg') repeat-x;
   }
  </style>
 </head>
 <body>
 </body>
</html>

Damit man einen sauberen Übergang zu der eigentlichen Hintergrundfarbe bekommt sollte man noch den unteren Farbwert des Farbverlaufes in den Background mit einfügen:

Beispielcode HTML:

<html>
 <head>
  <style type="text/css">
   body {
                 background: #ffffff url('derdateiname.jpg') repeat-x;
   }
  </style>
 </head>
 <body>
 </body>
</html>

Hier habe ich die Farbe weiss gewählt.

Wenn man repat-y eingibt, wird das Hintergrund-Bild vertikal wiederholt.

Beispielcode HTML:

<html>
 <head>
  <style type="text/css">
   body {
                 background: #ffffff url('derdateiname.jpg') repeat-y;
   }
  </style>
 </head>
 <body>
 </body>
</html>

repeat-x und repeat-y kann man nicht miteinander kombinieren. Vesuchen Sie es aus. Sie werden keinen Hintergrund zu sehen bekommen.

Beispielcode HTML:

<html>
 <head>
  <style type="text/css">
   body {
                 background: #ffffff url('derdateiname.jpg') repeat-x repeat-y;
   }
  </style>
 </head>
 <body>
 </body>
</html>

Related posts:

  1. Webdesign Tutorial – Farbverlauf für den Hintergrund einer Webseite erstellen Es gibt verschiedene Möglichkeiten einen Farbverlauf für den Hintergrund seiner...
  2. CSS – Tutorial – die Hintergrundfarbe per CSS ändern Heute möchte ich Ihnen zeigen, wie Sie per CSS die...
  3. HTML Tutorial mit Video – Der Quirks Modus und margin auto im Internet Explorer Wer schon einmal versucht hat, im Internet Explorer Divs per...

Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.

]]> http://www.tutorialwelt.de/514/css-tutorial-mit-video-hintergrund-fur-internet-seite-erstellen.htm/feed 0 CSS – Tutorial – die Hintergrundfarbe per CSS ändern http://www.tutorialwelt.de/480/css-tutorial-die-hintergrundfarbe-per-css-andern.htm http://www.tutorialwelt.de/480/css-tutorial-die-hintergrundfarbe-per-css-andern.htm#comments Thu, 21 Jan 2010 21:45:47 +0000 admin http://www.tutorialwelt.de/?p=480
  • CSS-Tutorial – Wie man per CSS die Schriftgröße ändern kann Heute möchte ich Euch zeigen, wie man per CSS die...
  • Per CSS Schriftfarben ändern Heute möchte ich Euch zeigen, wie man per CSS die...
  • CSS Tutorial mit Video – Hintergrund für Internet Seite erstellen Um einen Hintergrund für eine Webseite zu erstellen kann man...
    • Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.]]>     CSS – Tutorial – die Hintergrundfarbe per CSS ändern

    Heute möchte ich Ihnen zeigen, wie Sie per CSS die Hintergrundfarbe ändern können.

    Um auf die Hintergrund-Eigenschaften zurückgreifen zu können, müssen wir den background (engl. Hintergrund) eines Elementes ansprechen. In unserem Beispiel nehme ich den Body.

    Beispielcode HTML:

    <html>
 <head>
  <style type="text/css">
   body {
                 background: #cccccc;
   }
  </style>
 </head>
 <body>
   Diese komplette Seite sollte nun grau sein
 </body>
</html>



    Nun sollte der Hintergrund der Seite grau sein.

    Man kann auch den Hintergrund eines DIV-Containers ändern:

    Beispielcode HTML:

    <html>
 <head>
  <style type="text/css">
   #inhalt_div {
                 background: #cccccc;
   }
  </style>
 </head>
 <body>
  <div id="inhalt_div">
     Dieser Div Container sollte nun einen grauen Hintergrund haben.
  </div>
 </body>
</html>



    Sie sehen: Es ist ganz einfach per CSS einem Element eine Hintergrundfarbe zuzuweisen.

    Related posts:

    1. CSS-Tutorial – Wie man per CSS die Schriftgröße ändern kann Heute möchte ich Euch zeigen, wie man per CSS die...
    2. Per CSS Schriftfarben ändern Heute möchte ich Euch zeigen, wie man per CSS die...
    3. CSS Tutorial mit Video – Hintergrund für Internet Seite erstellen Um einen Hintergrund für eine Webseite zu erstellen kann man...

    Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.

    ]]>     http://www.tutorialwelt.de/480/css-tutorial-die-hintergrundfarbe-per-css-andern.htm/feed 0     CSS-Tutorial – Text per CSS horizontal ausrichten http://www.tutorialwelt.de/462/css-text-horizontal-ausrichten.htm http://www.tutorialwelt.de/462/css-text-horizontal-ausrichten.htm#comments Mon, 23 Nov 2009 23:08:52 +0000 admin http://www.tutorialwelt.de/?p=462
  • CSS-Tutorial – per CSS Text unterstreichen und durchstreichen – text-decoration Heute möchte ich Ihnen zeigen, wie man per CSS einen...
  • CSS Tutorial – Per CSS einen Text doppelt unterstreichen Heute möchte ich Ihnen zeigen, wie Sie per CSS einen...
  • CSS-Tutorial per CSS Text in Fettschrift umformatieren Heute möchte ich Euch zeigen, wie man per CSS einen...
    • Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.]]>     CSS-Tutorial – per CSS einen Text horizontal ausrichten

    Heute möchte ich Ihnen zeigen, wie Sie per CSS einen Text horizontal ausrichten können.

    Hierzu verwenden wir die CSS-Eigenschaft text-align.

    Diese Eigenschaft kann drei Werte annehmen:

    • left – linksbündig
    • center – zentriert
    • right – rechtsbündig

    Hierzu ein Beispiel:

    Beispielcode HTML:

    <html>
 <head>
  <style type="text/css">
   .linksbuendig {
                  text-align: left;
   }
   .rechtsbuendig {
                  text-align: right;
   }
   .zentriert {
                  text-align: center;
   }
  </style>
 </head>
 <body>
  <div class="linksbuendig">Dieser Text sollte linksbündig sein.</div>
  <div class="zentriert">Dieser Text sollte zentriert sein.</div>
  <div class="rechtsbuendig">Dieser Text sollte rechtsbündig sein.</div>
 </body>
</html>




    Mit dieser Methode können Sie nicht nur Texte, sondern auch Bilder, Container (eigentlich alles) ausrichten.

    Related posts:

    1. CSS-Tutorial – per CSS Text unterstreichen und durchstreichen – text-decoration Heute möchte ich Ihnen zeigen, wie man per CSS einen...
    2. CSS Tutorial – Per CSS einen Text doppelt unterstreichen Heute möchte ich Ihnen zeigen, wie Sie per CSS einen...
    3. CSS-Tutorial per CSS Text in Fettschrift umformatieren Heute möchte ich Euch zeigen, wie man per CSS einen...

    Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.

    ]]>     http://www.tutorialwelt.de/462/css-text-horizontal-ausrichten.htm/feed 0     CSS Tutorial – Per CSS einen Text doppelt unterstreichen http://www.tutorialwelt.de/455/css-tutorial-per-css-einen-text-doppelt-unterstreichen.htm http://www.tutorialwelt.de/455/css-tutorial-per-css-einen-text-doppelt-unterstreichen.htm#comments Sun, 22 Nov 2009 23:32:22 +0000 admin http://www.tutorialwelt.de/?p=455
  • CSS-Tutorial – per CSS Text unterstreichen und durchstreichen – text-decoration Heute möchte ich Ihnen zeigen, wie man per CSS einen...
  • CSS-Tutorial – Text per CSS horizontal ausrichten Heute möchte ich Ihnen zeigen, wie Sie per CSS einen...
  • CSS Tutorial – Per CSS Text in Schrägschrift darstellen – italic, oblique Heute möchte ich Euch zeigen, wie man per CSS einen...
    • Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.]]>     CSS-Tutorial – per CSS einen Text doppelt unterstreichen

    Heute möchte ich Ihnen zeigen, wie Sie per CSS einen Text doppelt unterstreichen können.

    CSS hat hierzu keine eigene Methode. Zumindest bislang noch nicht.

    Es gibt allerdings trotzdem eine Möglichkeit, einen Text per CSS doppelt zu unterstreichen. Wir setzen hierzu die Eigenschaft border ein.

    Border verwendet man, um Rahmenlinien (beispielsweise bei einer Tabelle) zu zeichnen.

    Mit border-bottom kann man per CSS festlegen, daß man NUR die untere Randlinie bearbeiten möchte.

    Eine border Eigenschaft kann den Wert double haben. Der Wert double legt fest, daß eine doppelte Linie gezogen werden soll.

    Den Text, den wir doppelt unterstreichen möchten, setzen wir in einen Span Container.

    Beispielcode HTML:

    <html>
 <head>
  <style type="text/css">
   .double_underline {
                  border-bottom: double 3px #000000;
   }
  </style>
 </head>
 <body>
  Ich möchte <span class="double_underline">diesen Text doppelt unterstrichen haben</span>.
 </body>
</html>

    Ich habe diese Lösung im aktuellen Firefox, Opera und Internet Explorer getestet. Es hat in allen drei Browsern einwandfrei funktioniert.

    Related posts:

    1. CSS-Tutorial – per CSS Text unterstreichen und durchstreichen – text-decoration Heute möchte ich Ihnen zeigen, wie man per CSS einen...
    2. CSS-Tutorial – Text per CSS horizontal ausrichten Heute möchte ich Ihnen zeigen, wie Sie per CSS einen...
    3. CSS Tutorial – Per CSS Text in Schrägschrift darstellen – italic, oblique Heute möchte ich Euch zeigen, wie man per CSS einen...

    Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.

    ]]>     http://www.tutorialwelt.de/455/css-tutorial-per-css-einen-text-doppelt-unterstreichen.htm/feed 0     CSS-Tutorial – per CSS Text unterstreichen und durchstreichen – text-decoration http://www.tutorialwelt.de/441/css-tutorial-text-decoration.htm http://www.tutorialwelt.de/441/css-tutorial-text-decoration.htm#comments Sat, 21 Nov 2009 23:31:47 +0000 admin http://www.tutorialwelt.de/?p=441 per CSS einen Text durchstreichen, unterstreichen und überstreichen kann. Hierzu verwendet man die CSS Eigenschaft text-decoration. Für text-decoration gibt es fünf mögliche Werte.... Related posts:
    1. CSS Tutorial – Per CSS einen Text doppelt unterstreichen Heute möchte ich Ihnen zeigen, wie Sie per CSS einen...
    2. CSS-Tutorial per CSS Text in Fettschrift umformatieren Heute möchte ich Euch zeigen, wie man per CSS einen...
    3. CSS Tutorial – Per CSS Text in Schrägschrift darstellen – italic, oblique Heute möchte ich Euch zeigen, wie man per CSS einen...
    Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.]]>     CSS-Tutorial – per CSS Text unterstreichen und durchstreichen

    text-decoration

    Heute möchte ich Ihnen zeigen, wie man per CSS einen Text durchstreichen, unterstreichen und überstreichen kann.

    Hierzu verwendet man die CSS Eigenschaft text-decoration.

    Für text-decoration gibt es fünf mögliche Werte:

    • none – Ohne besondere Eigenschaft
    • underline – Der Text wird unterstrichen
    • overline – Der Text wird überstrichen
    • line-through – Der Text wird durchgestrichen
    • blink – Der Text blinkt

    Hier ein Beispielcode:

    Beispielcode HTML:

    <html>
 <head>
  <style type="text/css">
   .unterstrichen { text-decoration:underline; }
   .ueberstrichen { text-decoration:overline; }
   .durchgestrichen { text-decoration:line-through; }
   .blinkend { text-decoration:blink; }
  </style>
 </head>
 <body>
   Von diesem Text möchte ich folgende Passage in unterstrichen anzeigen lassen:<br>
   <span class="unterstrichen">Dieser Text sollte unterstrichen sein</span><br>
   <span class="ueberstrichen">Dieser Text sollte überstrichen sein</span><br>
   <span class="durchgestrichen">Dieser Text sollte durchgestrichen sein</span><br>
   <span class="blinkend">Dieser Text sollte blinken. Aber nicht im internet Explorer. Denn der Internet Explorer kennt den Wert blink nicht.</span><br>
 </body>
</html>

    Related posts:

    1. CSS Tutorial – Per CSS einen Text doppelt unterstreichen Heute möchte ich Ihnen zeigen, wie Sie per CSS einen...
    2. CSS-Tutorial per CSS Text in Fettschrift umformatieren Heute möchte ich Euch zeigen, wie man per CSS einen...
    3. CSS Tutorial – Per CSS Text in Schrägschrift darstellen – italic, oblique Heute möchte ich Euch zeigen, wie man per CSS einen...

    Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.

    ]]>     http://www.tutorialwelt.de/441/css-tutorial-text-decoration.htm/feed 0     CSS Tutorial – Per CSS Text in Schrägschrift darstellen – italic, oblique http://www.tutorialwelt.de/434/css-tutorial-per-css-text-in-schragschrift-darstellen-italic-oblique.htm http://www.tutorialwelt.de/434/css-tutorial-per-css-text-in-schragschrift-darstellen-italic-oblique.htm#comments Sat, 21 Nov 2009 03:44:44 +0000 admin http://www.tutorialwelt.de/?p=434
  • CSS-Tutorial – per CSS Text unterstreichen und durchstreichen – text-decoration Heute möchte ich Ihnen zeigen, wie man per CSS einen...
  • CSS-Tutorial per CSS Text in Fettschrift umformatieren Heute möchte ich Euch zeigen, wie man per CSS einen...
  • CSS Tutorial – Per CSS einen Text doppelt unterstreichen Heute möchte ich Ihnen zeigen, wie Sie per CSS einen...
    • Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.]]>     CSS-Tutorial – Per CSS Text in Schrägschrift darstellen

    italic und oblique

    Heute möchte ich Euch zeigen, wie man per CSS einen Text in einer Schrägschrift anzeigen lassen kann.

    Hierzu verwendet man einfach den CSS Befehl font-style.

    Zum font-style gibt es drei mögliche Werte:

    • normal – ein Text ohne Schrägschrift
    • italic – ein Text mit Schrägschrift
    • oblique – ein Text mit Schrägschrift

    Jetzt werden Sie sich denken: Moment mal… Hier hat der Autor sich doch vertippt. Bei italic und oblique hat er beidesmal “ein Text mit Schrägschrift geschrieben”.

    Nein!

    Ich bin nicht verwirrt.

    Tatsächlich gibt es keinen optischen Unterschied zwischen beidem, wie Sie gleich in dem Beispiel sehen werden.

    Eigentlich benötigt man oblique nicht wirklich. Es gibt Schriftarten, die nur mit dem Wert oblique in eine Schrägschrift gesetzt werden können. Die Browser erkennen dies allerdings und ändern in einem solchen Fall automatisch den Wert von italic auf oblique.

    Somit genügt es voll und ganz, einen Text, der in einer Schrägschrift dargestellt werden soll, mit dem Wert italic zu belegen:

    Beispielcode HTML:

    <html>
 <head>
  <style type="text/css">
   #italictext { font-style:italic; }
   #obliquetext { font-style:oblique; }
  </style>
 </head>
 <body>
   Von diesem Text möchte ich folgende Passage in Schrägschrift anzeigen lassen:<br>
   <span id="italictext">Dieser Text sollte in einer Schrägschrift dargestellt sein</span>
   <span id="obliquetext">Auch dieser Text sollte in einer Schrägschrift dargestellt sein</span>
 </body>
</html>

    Related posts:

    1. CSS-Tutorial – per CSS Text unterstreichen und durchstreichen – text-decoration Heute möchte ich Ihnen zeigen, wie man per CSS einen...
    2. CSS-Tutorial per CSS Text in Fettschrift umformatieren Heute möchte ich Euch zeigen, wie man per CSS einen...
    3. CSS Tutorial – Per CSS einen Text doppelt unterstreichen Heute möchte ich Ihnen zeigen, wie Sie per CSS einen...

    Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.

    ]]>     http://www.tutorialwelt.de/434/css-tutorial-per-css-text-in-schragschrift-darstellen-italic-oblique.htm/feed 0     CSS-Tutorial per CSS Text in Fettschrift umformatieren http://www.tutorialwelt.de/415/css-tutorial-per-css-text-in-fettschrift-umformatieren.htm http://www.tutorialwelt.de/415/css-tutorial-per-css-text-in-fettschrift-umformatieren.htm#comments Fri, 20 Nov 2009 16:34:20 +0000 admin http://www.tutorialwelt.de/?p=415
  • CSS-Tutorial – per CSS Text unterstreichen und durchstreichen – text-decoration Heute möchte ich Ihnen zeigen, wie man per CSS einen...
  • CSS Tutorial – Per CSS Text in Schrägschrift darstellen – italic, oblique Heute möchte ich Euch zeigen, wie man per CSS einen...
  • CSS Tutorial – Per CSS einen Text doppelt unterstreichen Heute möchte ich Ihnen zeigen, wie Sie per CSS einen...
    • Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.]]>     CSS-Tutorial per CSS Schrift in Fettschrift anzeigen

    Heute möchte ich Euch zeigen, wie man per CSS einen Text in Fettschrift umformatieren kann.

    Hierzu verwendet man einfach den CSS Befehl font-weight:bold;.

    Font-weight bedeutet auf deutsch Schriftsatz-Gewicht.

    Beispielcode HTML:

    <html>
 <head>
  <style type="text/css">
   #boldtext { font-weight:bold; }
  </style>
 </head>
 <body>
   Von diesem Text möchte ich folgende Passage in Fettschrift anzeigen lassen:<br>
   <span id="boldtext">Dieser Text sollte fett gedruckt sein</span>
 </body>
</html>

    Related posts:

    1. CSS-Tutorial – per CSS Text unterstreichen und durchstreichen – text-decoration Heute möchte ich Ihnen zeigen, wie man per CSS einen...
    2. CSS Tutorial – Per CSS Text in Schrägschrift darstellen – italic, oblique Heute möchte ich Euch zeigen, wie man per CSS einen...
    3. CSS Tutorial – Per CSS einen Text doppelt unterstreichen Heute möchte ich Ihnen zeigen, wie Sie per CSS einen...

    Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.

    ]]>     http://www.tutorialwelt.de/415/css-tutorial-per-css-text-in-fettschrift-umformatieren.htm/feed 0     CSS-Tutorial – Wie man per CSS die Schriftgröße ändern kann http://www.tutorialwelt.de/418/css-tutorial-wie-man-per-css-die-schriftgrose-andern-kann.htm http://www.tutorialwelt.de/418/css-tutorial-wie-man-per-css-die-schriftgrose-andern-kann.htm#comments Fri, 20 Nov 2009 14:35:48 +0000 admin http://www.tutorialwelt.de/?p=418 per CSS die Schriftgröße ändern kann. Hierzu verwendet man einfach den CSS Befehl font-size:16px;. Als Größenordnungen sind:
    • px für Pixel
    • % für Prozente
    • und em
    möglich..... Related posts:
    1. CSS-Tutorial – Größeneinheiten – Unterschied Pixel, Prozent, em Heute möchte ich Euch den unterschied der verschiedenen Größeneinheiten erklären....
    2. CSS Tutorial – Per CSS einen Text doppelt unterstreichen Heute möchte ich Ihnen zeigen, wie Sie per CSS einen...
    3. Per CSS Schriftfarben ändern Heute möchte ich Euch zeigen, wie man per CSS die...
    Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.]]>     CSS-Tutorial – Wie man per CSS die Schriftgröße ändern kann

    Heute möchte ich Euch zeigen, wie man per CSS die Schriftgröße ändern kann.

    Hierzu verwendet man einfach den CSS Befehl font-size:16px;.

    Als Größenordnungen sind:

    • px für Pixel
    • % für Prozente
    • und em

    möglich.

    Eine Erklärung dieser 3 Größeneinheiten können Sie hier nachlesen:

    CSS-Tutorial – Größeneinheiten – px, %, em

    Beispielcode HTML:

    <html>
 <head>
  <style type="text/css">
   #doublesizedtext { font-size:16px; }
  </style>
 </head>
 <body>
   Von diesem Text möchte ich folgende Passage doppelt so groß anzeigen lassen:<br>
   <span id="doublesizedtext">Dieser Text sollte doppelt so groß sein, wie der vorige</span>
 </body>
</html>

    Als nächstes präsentiere ich Euch, wie man einen Text per CSS in eine Fettschrift umformatieren kann.

    Related posts:

    1. CSS-Tutorial – Größeneinheiten – Unterschied Pixel, Prozent, em Heute möchte ich Euch den unterschied der verschiedenen Größeneinheiten erklären....
    2. CSS Tutorial – Per CSS einen Text doppelt unterstreichen Heute möchte ich Ihnen zeigen, wie Sie per CSS einen...
    3. Per CSS Schriftfarben ändern Heute möchte ich Euch zeigen, wie man per CSS die...

    Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.

    ]]>     http://www.tutorialwelt.de/418/css-tutorial-wie-man-per-css-die-schriftgrose-andern-kann.htm/feed 0     CSS-Tutorial – Größeneinheiten – Unterschied Pixel, Prozent, em http://www.tutorialwelt.de/420/css-tutorial-groseneinheiten-unterschied-pixel-prozent-em.htm http://www.tutorialwelt.de/420/css-tutorial-groseneinheiten-unterschied-pixel-prozent-em.htm#comments Fri, 20 Nov 2009 14:25:37 +0000 admin http://www.tutorialwelt.de/?p=420
  • CSS-Tutorial – Wie man per CSS die Schriftgröße ändern kann Heute möchte ich Euch zeigen, wie man per CSS die...
  • CSS Tutorial – Per CSS einen Text doppelt unterstreichen Heute möchte ich Ihnen zeigen, wie Sie per CSS einen...
  • CSS-Tutorial – per CSS Text unterstreichen und durchstreichen – text-decoration Heute möchte ich Ihnen zeigen, wie man per CSS einen...
    • Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.]]>     CSS-Tutorial – Größeneinheiten – Unterschied Pixel, Prozent, em

    Heute möchte ich Euch den unterschied der verschiedenen Größeneinheiten erklären.

    Wer sich mit HTML und CSS beschäftigt wird sehr früh auf die Größeneinheiten px, % und em stoßen.
    Jeder hat sich dann gefragt, was beispielsweise ein EM sein soll. Das hat nichts mit Fussball zu tun.

    Um sich an dieses Thema heranzutasten, beginnen wir mit einem ganz einfachen Text:

    Beispielcode HTML:

    <html>
 <head>
 </head>
 <body>
   Ein Standardtext in einer Standardschriftgröße.
 </body>
</html>

    Diesem Text stellen wir jetzt einfach mal einen Text gegenüber, der die Größe von 26 Pixeln hat.

    Ich werde bewusst den CSS Code in den Body integrieren. Anfängern fällt es so leichter, zu verstehen, was passiert.

    Beispielcode HTML:

    <html>
 <head>
 </head>
 <body>
   Ein Standardtext in einer Standardschriftgröße. <span style="font-size: 26px;">Zum Vergleich einen Text in der Größe 26px!</span>
 </body>
</html>

    Sie sehen, daß der zweite Text wesentlich viel größer sein sollte, als der Standardtext.

    Nun werden wir einen Text in einer prozentualen Größe darstellen:

    Beispielcode HTML:

    <html>
 <head>
 </head>
 <body>
   Ein Standardtext in einer Standardschriftgröße. <span style="font-size: 50%;">Zum Vergleich einen Text in der Größe 50%!</span>
 </body>
</html>

    Der Text sollte nun genau halb so groß sein, wie der Standardtext.

    Und nun werden wir mal 1em austesten:

    Beispielcode HTML:

    <html>
 <head>
 </head>
 <body>
   Ein Standardtext in einer Standardschriftgröße. <span style="font-size: 1em;">Zum Vergleich einen Text in der Größe 1em!</span>
 </body>
</html>

    Hier hat sich nun nichts verändert. Man sieht, daß 1em gleich der Standardgröße des übergeordneten Containers ist. In unserem Beispiel ist dies der Body und somit die Standardgröße des HTML Dokumentes.

    Ein Container kann das HTML Dokument, der Body Bereich, ein DIV, ein Span etc. sein.

    Um das nun mal ein wenig zu konkretisieren, werden wir nun ein kleines Experiment durchführen. Nach diesem Beispiel wird jeder verstanden haben, was der Unterschied zwischen den Größen ist und wie die Abhängigkeiten zu den Containern sind.

    Beispielcode HTML:

    <html>
 <head>
 </head>
 <body>
   Dieser Text ist hat die Standardgröße. Der übergeordnete Container ist der Body!<br>
   <span style="font-size: 50%;">Dieser Text ist nur halb so groß wegen der Einstellung font-size: 50%! Die 50% orientieren sich an der Einstellung des Bodys.</span>
   <span style="font-size: 2em;">und dieser Text ist doppelt so groß wegen der Einstellung font-size: 2em! Die 2em orientieren sich an ebenfalls an der Einstellung des Bodys</span>
 </body>
</html>

    Um das Ganze noch mehr zu verdeutlichen, werden wir nun die Schirftgröße des Bodys mal ändern und schauen, was dann passiert:

    Beispielcode HTML:

    <html>
 <head>
 </head>
 <body style="font-size: 26px;">
   Dieser Text ist hat die Standardgröße. Der übergeordnete Container ist der Body!<br>
   <span style="font-size: 50%;">Dieser Text ist nur halb so groß wegen der Einstellung font-size: 50%! Die 50% orientieren sich an der Einstellung des Bodys.</span>
   <span style="font-size: 2em;">und dieser Text ist doppelt so groß wegen der Einstellung font-size: 2em! Die 2em orientieren sich an ebenfalls an der Einstellung des Bodys</span>
 </body>
</html>

    Es hat sich nun der komplette Text geändert.

    Oftmals wird fälschlicherweise behauptet 1em sei die Standardgröße des Browsers. Das ist nur zur Hälfte korrekt. Sobald bei einem übergeordneten Container eine Größenänderung vollzogen wird, wirkt sich diese Änderung auf alle untergeordneten Texte und Container aus. Ich werde in diesem letzten Beispiel das noch weiter verdeutlichen. Hier werden Sie sehen, daß 1em nicht immer gleich groß ist.

    Beispielcode HTML:

    <html>
 <head>
 </head>
 <body>
   Dieser Text ist hat die Standardgröße. Der übergeordnete Container ist der Body!<br>
   <span style="font-size: 50%;">Dieser Text ist nur halb so groß wegen der Einstellung font-size: 50%! Die 50% orientieren sich an der Einstellung des Bodys.</span><span style="font-size: 2em;">und dieser Text ist doppelt so groß wegen der Einstellung font-size: 2em! Die 2em orientieren sich an ebenfalls an der Einstellung des Bodys</span><br/><br><br/><br>
   Ab hier beginnt das DIV:<br/><br>
   <div style="font-size: 26px;">
      Und dieser Text ist ist nun 26px groß. Der übergeordnete Container ist das DIV-Element!<br>
         <span style="font-size: 50%;">Dieser Text ist nur halb so groß wegen der Einstellung font-size: 50%! Die 50% orientieren sich an der Einstellung des DIV-Containers.</span>
   <span style="font-size: 2em;">und dieser Text ist 2,5 mal so groß wegen der Einstellung font-size: 2.5em! Die 2.5em orientieren sich an ebenfalls an der Einstellung des DIV-Containers</span>
  </div>
 </body>
</html>

    Hier konnten Sie auch sehen, daß man em Angaben auch mit Nachkommastellen darstellen kann. Ein habes em entspricht 50%.

    Ich behaupte, daß man anhand dieses Beispieles ganz deutlich sehen kann, woran sich die Größeneinstellungen orientieren und was sie bedeuten.

    Related posts:

    1. CSS-Tutorial – Wie man per CSS die Schriftgröße ändern kann Heute möchte ich Euch zeigen, wie man per CSS die...
    2. CSS Tutorial – Per CSS einen Text doppelt unterstreichen Heute möchte ich Ihnen zeigen, wie Sie per CSS einen...
    3. CSS-Tutorial – per CSS Text unterstreichen und durchstreichen – text-decoration Heute möchte ich Ihnen zeigen, wie man per CSS einen...

    Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.

    ]]>     http://www.tutorialwelt.de/420/css-tutorial-groseneinheiten-unterschied-pixel-prozent-em.htm/feed 1     Per CSS Schriftfarben ändern http://www.tutorialwelt.de/409/per-css-schriftfarben-andern.htm http://www.tutorialwelt.de/409/per-css-schriftfarben-andern.htm#comments Tue, 20 Oct 2009 10:00:15 +0000 admin http://www.tutorialwelt.de/?p=409 per CSS die Schriftfarbe eines Textes ändern kann. Related posts:
    1. CSS-Tutorial – Wie man per CSS die Schriftgröße ändern kann Heute möchte ich Euch zeigen, wie man per CSS die...
    2. Per CSS Schriftarten ändern In diesem möchte ich Euch zeigen, wie man per CSS...
    3. CSS – Tutorial – die Hintergrundfarbe per CSS ändern Heute möchte ich Ihnen zeigen, wie Sie per CSS die...
    Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.]]>     CSS-Tutorial – Per CSS Schriftarten ändern

    Heute möchte ich Euch zeigen, wie man per CSS die Schriftfarbe eines Textes ändern kann.

    Hierzu verwendet man einfach den CSS Befehl color.

    Wie auch schon in HTML ist es am sichersten, die Farbe im hexadezimalen Code darzustellen. Nur im hexadezimalen Code kann man sicher sein, daß der Browser auch die gewünschte Farbe anzeigt.

    Eine umfangreiche Farbtabelle werde ich demnächst posten.

    Beispielcode HTML:

    <html>
 <head>
  <style type="text/css">
   #redtext { color: #ff0000; }
  </style>
 </head>
 <body>
   Von diesem Text möchte ich folgende Passage in rot darstellen:<br>
   <span id="redtext">Dieser Text sollte in rot dargestellt werden</span>
 </body>
</html>

    Als nächstes präsentiere ich Euch, wie man die Größe eines Textes per CSS ändern kann.

    Related posts:

    1. CSS-Tutorial – Wie man per CSS die Schriftgröße ändern kann Heute möchte ich Euch zeigen, wie man per CSS die...
    2. Per CSS Schriftarten ändern In diesem möchte ich Euch zeigen, wie man per CSS...
    3. CSS – Tutorial – die Hintergrundfarbe per CSS ändern Heute möchte ich Ihnen zeigen, wie Sie per CSS die...

    Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.

    ]]>     http://www.tutorialwelt.de/409/per-css-schriftfarben-andern.htm/feed 0