Willkommen auf www.4b-designs.com

HP4B HomePage4Beginner @Memo -->Home!

CSS

Wie funktioniert CSS? Die Eigenschaften von Cascading Style Sheets (CSS) sind denen von HTML sehr ähnlich. Nehmen wir den Hintergrund in

HTML

<legend><body bgcolor="#000000"></legend>

in CSS

body {background-color: #000000;}

Grundlegendes CSS-Modell: SELECTOR {PROPERTY: VALUE } Zuordnung Eigenschaft Wert der Eigenschaft body background-color: #000000 Wie werden CSS-Codes angewendet: Es gibt 3 Methoden der Anwendung CSS in HTML einzubinden 1. Direktformatierung des HTML-Elements - Inline Style

<html><head><title>Example</title></head><body style="background-color:#ff0000;"><p> Das ist eine rote Seite.</p></body></html>


2.Formatierung einer kompletten HTML-Datei - Block Style

<html><head><title>Example</title><style type= "text/css"> body{background-color:#00000;}</style></head><body><p> Das ist eine schwarze Seite.</p></body></html>

3. Die eleganteste Lösung, eine separate CSS Datei Bei dieser Methode werden die Stylesheetangaben genau wie im vorigen Beispiel geschrieben, Block-Style, der Unterschied ist, dass die Angaben in eine spezielle Datei, einer CSS Datei, eine einfache Textdatei mit der Erweiterung ".css", ausgelagert werden. In dieser Datei können alle Formatierungen aller Seiten untergebracht werden, es lässt sich das komplette Layout der Seite in dieser einen Datei festlegen.

<link rel="stylesheet" type="text/css" href="style/style.css"/>

Diese Zeile muss in den jeder Seite geschrieben werden die die Formatierung erhalten soll.

<html><head><title>Mein Dokument</title><link rel="stylesheet" type="text/css" href="style/style.css"/> </head><body>


So läßt sich CSS ganz einfach in jedes HTML Dokument eingebunden werden.


Hintergründe

Befehl Beschreibung Werte
background Hintergrund background-color
background-image
background-repeat background-attachment background-position
background-attachment Hintergrundgrafik feststellen oder rollbar machen scroll
fixed
background-color Hintergrundfarbe color-rgb
color-hex
color-name
transparent
background-image Hintergrundbild url
none
background-position Position eines Hintergrundbildes top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x-% y-%
x-pos y-pos
background-repeat Wiederholung eines Hintergrundbildes repeat
repeat-x
repeat-y
no-repeat

Rahmen

>
Befehl Beschreibung Wert
border Rahmen border-width
border-style
border-color
border-bottom Rahmen unten border-bottom-width
border-style
border-color
border-bottom-color Rahmenfarbe unten border-color
border-bottom-style Art des Rahmens border-style
border-bottom-width Rahmenbreite unten thin
medium
thick
länge
border-color Rahmenfarbe color
border-left Rahmen links border-left-width
border-style
border-color
border-left-color Rahmenfarbe links border-color
border-left-style Rahmenart links border-style
border-left-width Rahmenbreite links thin
medium
thick
length
border-right Rahmen rechts border-right-width
border-style
border-color
border-right-color Rahmenfarbe rechts border-color
border-right-style Rahmenart rechts border-style
border-right-width Rahmenbreite rechts thin
medium
thick
länge
border-style Rahmenart none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
border-top Rahmen oben border-top-width
border-style
border-color
border-top-color Rahmenfarbe oben border-color
border-top-style Rahmenart oben border-style
border-top-width Rahmenbreite oben thin
medium
thick
länge
border-width Rahmenbreite thin
medium
thick
länge

Klassifizierung

Befehl Beschreibung Wert
clear   left
right
both
none
cursor Mauszeiger url
auto
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
display Anzeige none
inline
block
list-item
run-in
compact
marker
table
inline-table
table-row-group
table-header-group
table-footer-group
table-row
table-column-group
table-column
table-cell
table-caption
float Position gegen ein anderes Element left
right
none
position Art der Positionierung static
relative
absolute
fixed
visibility Sichtbarkeit visible
hidden
collapse

Abmessungen

>
Befehl Beschreibung Wert
height Höhe auto
länge
%
line-height Zeilenabstand normal
länge
%
max-height Maximun Höhe none
länge
%
max-width Maximun Breite none
länge
%
min-height Minimum Höhe länge
%
min-width Minimum Breite länge
%
width Breite auto
%
länge

Schrift

Befehl Beschreibung Wert
font Schrift font-style
font-variant
font-weight
font-size/line-height
font-family
caption
icon
menu
message-box
small-caption
status-bar
font-family Schriftart family
font-size Schriftgröße xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
länge
%
font-size-adjust   none
zahl
font-stretch Schriftbreite normal
wider
narrower
ultra-condensed
extra-condensed
condensed
semi-condensed
semi-expanded
expanded
extra-expanded
ultra-expanded
font-style Schriftstil normal
italic
oblique
font-variant Buchstabenart normal
small-caps
font-weight Schriftdicke normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900

Listen

>
Befehl Beschreibung Wert
list-style Listenart list-style-type
list-style-position
list-style-image
list-style-image Bild als Listenzeichen none
url
list-style-position Position des Listenzeichens inside
outside
list-style-type Listentyp none
disc
circle
square
decimal
decimal-leading-zero
lower-roman
upper-roman
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
hebrew
armenian
georgian
cjk-ideographic
hiragana
katakana
hiragana-iroha
katakana-iroha
marker-offset   auto
länge

Abstand

>
Befehl Beschreibung Wert
margin Abstand margin-top
margin-right
margin-bottom
margin-left

margin-bottom

Abstand nach unten auto
länge
%

margin-left

Abstand nach links auto
länge
%

margin-right

Abstand nach rechts auto
länge
%
margin-top Abstand nach oben auto
länge
%

Outlines

Befehl Beschreibung Wert
outline outline outline-color
outline-style
outline-width
outline-color Outlinefarbe color
invert
outline-style Outlineart none
dotted
dashed
solid
double
groove
ridge
inset
outset
outline-width Outlinedicke thin
medium
thick
length

Randabstände

Befehl Beschreibung Wert
padding Randabstand padding-top
padding-right
padding-bottom
padding-left

padding-bottom

Abstand nach unten länge
%

padding-left

Abstand nach links länge
%

padding-right

Abstand nach rechts länge
%
padding-top Abstand nach oben länge
%

Positionierung

Befehl Beschreibung Wert
bottom Abstand nach unten auto
%
länge
clip Ausschnitt shape
auto
left Abstand nach links auto
%
länge
overflow oberflow visible
hidden
scroll
auto
right Abstand nach rechts auto
%
länge
top Abstand nach oben auto
%
länge
vertical-align Vertikale Ausrichtung baseline
sub
super
top
text-top
middle
bottom
text-bottom
länge
%
z-index Stapelreihenfolge auto
zahl

Tabellen

Befehl Beschreibung Wert
border-collapse Rahmenmodell collapse
separate
border-spacing Rahmenabstand länge
caption-side Position der Überschrift top
bottom
left
right
empty-cells Behandlung von leeren Zellen show
hide
table-layout Tabellenstruktur auto
fixed

Inhalte und Zähler

 

Befehl Beschreibung Wert
before Inhalt einfügen  
after Inhalt einfügen  
content Inhalt einfügen URL
counter Zähler  
counter-increment Zähler  
counter-reset Zähler  

=> Willst du auch eine kostenlose Homepage? Dann klicke hier! <=