O szablonach, ich projektowaniu i moich z tym zmaganiach...
piątek, 31 sierpnia 2007

Proponuję małą zabawę. Opisałam tu pięć rodzin czcionek. Pod opisem zamieściłam tekst, który został napisany przy wykorzystaniu opisywanej rodziny. To jak on wygląda zależeć będzie od tego jakie kroje masz zainstalowane, jakie czcionki obsługuje twoja przeglądarka itp. Najlepiej to będzie można zobaczyć na przykładzie rodziny fantasy, która u mnie przez długi okres czasu wyświetlała się jako "Echo Deco".

sans-serif

Ta rodzina składa się z czcionek pozbawionych szeryfów. Możemy do niej zaliczyć kroje: Arial, Helvetica, Verdana, Tahoma itp.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.

serif

Serif czyli po polsku szeryf. Szeryfem nazywamy ozdobne, krótkie kreski stosowane w wielu krojach pisma do zwiększenia dekoracyjności danej czcionki. Najczęściej są to poziome kreski będące stopkami liter, ale mogą występować również w innych miejscach znaków. Kroje szeryfowe są najpopularniejsze w przypadku tekstów drukowanych, pomagają 'trzymać linijkę'. Do najpopularniejszych pism szeryfowych zaliczyć można kroje: Times New Roman, Georgia,  Garamond.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.

monospace

Tą rodzinę można bez problemu rozpoznać. Monospace to rodzina czcionek o stałej szerokości znaku. Wszystkie litery mają dokładnie taką samą szerokość. Najlepiej to widać gdy porówna się literę "i" z jakąś inną np. "o" czy "m". Do tej rodziny możemy zaliczyć kroje: Courier New, Andale Mono czy też OCR A Extended.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.

cursive

Nazwa może byc nieco myląca. W języku polskim "kursywa" oznacza pochylony krój pisma, podczas gdy w angielskim cursive to pismo kreślone łącznie, jedną kreską. Mimo wszystko znaczenia polskie i angielskie są do siebie zbliżone. Rodzina cursive zawiera kroje imitujące ręczne pisno. W języku polskim określibyśmy ją nazwą pisanki. Kursywa natomiast to byłby pochyły styl kroju dowolej rodziny, przy czym w przypadku krojów szeryfowych kursywa jest italikiem a więc rzeczywiście ma coś wspólnego z pismem ręcznym. Do tej rodziny możemy zaliczyć kroje: Comic Sans MS, Monotype Corsiva czy też Papyrus.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.

fantasy

Zakładam że określenie fantasy będzie synonimem fantazyjny. Czyli litery będą wyświetlane za pomocą czcionek fantazyjnych, ozdobnych (Np. stylizowanych na neogotyk czy art deco). Do tej rodziny możemy zaliczyć kroje ozdobne i afiszowe: Impact, Cooperplate czy też Algerian.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.

sobota, 18 sierpnia 2007

Szablony osy postanowiłam zaprezentować przede wszystkim ze względu na zdjęcia.

mandarynkowy szablon na bloxa - soczku? W ramacch terapii zajęciowej Osa skleciła nowy szablon No, mnie się widzi całkiem świątecznie...

Zdjęcia bardzo apetyczne.

Problem może stanowić kolorystyka. Osa ma skłonność do pewnego odcienia różu (bardzo ładnego) i to ten kolor waśnie dominuje (no dobrze może nie dominuje ale widać, że osa go lubi). Róż nie jest dla każdego atrakcyjnym kolorem. Mimo wszystko gorzej prezentują się te szablony gdzie tego różu nie ma. Tło wpisów bywa zbyt ciemne w stosunku do koloru czcionki. Osa nie eksperymentuje z położeniem zdjęcia, umieszcza je zawsze centralnie nad tytułem. Nie przesadza też z kolorami. Zazwyczaj są jedynie dwa kolory czcionki. Rozmieszczenie boksów, wielkość i zdobienie czcionek… wszystko to jest ok.

piątek, 17 sierpnia 2007

CSSOd początku piszę, że na robieniu szablonów się nie znam a CSS jest dla mnie niezrozumiały ale chętnie się go uczę. Wytrwale i stale. Zaczęłam w 2007 roku, kiedy ten wpis publikowany był po raz pierwszy, po raz ostatni zmieniałam go w 2012 roku i dalej się uczę. Dalej jest milion rzeczy, które nie są dla mnie zrozumiałe, dalej działanie stylów mnie zadziwia i konfunduje. Jest też wiele momentów i psychologicznych odkryć w ciągu tych pięciu lat, które sprawiły, że CSS mimo iż momentami zaskakujący to nie jest jednak obcy. Style łatwo poznać, oswoić się z nimi i wygodnie z nich korzystać.

