Witajcie! Tym razem nam dla Was poradnik dotyczący tego czegoś, co łaczy CSS z HTML'em szablonu, czyli selektorów. Spotykamy się z nimi zawsze, gdy zabieramy się za przygotowywanie layoutu na bloga. No po prostu nie da się tego uniknąć.Jako że miałam pewną przerwę od blogowania, to nie jestem pewna, czy to, co chcę Wam zaprezentować w tym poście, nie jest już przypadkiem powszechnie znane... No ale zobaczmy. Początkującym z pewnością się przyda.
No tak, ale właściwie co ja chcę Wam tu tłumaczyć? Selektory to selektory, ich listy wraz z opisami są udostępniane na różnych blogach, niema to co tłumaczyć. A no właśnie! Chcę Wam przedstawić sposób, dzięki któremu nie będziecie musieli już zaglądać do tych list, a sami będziecie mogli "zgadywać", jaki selektor odpowiada za jaki element na blogu. No dobra, zgadywać to też nie jest zbyt dobre słowo, ale dojdziemy do tego. Gwarantuję, że to działa. Niema opcji, żeby nie działało. Tylko trzeba troszeczkę pomyśleć i poznać podstawy HTML. Tym się właśnie teraz zajmiemy.
1. PODSTAWY HTML
No tak, o ile do takiego średnio zaawansowanego robienia szablonu nie była Wam potrzebna wiedza na temat HTML, o tyle do tego mojego sposobu już jest Wam potrzebna. Ale spokojnie, to tylko podstawy podstaw. A mianowicie:
Znacznik niebieski, czyli <div></div> (Widzicie? Nawias zamykający pierwszego napisu div jest nieco dalej, ale to do niego on należy), to jeden z podstawowych znaczników w HTML. Elementy leżące pomiędzy znacznikiem otwierającym (pierwszy) i zamykającym (drugi) należą do tego elementu, w tym wypadku do diva. Innymi przykładami tego typu znaczników są np: <html>, <h1>, <head> i <body>. Ważnym jest to, że słówko div należy do składni HTML i nie można stworzyć np. elementu, który będzie zamknięty w znacznikach <ramka></ramka>. Dzieje się tak chociażby dlatego, że w tej nazwie zawarte są również domyśle właściwości, które ma dany element.
Załóżmy, że mamy stronę, na której jest 10 różnych divów. Jak znaleźć ten, który mamy na akurat na myśli? Przykładowo możemy nadać mu id. Jest to unikalny identyfikator obiektu (można go nadać również innym obiektom, nie tylko divom). Jako że jest unikalny, nie można nadać takiego samego identyfikatora dwóm różnym obiektom. Sposób, w jaki nadajemy identyfikator, przedstawiłam Wam na górze. Tekst napisany na czarno, w tym wypadku Ramka to coś, co wpisujemy samodzielnie. W ten sposób element na stronie otrzymuje swoją unikalną nazwę.
A co w sytuacji, kiedy jednak chcemy, aby kilka różnych obiektów miało są samą nazwę, tworzyły swego rodzaju rodzinę, która mimo wszystko wyróżniałaby się od reszty elementów? Wówczas możemy nadać im klasę. To jest ten zielony napis class, który widzicie na górze. Klasę, podobnie jak id, wymyślamy samodzielnie, niemniej jednak wiele elementów może mieć tą samą klasę.
Dla maksymalnego uproszczenia powiedzmy sobie, że te znaczniki, jak np. <div> są gatunkiem elementów, klasa jest jego nazwiskiem, a id jego numerem pesel. Mniej więcej tak można to porównać.
Celem tego poradnika nie jest nauczenie Was samodzielnego budowania takich ramek (chociaż myślę, że nawet po przeczytaniu tego powyższego tekstu bylibyście w stanie samodzielne zbudować prostą ramkę), ale wyróżnienie tych opisanych przeze mnie elementów z całego kodu HTML. Zapamiętaliście już te 3 elementy? W takim razie przechodzimy do punku drugiego.
2. POŁĄCZENIE HTML I CSS
Tym, co wiąże CSS i HTML (wiadomo, że CSS odpowiada za wygląd elementów, które pierwotnie zdefiniowane zostały w HTMLu.), są selektory. Część z nich już zapewne znacie, gdyż masa poradników oferuje listy selektorów i informacje, które za co odpowiadają. Sami jednak zdajecie sobie sprawę, że nie są one kompletne. Pamiętam, jak chciałam kiedyś usunąć ikonkę ołówka, która znajdowała się przy każdym komentarzu autora posta, jednak za nic w świecie nie mogłam znaleźć informacji na temat tego, jaki selektor za nie odpowiada.
Cofnijmy się jednak kawałek. Przedstawię Wam teraz 3 sposoby zapisu tego samego, prostego kodu CSS dla powyżej opisanej ramki.
1) jeżeli jako selektor chcemy wybrać typ ramki, czyli to, co znajduje się między znakiem większości i mniejszości, wówczas nie poprzedzamy selektora żadnym znakiem, np. div, h1, h2, body. Wówczas własność opisaną za pomocą CSS dostaną wszystkie elementy tego typu.
2) jeżeli jako selektor chcemy wybrać id ramki, wówczas poprzedzamy selektor znakiem "#", np. #sidebar1, #Text1, #PageList1. Wówczas własność opisaną w CSS przejmie jedynie ten konkretny element o zadanym id.
3) jeżeli jako selektor chcemy użyć klasy elementu, poprzedzamy ją znakiem ".", np. .main-outer, .header, .comment. Wówczas własność tą przejmą wszystkie elementy o zadanej klasie.
To cała magia, chociaż sprawa jest tak naprawdę nieco bardziej skomplikowana. Selektory można również łączyć, jako że można zagnieżdżać w sobie różne elementy w HTMLu. Poniżej przedstawię Wam przykład zagnieżdżeń.
3. WYKORZYSTANIE WIEDZY W PRAKTYCE
Teraz, kiedy już zdobyliście podstawową wiedzę na ten temat, zapewne będziecie w stanie wyróżnić w kodzie HTML znaczniki, id i klasy. I to właśnie musicie zrobić. Niemniej jednak ciężko byłoby Wam, gdybyście musieli wybrać jeden selektor spośród setek w całym wielkim HTMLu. W tej sytuacji po prostu róbcie to, co ja.
1. Otwieramy przeglądarkę. Ja używam Mozilla Developer Edition, ale w zwykłej Mozilli czy Chromie to też zadziała. W Operze chyba też, w Safari też powinno. Co do innych - nie wiem.
2. Otwieramy przykładowego bloga. Zapewne będzie to wasz próbny blog, na który robicie szablon. Pamiętajcie jednak, że sposób ten zadziała również na innych blogach, jak i również na stronach internetowych (ja np. niedawno robiłam stronę na Wordpressie i też z tego korzystałam).
3. Klikamy prawym przyciskiem myszy na interesujący nas element i wybieramy "Zbadaj element" (lub odpowiednik tej opcji w innej przeglądarce).
4. I teraz dzieje się magia. Otwiera nam się okienko, w którym mamy podgląd na bieżący kod HTML. Wiersz w HTML'u, który nam się podświetli, to kod elementu, na który kliknęliśmy. Dla upewnienia się możemy najechać na ten kod - element na blogu, za który odpowiada, powinien się podświetlić.
5. Teraz, śledząc HTML, dowiaduję się, że nasz element to element typu a, który zagnieżdżony jest w elemencie typu h3 (nagłówek) o klasie "post-title entry-title". Celowo wybrałam ten przykład, ponieważ koniecznie chciałam Wam pokazać, co w przypadku takich "podwójnych klas" (2 różne klasy oddzielone spacją). Wówczas po prostu wybieramy jedną. To znaczy, że selektor do naszego nagłówka, którego będziemy mogli użyć w CSSie może wyglądać tak:
To by było na tyle, jeśli chodzi o poradnik. Wyszedł stosunkowo długi, jednak mam nadzieję, że komuś z Was się przyda. Chcielibyście, abym przygotowała jeszcze jakiś? A może macie jakieś pytania lub coś do dodania w powyższym temacie? Piszcie w komentarzach!
<div id="Ramka" class="rameczka">Jakaś treść.</div>Powyżej rozpisałam Wam podstawowy HTML ramki, nazywane są one divami. Takimi divami są np. widżety na blogu, ale również i inne elementy. Wytłumaczę Wam krok po kroku, który kawałek kodu za co odpowiada.
Znacznik niebieski, czyli <div></div> (Widzicie? Nawias zamykający pierwszego napisu div jest nieco dalej, ale to do niego on należy), to jeden z podstawowych znaczników w HTML. Elementy leżące pomiędzy znacznikiem otwierającym (pierwszy) i zamykającym (drugi) należą do tego elementu, w tym wypadku do diva. Innymi przykładami tego typu znaczników są np: <html>, <h1>, <head> i <body>. Ważnym jest to, że słówko div należy do składni HTML i nie można stworzyć np. elementu, który będzie zamknięty w znacznikach <ramka></ramka>. Dzieje się tak chociażby dlatego, że w tej nazwie zawarte są również domyśle właściwości, które ma dany element.
Załóżmy, że mamy stronę, na której jest 10 różnych divów. Jak znaleźć ten, który mamy na akurat na myśli? Przykładowo możemy nadać mu id. Jest to unikalny identyfikator obiektu (można go nadać również innym obiektom, nie tylko divom). Jako że jest unikalny, nie można nadać takiego samego identyfikatora dwóm różnym obiektom. Sposób, w jaki nadajemy identyfikator, przedstawiłam Wam na górze. Tekst napisany na czarno, w tym wypadku Ramka to coś, co wpisujemy samodzielnie. W ten sposób element na stronie otrzymuje swoją unikalną nazwę.
A co w sytuacji, kiedy jednak chcemy, aby kilka różnych obiektów miało są samą nazwę, tworzyły swego rodzaju rodzinę, która mimo wszystko wyróżniałaby się od reszty elementów? Wówczas możemy nadać im klasę. To jest ten zielony napis class, który widzicie na górze. Klasę, podobnie jak id, wymyślamy samodzielnie, niemniej jednak wiele elementów może mieć tą samą klasę.
Dla maksymalnego uproszczenia powiedzmy sobie, że te znaczniki, jak np. <div> są gatunkiem elementów, klasa jest jego nazwiskiem, a id jego numerem pesel. Mniej więcej tak można to porównać.
Celem tego poradnika nie jest nauczenie Was samodzielnego budowania takich ramek (chociaż myślę, że nawet po przeczytaniu tego powyższego tekstu bylibyście w stanie samodzielne zbudować prostą ramkę), ale wyróżnienie tych opisanych przeze mnie elementów z całego kodu HTML. Zapamiętaliście już te 3 elementy? W takim razie przechodzimy do punku drugiego.
2. POŁĄCZENIE HTML I CSS
Tym, co wiąże CSS i HTML (wiadomo, że CSS odpowiada za wygląd elementów, które pierwotnie zdefiniowane zostały w HTMLu.), są selektory. Część z nich już zapewne znacie, gdyż masa poradników oferuje listy selektorów i informacje, które za co odpowiadają. Sami jednak zdajecie sobie sprawę, że nie są one kompletne. Pamiętam, jak chciałam kiedyś usunąć ikonkę ołówka, która znajdowała się przy każdym komentarzu autora posta, jednak za nic w świecie nie mogłam znaleźć informacji na temat tego, jaki selektor za nie odpowiada.
Cofnijmy się jednak kawałek. Przedstawię Wam teraz 3 sposoby zapisu tego samego, prostego kodu CSS dla powyżej opisanej ramki.
1.Widzicie już coś znajomego? Jak sami wiecie, niektóre selektory zaczynają się od hashtagu, niektóre od kropki, a jeszcze inne nie zaczynają się od niczego. Cała magia polega na tym, że:
div {
background-color: blue;
border: 1px solid black;
}
2.
#Ramka {
background-color: blue;
border: 1px solid black;
}
3.
.rameczka {
background-color: blue;
border: 1px solid black;
}
1) jeżeli jako selektor chcemy wybrać typ ramki, czyli to, co znajduje się między znakiem większości i mniejszości, wówczas nie poprzedzamy selektora żadnym znakiem, np. div, h1, h2, body. Wówczas własność opisaną za pomocą CSS dostaną wszystkie elementy tego typu.
2) jeżeli jako selektor chcemy wybrać id ramki, wówczas poprzedzamy selektor znakiem "#", np. #sidebar1, #Text1, #PageList1. Wówczas własność opisaną w CSS przejmie jedynie ten konkretny element o zadanym id.
3) jeżeli jako selektor chcemy użyć klasy elementu, poprzedzamy ją znakiem ".", np. .main-outer, .header, .comment. Wówczas własność tą przejmą wszystkie elementy o zadanej klasie.
To cała magia, chociaż sprawa jest tak naprawdę nieco bardziej skomplikowana. Selektory można również łączyć, jako że można zagnieżdżać w sobie różne elementy w HTMLu. Poniżej przedstawię Wam przykład zagnieżdżeń.
<div>Ta rameczka również jest bardzo prosta, chociaż już nie tak, jak poprzednia. Jak możecie zauważyć, element typu b (bold - pogrubienie) jest zagnieżdżony w elemencie typu a (odnośnik, link), który zagnieżdżony jest w elemencie typu span (wiersz tekstu), który zagnieżdżony jest elemencie typu div. Jeżeli napiszemy CSS dla tej ramki, to w zależności od tego, jakiego selektora użyjemy, takiemu elementowi nadamy ten CSS. Dla przykładu:
<span>
<a href=" "><b>Jakaś treść.</b></a>
</span>
<span>
<a href=" "><b>Jakaś treść.</b></a>
</span>
</div>
div {Po takim CSSie cała ramka "dostanie" napisany przez nas CSS, jako że wszystkie widoczne powyżej elementy zawierają się w divie.
background-color: blue;
border: 1px solid black;
}
div span {Wówczas CSS zadziała na wszystkie elementy span, które znajdują się w divie. Gdyby znalazły się tam również inne elementy, które nie byłyby elementem span ani nie zawierały się w nim, wówczas CSS by ich nie dotyczył.
background-color: blue;
border: 1px solid black;
}
div b {Mam nadzieję, że już powoli łapiecie, o co w tym wszystkim chodzi. Przy powyższym CSSie "dotknięte" zostaną elementy b w divie. Jak widzicie, nie musimy podawać całej ścieżki selektorów, czyli np: div span a b (ale możemy), Wystarczą tylko te, które są istotne.
background-color: blue;
border: 1px solid black;
}
3. WYKORZYSTANIE WIEDZY W PRAKTYCE
Teraz, kiedy już zdobyliście podstawową wiedzę na ten temat, zapewne będziecie w stanie wyróżnić w kodzie HTML znaczniki, id i klasy. I to właśnie musicie zrobić. Niemniej jednak ciężko byłoby Wam, gdybyście musieli wybrać jeden selektor spośród setek w całym wielkim HTMLu. W tej sytuacji po prostu róbcie to, co ja.
1. Otwieramy przeglądarkę. Ja używam Mozilla Developer Edition, ale w zwykłej Mozilli czy Chromie to też zadziała. W Operze chyba też, w Safari też powinno. Co do innych - nie wiem.
2. Otwieramy przykładowego bloga. Zapewne będzie to wasz próbny blog, na który robicie szablon. Pamiętajcie jednak, że sposób ten zadziała również na innych blogach, jak i również na stronach internetowych (ja np. niedawno robiłam stronę na Wordpressie i też z tego korzystałam).
1. a - wówczas CSS dotyczyć będzie wszystkich elementów a, w tym naszego nagłówka
2. h3 a - wówczas nasz CSS dotyczyć będzie wszystkich elementów a, które zagnieżdżone są w elemencie h3
3. h3 - wówczas CSS dotyczyć będzie wszystkich elementów h3 i tego, co się w nich znajduje
4. .post-title - wówczs CSS będzie dotyczyć wszystkich elementów o klasie .post-title
5. .post-title a - wówczas CSS będzie dotyczyć wszystkich elementów a, które zawierają się w elemencie o klasie .post-title.
Bardzo fajny poradnik! Od dawna chcę nauczyć się HTML'a, ale nigdy nie wiedziałam jak się za to zabrać. Może dzięki tobie w końcu zacznę się uczyć ;) Jest już późno i do mojego mózgu nie docierają wszystkie informacje, więc pewnie będę musiała przeczytać to sobie jutro jeszcze raz :D Bardzo lubię twoje poradniki i będę niecierpliwie czekać na następne, które się tu pojawią :D
OdpowiedzUsuńPozdrawiam :*