CSS Dla Początkujących

Poniższy artykuł jest lekcją wprowadzającą do CSS dla tych, którzy wiedzą trochę na temat języka HTML lub wcześniej budowali już strony internetowe.

Czym jest CSS?

CSS jest językiem, który wprowadza style (kolory, zdjęcia, granice, marginesy, tabelki, etc.) do dokumentów HTML, PHP lub XHTML. Zamiast definiowania stylów w dokumencie, definiuje się je w oddzielnym pliku, który może być wykorzystywany przez inne dokumenty. Oznacza to mniejszą ilość kodu w oryginalnym pliku (ważny elemnt w algorytmach wyszukiwarek) jak również łatwiejszy sposób zarządzania wyglądem strony. Plik z rozszerzenie CSS (np.: style.css) musi zostać podłączony do każdej strony, na której chcemy aby dane style były zastosowane. W tym celu umieszamy poniższy kod w sekcji HEAD (pomiędzy zanczniki <head> i </head>):

<link rel="stylesheet" href="style.css" type="text/css">

Oto przykładowa treść pliku CSS:

h1 {
font-size: 20px;
color: red;
background-color: black;
}
a 
{color: Blue;
font-size: 3em;
}
.header 
{
color: red;
font-weight: bold;
}
#footer 
{
background-color: black;
}

W przykładowym pliku umieściliśmy cztery selektory: h1, a, .header i #footer. Selektory, które definiują pewne sekcje dokumentu, można budować na wiele sposobów z następujących bloków:

  • element
  • class
  • Id

Element zawiera w sobie znacznik HTML (taki jak <p>, <h1>, <td>, <a>, etc.). W powyższym przykładzie zdefiniowaliśmy znacznik <h1> dla całego dokumentu. Określiliśmy kolor tła (czarny), kolor czcionki (biały) oraz wielkość czcionki (20px – o wiele lepszą formą jest podawanie wielkości w em np.:2em, która mówi , że czcionka ma być dwa razy większa od czcionki tekstu).

Zastosowanie class jest także bardzo łatwe. Klasa definuje wszystkie znaczniki, które się w niej znajdują. Dlatego w powyższym przykładzie wszystkie znaczniki klasy będą czerwone i pogrubione. W praktyce, aby użyć klasy stosuje się znacznik <div>, np: <div class="header"> lub każdy inny element, któy chcemy aby posiadał określone właściwości klasy np.: <p class="header">.

Ostatnim blokiem budowlanym jest id. Atrybut ten ma takie same właściwości jak klasa z jednym wyjątkiem – można zamieścić jedynie jeden element z takim samym id na danej stronie, np: <div id="footer">.

Używając tych trzech elemetów można budować bardzo zaawansowane pliki css, które definiują cały rozkład strony oraz właściwości wszystkich znaczników.

Wyjaśnijmy po krótce użyte elemety kodu. Każdy selektor zawiera deklaracje (declarations), w których definiowane są właściwości (property). Właściwości posiadają pewne wartości, które zmieniają definiowany element.

Na przykład:

a {
color: Blue;
font-size: 3em;
}

Selektor a (czyli element linku) ma następującą deklarację, która zawiera następujące właściwości: kolor i rozmiar czcionki. Wartościami tych właścowości są: Blue i 3em. Dobrze jest znać wszystkie powyższe terminy, ponieważ pojawiają się one w literaturze fachowej.

CSS To Seperacja Treści I Stylów

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ć.

Budowanie Szablonu Strony W Języku HTML

Każda strona internetowa powinna być budowana w myśl trzech głównych zasad:

  1. Sekcje: nagłówek, nawigacja, treść, stopka.
  2. Dobra struktura HTML
  3. Brak błędów w kodowaniu

Zacznijmy od pierwszej. Chcemy aby nasz dokument był podzielony na cztery główne części. Z tego powodu użyjemy znacznika <div>. Div jest angielskim skrótem słowa “division”, które w języku polskim oznacza dywizję, podział, oddział, itp. Oto przykładowy szablon strony z jej głównymi elementami:

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN”>
<html lang=”pl”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf=8″>
<title>Moja pierwsza strona</title>
<link rel=”stylesheet” href=”style.css” type=”text/css”>
</head>
<body>
<div id=”header”>
<!– nagłówek! –>
</div>
<div id=”navigation”>
<!–nawigacja! –>
</div>
<div id=”content”>
<!– treść! –>
</div>
<div id=”footert”>
<!– stopka! –>
</div>
</body>
</html>

Na samym początku deklarujemy <!DOCTYPE>, czyli typ dokumentu, który określany jest standardami W3C. Istnieje wiele różnych typów i różnia się one między innymi jakimi znacznikami możemy się posługiwać w danym dokumencie. Jeśli używasz programu typu Micromedia Dreamweaver do budowy stron, to nie musisz się martwić typem dokumentu, ponieważ program ten sam określa typ i podpowiada ci jakich znaczników możesz używać. Równie dobrze możesz nie stosować znacznika <!DOCTYPE>. W takim przypadku przeglądarki będą interpretować twoją stronę w tzw. “quirks mode”. Wolisz jednak okreść typ, ponieważ wówczas przeglądarki będą go wyświetlać według odpowiedniego standardu.