W najprostszym ujęciu style są jak polecenia dla malarza pokojowego: framugę drzwi do sypialni poproszę na różowo. Nauczyć się trzeba tylko języka: jak powiedzieć różowo, jak określić, że tylko framuga drzwi do sypialni, nie całe drzwi i nie drzwi do kuchni. Poniżej wypisane strony, zarówno zewnętrzne jak i nieliczne odnośniki do podstron tego bloga, uczą tego języka. Jedne są podręcznikami, opisują cały zestaw podstawowych rozwiązań, inne skupiają się na pojedynczych problemach i pomysłach. Polecam.

Większość linków z tej notki jest w zakładkach. Zapewne nie wszystkie w jednym folderze ale zajrzyj do tych, które w nazwie bądź opisie mają CSS.

 

Najbardziej przydatne są źródła czyli te strony, które mają w sobie zapewne słowo specyfikacja. Podają informacje w sposób najbardziej skrótowy i konkretny ale ale mogą być nieco trudne do zrozumienia dla zupełnie zielonych. Proponuję specyfikacji nie traktować jak podręcznika tylko raczej jak jakiś skorowidz: jeżeli wiesz czego szukasz to poszukaj w specyfikacji. Tym, którzy nic jeszcze na blogu nie zmieniali polecam raczej podręczniki i podgląd źródła własnej strony.

Sypialnia, salon, komórka pod schodami czyli selektory

Bloksowe strony opisujące co jest czym i jak się nazywa.

Strony z kursami CSS (czyli ściana niebieska, drzwi drewniane a w podłodze dziura)

  • Tłumaczenie Specyfikacji Kaskadowych arkuszy stylów, poziom 2, poprawka 1 (CSS 2.1) całość
    • CSS 2.1: Rozdział 14. Kolory i tło
    • CSS 2.1: Rozdział 15. Własności pisma
    • CSS 2.1: Rozdział 16. Tekst
  • wikipedia: Kaskadowe Arkusze Stylów
  • Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
  • html-css-ajax.com: Wygląd strony - CSS
  • HTML.net: kurs CSS
  • Kurs BrowseHappy.pl: Podstawy prezentacji (CSS)
  • Kurs CSS 2.1. Budujemy nowoczesne i stylowe witryny
  • webinside.pl: Programowanie i tworzenie - XHTML, HTML i CSS
  • webmaster.helion.pl: Podręcznik CSS
  • Webmaster.helion.pl: Co nowego przynosi CSS 3

  • W3C: Cascading Style Sheets home page
    • Selectors Level 3 (R)
    • CSS Color Module Level 3 (R)
    • Media Queries Level 3 (CR)
    • CSS Backgrounds and Borders Module Level 3 (CR)
    • CSS Image Values and Replaced Content Module Level 3 (CR)
    • CSS Marquee Module Level 3 (CR)
    • CSS Multi-column Layout Module (CR)
    • CSS Transforms (WD)
    • CSS Transitions (WD)
    • CSS Values and Units Module Level 3 (WD-LC)
    • CSS Flexible Box Layout Module (WD)
    • CSS Fonts Module Level 3 (WD)
    • CSS Text Level 3 (WD)

CSS3 wchodzi jako obowiązująca specyfikacja na raty, modułami. Fundacja W3C poleca stosowanie poszczególnych rozwiązań na co dzień począwszy od CR (Candidate Recommendation - rekomendacja kandydująca). R oznacza, że prace na danym odcinku w zasadzie zakończono na poziomie 3, wszelkie większe zmiany w przypadku modułów o statusie R będą zachodzić dopiero w CSS4.

WD - Working Draft
LC - Last Call
CR - Candidate Recommendation
PR - Proposed Recommendation
REC - Recommendation

Status poszczególnych modułów sprawdzałam ostatnio 18 czerwca 2012

Kompatybilność z przeglądarkami (czyli jak będzie wyglądał twój blogowy domek gdy jeden z twoich gości będzie go oglądał przez różowe okulary)

  • MDN: wsparcie dla poszczególnych cech w przeglądarkach
  • od której wersji przeglądarki dana cecha jest dostępna
    • MDN: Firefox (Gecko)
    • MSDN: Internet Explorer
    • Opera (Presto)
    • Safari (WebKit)
    • Chrome (WebKit)

walidatory CSS czyli sprawdzamy czy dobrze i jak to wyglada

  • W3C: Sprawdź Kaskadowe Arkusze Stylów CSS
  • Screenfly by QuirkTools
