Diese Website verwendet Cookies, um sicherzustellen, dass Sie die bestmögliche Erfahrung auf unserer Website erhalten. Mehr erfahren
Kein Signal
All Tutorials
Dreamweaver
Autor: EliteBär Level:
 
Title: Neu Instalation oder Template wechsel!
Autor: EliteBär
Level: Normal
Programm: Dreamweaver
Comments: 4 Hits: (172566)
26.01.2013 - 12:18
Dreamweaver
Autor: EliteBär Level:
 
Title: Datenbank Externes Zugreifen z.B gameserver
Autor: EliteBär
Level: Very Easy
Programm: Dreamweaver
Comments: 2 Hits: (102355)
16.01.2013 - 06:25
DZCP
Autor: EliteBär Level:
 
Title: TS3 Auf der DZCP Homepage sichtbar machen!
Autor: EliteBär
Level: Very Easy
Programm: DZCP
Comments: 5 Hits: (31508)
08.01.2013 - 02:59
Dreamweaver
Autor: Bulletproof Level:
 
Title: Social Networks animieren mit JQuery
Autor: Bulletproof
Level: Easy
Programm: Dreamweaver
Comments: 5 Hits: (34031)
12.03.2011 - 12:58
Dreamweaver
Autor: F4n Level:
 
Title: CSS Teil 1 Einführung
Autor: F4n
Level: Very Easy
Programm: Dreamweaver
Comments: 2 Hits: (26827)
24.06.2010 - 11:09
All Downloads
DZCP 1.5.4
Downloads: 14995 Size: 2.34 MB
DZCP 1.5.4 Template #08
Downloads: 8817 Size: 7.24 MB
webSPELL Template #01
Downloads: 8273 Size: 1.88 MB
Logo #12
Downloads: 7854 Size: 4.3 MB
DZCP 1.5.4 Template #05
Downloads: 6821 Size: 7.75 MB
All Votings
no active poll

show polls
All Partners





 

You are currently in: Tutorials 

  Information:
Rating:  
 1 Votes
CSS Teil 1 Einführung
Programm: Dreamweaver // Level:  
Autor: F4n // Date: 24.06.2010 - 11:09 // Views: (26828)
SCHRIFT


Eine Kurzform der Schriftformatierung. Fasst die sechs einzelnen Eigenschaften zusammen. Weiterhin können einige Schriftarten des Betriebssystems verwendet werden.
Code:
1.
2.
3.
4.
5.
6.
7.
8.
<style type=\"text/css\"><!-- 
  body{font: Arial, Verdana, sans-serif bold 14px/12px;}
  p{font:14px/12px;}
--></style>
</head>
<body>
<p>Franz jagt im komplett verwahrlosten Taxi
quer durch Bayern</p>



Legt die Schriftart wie Arial, Comic Sans und die Schriftfamilie wie serif oder sans-serif fest. Angegeben werden eine oder mehrere Schriftarten oder/und Schriftfamilien. Der Browser probiert alle durch und wählt die Erste, die auf dem Anwendersystem installiert ist.
Code:
1.
2.
3.
4.
5.
6.
<p style=\"font-family:Arial, Helvetica, sans-serif;\">
 Arial
</p>
<p style=\"font-family:\'Times New Roman\', serif;\">
 Times New Roman
</p>



Die Größe einer Schrift.
Code:
1.
2.
3.
<p style=\"font-family:Arial;font-size:12pt\">
 Arial in 12pt
</p>



font-size-adjust soll die Größe unterschiedlicher Schriftarten anpassen und somit dafür sorgen, dass die Schriften annähernd gleich groß dargestellt werden.
Code:
1.
2.
3.
4.
5.
6.
h1 {font-family:Arial; font-size-adjust:none;}
h1
{
 font-family:Verdana, \'Times New Roman\', \'Courier New\';
 font-size-adjust:0.56;
}



font-stretch beschreibt, wie weit eine Schrift gestreckt oder verdichtet wird. Dies funktioniert aber nur, wenn die gewählte Schrift dies unterstützt und das ist bei Arial, Verdana und Times zum Beispiel nicht der Fall.
Code:
1.
2.
p{font-stretch:wider;}
h1{font-stretch:ultra-condensed;}



Kursive und schräggestellte Schriften.
Code:
1.
2.
3.
<p style=\"font-family:Arial;font-style:italic\">
 Arial kursiv
</p>



Kapitälchen sind \"kleine\" Großbuchstaben.
Code:
1.
2.
3.
<p style=\"font-variant:small-caps\">
 Ein Text mit \"kleinen\" Großbuchstaben
</p>



Legt fest, wie fett eine Schrift dargestellt wird. Dies muss von der gewählten Schrift auch unterstützt werden.
Code:
1.
2.
3.
<p style=\"font-family:Arial;font-weight:bold\">
 Arial bold
</p>


HINTERGRUND


Eine Kurzform der Hintergrundformatierung. Fasst die einzelnen Angaben zusammen.
Code:
1.
2.
3.
4.
5.
<body style=\"background: url(images/bg.gif) repeat-x;\">

Seiteninhalt ...

</body>


Bestimmt, ob ein Hintergrundbild beim Scrollen mit wandert oder seinen festen Ort auf der Seite behält. Wird deshalb in Zusammenhang mit background-image verwendet.
Code:
1.
2.
3.
4.
5.
6.
<body style=\"background-image: url(images/bild.gif);
 background-attachment:fixed;\">

Seiteninhalt ...

</body>


