Difference between revisions of "CSS"

From Digipool-Wiki
Jump to: navigation, search
(→‎CSS und DIVs)
 
(24 intermediate revisions by the same user not shown)
Line 1: Line 1:
 +
== Einführung ==
 +
 +
CSS bedeutet "Cascading Style Sheets" und bezeichnet eine Programmiersprache mit der mal Formatvorlagen Internetseiten erstellt.<br>
 +
Im Folgenden gibt es auf dieser Digipool-Wiki-Seite einen CSS-Crashkurs. <br>
 +
Gute ausführlichere Tutorials zu CSS findest Du bei [http://www.css4you.de www.css4you.de]<br>
 +
Einen guten Überblicke über die CSS Befehle gibt folgendes Cheat-Sheet von Dave Child Autor von Added Bytes:
 +
[http://www.addedbytes.com/cheat-sheets/css-cheat-sheet/ CSS-Cheat-Sheet]
 +
 +
<br>
 +
 +
== 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: [http://www.digipool.info/tutorials/css/css_in_html.html css_in_html]
 +
<br>
 +
 +
== 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>
 +
    <h3>Kontakt:</h3>
 +
    Digipool-Team<br>
 +
    <a href="http://www.digipool.info">www.digipool.info</a><br>
 +
    <a href="mailto:digipool@uni-kassel.de">digipool@uni-kassel.de</a><br>
 +
</body>
 +
 +
</html>
 +
</syntaxhighlight>
 +
 +
<br>
 +
 +
Online-Test: [http://www.digipool.info/tutorials/css/css_in_header.html css_in_header]
 +
 +
== CSS-Datei verlinken ==
 +
 
Mit dieser Zeile bindet man eine CSS-Datei ein:
 
Mit dieser Zeile bindet man eine CSS-Datei ein:
  
−
<syntaxhighlight lang="html">
+
<syntaxhighlight lang="html4strict">
−
<pre>
+
 
−
<link rel="stylesheet" type="text/css" href="DigipoolStyle.css" media="all"/>
+
<link rel="stylesheet" type="text/css" href="MeinName.css" media="all"/>
  
−
</pre>
 
 
</syntaxhighlight>
 
</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).
 +
 +
<br>
 +
 +
 +
== CSS und DIVs ==
 +
 +
"DIV" kommt von "Division" und heißt Bereich.<br>
 +
 +
<syntaxhighlight lang="html4strict">
 +
<html>
 +
<header>
 +
</header>
 +
 +
<body>    
 +
    <div style="background-color:rgb(80%, 80%, 80%); width:100px; height:100px; float:left;">div1</div>
 +
    <div style="background-color:rgb(80%, 80%, 80%); width:100px; height:100px; float:left;">div2</div>
 +
    <div style="background-color:rgb(80%, 80%, 80%); width:100px; height:100px; float:right;">div3</div>    
 +
</body>
 +
 +
</html>
 +
</syntaxhighlight>
 +
 +
Online-Test: [http://www.digipool.info/tutorials/css/div.html div]
 +
 +
<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. <br>
 +
<br>
 +
HTML-Datei:<br>
 +
typische_webseite.html
 +
<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>
 +
 +
<br>
 +
CSS-Datei:<br>
 +
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;
 +
}
 +
#wrapper {
 +
margin-left: 35px;
 +
margin-top: 20px;
 +
}
 +
#inner-wrapper{
 +
width: 775px;
 +
}
 +
 +
#header {
 +
width: 775px;
 +
height: 100px;
 +
background-color:#0000ff;
 +
margin-bottom: 20px;
 +
}
 +
#navigation {
 +
background-color:#ff0000;
 +
width:200px;
 +
float: left;
 +
margin-right:20px;
 +
}
 +
#navigation ul {
 +
width: 200px;
 +
padding: 20px 0 20px 20px;
 +
list-style-type: none;
 +
}
 +
#navigation ul li.selected a {
 +
color: #fff;
 +
}
 +
 +
#content-wrapper {
 +
width: 555px;
 +
background-color:lime;
 +
float: left;
 +
}
 +
.clear {
 +
clear:both;
 +
}
 +
#footer {
 +
background-color:purple;
 +
margin-top: 20px;
 +
}
 +
</syntaxhighlight>
 +
 +
 +
Online-Test: [http://www.digipool.info/tutorials/css/typische_webseite.html typische_webseite]

Latest revision as of 14:08, 18 November 2011

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

Retrieved from "http://www.digipool.info/m/index.php?title=CSS&oldid=1223"