CSS

Legende
Html Zeichnung
CSS Zeichnung
Xml Zeichnung

CSS BORDER STYLES

Mittels border-style setzt man einen bestimmten Border Typus, so zum Beispiel solid.

Textabsatz mit Rahmendicke medium und Typ dotted

Textabsatz mit Rahmendicke medium und Typ dashed

Textabsatz mit Rahmendicke medium und Typ solid

Textabsatz mit Rahmendicke medium und Typ double

Textabsatz mit Rahmendicke 10px und Typ double

Textabsatz mit Rahmendicke 12px und Typ groove

Textabsatz mit Rahmendicke 12px und Typ inset

Textabsatz mit Rahmendicke 12px und Typ outset

Textabsatz mit Rahmendicke 15px und Typ ridge

Selektoren in CSS

In CSS nutzt man Selektoren, dies sind quasi aliases zu vorhandenen Attributen.
Beispiel:

enz, enzyme { display:block;margin-top:1em;}
Es gibt auch sogenannte Universalselektoren, die auf alle Elemente zutreffen.

Der sogennante Typselektor spricht Elemente anhand ihres Elementnamens an.
Beispiel:
p { margin: 0; }

IDs in HTML und CSS

IDs dürfen nur einmal auftauchen. Gelten in der CSS-Hierarchie auch als gewichtiger.

Beispiel mit nicht sichtbarer Id

- Für die CSS Klasse gilt dann übrigens
#blau {color : blue;}

Wie verwende ich test-shadow?

      text-shadow: 2px 2px 2px #000;
Beispiel hierzu, in CSS:
h1 {text-shadow:2px 2px #FF0000;}
Syntax:
text-shadow: h-shadow, v-shadow, blur, color

Test Shadow normal
Test Shadow test
Test Shadow test

Testing...

And some more testing...

And some more testing...

Wie bestimme ich, das der Hintergrund (Background) mit scrolled?

      background-attachment: scroll // 
  bzw zum Ausschalten dessen: fixed
Dies sieht man unter Umständen erst wenn man das Fenster minimiert.

Welche Werte kann text-decoration: erhalten?

  inherit, none, underline, overline, line-through, blink 

Wie gebe ich den gleichen Inhalt, zum Beispiel ein Bild, vor jeden externen Link?

Man erstellt eine neue Klasse, die zb so aussieht:
      a.extern:before {
        content:url(../../IMG/STD/DOT2.png);
        display:inline;
        width:8px;
        height:8px
   }

Du kannst bei href Elementen wie diesem hier auch title setzen

CSS Mini FAQ

background-image: url("marble.gif") }
background-image: url("../IMG/MATRIX.png")
First line Element um zu der ersten Linie eines Textes eine bestimmte Regel zu adden - p:first-line {font-variant: small-caps}
The ":before" pseudo-element can be used to insert some content before an element. h1:before { content: url(beep.wav) }

Kommentare / Comments

In Javascript // or /*

In CSS /* */

In HTML XML und XTHML gilt dies hier für einen Kommentar
<!-- Das ist ein Kommentar. -->

XML Encoding auch für Umlaute?

<?xml version="1.0" encoding="iso-8859-1"?>

CSS Inline-Scroll-Container

Wie so ein Inline-Scroll-Container aussieht, sieht man unten.
Man kann damit einfach eine Art ScrollWidget implementieren:

Beispiel:
Hier etwas über mich:
Ich bin ...
Hier sieht man, dass man auch HTML-Codes benutzen kann.

ASCII

CSS Classes

Wie mache ich CSS Classes?

p.first{ color: blue; }
p.second{ color: red; }
In HTML sieht dies dann so aus:

This is a paragraph that uses the p.first CSS code!

Wie mache ich input buttons?

<form> <input type="button" class="BG_GRAYSTD bblack1" value="Default" name="foo" onClick="test1(this.form)"> </form>


Was gibt es zu den <form> tags zu sagen? (form tag)

form tags sind eigentlich immer mit Actions assoziiert, also zb
<form action="http://www.htmlref.com/scripts/formecho.php" method="post" name="bla">

Innerhalb eines form tags sind diese Tags erlaubt bzw haben eine besondere Bedeutung:
button
input
select
textarea

Das Attribut action gibt an, wohin die Daten übertragen werden.
Das Attribut method gibt an, wie die Daten übertragen werden, wobei der default get ist.

Will man das ganze an eine email schicken so geht dies hier:
<form action="mailto:shevegen@linuxmail.org" method="post" enctype="text/plain">

Wie gebe ich einen Submit button an?

<input type="submit" value="Submit" />

Wie erstelle ich ein Input Textfield, wo man den Namen eingeben kann? (Textfeld, user input tag)

<input type="text" name="fname" value="YourName" />

<input type="text" name="UserName" id="UserName" size="25" maxlength="35" />

Wie mache ich ein DropDown Menu inklusive CSS Styling?

<select size="1" name="foobar">
<option value="aa">Choose a Destination...</option>
<option value="ags">BLA</option>
<option value="s">Idocs Home Page</option>
</select>

Hier das Beispiel oben:



