O szablonach, ich projektowaniu i moich z tym zmaganiach...
Blog > Komentarze do wpisu

Co jest czym w CSS czyli budowa stylu

CSSPrzy pierwszej styczności z CSSem (lub innym sposobem zmiany czegokolwiek w ustawieniach strony) zostajemy zaskoczeni szeregiem niezrozumiałych pojęć. Niby są one po angielsku, niby je rozumiesz ale gdy chcesz coś zrobić okazuje się, że bez choćby małego kursu CSS się nie obejdzie. I tak było ze mną. Pierwszą rzeczą którą chciałam zmienić na swoim blogu był kolor wyświetlania odnośników w notce. Był trochę za jasny w porównaniu z tekstem a ja miałam dość zmieniania go w każdej notce osobno. I tak się zaczęło.

Dzisiaj kilka podstawowych słów o budowie stylów. Każda definicja stylu musi składać się z kilku niezbędnych elementów. Budowa stylu jest bardzo prosta: najpierw określamy o który element nam chodzi, potem co chcemy zmienić i na koniec jak.

selektor {
 cecha:wartość;
}


a {color:royalblue}

Załóżmy, że masz mieszkanie do urządzenia. Wszystko masz już przemyślane i poukładane, w głowie. Niestety mieszkanie, które urządzasz jest na drugim końcu świata, albo i zaraz obok ale nie masz do niego żadnego dostępu. Musisz działać przez pośredników, z którymi na dodatek możesz porozumiewać się tylko telefonicznie. Załóżmy, że dysponujecie katalogami, próbkami itp. ale w żaden sposób nie jesteś w stanie obrazowo przekazać swoich pomysłów. Tylko słowa.

Arkusz stylów to coś podobnego. Mówimy przeglądarce znajdź wszystkie linki na stronie i daj im jako kolor tekstu królewski błękit. W naszym mieszkaniowym porównaniu to może być polecenie: chcę aby wszystkie okna miały drewniane ramy.

Możemy też powiedzieć, że okno balkonowe ma być bliżej prawej ściany oddalone od niej o metr. Ma być duże, 20% większe niż reszta i od zewnątrz ma poprzedzać je podest o połowę większy niż ono. Wszystko to muszę powiedzieć, jeżeli chcę takich zmian. Oczywiście jeżeli zostawiłabym to okno balonowe w spokoju to ono by istniało, tylko w wersji standardowej, jak inne okna. Tym moim metaforycznym oknem jest link do dalszej części wpisu na tym blogu, tzw. link więcej. Jest on wyrównany do prawej, ma rozmiar tekstu stanowiący 120% rozmiaru innych elementów informacyjnych pod notką. Jest nieco odsunięty zarówno od prawej jak i dolnej krawędzi.

.IPTwiecej { text-align: right; padding: 0em 1em 1.5em 0; font-weight:normal; font-size: 1.2em; }

Podsumowując moje porównania: okno to selektor, może to być każde okno albo tylko określone; rozmiar, kolor, odsunięcie, różne ozdoby to wszystko są właściwości, czasami nazywam je cechami i mają one konkretne wartości: drewniany, duży, odsunięty o metr, ozdobiony w prążki itd. W tym porównaniu nie musi być okno, to może być fotel, albo sukienka. Każda z tych rzeczy ma jakieś cechy: kolor, materiał, kształt i te cechy mają określone wartości jak np. fioletowa wiskoza. Dla jednej rzeczy możemy zdefiniować kilka cech albo tylko jedną.

Selektor czyli co opisujemy

Zaczynamy od selektora, który jest odwołaniem do określonego elementu w HTML. W moim porównaniu najprościej będzie powiedzieć, że HTML to mieszkanie a CSS nasza lista zadań dla dekoratora. Bez dekoracji nasze mieszkanie to tylko puste gołe ściany ale istnieją. Bez mieszkania jednak nasza lista jest tylko listą życzeń niemającą odniesienia do niczego.

