Kontynuacja przyspieszonego kursu dla niecierpliwych. Część 1/2 – Kurs CSS dla niecierpliwych 1/2
Zakładam, że znasz lub zapoznałeś/aś się już wstępnie z podstawami HTML, wiesz do czego on służy i co się z nim robi 
Zakładam również, że wiesz co kryje się pod pojęciem CSS. Jeśli tak nie jest, zapraszam do pierwszej części kursu: kurs css 1/2.
W 2giej części skupię się na połączeniem CSS z HTML. Powiem o tym jak połączyć styl CSS z kodem HTML w prosty i przejrzysty sposób, oraz kilka przydatnych rzeczy dla początkujących.
4. Klasy
Mamy link (<a>):
<a>link</a>
Dodajemy gdzie ten link ma prowadzić i konkretniejsza nazwe:
<a href=”http://webowiec.net”>portal webmasterski</a>
Dla całkowitej poprawności SEO dodajmy jeszcze title
<a href=”http://webowiec.net” title=”portal webmasterski”>portal webmasterski</a>
i git, teraz patrz:
<znacnzik atrybut=wartosc>anachor</znacznik>
jadąc z przykładu wyżej:
a – znacznik
href, title – atrybuty
http://webowiec.net – wartość
portal webmasterski – anachor
Zrozumienie tych 4 pojęć będzie przydatne aby zrozumieć dalszą część kursu.
Do powiązania CSS z HTML służą klasy, czyli atrybuty “class” o wartości równej nazwie klasy:
<a href=”http://webowiec.net” title=”portal webmasterski” class=”superlink”>portal webmasterski</a>
Ten link ma klasę “superlink”.
Chcąc zmienić teraz kolor linku na czerwony, można dać:
a {color: red;}
Ale jeśli element ma klasę, można to zrobić tak:
.superlink {color: red;}
i teraz tylko ten link będzie czerwony a reszta standardowa.
Jeśli mamy tekst:
“Jasio idzie po małgosie. Jasio bieże małgosie na spacer. Jasio zaczyna coś nawijać..”
Zaznaczamy środkowe zdanie:
“Jasio idzie po małgosie. <span>Jasio bieże małgosie na spacer.</span> Jasio zaczyna coś nawijać..”
<span> … </span> nie robi absolutnie nic, taki pozornie bezsensowny znacznik, ale teraz dodając CSS:
span {color: red;} # zaznaczone zdanie wyświetli się na czerwono.
Jeśli dodamy inny span i klasę do nich:
<span class="zielony">Jasio idzie po małgosie.</span> <span class="czerwony">Jasio bierze Małgosie na spacer.</span> Jasio zaczyna coś nawijać.
Dodająć kod css:
.zielony{color: green;background:white;}
.czerwony{color: red;background:yellow;}
Zdania pokolorujemy zgodnie z opcjami w/w
Może być kilka elementów tej samej klasy (ważne info!)
Np.:
Ide <span class="x">ulica</span>. <span class="x">ulica</span> jest czerwona. Ta sama <span class="x">ulica</span> jest szeroka
CSS:
.x{color: yellow;} #słowa “ulica” pojawią się na żółto
Można też to zrobić “na hama” wiec dodając opcje z CSS bezpośrednio do html-a jako wartość atrybutu “style“:
Ide <span style=”color: yellow;”>ulica</span>. <span style=”color: yellow;”>ulica</span> jest czerwona. Ta sama <span style=”color: yellow;”>ulica</span> jest szeroka
Efekt:
Ide ulica. ulica jest czerwona. Ta sama ulica jest szeroka
słowa “ulica” są na żółto.
5. ID
Obok klas można też stosować identyfikatory. Atrybutem jest “id” wartością nazwa identyfikatora, np:
Ide <span id=”x”>ulica</span>.
Różnica między klasami jest taka, że klasę można używać wielokrotnie, natomiast identyfikator może być tylko jeden!
Odwołanie w CSS:
#x {color: yellow}
– zamiast kropki wystepuje #
6. Kod CSS w dokumencie HTML:
Kod CSS w kodzie HTML umieszczamy w sekcji HEAD dokumentu, w następujący sposób:
<html>
<head>
<style type=”text/css”>
.x{color: yellow;}
</style>
</head>
<body>
…
</body>
</html>
Gdzie .x{color: yellow;} jest tylko przykładem kodu CSS, Ty możesz wrzucać tam swój kod i może być go na wiele linijek.
7. Osobny plik CSS dołączany do pliku HTML:
Jeśli kodu CSS uzbiera się nam więcej, przydałoby się go upchnąć do osobnego pliku oraz jakoś włączyć do pliku HTML, w punktu 6 wiadomo tylko, że kod CSS da się włączyć do HTML-a bezpośrednio, ale jeśli jest go dużo, na pewno pojawią się problemy
Aby tych niedogodności uniknąć, stosuje się tagi:
<html>
<head>
<link rel=”stylesheet” href=”styl.css” type=”text/css” />
</head>
<body>
…
</body>
</html>
Gdzie styl.css oznacza ścieżkę dostępu do pliku CSS. Sama zawartość styl.css to najzwyczajniejszy tekst pisany np. w notatniku. Nie są potrzebne żadne dodatkowe programy do edycji CSS, nie musisz pamiętać o żadnych nagłówkach czy specjalnych krzaczków czy innych bajerów (jak to jest przy HTML-u np. z tagiem <html>). Po prostu wklejasz kod CSS do pliku, zapisujesz i tyle
8. Dodatki:
body{background: green;} # zmienia kolor tła całej strony na zielony
*{font-size: 10px;} #wszystko na stronie co zawiera tekst, będzie go stylizować na czcionke i wielkości 10px, * oznacza wszystkie elementy na stronie
a,a:link,a:visited,a:hover{text-decoration:none;} #link, nieodwiedzony link, odwiedozny link, link po najechaniu myszką będą bez podkreślenia
<b id=”x” class=”y”>jaki to będzie miało kolor?</b>
#x{color: red;}
.y{color: green;}
?
Identyfikator jest zawsze ważniejszy, ale jak zwykle IE może odstawić jakąś maniane, dlatego używa się:
#x{color: red !important;}
.y{color: green;}
“!important” wymusza piorytet na ustawieniu.
Koniec kursu CSS dla niecierpliwych
