@import url("/extension/eznewsletter/design/standard/stylesheets/eznewsletter.css"); @import url("/extension/ezlabel/design/standard/stylesheets/ezlabel.css");
2. Struktura arkusza stylów - Webhosting.pl
#site{
background-image:url("/design/webhosting/images/side_shadows.png");
}
#top-icons{
background-image:url("/design/webhosting/images/top_menu_right_bg.png");
}
.content_box-bottom{
background-image:url("/design/webhosting/images/bottom_shadow.png");
}
.left_poll_link_vote{
background-image:url("/design/webhosting/images/left_poll_vote.png");
}
.content_box-wrapper{
background-image:url("/design/webhosting/images/right_shadow.png");
}
.content_box-head{
background-image:url("/design/webhosting/images/right_shadow_top.png");
}
.button{
background-image:url("/design/webhosting/images/button_middle.png");
}
#searcher{
background-image:url("/design/webhosting/images/searcher_background.png");
}
#tagcloud{
background-image:url("/design/webhosting/images/tagcloud_background.png");
}
#tagcloud-after{
background-image:url("/design/webhosting/images/tagcloud_after.png");
}
kontakt
newsletter
rss
zaloguj
ANKIETA
Czy serwis MySpace odniesie w Polsce sukces?:
Tak
Nie
Nie mam zdania
Wyniki Głosuj
E-WYDANIA
Webhosting 4/2007:
- Platforma hostingowa .NET w home.pl,
- .NET od kuchni,
- Własna darmowa galeria internetowa,
- Polska odłona Google Analytics,
- Konfigurujemy filtry antyspamowe,
- Wszystko o telefonii VoIP,
- Bezpieczeństwo dynamicznych stron WWW.
WYDRUKUJ | WYŚLIJ
Kurs CSS 2.1. Budujemy nowoczesne i stylowe witryny
Marcin Modestowicz 12 sierpnia 2007 10:46
2. Struktura arkusza stylów
2.1. Podstawy składni
Aby opisać możliwości kaskadowych arkuszy stylów, należy najpierw
zapoznać się z ich strukturą. Podstawową jednostką arkusza jest reguła,
składająca się z selektora i określającej go deklaracji. Może mieć ona
postać np. h1 {font-weight: bold}. Reguły
umieszczane są wewnątrz osobnego pliku tekstowego – arkusza stylów,
który może być dołączony do dokumentu (X)HTML poprzez umieszczenie w
jego sekcji <head> dyrektywy postaci <link rel="stylesheet" href="arkusz.css" type="text/css" />. Możliwe jest także umieszczenie samych reguł w sekcji <head> pomiędzy znacznikami <style></style> lub też w znaczniku danego elementu, przy użyciu atrybutu style. Ta ostatnia metoda kłóci się jednak z podstawową ideą CSS, jaką jest odseparowanie treści od sposobu jej prezentacji.
Selektor reguły określa element, dla którego styl definiujemy (w podanym wyżej przykładzie h1).
Sama deklaracja – najczęściej zgrupowana w tzw. bloki deklaracji ujęte
w nawiasy klamrowe – bezpośrednio wyznacza określone atrybuty elementu
reprezentowanego przez selektor. Deklaracja składa się z właściwości i
nadanej jej wartości. W powyższym przykładzie właściwością deklaracji font-weight: bold jest font-weight, jej wartością zaś słowo kluczowe bold.
2.2. Rodzaje selektorów
Wyróżniamy kilka rodzajów selektorów. Ich różnorodność pozwala w sposób
jak najbardziej precyzyjny zdefiniować element, dla którego zamierzamy
zastosować określone formatowanie.
Selektor uniwersalny ma postać gwiazdki (*) i zgodnie z
nazwą odnosi się do wszystkich elementów strony. W związku z tym
umieszczona po nim deklaracja będzie także określała wszystkie
elementy. Oddziaływanie selektora uniwersalnego można zawężać za pomocą
np. opisanych dalej selektorów atrybutywnych. W przykładzie *[title="xyz"] {...} blok deklaracji będzie się odnosił do wszystkich elementów o wartości title równej xyz.
Najbardziej popularnymi w opisie arkusza stylów selektorami są jednak
selektory typu. Odnoszą się one do nazw elementów w języku HTML, a więc
mają postać np. h1, h2, a, p.
Selektory potomka są z kolei definiowane w relacji do elementów
zagnieżdżonych w modelu dokumentu. Opisywane są za pomocą ciągu innych
selektorów, oddzielonych spacją – ich kolejność określa właśnie
następstwo zagnieżdżenia. Dla przykładu: deklaracja umieszczona za
selektorem potomka div p a {...} będzie się odnosiła do wszystkich odnośników a umieszczonych w bloku div, w paragrafie p.
Selektory dziecka odnoszą się do elementów bezpośrednio osadzonych w
elementach poprzedzających. Opisuje się je podobnie jak selektory
potomka, zamiast spacji wstawiając znak >. Różnica pomiędzy selektorami potomka a dziecka polega właśnie na stopniu pokrewieństwa – podczas gdy reguła div p a {...}
będzie się odnosiła do wszystkich elementów zagnieżdżonych w takiej
kolejności, niezależnie od liczby elementów "pośrednich", to już reguła
div p>a {...} będzie określała tylko elementy a znajdujące się bezpośrednio w obrębie znaczników paragrafu p.
Selektory rodzeństwa odnoszą się zaś do elementów zagnieżdżonych na tym
samym poziomie w elemencie rodzica, czyli na przykład znaczników <i></i> oraz <b></b> występujących obok siebie w elemencie bloku <div>. Selektory rodzeństwa opisujemy poprzez umieszczenie znaku +, np. h1 + h2 {...}.
Selektory atrybutów służą do definiowania elementów mających określone atrybuty, np. title, class, rel, href. Atrybuty te podaje się w nawiasach kwadratowych np. h1[title] {...}. Można także zawęzić zakres zastosowania reguły do elementów o określonej wartości atrybutu. W tym celu należy użyć znaków:
= – dla elementów o wartości atrybutu równej określonej w regule, np. h1[title="tytul"] {...},
~= – dla elementów o wartości atrybutu określonej kilkoma
słowami oddzielonymi spacją, z których choć jedno ma postać wskazaną w
regule, np. a[rel~="copyright"] {...},
|= – dla elementów, których wartość atrybutu składa się ze
słów oddzielonych myślnikami, z których pierwsze ma postać określoną w
regule.
Należy zauważyć, że selektory dziecka, rodzeństwa i atrybutów nie są
obsługiwane przez przeglądarkę Internet Explorer 6.0. W związku z tym
ich zastosowanie z konieczności będzie jeszcze przez jakiś czas bardzo
ograniczone (choć dają one twórcy niezwykle ciekawe możliwości).
Aby precyzyjnie wskazać element, dla którego mamy zamiar utworzyć
określoną regułę, można posłużyć się jego identyfikatorem lub nadaną mu
klasą. W tym celu w obrębie znacznika języka (X)HTML umieszczamy
atrybut id lub class
wraz z nazwą. Należy pamiętać, iż identyfikator odnosi się tylko do
jednego elementu, podczas gdy klasa może określać ich kilka. Selektory
identyfikatorów (już w arkuszu stylów) podaje się w takim wypadku po
znaku #, np. div#identyfikator {...}, selektory klas ? zaś po kropce np. div.klasa {...}.
Dodajmy także, że selektory możemy grupować, oddzielając je przecinkiem, np. reguła postaci h1, h2, h3 {...} będzie dotyczyła wszystkich trzech rodzajów tytułów.
2.3. Pseudoelementy i pseudoklasy
Nie we wszystkich wypadkach zastosowanie powyższych selektorów może
wystarczyć projektantowi strony. Dla zwiększenia precyzji i
elastyczności opisu CSS 2.1 oferuje tzw. pseudoelementy i pseudoklasy.
Pseudoelementy są to abstrakcyjne formuły wychodzące poza tradycyjną
składnię języka (X)HTML, funkcjonujące jednak na zasadach elementów. I
tak do pseudoelementów zaliczamy:
:first-line – pozwalający zbudować regułę odnoszącą się do pierwszej linii paragrafu danego elementu, np. p:first-line {...},
:first-letter – odnoszący się do pierwszej litery dla danego elementu, np. p:first-leter {...}.
Pseudoklasy definiują zaś elementy o atrybutach innych niż określone przez składnię (X)HTML. Do pseudoklas zaliczamy więc:
:first-child – określającą element będący pierwszym zagnieżdżonym w innym elemencie, np. div > p.first-child {...} odnosi się do pierwszego paragrafu w bloku. Uwaga: ta pseuoklasa nie jest obsługiwana przez przeglądarkę Internet Explorer 6.0,
:link – odnosi się do nieodwiedzonego jeszcze przez użytkownika linku, np. a:link {...},
:visited – odnosi się do odwiedzonego już linku, np. a:visited {...},
:hover – znajduje zastosowanie dla elementu wskazanego przez
użytkownika, np. poprzez umieszczenie nad nim kursora, lecz jeszcze
nieaktywowanego,
:active – odnosi się do elementu aktywowanego przez
użytkownika, np. linku w chwili pomiędzy naciśnięciem przycisku myszy a
jego zwolnieniem.
2.4. Rodzaje wartości i jednostki
W budowaniu reguł równie ważne jak selektory są jednostki wchodzące w skład wartości definicji. Mogą to być słowa kluczowe (np. top, left, bold) lub też określone liczby wraz z uzupełniającym symbolem jednostki. Te ostatnie to długości,
określane przy użyciu jednostek względnych lub bezwzględnych. Jednostki
względne odnoszą się zawsze do wymiarów rzeczywistych innego elementu.
Należą do nich:
em – oznacza rozmiar czcionki elementu, w którego deklaracji
jest użyty, a w wypadku użycia tej jednostki dla właściwości font-size
odnosi się do rozmiaru czcionki elementu wstępnego,
ex – oznacza rozmiar pierwszej dostępnej czcionki elementu,
px – rozmiar piksela – w praktyce różny dla różnych urządzeń (drukarki, monitory LCD, CRT etc.).
Jednostki względne są przeliczane przez przeglądarkę na jednostki
bezwzględne. Należy przy tym pamiętać, że w wypadku dziedziczenia
poprzez kolejne wartości zachowywana jest wartość przeliczona, np. dla
deklaracji postaci body { font-size: 12px; text-indent: 3em;} h1 { font-size: 15px } odstęp (text-indent) dla h1 będzie wynosił 36 a nie 45 px.
Wartości bezwzględne są określone bezpośrednio, a nie relacyjnie, i należą do nich:
in – cale (1 cal to 2,54 centymetra),
cm – centymetry,
mm – milimetry,
pt – punkty (1 pt to 1/72 część cala),
pc – pica (1 pica to 12 punktów).
Niektóre właściwości mogą być określane za pomocą wartości procentowych. Procenty
odnoszą się zawsze do wartości określonej wcześniej – np. tej samej
właściwości elementu wstępnego albo innej właściwości bieżącego
elementu. Także w tym wypadku należy pamiętać, iż w CSS dziedziczone są
wartości przeliczone, więc np. w przykładzie p { font-size: 10px; line-height: 120% } wartość line-height elementu zstępnego dla p będzie równa 12 px.
Wielokrotnie w trakcie konstruowania stylu dokumentu spotkamy się także z użyciem ścieżki do określonego pliku. URL ujmowany jest zawsze w postaci url ('http://www.xyz.com'). Adres
może mieć charakter względny, przy czym należy pamiętać, że adresem
bazowym jest miejsce ulokowania arkusza stylów. Z tego względu np.
adres url('http://www.xyz.com/css/bg/transparent.gif') dla arkusza stylów umieszczonego w katalogu "css" odpowiada adresowi url('bg/transparent.gif').
Specyficznym rodzajem wartości są definicje kolorów, używane np. jako atrybuty właściwości color i background. Mogą być przedstawione słownie za pomocą siedemnastu dostępnych słów kluczowych: aqua (jasnoniebieski), black (czarny), blue (niebieski), fuchsia (jasnofioletowy), gray (szary), green (zielony), lime (jasnozielony), maroon (brązowy), navy (granatowy), olive (oliwkowy), orange (pomarańczowy), purple (fioletowy), red (czerwony), silver (jasnoszary), teal (szaroniebieski), white (biały) oraz yellow
(żółty). Dla zdefiniowania kolorów pośrednich należy posłużyć się ich
wartościami RGB, wyrażonymi w systemie szesnastkowym, gdzie 0 (00)
oznacza brak danej barwy, 255 (ff) oznacza zaś jej pełne nasycenie.
Zapis ten może być skrócony do trzech znaków, z których każdy w
procesie tworzenia strony przez przeglądarkę jest replikowany dla
uzyskania pełnej wartości. I tak następujące definicje dają w
rezultacie ten sam kolor (czerwony): red, #ff0000, #f00.
W niektórych wypadkach w definiowaniu stylów (np. przy selektorach atrybutywnych) może się okazać konieczne użycie ciągów tekstowych. Muszą być one przy tym ujęte w pojedyncze lub podwójne nawiasy, np.: a[title="odnosnik do strony"] {...}. Czym innym (niż ciągi tekstowe) są komentarze, umieszczane w samym arkuszu dla zwiększenia jego przejrzystości i łatwości dalszej edycji. Komentarze rozpoczynają się znakami /*, a kończą znakami */, czyli mają postać np. /* komentarz */.
2.5. Klauzula !important
Specyficzną funkcję pełni także klauzula !important.
Wskazuje ona tę z właściwości selektora, która jest ważniejsza – w
wypadku gdyby wystąpiła ich kolizja. Jej zastosowanie może mieć miejsce
np. w arkuszu stylów użytkownika, który zgodnie z ogólnymi zasadami
kaskady jest zastępowany regułami arkusza twórcy strony. Klauzula !important pozwala zachować użytkownikowi jego własne deklaracje stylu. Klauzulę umieszcza się po deklaracji, np. p {color:red !important}.
Klauzula może mieć także zastosowanie, gdy przy kilku uwzględnionych
"autorskich" arkuszach występuje trudna do zidentyfikowania kolizja
definicji.
2.6. @-reguły
W tym miejscu należy jeszcze omówić reguły @import i @media.
Pierwsza z nich pozwala zaimportować do bieżącego arkusza stylów treść
innego arkusza. Można przy tym określić rodzaj medium, dla którego
zaimportowany arkusz znajdzie zastosowanie. Reguła ma więc przykładową
postać @import url("arkusz.css") screen. Rodzaje docelowego
medium są jeszcze ważniejsze w wypadku drugiej @reguły. Pozwala ona
bowiem określić, które reguły w bieżącym arkuszu znajdą zastosowanie
dla danego sposobu prezentacji treści dokumentu. Sposoby te określamy
słowami kluczowymi:
all – dla wszystkich mediów,
braille – dla komputerowych przystawek Braille'a,
embossed – dla wydruku Braille'a,
handheld – dla urządzeń przenośnych, a więc o niewielkich możliwościach graficznych,
print – dla wydruku,
projection – dla prezentacji dokonywanych za pomocą projektora,
screen – dla ekranów komputerowych,
speech – dla syntezatorów mowy,
tty – dla urządzeń z wyświetlaczami o ograniczonej liczby znaków,
tv – dla ekranów telewizyjnych.
Przykładowo: w celu określenia reguł dla wydruku powinniśmy je umieścić w dodatkowym nawiasie klamrowym, poprzedzonym regułą @media i słowem kluczowym print, np. @media print {body{...} p{...} h1{...}}.
2.7. Dziedziczenie
Należy także zwrócić uwagę na pewną specyficzną właściwość arkuszy
stylów. Otóż wartości danych właściwości elementów zagnieżdżonych w
obrębie dokumentów powinny być przez te elementy dziedziczone. Oznacza
to, że jeśli w elemencie zstępnym nie zdefiniowano jakiejś właściwości,
a znajduje ona dla niego zastosowanie, będzie użyta wartość określona
dla elementu wstępnego. Ta właściwość stylów – choć jedynie w
niewielkim stopniu respektowana, szczególnie przez starszą z
przeglądarek Internet Explorer – pomaga w oszczędnym i precyzyjnym
formatowaniu treści.
2.8. Przykład nr 1
Czas na prosty przykład podsumowujący. W pliku index.html umieszczamy kod:
<html>
<head>
<link rel="stylesheet" href="arkusz.css" type="text/css">
</head>
<body>
<div>
<h1>Pierwszy tytul<h2>
<p>Pierwszy paragraf<br>
<a href="#">Pierwszy odnosnik</a></p>
<a href="#">Drugi odnosnik</a>
</div>
</body>
</html>
W sekcji <head> umieściliśmy odwołanie do arkusza stylów
zawartego w pliku o nazwie arkusz.css. Cały dokument składa się z bloku
<div>, w którym zawarte są tytuł <h1> oraz paragraf
<p> wraz z odnośnikiem <a> i – już poza paragrafem –
kolejny odnośnik <a>.
W arkuszu stylów umieścimy deklaracje:
@media print {body {font-size: 2pt}}
* {color: red}
h1 {text-decoration: underline}
p {text-decoration: none}
a {text-decoration: none}
div p>a {text-decoration: line-through}
a:hover{color:green}
Jak widać, w pierwszej kolejności ustawiliśmy rozmiar czcionki na
dwa punkty dla całego elementu <body>, jednak tylko w drukowanej
wersji strony. Kolejna deklaracja ustawia kolor czcionki dla wszystkich
elementów na czerwony, przy zastosowaniu selektora uniwersalnego.
Selektor typu h1 pozwala nam natomiast sformatować tekst tytułu, tak by
był on wyświetlony z podkreśleniem. Zawartość paragrafu, zgodnie z
naszym arkuszem stylów, nie będzie już zawierała podkreślenia. Podobnie
odnośniki – ale z wyjątkiem odnośnika bezpośrednio zagnieżdżonego w
paragrafie (a więc "Odnośnika pierwszego"), który zostanie ozdobiony
przekreśleniem. Na zakończenie dla wszystkich odnośników określiliśmy
kolor uaktywnienia na zielony. W przeglądarce nasza strona powinna
zatem prezentować się następująco:
poprzednia | 1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
następna |
| SKOMENTUJ |
CZYTAJ KOMENTARZE(0)
Wykop.pl | gwar.pl | delicious
var searcher = new SearcherBox("searcher_")
searcher.add("0");
searcher.add("1");
searcher.add("2");
Szukaj
Artykuły | Forum | Google
Szukaj
Artykuły | Forum | Google
Szukaj
Artykuły | Forum | Google
TOP
10
AKTUALNOŚCI
Najdroższe domeny tygodniaczytaj
Microsoft i Oracle wspierają PHPczytaj
AP przeciwko VeriSignczytaj
Chude lata na rynku serwerów?czytaj
BitTorrent DNA dla Hollywoodczytaj
Microsoft Windows XP Service...czytaj
Domeny ze znakami innymi niż...czytaj
Allegro.pl wyświetla oferty...czytaj
Najwięksi rejestratorzy miesiącaczytaj
Niebezpieczne routeryczytaj
Najnowsze | Najpopularniejsze
TOP
10
AKTUALNOŚCI
Miranda IM w wersji 0.7czytaj
Rusza sprzedaż domen .asiaczytaj
Nazwa.pl wprowadza usługę...czytaj
Pierwsze urządzenia przenośne z...czytaj
Hosting Windows w home.plczytaj
Allegro.pl wyświetla oferty...czytaj
Najwięksi rejestratorzy miesiącaczytaj
GoogleOS systemem operacyjnym...czytaj
Tańszy Internet satelitarnyczytaj
Pensylwania przeciwko piractwu...czytaj
Najnowsze | Najpopularniejsze
var tops = new StaticBox("top_")
tops.add("0");
tops.add("1");
BLOGI
YouTube na reklamowo
Jeśli zastanawialiście się kiedyś, dlaczego Google kupił YouTube, to
spieszę z odpowiedzią: oczywiście po to, by na nim zarabiać. Nie
widzieliście w serwisie YouTube żadnych reklam? Nie szkodzi,...
czytaj
Expression Blend - uruchamiamy produkt /arturz/czytaj
Ściągasz pliki? Zapłacisz karę /dAREuS/czytaj
Expression Blend - zaczynamy pracę /arturz/czytaj
Naucz się IIS 7 /arturz/czytaj
TOP
10
ARTYKUŁY
Cybersquatting. (Nie)legalne domeny EURO 2012czytaj
Kurs PHP. Wstęp do programowania w popularnym języku skryptowymczytaj
Najlepsze sprzętowe firewalleczytaj
Kurs "ABC hostingu"czytaj
Czym się różnią procesory serwerowe od zwykłychczytaj
Kurs CSS 2.1. Budujemy nowoczesne i stylowe witrynyczytaj
Biuro w Sieciczytaj
Kurs XHTML. Formatujemy strony WWWczytaj
Siedem najgroźniejszych ataków na serwisy WWWczytaj
Visual Web Developer 2005 Express Edition. Prosty sposób na tworzenie stron WWWczytaj
FORUM
GORĄCE TEMATY
Nowa poczta w o2.plczytaj
Hosting Windows w home.plczytaj
Intel zmienia nazwy procesorówczytaj
Tajemnicze zniknięcie Demonoidaczytaj
Kurs "ABC hostingu"czytaj
TOP
5
PLIKI
Spamihilator 0.9.9.32czytaj
Internet Explorer 7czytaj
Notepad++ 4.2.2czytaj
Pixel 1.0 Beta 7.699 dla Windowsczytaj
Majster 1.1czytaj
TAGI
802.11n cpu chiny cybersquatting google intel internet microsoft nokia p2p skype sun microsystems www wi-fi youtube atak bezpieczeństwo blokada cenzura cyberprzestępczość domena domeny e-mail firewall ftp hosting html kurs php piractwo procesory serwer serwery serwis społecznościowy
więcej tagów
Technologie
Czym się różnią procesory serwerowe od zwykłych
Kursy
Kurs CSS 2.1. Budujemy nowoczesne i stylowe witryny
Microsoft
Visual Web Developer 2005 Express Edition. Prosty sposób na tworzenie stron WWW
Google
Biuro w Sieci
Kursy
Kurs "ABC hostingu"
© 2007 by Webhosting.pl | Powered by home.pl | Kontakt | Reklama | Polityka prywatności
_uacct = "UA-2712831-1";
urchinTracker();
var pp_gemius_identifier = new String('p3XldnOByUbcszHKIpd_bPVnnOlFx5gJUp7qLSqRzzj.T7');
Wyszukiwarka
Podobne podstrony:
HTML CSS Kaskadowe arkusze stylów 03 2005ABC kaskadowych arkuszy stylow CSS?ccss(1)arkusze stylówkaskadowe arkusze stylów na przykładzie ms frontpage 2002xp helion plTEMAT ARKUSZA NR 3 rzut cechowanycw6 arkusz obliczeniowy przykladJezyk angielski arkusz I poziom podstawowy (5)Język niemiecki dwujęzyczna arkusz IIwięcej podobnych podstron