CSS Anwendungsbeispiel für einen Shop mit Notebooks und Beamer

Seit vielen Jahren ist es unvorstellbar, dass Webseiten ohne Css erstellt werden. Diese Webseite präsentiert Produkte aus dem Bereich der Computer-Technik nebst Zubehör.
Dazu gehören auch Produkte, wie Beamer und Zubehör. So auch Notebooks, welche immer beliebter werden. Mit Notebooks ist ein Internetnutzer einfach flexibler und  unabhängiger.
Beamer werden dazu verwendet, um Freunden und Bekannten Video-Präsentationen vorzuführen.

Computerpool.de bietet seinen Kunden unter neben deinem Rückrufservice auf ein einen Privat- wie auch Geschäftskunden Login Bereich an. Kundenbereich an. Des weiteren wird auch zum schnellen Auffinden eines Produktes eine Suchfunktion angeboten.

Css - und seine Vorteile.
Css ist eine spezielle Datei, die nur dazu dient, das Gestalten von Webseiten in puncto Aussehen zu vereinfachen. Hierbei spielt es keine Rolle ob es sich um Schriftarten, Schriftgrößen oder auch um Tabellenerstellungen handelt. Auch der Hintergrund einer Webseite - einfach alles wird mittels Css vereinfacht. Man stelle sich vor, diese Webseite  mit allen Unterseiten - alles müsste auf jeder einzelnen dieser Unterseiten separat bestimmt werden. Ein Arbeitsaufkommen, das nicht mehr bezahlbar wäre.

Damit dies auch gelingt, wird jeder dieser Unterseiten mit der Css Datei verlinkt.
Dies sieht in Fall von computerpool.de folgendermaßen aus.
Hier wird mit mehreren Css Dateien gearbeitet.

<link rel=”stylesheet” type=”text/css” href=”/js/jquery-ui/css/smoothness/jquery-ui-1.8rc3.custom.css” />
und
<link rel=”stylesheet” type=”text/css” href=”/css/computerpool.css” />

Damit eine Css Klassen-Definiton auf einer Seite auch wirksam angezeigt werden kann, wird Definition standardmäßig durch “class” aufgerufen. Hover-Definitonen werden meist imt “id” abgefragt.

Eine gute Css Seite unterteilt Definitionen in bestimmte Bereiche damit erkenntlich ist, wo welcher Funktionsbereich beginnt.

Hier CSS Definitionen:

Hier wird erkenntlich gemacht, dass es sich um den Bereich der Button-Gestaltung handelt.

/* ————– Button ——————*/

Ab hier beginnen die eigentlich Button-Definitionen. die Definitionen an.

.ui-button { display: inline-block; position: relative; padding: 0; margin-right: .1em; text-decoration: none !important; cursor: pointer; text-align: center; zoom: 1; overflow: visible; } /* the overflow property removes extra width in IE */
.ui-button-icon-only { width: 2.2em; } /* to make room for the icon, a width needs to be set here */
button.ui-button-icon-only { width: 2.4em; } /* button elements seem to need a little more width */
.ui-button-icons-only { width: 3em; }
button.ui-button-icons-only { width: 3.2em; }

/*button text element */
.ui-button .ui-button-text { display: block; line-height: 1.4;  }
.ui-button-text-only .ui-button-text { padding: .4em 1em; }
.ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text { padding: .4em; text-indent: -9999999px; }
.ui-button-text-icon .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 1em .4em 1.8em; }
.ui-button-text-icons .ui-button-text { padding-right: 1.8em; }
/* no icon support for input elements, provide padding by default */
input.ui-button { padding: .4em 1em; }

/*button icon element(s) */
.ui-button-icon-only .ui-icon, .ui-button-text-icon .ui-icon, .ui-button-text-icons .ui-icon, .ui-button-icons-only .ui-icon { position: absolute; top: 50%; margin-top: -8px; }
.ui-button-icon-only .ui-icon { left: 50%; margin-left: -8px; }
.ui-button-text-icon .ui-icon-primary, .ui-button-text-icons .ui-icon-primary, .ui-button-icons-only .ui-icon-primary { left: .5em; }
.ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; }

/*button sets*/
.ui-button-set { margin-right: 7px; }
.ui-button-set .ui-button { margin-left: 0; margin-right: -.3em; }

Ab hier beginnt der Bereich der Container-Definition.

/* ————- Component containers —————————–*/
.ui-widget { font-family: Verdana,Arial,sans-serif; font-size: 1.1em; }
.ui-widget .ui-widget { font-size: 1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Verdana,Arial,sans-serif; font-size: 1em; }
.ui-widget-content { border: 1px solid #aaaaaa; background: #ffffff url(images/ui-bg_flat_75_ffffff_40×100.png) 50% 50% repeat-x; color: #222222; }
.ui-widget-content a { color: #222222; }
.ui-widget-header { border: 1px solid #aaaaaa; background: #cccccc url(images/ui-bg_highlight-soft_75_cccccc_1×100.png) 50% 50% repeat-x; color: #222222; font-weight: bold; }
.ui-widget-header a { color: #222222; }

Comments are closed.