CSS Kurs - Kurs CSS dla początkujących! css,style,kaskadowe,beginner,cascading style sheets,kurs,polski,stylesheet



Polecam: www.urdruk.pl


CSS w całości dotyczy rozdzielania!

Jedną z ostanich ideii jakie przyświecają technologii CSS jest idea rozdziału treści od graficznego jej wyświetlania. Idea ta uwzględnia, że każda strona zawiera dwa rodzaje treści, zawartość którą są wszystkie Twoje artykuły, tekst i zdjęcia oraz graficzna ich obróbka: zaokrąglone rogi, kolory i efekty. Zwykle te dwa rodzaje treści są przerabiane w trakcie toku życia Twojej strony www. Graficzny wygląd jest tworzony z początku, a dopiero potem zaczynasz zapełniać go treścią strony, a następnie możesz nanosić jakieś poprawki. Zatem jeśli chcesz dodać jakąś treść do swojej strony nie chciałbyś mieć bałaganu w graficznej oprawie, prawda? Ta sama sytuacja jest prawdziwa, jeśli okaże się, że zechciałbyć na nowo przerobić grafikę swojej strony. Dlaczego powinieneś upewnić się, że nowy wygląd zawartości na stronie www, nie narobi bałaganu? W CSS po prostu dodajesz taga <link>, o którym wspomniałem wyżej pomiędzy tagi HTML i w ten sposób nadałeś linka do pliku .css w którym definiujesz wygląd swojej strony. W dokumencie HTML pozostaje Ci tylko dodawanie treści do strony: artykułów, tekstów, grafik i tagów HTML, a ten link daje Ci gwarancję, że treść będzie wyglądać tak jak sobie życzysz. Możesz dodać tego samego linka do innych swoich stron HTML i w ten sposób będziesz wiedział, że zawsze wygląda ona tak jak w stylu CSS, do którego link kieruje. Chcesz dodać zawartość strony? Napisz zatem prostą stronę w HTML i pomyśl o tym, żeby przy użyciu CSS sprawić aby wszystkie tagi nagłówków wyglądały tak jak sobie tylko zażyczysz! Ta metoda formatowania zawartości swojej strony www, rzuci Ci nowe światło na tematykę tworzenia stron www i osobiście zajęło mi nieco czasu zanim to zrozumiałem. Aby Ci w tym pomóc napisałem kilka przykładów, dobrego i złego kodowania. Jak sądzisz co jest nie tak z tym fragmentem kodu?
<font size="3">Witaj na mojej stronie</font>
Komentarz: Tag "font" jest tutaj podany w samym dokumencie HTML, a nie powinien się tutaj znajdować ponieważ służy on formatowaniu tekstu, zatem powinien on być zdefiniowany w pliku .CSS, zatem zamiast tego co jest wyżej powinno się napisać:

W dokumencie HTML:
<h1>Witaj na mojej stronie</h1>
W pliku CSS:
h1 { font-size: 2em; }
Jeszcze jeden przykład:
<b>Pojawił się błąd</b>
Komentarz: Wygląda całkiem nieźle prawda? Ale jeśli się zorientujesz czemu służy tag <b>, szybko się zorientujesz, że służy on pogrubieniu tekstu - bold. Ale jak wiadomo nadawanie tekstowi jakiegoś pogrubienia jest już formatowaniem tego tekstu, zatem ten tag NIE powinien się tam znajdować. Lepszym wyborem byłby tag <em>, który tłumaczy się jako emphasis albo "ten kawałek tekstu jest ważny". Zatem zamiast mówić "ten tekst wygląda jak ten" mówisz niejako "ten tekst jest ważny" i pozwalasz niejako aby CSS sformatował też ważny fragment tekstu w tekście HTML. Z pozoru wygląda na to, że jest to mała zmiana, ale przykład ten ilustruje jak wybierać tagi. Zatem zamiast przykładu wyżej powinieneś napisać:

W dokumencie HTML:
<em>Pojawił się błąd</em>
W dokumencie CSS:
em {
font-weight: bold;
color: Red;
}
Ostatni przykład:
 
<table>
<tr><td><a href="">pierwszy link</a></td></tr>
<tr><td><a href="">drugi link</a></td></tr>
...
</table>
Komentarz: Wielu ludzi formatuje swoje menu na stronach www, w ten sposób powyżej. Ale czy menu na stronie doprawdy jest tabelką? Jeśli spojrzysz w definicję tabelki, okaże się że tag ten jest przeznaczony dla danych, które się umieszcza w tabelach, takich jak na przykład w arkuszu Excelu. Przykład ma tylko jedną kolumnę z datą i brak nagłówków... Niektórzy twierdzą, że używają tabelek ponieważ mogą otrzymać obramowania i kolory tła dla nawigacji, ale właśnie dla tego jest przeznaczona technologia CSS (a nie dokument HTML). Zatem co powinniśmy zrobić? Zagłębmy się w listę elementów HTML elements at w3schools i znajdziemy taga <ul>, który służy do tworzenia listy. Spójrz na to:

W dokumencie HTML:
<ul>
<li><a href="">pierwszy link</a></li>
<li><a href="">drugi link</a></li>
...
</ul>
W stylu CSS:
li {
border: 1px solid;
}
Takie spojrzenie na tworznie stron w HTML jest inne niż to, do którego zapewne przywykłeś, ale zaufaj mi jak nieco popracujesz ze stylami przywykniesz do tej metody pracy nad stronami WWW. Nie tylko ta metoda kodowania da Ci bardziej logiczną strukturę dokumentu, ale jest już także udowodnione, że ta metoda także pozwoli Ci polepszyć PR w wyszukiwarkach proof i będzie lepiej dostępna dla urządzeń czytających Twoją stronę. Ta metoda tworzenia stron jest wspaniała. W następnym kroku zbudujemy szablon podstawowej strony www, przy użyciu poznanej dopiero co metody formatowania tekstu za pomocą CSS.

Wróć do strony nr 1 | Obecnie jesteś na stronie nr 2 | Przejdź na stronę nr 3 | nr 4 |

Tłumaczenie kursu wykonane zostało przez vj_, oryginał pochodzi ze strony: Friendlybit.com i zostało oficjalnie potwierdzone przez autora kursu. Prawa autorskie do tłumaczenia zastrzeżone, możesz jednak swobodnie rozpowszechniać ten kurs podając link do strony z autora tłumaczenia, oraz linka do strony autora oryginału.



Copyright vj zone 2006 - 2016