O szablonach, ich projektowaniu i moich z tym zmaganiach...

Wpisy z tagiem: właściwości CSS

środa, 22 lutego 2012

Kolejna nowość i ciekawostka z zasobów specyfikacji CSS3, moduł tła i ramek. Tym razem będzie to cień. Nie planowałam tak dokładnie i po kolei opisywać tego modułu ale akurat tak się złożyło więc nie ma co się sprzeciwiać skoro wychodzi naturalnie.

box-shadow

Domyślnie mówiąc cień chodzi nam o cień zewnętrzny i tak też ta cecha jest interpretowana można jednak dodawać także cień wewnętrzny, który odpowiednio spreparowany może dawać wrażenie, że element jest zagłębiony. Bardzo rozmyty cień wewnętrzny da natomiast wrażenie gradientu na krańcach elementu. Cień to tylko możliwość i w zależności od twojej wyobraźni możesz go wykorzystać do wielu różnych celów. Dzisiejsza notka powie ci, które wartości odpowiedzialne są za jakie zmiany tej cechy.

W dalszej części notki opisuję także prefiksy czyli przeglądarkowy myk, który pozwala wykorzystać cechę nawet jeżeli przeglądarka jest stara. Na koniec dodaję kilka przykładów z życia wziętych, nic radykalnego bo zazwyczaj nie chcę opierać całego wyglądu na cesze, która jest stosunkowo nowa a przez to nie do końca dostępna dla wszystkich oglądających szablon.

poniedziałek, 09 stycznia 2012

Specyfikacja CSS zawiera różne wytyczne odnośnie tego jakie cechy i w jaki sposób możemy opisywać w arkuszach stylów. Dzisiaj zajmę się zaokrąglonymi narożnikami czyli czymś co nie istniało w starszych specyfikacjach CSS a co od dawna przeglądarki potrafią zastosować.

border-radius

Zaokrąglone narożniki, mimo iż związane z ramkami, wyświetlają się niezależnie od nich. Można więc zaokrąglać narożniki elementów nie posiadających ramek. Dlatego też border-radius nie jest związany z cechą border i nie dodaje się go do skróconego opisu ramek. Jest natomiast ściśle związany z tłem i w tym sensie ramki jako część tła są cechą towarzyszącą border-radius. Ujmując to jeszcze prościej aby można było zaokrąglać narożniki elementu musi on posiadać tło albo ramki (mogą być obie rzeczy może być tylko jedna ale ta jedna MUSI być koniecznie).

Border-radius mimo iż jest cechą specyfikacji CSS3 modułu tła i ramek, który to moduł nie jest jeszcze oficjalną rekomendacją i ma aktualnie (listopad 2011) status rekomendacji kandydującej (następny etap to rekomendacja proponowana a wyżej jest już tylko oficjalna rekomendacja W3C) to jednak prace nad zaokrąglaniem narożników trwają od tak dawna, że najnowsze wersje przeglądarek przestały już nawet używać prefiksów. Do tematu prefiksów jeszcze wrócę zacząć wypadałoby jednak od najprostszych wyjaśnień.

niedziela, 20 listopada 2011

Dzisiaj druga część wyjaśnień związanych z modułem specyfikacji CSS dotyczących tła i ramek. Kiedyś pisałam o tle (Określamy tło, część 1), bardzo pobieżnie co prawda ale ostatnio znacznie rozszerzyłam informacje w tamtej notce więc polecam zacząć od niej. Opisane są tam podstawowe cechy związane z tłem czyli kolor i obraz. Dzisiaj zaś zajmiemy się obramowaniem.

border

W rozwinięciu dokładniejsze wyjaśnienia każdej z cech. Skrótowo omówiłam też wartości jakie te właściwości mogą przybierać. Wszystko to zobrazowane jest przykładami z szablonów udostępnionych przeze mnie. Na koniec każdej cech niewielka tabelka podsumowująca wyjaśnienia i umożliwiająca szybkie odnalezienie wartości dla danej cechy (czyli co zrobić np aby ilustracja był obramowania fioletową przerywana linią).

sobota, 22 września 2007

Tło jest jednym z podstawowych cech decydujących o wyglądzie szablonu bloga. Może to być tylko kolor albo także obraz. W połączeniu z różnicami wielkości można uzyskać bardzo różne efekty przypisując elementom odpowiednie tło. Dodatkowo tło w postaci obrazu może zastąpić wiele różnych sztuczek.

Na początek najprostsze rozwiązania i cechy związane z tłem:

  • background - zapis skrótowy w kolejności: color, image, repeat, attachment, position

background

W rozwinięciu dokładniejsze wyjaśnienia każdej z cech. Pobieżnie omówiłam też wartości jakie te właściwości mogą przybierać. Wszystko to zobrazowane jest przykładami z szablonów udostępnionych przeze mnie. Na koniec każdej cech niewielka tabelka podsumowująca wyjaśnienia i umożliwiająca szybkie odnalezienie wartości dla danej cechy (czyli odpowiedz na pytanie co mamy wpisać przy pozycji obrazku aby wyświetlał się on tylko od połowy, tylko jeden raz i w prawym górnym roku).

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
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.

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...