niedziela, 12 sierpnia 2007

Kolor na stronie internetowej określamy dla dwóch rodzajów rzeczy: dla tła (ang. background) i dla elementów (ang. foreground). Pierwsza opcja jest bardzo prosta zawsze będzie to background-color (przy skrótowym zapisie wystarczy nawet samo background). Kolor elementów pierwszoplanowych zależy oczywiście od elementów ale że nie ma ich za wiele to i wystarczy jedna cecha: color. Większy problem może sprawić sposób określenia koloru. Nie mieszamy tu pigmentów tylko w bardzo precyzyjny sposób musimy powiedzieć programowi jaki kolor ma wyświetlić na ekranie. Musimy to powiedzieć w języku zrozumiałym dla programu jakim są przeglądarki.

css color

Jednostki opisu kolorów

Wygląda to trochę skomplikowanie ale da się sprowadzić do trzech czy czterech podstawowych opcji: słownie, w postaci sześcioelementowego kodu HEX, klasyczne rgb i nowe hsl. Od tego aby podać nam właściwy kolor istnieją odpowiednie generatory. Użytkownik wizualnie odszukuje kolor a sprytny program powie mu jak go zapisać. Zapewne powinien na kilka sposobów więc można mieć swój ulubiony ale bez względu na to jak zapiszesz karmazynowy kolor to zawsze powinien być karmazynowy.

O przezroczystości koloru napiszę inną notkę.

sobota, 11 sierpnia 2007

Zacznijmy od kilku informacji ogólnych. W tytule wpisałam słowo czcionka ale tak naprawdę opisywać będziemy krój. Będziemy decydować się na rodzinę krojów, będziemy próbowali pogrubić krój, może zdecydujemy się na jego kursywną wersję. Chodzi dzisiaj o wygląd tekstu i pojedynczych liter czyli o krój pisma. O czcionkach i fontach poczytać można sobie w bardziej terminologiczno-definicyjnym wpisie: Typograficznie: czcionka vs. font.

Na początek najprostsze rozwiązania i cechy związane z krojem:

  • font - zapis skrótowy w kolejności: style, weight, stretch, size, line-height, family

font: normal 87.5%/140% 'Trebuchet MS', Arial, sans-serif;

Zaleca się określenie rodzaju i wielkości pisma dla elementu body. Tak na początek, najlepiej o wartościach najczęściej występujących w szablonie aby uniknąć niepotrzebnych dodatkowych zapisów.

body {
font-family: 'Trebuchet MS', Helvetica, sans-serif;
font-size: small;
color: #333;
}


piątek, 10 sierpnia 2007

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.

niedziela, 05 sierpnia 2007

CSSOd pewnego czasu (by nie powiedzieć od dawna) HTML przestał być nośnikiem wyglądu. Owszem w najbardziej podstawowym znaczeniu tylko HTML decyduje o wyświetlaniu najistotniejszej części strony czyli jej treści. Wyobraźcie sobie ceramiczny balon z otworem a w środku herbatę. Napój to nasza treść, ceramiczna obła forma to HTML ale aby ten niby-czajniczek wyglądał potrzebujemy CSS, który określi jego kształt, kolor i całą tą wizualną formę. Bo korzystać możemy z niego od samego początku, herbatę zaparzymy i nalejemy nawet do kubka ale czy będzie nam wygodnie to zrobić to już inna sprawa.

Za wygląd strony odpowiedzialny jest CSS czyli kaskadowe arkusze stylów (ang. Cascading Style Sheets). Jest to język służący do opisu sposobu prezentowania informacji na stronach WWW. CSS nie może istnieć samodzielnie, gdyż jest ściśle powiązany z językiem opisu struktury dokumentów takim jak (X)HTML. Czyli HTML określa istnienie i funkcję elementu, mówi to jest tytuł, to jest tabela, to jest link. CSS natomiast mówi linki mają być podkreślone, tytuły mają mieć dwukrotną wielkość tekstu a tabele mają mieć ramki ale jeżeli nie będzie tych tabel, linków i tytułów to co z tego, że CSS powie gdzie mają być kreseczki? Abstrahując od rozważań filozoficznych, kolor różowy nie ma znaczenia dopóki nie pomalujesz nim ściany.