W zasadzie mamy trzy typy selektorów, które będziemy najczęściej używać w naszych arkuszach. Selektorem może być:

  • znacznik - czyli podstawowy element z którego budujemy kod HTML; możemy użyć dowolnego znacznika z kodu HTML, należy tylko pamiętać, że dany znacznik może pojawić się w kodzie strony wielokrotnie, przykładowo:
    • body - wszystko co jest w oknie przeglądarki
    • h3 - nagłówki trzeciego stopnia
    • a - linki
    • p - całe akapity
    • table - tabele
    • li - pojedynczy punkt listy
    • span -dowolny element liniowy
    • itd.
  • identyfikator - sam z siebie nie istnieje w kodzie HTML, niczego nie buduje, przypisany jest natomiast dowolnemu znacznikowi po to aby go wyróżnić spośród pozostałych, jak imię i nazwisko; identyfikator o konkretnej nazwie powinien być tylko jeden na stronie, trochę jak numer PESEL; identyfikatory w kodzie CSS zaczynają się zawsze od kratki (#), przykładowo:
    • #BlogGlownyBox - bloksowy kontener z całą zawartością bloga
    • #BlogTytulBox - kontener z całą zawartością części tytułowej
    • #BlogSzerokaSzpalta - wszystko co wyświetla się w głównej, szerszej kolumnie
    • #BlogKategorieBox - boks z kategoriami i linkiem do RSS
    • #BlogArchiwumBox - kontener zawierający wszystkie elementy archiwum
    • #ZakladkiTytul - element zawierający napis zakładki nad folderami z linkami w wąskiej szpalcie
    • itd.
  • klasa - podobnie jak identyfikator sama w kodzie nigdy nie jest, zawsze przypisuje się ją znacznikowi, w odróżnieniu od identyfikatorów jedną klasę można przypisać wielu znacznikom czyli na jednej stronie dana klasa może się pojawić przy wielu znacznikach co pozwala na łatwe wspólne opisywanie wielu podobnych elementów na stronie; czyli klasa odwołuje się do wszystkich osób o imieniu kasia, wszystkich brunetów; wszystkich krzeseł na piętrze domu itd.; klasę opisujemy w kodzie CSS zaczynając od kropki (.), przykładowo:
    • .BlogDataWpisu - każda data wpisu na stronie głównej
    • .BlogWpisItemTytul - tytuł każdego wpisu na stronie głównej
    • .IPTlinkuj - przenoszące do pojedynczej notki słowo link na stronie głównej w informacjach pod notką ale także te linki nad notką na stronie z pojedynczym wpisem, które odnoszą się do poprzedniego i następnego wpisu
    • .TytulFolderaZakladek - Każda etykieta folderu w zakładkch w wąskiej szpalcie
    • itd.

W zasadzie od strony kodu CSS nie ma większego znaczenia czy style przypisujemy do znacznika, klasy czy identyfikatora, każdy z tych typów sprawdzi się równie dobrze. Różnica będzie istotna dopiero w kodzie HTML. Znaczniki mówią coś niecoś o funkcji elementu więc przeglądarka często przypisuje im odpowiedni wygląd. Np. akapity oddzielone są od siebie nieco większym odstępem niż to ma miejsce w przypadku zwykłego odstępu miedzy wierszami. Dlatego przypisując style do znacznika należy wziąć pod uwagę także jego już przypisane cechy.

Powyższe nie znaczy, że w arkuszu opisujemy sobie co chcemy: raz klasę, raz identyfikator. Elementy są z góry określone, to HTML określa czy do opisania mamy klasę czy identyfikator. Nie istnieją #TytulFolderaZakladek czy .BlogArchiwumBox.

  • selektory-znaczniki powinny być pisane małymi literami ale w gruncie rzeczy ich wielkość nie wpływa na wyświetlanie stylów
  • selektory-identyfikatory muszą koniecznie zaczynać się od kratki, żaden inny znak nie zadziała; po kratce następuje nazwa, która musi być identyczna z tą wpisaną w kodzie strony;
    przykładowo jeżeli chcemy opisywać cały boks z kategoriami to w CSS jego opis będziemy podawać po selektorze #BlogKategorieBox jeżeli wpiszemy .BlogKategorieBox albo #BlogkategorieBox czy jakiś inny wariant to nasz opis nie zadziała; identyfikator poprzedzamy kratka i zapisujemy jego nazwę dokładnie tak samo jak jest w kodzie strony, co do literki
  • selektory-klasy zaczynają się od kropki po której następuje nazwa dokładnie tak samo zapisana jak w kodzie
    przykładowo opisując datę wpisu użyję klasy .BlogDataWpisu; jeżeli natomiast zapisałabym te słowa inaczej, poprzedziła innym znakiem dodała coś od siebie to selektor ten przestałby opisywać element daty umieszczony na stronie a więc mój opis stylów nie zadziałby

Zaczęłam opisywać wszystkie selektory bloksowe dla starego kodu. Na razie nie ma tego za dużo, skończona jest tylko strona z selektorami kategorii i stronicowania na stronie głównej ale pozostałe też będą w końcu w więc zachęcam do podpatrywania w zakładkach

Cecha czyli co zmieniamy

Cechy albo właściwości można dowolnie przypisywać do selektorów. Jest ich bardzo dużo i każda specyfikacja dodaje kolejne, to cechy pozwalają nam czarować stylami. Cecha określa co zmieniamy. Może to być kolor tła (background-color), wielkość czcionki (font-size), rodzaj wypunktowania (list-style-type), sposób wyświetlania (display) i cała masa innych rzeczy.

Aktualnie obowiązuje specyfikacja CSS 2.1 dla początkujących wystarczy odwołanie do kilku jej rozdziałów: 14 Kolory i tło, 15 Własności pisma, 16 Tekst. Ja sama też zaczęłam opisywać niektóre cechy, odnośniki oczywiście pojawią się w zakładkach jeżeli tylko popełnię notkę na dany temat. Polecam też tag właściwości CSS, który grupuje wszystkie notki na ten temat.

Wartość czyli jak zmieniamy

Poszczególne cechy mogą przybierać różne wartości: tło może być czerwone, niebieskie czy zielone, czcionka może być duża, dwa razy większa niż pozostałe albo nawet o konkretnej wielkości, wypunktowywać możemy kropkami albo kwadratami, albo nawet własnym obrazkiem, wyświetlać element możemy w linii albo w bloku albo nawet wcale. Wartość określa jak zmieniamy.

Każda cecha ma swoje specyficzne wartości. To jest całkiem logiczne bo na pytanie jaki kolor nie odpowiesz: szeroki na metr.

Budowa definicji stylu

Wszystkie cechy, którymi opisujemy element ujmujemy w nawias klamrowy. Konieczne jest zarówno otwarcie jak i zamknięcie. Niezamknięte style oznaczają, że wszystko co następuje po nich jest ich częścią, a że dla stylów niewiele to ma sensu wszystko co zostanie wpisane po niezamkniętym bloku stylów będzie nieważne i nie zadziała.

Czyli zawsze podajemy najpierw selektor, nie ma znaczenia czy to będzie znacznik, klasa czy identyfikator. Możemy opisywać kilka selektorów na raz jeżeli chcemy aby miały opisane te same style. W takim przypadku poszczególne selektory oddzielamy przecinkami. Przecinek jest niezbędny, jeżeli go nie użyjemy zamiast listy selektorów uzyskamy kombinator (taką bardziej skomplikowaną wersje selektora, która najprawdopodobniej nie będzie miała sensu).

Grupy selektorów są przydatne jeżeli chcemy przypisać takie same style dla kilku różnych elementów znajdujących się w różnych miejscach na stronie i opisanych różnymi znacznikami, klasami, identyfikatorami. Wystarczy poszczególne selektory rozdzielić przecinkami.

.BlogWpisItemTytul, .TytulKomentowanegoWpisu, #StatycznaTytul {
 padding: 0px 20px 0px 0px;
 color: #B52A51;
 font-size: 1.8em;
}