Legt für Elemente die Hintergrundfarbe fest.
Code:
1.
2.
3.
4.
5.
6.
7.
<table width=\"500\">
 <tr>
  <td style=\"background-color:#efefef;\">
   Eine Zelle mit grauer Hintergrunsfarbe
  </td>
 </tr>
</table>


Legt für ein Element ein Hintergrundbild fest. Da der Browser Hintergrundbilder immer über die Hintergrundfarbe legt, solltest du gleichzeitig eine Hintergrundfarbe angeben, die zu sehen ist, wenn der User das Anzeigen von Bildern ausgeschaltet hat oder das Bild einfach nicht zur Verfügung steht. So verhinderst du zu geringen Kontrast zwischen Schrift- und Hintergrundfarbe oder sogar Probleme wie weiße Schrift auf weißen Grund. Soweit du mit background-repeat nichts Anderes festgelegt hast, werden Hintergrundbilder immer über den gesamten Bereich des Inhalts und des Innenabstands angezeigt
Code:
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
<style type=\"text/css\">
div.bg {
background-image: url(../images/bg.gif);
background-color:orange;
width:500px;height:200px;
border:1px solid red;
padding:20px;
}
</style>

...

<body>
<div class=\"bg\">
  div-Container mit Hintergrundbild
</div>


background-position legt abhängig von background-repeat Position eines Hintergrundbildes fest:
background-repeat:no-repeat: Das Hintergrundbild wird nur einmal and der angegebenen Position angezeigt.
background-repeat:repeat-x: Das Hintergrundbild wird horizontal wiederholt angezeigt und nur der zweite Wert wird verwendet, um die Hintergrundbilder vertikal zu verschieben.
background-repeat:repeat-y: Das Hintergrundbild wird vertikal wiederholt angezeigt und nur der erste Wert wird verwendet, um die Hintergrundbilder horizontal zu verschieben.
Code:
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
<style type=\"text/css\"><!-- 
 body
 {
  background-image:url(images/bg.gif);
  background-repeat:no-repeat;
  background-position:100px 50%;
 }
--></style>
<body>

Seiteninhalt ...

</body>


Legt fest, ob ein Hintergrund über die gesamte Breite oder/und Höhe eines Elements wiederholt wird.
Code:
1.
2.
3.
4.
<div style=\"background-image: url(../images/op5x.gif);
background-repeat:repeat-x;float:left;\">
Hintergrundbild nur waagerecht wiederholen
</div>



viel spaß dabei wink es werden mehrere Teile kommen gez. F4n
 
You have to be registered and logged in to rate an tutorial!

comments

Sort: Sort ascending   
  #2 by Bennet 07.08.2010 - 22:34
Avatar   Germany offline quote

Danke dir smiling

  #1 by a`V´o 27.06.2010 - 13:24
Avatar   Germany offline quote

nice,schönes Tutorial!



You have to login!

register now!
login
All Showrooms

n/a
by: n/a
Views: n/a
 
Posts: n/a
 
Last post by: n/a
 
 
 
All Topics
PIXLMEDIEN - Webdesign C... | 1
Vorstellen
PIXLMEDIEN - Webdesign Community
Author: hotbutton
Last post: web-design
Board: Vorstellen
Catagorie: Allgemein - Alles Allgemein
19.10.2024 - 09:44
DZCP Installation schläg... | 6
Fragen zum DZCP
DZCP Installation schlägt dauernt fehl
Author: astk15
Last post: Lanacs
Board: Fragen zum DZCP
Catagorie: DZCP - Alles zu dem CMS DZCP
11.04.2018 - 18:28
Besucherzähler zählt jed... | 3
Fragen
Besucherzähler zählt jeden Homepage klick nicht jeden besucher
Author: astk15
Last post: Daeem
Board: Fragen
Catagorie: Allgemein - Alles Allgemein
05.04.2018 - 19:11
DZCP 1.6 Template | 29
DZCP Template Support
DZCP 1.6 Template
Author: exxs
Last post: Daeem
Board: DZCP Template Support
Catagorie: DZCP - Alles zu dem CMS DZCP
30.03.2018 - 13:06
DZCP und GT_DZCP_v1.5.5.... | 4
DZCP Template Support
DZCP und GT_DZCP_v1.5.5.2_10
Author: astk15
Last post: Daeem
Board: DZCP Template Support
Catagorie: DZCP - Alles zu dem CMS DZCP
16.03.2018 - 19:37
möcht mich mal vorstelle... | 2
Spambereich
möcht mich mal vorstellen
Author: Gyzmou
Last post: Gyzmou
Board: Spambereich
Catagorie: Allgemein - Alles Allgemein
20.12.2017 - 07:51
Fehler in der Mysql Date... | 1
DZCP Template Support
Fehler in der Mysql Datenbank?
Author: faine1312
Last post: Daeem
Board: DZCP Template Support
Catagorie: DZCP - Alles zu dem CMS DZCP
13.10.2017 - 18:11
All News
Wahnsinns kostenloses Clan...
Date: 29.07.2013     Comments: 5
Ein neues DZCP Free Templa...
Date: 26.01.2013     Comments: 7
Fröhliche Weihnachten und ...
Date: 24.12.2012     Comments: 5
Ein neues DZCP Free Templa...
Date: 15.10.2012     Comments: 4
Gewinne ein Headset im wer...
Date: 11.10.2012     Comments: 2
 
 
 
 
FORUM
IMAGEHOSTER
SUPPORT
LIZENZEN
 
 
 
 
2584
2621
4548165
34460
0
97
15
252054