Następnym znacznikiem jest <head>. Element ten zawiera metadane, które nie będą widoczne na stronie. W sekcji tej znajduje sie obecnie określenie języka, określenie zestawu znaków (UTF=8 – czcionki uniwersalne), tytuł strony widoczny na samej górze przeglądarki oraz link to pliku CSS.

Dokument, który użytkownicy strony zobaczą w przeglądarce mieści się pomiędzy znacznikami <body> i </body>.

Znacznik body zawiera następujące elementy:

<div id=”header”>
<h1>Moja pierwsza strona</h1>
</div>
<div id=”navigation”>
<h2>Nawigacja</h2>
<ul>
<li><a href=”podstrona1.html”>Podstrona 1</a></li>
<li><a href=”podstrona2.html”>Podstrona 2</a></li>
<li><a href=”podstrona3.html”>Podstrona 3</a></li>
</ul>
</div>
<div id=”content”>
<h2>Treść</h2>
<p>Tutaj znajduje się artykuł</p>
</div>
<div id=”footer”>
<p>Autorem jest BLA BLA </p>
</div>
…

Określiliśmy cztery sekcję dokumentu. Każda z sekcj posiada odpowiedni atrybut ID. Atrybut ten możemy zdefiniować w pliku CSS dla każdej sekcji. W taki oto sposób otrzymaliśmy szablon dokumentu HTML, który nie jest powiązany z wyglądem strony. W danym szablonie używając pliku CSS możemy przesuwać odpowiednie sekcje w prawo, lewo, górę i dół. Możemy manipulować ich wyglądem w stopni na jaki pozwala nam nasza wyobraźnia.

Szablon HTML I CSS

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">

Menu Rollover – Obrazy

Efekt został osiagnięty poprzez zastosowanie obrazów.

oraz

Kod CSS:

HTML

<div id=”navcontainer”>
<ul id="navlist">
<li id="active"><a href="#" id=”current”>Link 1</a>
<ul id="subnavlist">
<li id="subactive"><a href="#" id="subcurrent">podmenu</a></li>
<li><a href="#">podmenu</a></li>
<li><a href="#">podmenu</a></li>
<li><a href="#">podmenu</a></li></ul></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>

CSS

#navcontainer { margin-left: 30px; }

#navcontainer ul

{

margin: 0;

padding: 0;

list-style-type: none;

font-family: verdana, arial, Helvetica, sans-serif;

}

#navcontainer li { margin: 0; }

#navcontainer a

{

display: block;

padding: 5px 10px;

width: 140px;

color: #000;

background-color: #ADC1AD;

text-decoration: none;

border-top: 1px solid #fff;

border-left: 1px solid #fff;

border-bottom: 1px solid #333;

border-right: 1px solid #333;

font-weight: bold;

font-size: .8em;

background-image: url(images/image1.jpg);

background-repeat: no-repeat;

background-position: 0 0;

}

#navcontainer a:hover

{

color: #000;

background-color: #889E88;

text-decoration: none;

border-top: 1px solid #333;

border-left: 1px solid #333;

border-bottom: 1px solid #fff;

border-right: 1px solid #fff;

background-image: url(images/image2.jpg);

background-repeat: no-repeat;

background-position: 0 0;

}

#navcontainer ul ul li { margin: 0; }

#navcontainer ul ul a

{

display: block;

padding: 5px 5px 5px 30px;

width: 125px;

color: #000;

background-color: #C5D8C5;

text-decoration: none;

font-weight: normal;

}

#navcontainer ul ul a:hover

{

color: #000;

background-color: #889E88;

text-decoration: none;

}

Proste Menu Z Rollover

Rollover otzrymywany poprzez konwersję listy w blok przy użyciu “display: block” i zmianie koloru tła poprzez “a:hover”.

HTML

<div id=”navicontainer”>
<ul id=”navilist”>
<li id=”active”><a href=”#” id=”current”>Link jeden</a>
<ul id=”subnavlist”>
<li id=”subactive”><a href=”#” id=”subcurrent”>Link w submenu </a></li>
<li><a href=”#”>Link w submenu</a></li>
<li><a href=”#”>Link w submenu</a></li>
</ul>
</li>
<li><a href=”#”>Link dwa </a></li>
<li><a href=”#”>Link trzy </a></li>
</ul>
</div>

CSS