Za pomocą CSS można opisać wszystkie pojęcia odpowiedzialne za wygląd poszczególnych elementów dokumentu (rodzina czcionek, kolor tekstu, marginesy, odstęp między wierszami, pozycja danego elementu względem innych elementów bądź okna przeglądarki). Podkreślam jednak pamiętać że Kaskadowe Arkusze Stylów definiują jedynie sposób formatowania (wygląd) elementów dokumentu, ale same ich nie tworzą. Tak więc za pomocą języka (X)HTML wstawia się znaczniki do kodu źródłowego strony, a następnie dzięki CSS można nadać im potem określony sposób wyświetlania.

Wstawianie stylów na stronie

Są cztery podstawowe sposoby umieszczania stylów na stronie: lokalny, zagnieżdżony, zewnętrzny i importowany. Kolejność, w której wpisałam te style ma znaczenie bo im styl bliżej ciała tym bardziej definitywną odgrywa rolę. Jest to o tyle istotne, że można w zasadzie wykorzystywać wszystkie cztery rodzaje implementacji na raz. Na bloksie możemy skorzystać tylko z dwóch sposobów umieszczania stylu ale w dziedzinie wyglądu zapewnia to wystarczający stylowy dostęp. Zacznę wyliczanie od opisu implementacji, która jest najdalej od ciała.

  • importowany - do każdej strony może zostać przypisany styl importowany czyli pochodzący z innej strony
  • zewnętrzny - znajdujący się w innym dokumencie niż strona i wywoływany odpowiednim zapisem w nagłówku (head) strony 
  • wewnętrzny zagnieżdżony - znajduje się bezpośrednio na stronie w jej nagłówku (head)
  • lokalny - zostaje przypisany bezpośrednio przy elemencie który opisuje

Jeżeli jesteście laikami to zapewne nie macie zielonego pojęcia o czym piszę tutaj. Jeżeli trochę znacie się na HTML to pewnie coś wam świta ale nie za każdym razem potraficie sobie wyobrazić różnicę. Postaram się więc na przykładach opisać jakie są zalety konkretnych rozwiązań.

Przypominam, że implementacja ma swoja hierarchię. Lokalne są ważniejsze od zagnieżdżonych, zagnieżdżone od zewnętrznych a zewnętrzne od importowanych. Oczywiście nie oznacza to, że lokalne są najlepszym rozwiązaniem. Wprost przeciwnie. Najlepiej wszystko umieszczać jak najwyżej. Im bliżej ciała tym bardziej w drodze wyjątku.

Style importowane

Pochodzą z innej strony niż ta, której wygląd opisują. Umożliwia to dodanie jednego szablonu, dokładnie takiego samego na wielu różnych stronach. Wywołuje się je przez polecenie @import, po którym podany jest adres url, umieszczone w nagłówku (head) strony.

style importowane przykładowy kod

Wyobrażam sobie, że takie style świetnie sprawdziłyby się w większym serwisie blogowym. Są najdalsze od ciała jak to chyba tylko możliwe a więc w razie zaistnienia konkurencji liczą się w najmniejszym stopniu. Mogą jednak umożliwić sprawne dodanie nowości na wielu stronach na raz. Wystarczy zmianę opisać w jednym arkuszu, do którego odwołanie będzie na każdej stronie. Zakładam jednak, że jest coś wielce kłopotliwego w takim rozwiązaniu bo nie zetknęłam się z nim jeszcze (tzn. nie zauważyłam jeżeli się jednak zetknęłam co nie jest wcale takie dziwne). Możliwe, że koszty/wady nie są warte zalet takiego rozwiązania.

Style zewnętrzne

Ten rodzaj implementacji działa na bloksie. Każdy blog ma swój własny arkusz stylów, który znajduje się w osobnym/zewnętrznym dokumencie i jest tylko wywoływany w nagłówku (head) każdej strony bloga (jeden arkusz dla wszystkich podstron bloga). Powinien to być dokument tekstowy z rozszerzeniem css.

przykładowy kod stylów zewnętrznych

Takie style są podstawą bloksowych szablonów. Wygląd wszystkich podstron opisany jest w jednym dokumencie wspólnym dla wszystkich podstron. Chcąc zmienić cokolwiek w wyglądzie blogu wystarczy wpisać poprawkę w jednym miejscu.

Ciekawym rozwiązaniem może być dodanie kilku arkuszy zewnętrznych prezentujących alternatywną aranżację. Użytkownik będzie wtedy mógł sobie wybrać najbardziej odpowiadający mu wygląd strony.

Style zagnieżdżone

W tym sposobie implementacji style umieszcza się w nagłówku (head) strony, którą opisują. Zamiast wywołania dokumentu ze stylami mamy w kodzie HTML wpisaną całą jego treść.

przykładowy kod stylów zagnieżdżonych

