CSS

From Digipool-Wiki
Revision as of 13:08, 18 November 2011 by WikiSysop (Talk | contribs) (CSS und DIVs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Einführung

CSS bedeutet "Cascading Style Sheets" und bezeichnet eine Programmiersprache mit der mal Formatvorlagen Internetseiten erstellt.
Im Folgenden gibt es auf dieser Digipool-Wiki-Seite einen CSS-Crashkurs.
Gute ausführlichere Tutorials zu CSS findest Du bei www.css4you.de
Einen guten Überblicke über die CSS Befehle gibt folgendes Cheat-Sheet von Dave Child Autor von Added Bytes: CSS-Cheat-Sheet


CSS im HTML

HTML-Datei: css_in_html.html

<syntaxhighlight lang="html4strict"> <html> <header>

</header>

<body> hello <spam style="color:rgb(0%, 0%, 100%);">world</spam> </body>

</html> </syntaxhighlight>

Online-Test: css_in_html

CSS im Header

<syntaxhighlight lang="html4strict"> <html> <header> <style> a { text-decoration:none; color:rgb(40%, 40%, 40%); } a:hover { color: rgb(100%, 0%, 0%); } </style> </header>

<body>

Kontakt:

Digipool-Team
<a href="http://www.digipool.info">www.digipool.info</a>
<a href="mailto:digipool@uni-kassel.de">digipool@uni-kassel.de</a>
</body>

</html> </syntaxhighlight>


Online-Test: css_in_header

CSS-Datei verlinken

Mit dieser Zeile bindet man eine CSS-Datei ein:

<syntaxhighlight lang="html4strict">

<link rel="stylesheet" type="text/css" href="MeinName.css" media="all"/>

</syntaxhighlight>

  • Diese Zeile wird in den Head gelegt. (Zwischen <head> und </head>)
  • Die Datei "MeinName.css" ist eine normale Text Datei in UTF-8 Kodierung der man die Endung ".css" gibt.
  • Der Dateiname muss selbstverständlich mit dem im Link genau übereinstimmen (auch in Groß- und Kleinschreibung).



CSS und DIVs

"DIV" kommt von "Division" und heißt Bereich.

<syntaxhighlight lang="html4strict"> <html> <header> </header>

<body>

div1
div2
div3

</body>

</html> </syntaxhighlight>

Online-Test: div


Typische Webseite

Typischer Aufbau einer Webseite mit Header, Footer, Menü und Content in der Mitte. Das Ganze ist in einen "wrapper" und "inner-wrapper" gepackt.

HTML-Datei:
typische_webseite.html <syntaxhighlight lang="html4strict"> <html> <head> <title>demo</title> <link rel="stylesheet" type="text/css" href="style.css" media="all"> </head> <body>

<a href="#titel1">projekt1</a>

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<a href="#titel1">projekt1</a>

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</body> </html> </syntaxhighlight>


CSS-Datei:
style.css <syntaxhighlight lang="html4strict">

  • {

margin:0; padding:0; }

body { background-color:#999; }

a { text-decoration:none; font-weight: normal; } a:hover { color: #fff; }

p { color: #eee; }

  1. wrapper {

margin-left: 35px; margin-top: 20px; }

  1. inner-wrapper{

width: 775px; }

  1. header {

width: 775px; height: 100px; background-color:#0000ff; margin-bottom: 20px; }

  1. navigation {

background-color:#ff0000; width:200px; float: left; margin-right:20px; }

  1. navigation ul {

width: 200px; padding: 20px 0 20px 20px; list-style-type: none; }

  1. navigation ul li.selected a {

color: #fff; }

  1. content-wrapper {

width: 555px; background-color:lime; float: left; } .clear { clear:both; }

  1. footer {

background-color:purple; margin-top: 20px; } </syntaxhighlight>


Online-Test: typische_webseite