#navicontainer { margin-left: 30px; }
#navicontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-family: verdana, arial, Helvetica, sans-serif;
}
#navcontainer li { margin: 0 0 1px 0; }
#navicontainer a
{
display: block;
padding: 5px 10px;
width: 140px;
color: #fff;
background-color: #036;
text-decoration: none;
}
#navicontainer a:hover
{
color: #fff;
background-color: #69C;
text-decoration: none;
}
#navicontainer ul ul li { margin: 0 0 1px 0; }
#navicontainer ul ul a
{
display: block;
padding: 5px 5px 5px 30px;
width: 125px;
color: #fff;
background-color: #369;
text-decoration: none;
}
#navicontainer ul ul a:hover
{
color: #fff;
background-color: #69C;
text-decoration: none;
}

Menu Poziome

Zacznijmy od typowej listy pionowej, którą następnie przekształcimy arkuszem stylów CSS

Standardowe listy HTML używają padding, marginesów oraz lewego wcięcia. Ustawimy maginesy i padding na “0”.

Kod CSS

#navicontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
}

Kod HTML

<div id=”navicontainer”>
<ul>
<li><a href=”#”>Link 1</a></li>
<li><a href=”#”>Link 2</a></li>
<li><a href=”#”>Link 3</a></li>
<li><a href=”#”>Link 4</a></li>
<li><a href=”#”>Link 5</a></li>
</ul>
</div>

Step II

Aby zmienić listę pionową na poziomą należy użyć “display: inline;” dla poszczególnych pozycji listy “LI” i ustawić padding tylko dla elementu “LI”, co spowoduje, że będziemy mieli małą spację pomiędzy poszczególnymi linkami.

Kod CSS

#navicontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
#navicontainer ul li { display: inline; padding-left:2;}

Kod HTML

<div id=”navicontainer”>
<ul>
<li><a href=”#”>Link 1</a></li>
<li><a href=”#”>Link 2</a></li>
<li><a href=”#”>Link 3</a></li>
<li><a href=”#”>Link 4</a></li>
<li><a href=”#”>Link 5</a></li>
</ul>
</div>

Menu Poziome Bez Dekoracji

Aby usunąć dekoracje tekstu w odnośniku należy zastosować “text-decoration

Oto przykładowe menu listy “UL” przeksztalcone na listę poziomą

Usuwamy dekorację tekstu używając następującego kodu:

Kod CSS

#navicontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
#navicontainer ul li { display: inline; padding-left:2;}
#navicontainer ul li a { text-decoration: none; }

Kod HTML

<div id=”navicontainer”>
<ul>
<li><a href=”#”>Link 1</a></li>
<li><a href=”#”>Link 2</a></li>
<li><a href=”#”>Link 3</a></li>
<li><a href=”#”>Link 4</a></li>
<li><a href=”#”>Link 5</a></li>
</ul>
</div>

Powyższy kod daje w rezultacie taki wynik:

Padding i Margines

Margines

Margines określa przestrzeń wokół elementów. Możliwe jest stosowanie wartości negatywnych. Standardy CSS pozwalają na ustawienie marginesu:

  • lewego “margin-left”
  • prawego “margin-right”
  • góry “margin-top”
  • dołu “margin-bottom”

W pliku CSS można zdefiniować margines w następujący sposób:

#kod {
margin: 10px 10px 10px 10px;
}

Powyższy kod określa margines, który wynosi 10 pikseli z każdej strony {margin:’margin-top’ ‘margin-right’ ‘margin-bottom’ ‘margin-left’} .

Jeśli chcemy aby margines był taki sam dla każdgo boku możemy użyć następującego kodu:

#kod {
margin: 10px;
}

Padding

Padding również określa przestrzeń wokół elementów. Standardy CSS pozwalają na następujące ustawienia:

  • lewy “padding-left”
  • prawy “padding-right”
  • góra “padding-top”
  • dół “padding-bottom”
#kod {
padding:’padding-top’ ‘padding-right’ ‘padding-bottom’ ‘padding-left’;
}

Różnica pomiędzy paddingiem i marginesem

Padding określa przestrzeń wokół danego elementu, np: <p> lub >div>, natomiast margines przestrzeń pomiędzy elementami.

obraz

Jak widać na rysunku, padding oznaczony jest kolorem niebieskim. Okresla on wielkość przestrzeni wokół elementu <p>. Element ten posiada również margines zaznaczony kolorem pomarańczowym. Jest to odleglość od brzegu elemenu <body>.

Font Family

Syntaks:font-family: [[<family-name> | <generic-family>],]* [<family-name> | <generic-family>]
Możliwe wartości :<family-name>każda rodzina czcionek<generic-family>serif (np.:Times)sans-serif (np: Arial or Helvetica)cursive (np.: Zapf-Chancery)fantasy (np.:Western)monospace (np.: Courier)
Początkowa wartość:Określa przeglądarka
Zastosowanie:wszystkie elementy
Dziedziczność:tak

Typowa deklaracja font-family wyglada następująco:

p { font-family: “New Century Schoolbook”, Times, serif }