Start \ Webentwicklung \ Joomla \ Typografie

Typografie

Zuletzt aktualisiert am Freitag, den 08. Januar 2010 um 12:36 Uhr Geschrieben von: Michael Bäcker Mittwoch, den 30. Dezember 2009 um 11:02 Uhr

Im Template sind bereits einige vorgegebene CSS Klassen die zur Inhaltsgestaltung verwendet werden können. Nachfolgend können HTML-Code mit passenden Beispielen betrachtet werden.

<p class="note">...</p> oder <div class="note">...</div>

Note: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

<p class="info">...</p> oder <div class="info">...</div>

Info: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

<p class="alert">...</p> oder <div class="alert">...</div>

Alert: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

<p class="tip">...</p> oder <div class="tip">...</div>

Tip: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

<p class="download">...<a href="#" class="disc">...</a></p> oder <div class="download">...<a href="#" class="disc">...</a></div>

Download: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Download Button

<p class="box">...</p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

<p class="redbox">...</p>

<p class="bluebox">...</p>

<p class="greenbox">...</p>

<p class="code">...</p>

<blockqoute>...</blockqoute> oder <cite>...</cite>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

<blockqoute><p>...</p></blockqoute> oder <blockqoute><div>...</div></blockqoute>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

<code>...</code> oder <samp>...</samp> oder <pre>...</pre>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

<code class="xhtml">...</code>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<code class="css">...</code>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

<dl><dt>...</dt><dd>...</dd></dl>

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

<div class="floatbox"><img class="float_right" src="/picture.gif" alt="" />....</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<div class="floatbox"><img class="float_left" src="/picture.gif" alt="" />....</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<span class="directory">...</span>

Directory: /this/is/my/directory

<span class="filename">...</span>

File: filename.txt

<span class="mono">...</span>

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

<acronym title="Acronym" lang="de">Accronym</acronym>

Accronym

<abbr title="Abbr" lang="de">Abbr</abbr>

Abbr

<ul><li>...</li><li>...</li></ul>

List Item1
List Item2
List Item3

<ol><li>...</li><li>...</li></ol>

List Item1
List Item2
List Item3

<ul class="bullet"><li>...</li><li>...</li></ul>

List Item1
List Item2
List Item3

<h1> Heading

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

<h2> Heading

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

<h3> Heading

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

<h4> Heading

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

<h5> Heading

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

<h6> Heading

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Kommentar schreiben

JComments

Joomla SEF URLs by Artio

Hauptmenü

Joomla! ist freie, unter der GNU/GPL-Lizenz veröffentlichte Software.