Kurs CSS dla niecierpliwych [cz 2/2]

Podziel się:   Facebook   Google+   Twitter   GG   E-mail  

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:
– 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 😉

Powiązane artykuły

Featuring Top 9/9 of Pozycjonowanie strony w google

Kurs css

  • Kurs CSS dla niecierpliwych [cz 1/2]

    Co to jest CSS, po co go używać, jak go używać.. CSS - stylizowanie różnych elementów HTML, inaczej mówiąc: wizualizowanie/nadawanie odpowiedniego wyglądu strony www. Zaczynając kurs…

  • Kurs CSS dla niecierpliwych [cz 2/2]

    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…