Nie jest to złe rozwiązanie, każde style są dobre ale chcąc wprowadzić zmianę, która ma być uwzględniona na wielu stronach/podstronach trzeba by chyba było dodawać ja na każdej podstronce osobno. Oczywiście odpowiednie edytory mogą wszystko ułatwić. Na bloggerze w źródle strony (poza dziwnymi kodami z tamtejszego edytora szablonów) można zobaczyć kod css.

Style lokalne

Umieszczone są najbliżej ciała więc mają dla elementu największe znaczenie. Umieszcza się jej jako fragment kodu html bezpośrednio opisywanego elementu.

przykładowy kod stylów lokalnych

Takie style są dostępne na bloksie wszędzie tam gdzie jest dostęp do kodu HTML. Pisząc notkę, korzystając z zaawansowanego edytora, w ten właśnie sposób edytuje się jej wygląd. Gdy dodajesz do słowa podkreślenie edytor zamienia twoje polecenie w kod html ze stylami lokalnymi, który wyglądać będzie mniej więcej tak:

<span style="text-decoration: underline;">słowo</span>

Wadą tego rozwiązania jest problem wprowadzania zmian. Aby zmienić raz dodany styl lokalny trzeba dosłownie wejść do elementu przy którym jest on dodany i zmienić go, do każdego pojedynczego elementu. Oznacza to, że jeżeli zmieniałeś czcionkę czy kolor tekstu w każdej notce w zeszłym roku a teraz masz nowy szablon i krój tej czcionki czy kolor tekstu przestały Ci odpowiadać to aby się go pozbyć ze starych notek musisz  wejść do każdej z nich i przy każdym akapicie w którym zmieniłeś wygląd tekstu zrobić to na nowo. I tak za każdym razem gdy chcesz wprowadzić zmianę.

Dlatego lepszym rozwiązaniem od stylów lokalnych będzie wykorzystanie stylów zewnętrznych, nawet w przypadku zmiany wyglądu trzech zdań w każdej notce. Zdaję sobie jednak sprawę, że style lokalne dodaje edytor, nic prostszego niż kliknięcie guziczka ale zalety klas są naprawdę spore więc zaczynam wspominać temat. Z cała pewnością go rozwinę na razie jednak prosta ilustracja proponowanego rozwiązania.

zamiast stylów lokalnych

Jeżeli zależy Ci na tym aby dany fragment notki był pisany czerwoną czcionką to nie ma problemu. Style lokalne są dobrym wyborem. Jeżeli natomiast chcesz wyróżnić te try zdania z otaczającego je tekstu a samo pogrubienie wydaje ci się być za mało to zamiast zmieniać kolory, dodawać podkreślenie czy powiększać rozmiar kroju wykorzystaj możliwość dodania klasy. Stwórz styl wyróżnienia w arkuszu, nazwij go jakąś klasą i za każdym razem gdy będziesz chcieć coś wyróżnić zamiast tych wszystkich stylów wpisuj klasę.

Oczywiście czerwony, podkreślony i powiększony tekst rzeczywiście jest mega choć niekoniecznie już mega estetyczny. To tylko jaskrawy przykład.


Treść notki została zmieniona w październiku 2011. W sierpniu 2008, kiedy została po raz pierwszy opublikowana, w ogóle nie rozumiałam zależności między kodem HTML i CSS. Sam CSS był dla mnie językiem magicznym, który dopiero zaczynałam zgłębiać. Wiedziałam, że na bloksie szablony tworzy się edytując zewnętrzny arkusz stylów, wiedziałam, że użytkownik nie może sam dodać stylów w sposób wewnętrzny zagnieżdżony ale na czym polega ważkość różnicy pomiędzy tymi dwoma sposobami nie miałam najmniejszego pojęcia. Style lokalne były zaś niedostępne wręcz dla mojego pojmowania ze względu na moją zupełną ignorancję w dziedzinie HTML.

Zakładki:
O blogu i RSSsubskrybcja
Polecane wpisy z blogu
Pomocne
Przeglądarki
Katalogi szablonów
Polecane strony
Szablony z dedykacją
o CSS (notki z tego bloga i podobnych bloksowych)
o arkuszach stylów ogólnie (CSS) dla poczatkujących,
głównie zewnętrzne podręczniki
o CSS (przydatne podpowiedzi) dla średniozaawansowanych
- specyficzne rozwiązania
- jak reagują przeglądarki
Historia polecanych
Kolory
Pismo
Polecane artykuły
ilustrowany przewodnik po bloksie dla początkujących,
dla zielonych jak szczypiorek na wiosnę,
dla zaczynających bloksowanie
Tagi
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...