Difference between revisions of "CSS"
| Line 1: | Line 1: | ||
| − | |||
== CSS im HTML == | == CSS im HTML == | ||
| Line 24: | Line 23: | ||
<br> | <br> | ||
| + | |||
| + | |||
| + | == 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. | ||
| + | |||
| + | <syntaxhighlight lang="html4strict"> | ||
| + | <html> | ||
| + | <head> | ||
| + | <title>demo</title> | ||
| + | <link rel="stylesheet" type="text/css" href="style.css" media="all"> | ||
| + | </head> | ||
| + | <body> | ||
| + | |||
| + | <div id="wrapper"> | ||
| + | <div id="inner-wrapper"> | ||
| + | <div id="header"> | ||
| + | <h1><a href="./demo.hmtl">title</a></h1> | ||
| + | </div> | ||
| + | <div id="navigation"> | ||
| + | <ul> | ||
| + | <li class="menu-item selected"><a href="#1">menu 1</a></li> | ||
| + | <li class="menu-item "><a href="#1">menu 2</a></li> | ||
| + | <li class="menu-item "><a href="#1">menu 3</a></li> | ||
| + | </ul> | ||
| + | </div> | ||
| + | <div id="content-wrapper"> | ||
| + | <div class="project"> | ||
| + | <h2><a href="#titel1">projekt1</a></h2> | ||
| + | <p class="description">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.</p> | ||
| + | </div> | ||
| + | |||
| + | <div class="project"> | ||
| + | <h2><a href="#titel1">projekt1</a></h2> | ||
| + | <p class="description">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.</p> | ||
| + | </div> | ||
| + | <div id="footer"> | ||
| + | 2011-01-18@11:08:23 | ||
| + | </div> | ||
| + | </div> | ||
| + | <div class="clear"></div> | ||
| + | |||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | </body> | ||
| + | </html> | ||
| + | </syntaxhighlight> | ||
Revision as of 20:44, 17 November 2011
Contents
CSS im HTML
CSS im 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).
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.
<syntaxhighlight lang="html4strict"> <html> <head> <title>demo</title> <link rel="stylesheet" type="text/css" href="style.css" media="all"> </head> <body>
<a href="./demo.hmtl">title</a>
<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>
