Tvorba webových stránek

TVORBA VLASNÍHO WEBU - CSS (Casscasing Style Sheet)
ODKAZY CSS PHP Javascript HTML Videonávody co je CSS Hlavní strana Programy Užitečné Tagy Bavte se Felix Holzmann-Akvárium- Felix Holzmann - Šachová koncovka Felix Holzmann - Skleróza Felix Holzmann - Aluminiový klíček Felix Holzmann - Včera Dnes a Zítra Felix Holzmann - Seznamovací kancelář	V tomto článku se naučíme dělat něco s CSS a taky ho připojit na stránky. Tady je základ: V PSPadu si uděláme soubor (nějaký váš název).css. CSS se na stánky připojují pomocí tagu link. V tomto tagu může dále být -> HREF(adresa co jste si vytvořili).css -> REL -> TYPE (tady musí být v jakém jazyce to bude)u nás TEXT/CSS Jak připojit CSS k HTML: V tagu HEAD si uděláme tag LINK a do něj vypíšeme to co vidime na hoře a pak tag HEAD zakončíme. Jako první kód jsem zvolil vysouvací menu <html> //začátek dokumentu <head> // hlavička dokumentu <title>Ahoj </title> //místo Ahoj si tam můžete dát něco svého <link href=( ten váš název).css rel=stylesheet type=text/css>// to je to připojení to tam musí být jinak vám to nepůjde </head> <body> <table> <tr> <td> <ul class="menu"> <li><a href="../html/">co chcete</a> <ul> <li><a href="adresa odkazu">Text odkazu</a></li> <li><a href="adresa odkazu">Text odkazu</a></li> <li><a href="adresa odkazu">Text odkazu</a></li> </ul> </li> </ul> </td> <td> <ul class="menu"> <li><a href="../css/">CSS</a> <ul> <li><a href="adresa odkazu">Text odkazu</a></li> <li><a href="adresa odkazu">Text odkazu</a></li> <li><a href="adresa odkazu">Text odkazu</a></li> <li><a href="adresa odkazu">Text odkazu</a></li> </ul> </li> </ul> </td> <td> <ul class="menu"> <li><a href="../php/">PHP</a> <ul> <li><a href="adresa odkazu">Text odkazu</a></li> <li><a href="adresa odkazu">Text odkazu</a></li> </ul> </li> </ul> </td> </table> //telíčko dokumentu </body> </html> //konec dokumentu nejprve si zavedeme CSS styl-> (ten váš název).CSS ___________________________________________________ .menu {color: #000000; padding: 0; margin: 0; list-style-type: none; display:block} .menu ul {margin-top: 0px; position: absolute; visibility: hidden; background-color: #A72135; margin: 0; padding: 0; list-style-type: none;} .menu li {float: left; padding: 2px 2px 0 2px; width: 200px; white-space: nowrap;} .menu a {padding: 2px; text-align: left; padding-left: 15px; color: #fff; background-color: rgb(141,135,81); display: block; text-decoration: none; font-weight: bold;} .menu ul a:link {color: #fff; border-bottom: none; padding-left: 15px; _padding-left: 19px;} .menu ul a:visited {color: #fff; border-bottom: none; padding-left: 15px; _padding-left: 19px;} .menu ul a:hover {color: #4f4f4f; background-color: rgb(233,233,233);} .menu li:hover ul, ul.menu li.hover ul { visibility: visible;} .menu li li {float: none; border: none; padding: 0; margin: 0;} Vypadá to takhle.

TVORBA VLASNÍHO WEBU - CSS (Casscasing Style Sheet)

V tomto článku se naučíme dělat něco s CSS a taky ho připojit na stránky.
Tady je základ:
V PSPadu si uděláme soubor (nějaký váš název).css. CSS se na stánky připojují pomocí tagu link. V tomto tagu může dále být -> HREF(adresa co jste si vytvořili).css
-> REL
-> TYPE (tady musí být v jakém jazyce to bude)u nás TEXT/CSS
Jak připojit CSS k HTML: V tagu HEAD si uděláme tag LINK a do něj vypíšeme to co vidime na hoře a pak tag HEAD zakončíme.
Jako první kód jsem zvolil vysouvací menu

<html> //začátek dokumentu
<head> // hlavička dokumentu 
<title>Ahoj </title> //místo Ahoj si tam můžete dát něco svého
<link href=( ten váš název).css rel=stylesheet type=text/css>// to je to připojení to tam musí být jinak vám to nepůjde
</head>
<body>
<table>
<tr>
<td>
<ul class="menu">
<li><a href="../html/">co chcete</a>
<ul>
<li><a href="adresa odkazu">Text odkazu</a></li>
<li><a href="adresa odkazu">Text odkazu</a></li>
<li><a href="adresa odkazu">Text odkazu</a></li>
</ul>
</li>
</ul>
</td>
<td>
<ul class="menu">
<li><a href="../css/">CSS</a>
<ul>
<li><a href="adresa odkazu">Text odkazu</a></li>
<li><a href="adresa odkazu">Text odkazu</a></li>
<li><a href="adresa odkazu">Text odkazu</a></li>
<li><a href="adresa odkazu">Text odkazu</a></li>
</ul>
</li>
</ul>
</td>
<td>
<ul class="menu">
<li><a href="../php/">PHP</a>
<ul>
<li><a href="adresa odkazu">Text odkazu</a></li>
<li><a href="adresa odkazu">Text odkazu</a></li>
</ul>
</li>
</ul>
</td> 
</table>
 //telíčko dokumentu
</body>    
</html> //konec dokumentu

nejprve si zavedeme CSS styl-> (ten váš název).CSS
___________________________________________________
.menu {color: #000000; padding: 0; margin: 0; list-style-type: none; display:block}
.menu ul {margin-top: 0px; position: absolute; visibility: hidden; background-color: #A72135; margin: 0; padding: 0; list-style-type: none;}
.menu li {float: left; padding: 2px 2px 0 2px; width: 200px; white-space: nowrap;}
.menu a {padding: 2px; text-align: left; padding-left: 15px; color: #fff; background-color: rgb(141,135,81); display: block; text-decoration: none; font-weight: bold;}
.menu ul a:link {color: #fff; border-bottom: none; padding-left: 15px; _padding-left: 19px;}
.menu ul a:visited {color: #fff; border-bottom: none; padding-left: 15px; _padding-left: 19px;}
.menu ul a:hover {color: #4f4f4f; background-color: rgb(233,233,233);}
.menu li:hover ul, ul.menu li.hover ul { visibility: visible;}
.menu li li {float: none; border: none; padding: 0; margin: 0;}

Vypadá to takhle.