Po selektorze otwieramy nawias klamrowy, jest on oznaką, że zaczynamy wpisywać style, gdy skończymy musimy go zamknąć. Pomiędzy nawiasy klamrowe wpisujemy nasze informacje o wyglądzie danego elementu. Cecha i jej wartość to pojedyncza deklaracja stylu, poszczególne deklaracje oddzielamy średnikiem, koniecznie średnikiem, żaden inny znak nie zadziała. W samej deklaracji zaś cechę od wartości oddzielamy dwukropkiem, i zgadnijcie co, żaden inny znak nie zadziała.

W powyższym opisie ani razu nie użyłam słowa spacja czy enter. Na tym etapie nie ma znaczenia czy pomiędzy selektory rozdzielone koniecznie przecinkiem wstawimy spację czy nie. Nie ma też znaczenia czy poszczególne deklaracje zakończone średnikiem rozdzielimy też enterem, spacją czy niczym innym.

.BlogWpisItemTytul, .TytulKomentowanegoWpisu, #StatycznaTytul {padding: 0px 20px 0px 0px;color:#B52A51;FONT-SIZE:1.8em;}

 


css.blox.pl edit 2006Początkowo w tej notce znajdował się tylko link do strony, który była moją podstawą, ściągą i głównym punktem odniesienia. Cokolwiek chciałam zmienić zawsze sprawdzałam w tymże blogu czy to rzeczywiście to o co mi chodzi. Blog już wtedy był nieaktualizowany ale to wcale nie znaczy, że podstawy tam opisane są nieaktualne. Bynajmniej. Na początek nawet taka uboższa wersja lepiej się sprawdzi. Idealnie będzie oczywiście jak będzie się zaglądać do źródła strony chcąc się dowiedzieć co jest czym ale nie wiem jak wy ale ja na początku w ogóle nie mogłam zrozumieć o co chodzi z tym całym HTMLem. Ja chciałam pozmieniać sobie tylko kolorki w paru miejscach. Treść notki zmieniłam w październiku 2011 bo jej miejsce i tytuł świetnie nadawały się na drugą lekcję z dziedziny CSS.

piątek, 10 sierpnia 2007, kate_mac

Społecznościowo


Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...