Szablon HTML i CSS

Mar 05
2009
Leave a
Comment

Połaczączmy dokument HTML i plik CSS.

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN”>
<html lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″>
<title>Moja pierwsza strona</title>
<link rel=”stylesheet” href=”style.css” type=”text/css”>
</head>
<body>

<div id=”header”>
<h1>Nagłówek</h1>
</div>
<div id=”navigation”>
<h2>Nawigacja</h2>
<ul>
<li><a href=”first.html”>link</a></li>
<li><a href=”second.html”>link</a></li>
<li><a href=”third.html”>link</a></li>
</ul>
</div>
<div id=”content”>
<h2>Treśćt</h2>
<p>treść stronye</p>
</div>
<div id=”footer”>
<p>Autor: BLA BLA</p>
</div>

</body>
</html>

Kod pliku css o nazwie style.css.

body {
background-color: Green;
}
div {
border: 3px solid Black;
padding: 7px;
width: 600px;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
}

#navigation {
float: left;
width: 150px;
}
#content {
float: left;
width: 430px;
}
#footer {
clear: both;
}

Ustaliliśmy w nim tło dokumentu dla wszystkich elementów.

Ustaliliśmy również podstawowe style dla konkretnych sekcji <div>.

Aby połączyć ze sobą dwa pliki, w dokumencie HTML w sekcji nagłówka wstawiamy nastepujący kod:

<link rel="stylesheet" href="style.css" type="text/css">
Written by admin in: Artykuły, CSS, HTML, Tutorial | Tags: ,

CSS to seperacja treści i stylów

Feb 15
2009
Leave a
Comment

Najważniejszym elementem CSS jest idea odłączenia projektu strony od jej treści. Każda witryna internetowa zawiera dwa główne elementy:

  • treść: artykuły, zdjęcia, filmy, teksty, itp.
  • projekt: kolory, wielkości czcionek, rodzaje czcionek, układ strony, itp.

W przeszłości, tz. w czasach “przed CSS” , treści i projekt strony były ze sobą ściśle powiązane. Wyglądało to w następujący sposób:

<font size="3">Witam na mojej stronie</font>

Zastosowanie znacznika <font> określiło w powyższym przykładzie wielkość czcionki. Kod ten znajdował się w oryginalnym dokumencie HTML, a więc był powiązany z treścią strony w pewnym stropniu nierozerwalnie. Jeśli właściciel witryny chciał zmienić wygląd strony, musiał wchodzic w kod poszczególnych stron HTML i redagować wszystkie znaczniki. Było to bardzo uciążliwe, szczególnie w przypadku dużych witryn. Po wprowadzeniu stadardów CSS, właściciel witryny mógł oddzielić właściwości znaczników definiując je w oddzielnym pliku CSS. Plik ten zawiera jedynie deklaracje określające właściowści poszczególnych znaczników lub klasy i id’s, które ustalają reguły dla wszystkich elementów, do których przypiszemy daną klasę. Plik CSS jest podłączony do oryginalnego dokumentu w sekcji <head>. Pozwoliło to na tworzenie treści, która jest kompletnie niezależna od wyglądu, który można definiować jak chcemy, kiedy chcemy, tylko w w pliku css.

Na przykład:

W dokumencie HTML:
<h1>Witaj na mojej stronie</h1>

W pliku CSS:
h1 { font-size: 2em; }

Inny przykład:

<table>
<tr><td><a href=”">link do jakiejś strony</a></td></tr>
<tr><td><a href=”">link do jakiejś strony</a></td></tr>
…
</table>

Wielu ludzi budowało w ten sposób menu na stronie. Jeśli popatrzy się na definicję znacznika <table>, zobaczymy, że należy go używać jedynie do danch numerycznych a nie wyglądu strony. Oczywiście łatwo było zdefiniować kolor dla tabeli, jej granice, itp. ale to jest zadanie pliku CSS. Ten sam efekt można uzyskać używając znacznika <ul>, którego odpowiednio definiujemy w pliku CSS.

Na przykład:

W dokumencie HTML:
<ul>
<li><a href=”">link do jakiejś strony</a></li>
<li><a href=”">link do jakiejś strony</a></li>
…
</ul>

W pliku CSS:
li {
border: 1px solid;
}

Stosowanie CSS jest nalepszym rozwiązanie prz projektowaniu stron. W przypadku potężnych witrym, można zmieniać ich wygląd w przeciągu paru minuyt lub sekund. Nie było to możliwe w przeszłości, dlatego CSS jest jedynym rozwiązaniem, którego należy używać.

Written by admin in: Artykuły, CSS, HTML, Tutorial | Tags:

Visit Our Friends!

A few highly recommended friends...

Archives

All entries, chronologically...

Pages List

General info about this blog...