Die size bei Select bestimmt ob man ein Dropdown Menü hat, oder eine Liste - gibt man also 3 ein, dann erscheint eine offene Liste.
Per Default darf man nur einen Eintrag auswählen, gibt man aber multiple an, so kann man mehrere Einträge verwenden:
<select name="top5" size="5" multiple>
Will man eine bestimmte Option vorselektieren, also als Default nutzen, geht dies hier:
<option selected>Tom Waits</option>
Will man auf Änderungen reagieren, verwendet man einfach das onchange Attribute:
onchange="alert(this.form.Pizza.options[this.form.Pizza.selectedIndex].value)"
Javascript events, die select akzeptiert, sind:
onfocus, onblur, onchange

Letter Spacing

Die letter-spacing Eigenschaft erhöht oder erniedrigt den Abstand zwischen Zeichen in einem Text.

Letter Spacing mit 1px
Letter Spacing mit 2px
Letter Spacing mit 3px
Letter Spacing mit 4px
Letter Spacing mit 5px
Letter Spacing mit 6px
Letter Spacing mit 1em
Letter Spacing mit -5px

Verschiedene Headers

Header ohne irgendwas

Header mit 2px borders oben und unten

Header mit 1px borders oben und unten (und Farbe mediumaquamarine)

#nav h2 {
color: red;
}
Dieser Selektor sagt:
Alle Links innerhalb von #nav #nav sollen rot sein.

Sub und Super

Wie erstelle ich sup und super?

vertical-align {}

<sub>sub</sub> und <sup>super</sup>

First-letter

Den ersten Character kann man so gross schreiben:
.fl:first-letter {
Man hat also eine Klasse, und wendet dann : darauf an

Dies klappt nur bei block-level Elements, beim span-tag muss man dies zuerst zum block-level Element machen.

Fieldset ohne Legend


Fieldset mit Legend

Anmeldung

Text Transform

CSS Text kann man so verändern:
Uppercase
Lowercase
capitalize

HTTP Response

Im Hypertext transfer protocol (HTTP) werden neben dem Body mit den eigentlichen Nutzinformationen weitere Angaben im Header in Form von Variablen gemacht.

HTTP wird vor allem von Web-Browsern und -Servern, aber auch von Proxies, Suchmaschinen, Robotern usw. genutzt. Die Variablen im Header, die dem Client oder Server, weitere Informationen zur Vearbeitung geben, folgen immer der Syntax
Variable: Anweisung[=Wert] [,Anweisung2][=Wert2] [...]
Beispiel für die Header Content-type,Content-length und Set-cookie:
Content-type: text/html
"Content-type: text/html\n\n"
"\n"
Content-length: 114
Set-cookie: usr=id541296, domain=bolege.de secure

Eine Header-Variable muss immer ganz allein in einer Zeile stehen, kann aber mehrere Anweisungen enthalten.
Anweisungen können Werte zugewiesen werden.
Die Groß-/Kleinschreibung wird bei Header-Variablen grundsätzlich ignoriert, Variablen sind also nicht case-sensitive.

HTML Accesskeys

Das geht zb auf accesskeys.

Erlaubt ist das Attribut accesskey in folgenden Formular-Tags:
input, textarea, label, legend und button

Textarea Tag

textarea nur lesbar machen geht mittels readonly

Will man resizen verhindern so kann man folgendes machen, in CSS:
textarea {
resize: none;
}
Wie is die Reihenfolge von CSS styles (wichtigstes Element steht ganz oben)?
(1) css inside html elements
(2) internal style sheet im head tag
(3) external style sheets
(4) browser default

Was is grouping?
Man kann selectors groupen durch comma separation.
h1,h2,h3,h4,h5,h6 { color: green }
Wie nutze ich styling mit #id?
An ID attribute must be unique within the document. The style rule below will match a p element that has the id value "para1": p#para1 { text-align: center; color: red }
Wie inkludiere ich externe .css Dateien?
<link rel="stylesheet" type="text/css" href="base.css">

Wie nutze ich CSS comments?
/* This is a CSS comment. */

Wie verwende ich das first-line Attribut?

p:first-line
{
color:#ff0000;
font-size: 30em;
font-variant:small-caps;
}

If you want to select everything when clicking, please look at the javascript select_all.js

Frames

Drei Frames nebeneinander

<frameset rows="100,*,60"> <frame ...></frameset>

Zwei Frames nebeneinander

<frameset cols="200,*">
<frame src="contents_of_frame1.html">
<frame src="contents_of_frame2.gif">
</frameset>

Javascript

Javascript lastModified
<script type="text/javascript"> document.write(document.lastModified); </script>

How to embed Youtube Videos:

You know the url, for example - http://youtube.com/watch?v=lMP9PaHca5Y

Then, use object and param tag, for example:
<object width="425" height="350">
<param name="movie" value="http://www.youtube.com/v/lMP9PaHca5Y">
</param>
<param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/v/lMP9PaHca5Y" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350">
</embed></object>


This code should be change to this:

<object src="http://www.youtube.com/v/lMP9PaHca5Y" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350">
<param name="movie" value="http://www.youtube.com/v/lMP9PaHca5Y">
</param>
<param name="wmode" value="transparent"> </param>
</object>

LINKS bezüglich CSS

Externe LINKS bezüglich HTML

SITEMAP

Kommentare
XML Enkodierung
CSS BORDER STYLES
CSS FirstLetter
CSS Letter Spacing
CSS Text Transform
CSS Selektoren
HTML IDs
HTML Form
HTML Frames
HTML Accesskeys
HTML DropDown