CSS3 Selektor


Selektor, cecha i wartość

We wstępie powiedzieliśmy sobie do czego służą style i czy warto je stosować. Wiemy już, że warto i wiemy także do czego służy CSS. Ale nie wiemy najważniejszego: jak zbudować styl. Spokojnie, za chwilę się tego nauczymy.

Wstawiamy pierwszy styl

Ogólna postać arkusza stylu wygląda tak:

selektor {cecha:wartość; cecha:wartość; cecha:wartość;}

Oczywiście nic by się nie stało, gdybyśmy napisali w ten sposób:

selektor {
cecha:wartość;
cecha:wartość;
cecha:wartość;}

Selektor jest tym elementem, dla którego zamierzamy zdefiniować styl. Przykładowo, jeżeli chcemy ustalić kolor tła dla tabeli, to jako selektor musimy podać table, jako cechę - tą właściwość, którą chcemy tabeli przyporządkować - background-color oraz, co jest zrozumiałe, musimy nadać wartość dla tej cechy, np. #FFFFFF albo white. Jak widać, kolory można definiować w dwojaki sposób: korzystając z wartości szesnastkowych (np. #000000 - kolor czarny) albo z angielskich nazw (np. black - kolor czarny). Wypróbujmy nasz przykład:

table {background-color:white;}

Pary cecha:wartość ZAWSZE oddzielamy od siebie średnikiem <b>";"</b>, a jeśli cecha ma kilka wartości, to oddzielamy je od siebie przecinkami. Jeżeli np. chcemy zdefiniować TE SAME cechy i dla tabeli i np. akapitu, to możemy skorzystać ze sprytnej sztuczki, jaką jest grupowanie selektorów.

table, p {background-color:white;}

Dowiemy się teraz trochę więcej o poszczególnych rodzajach selektorów.

Selektory HTMLowe

Są nimi tagi html-a (np. omawiany już table czy td), tylko pozbawione znaków "<" i ">". Np. znacznik <p> będzie prezentował się w stylach jako p (albo P, wielkość nie ma znaczenia). Wypróbujmy:

P {font-style:italic;}

Selektory klas

Drugim rodzajem selektora jest selektor klas. Najpierw musimy nazwać jakoś naszą klasę. Niech będzie to np. "webinside". Klasie tej przypisujemy pary cecha:wartość, dokładnie tak samo jak w przedstawionym powyżej selektorze HTMLowym.

.webinside {font-size:12pt;}



Różnica między tymi dwoma selektorami polega tylko na tym, że w selektorze HTMLowym przypisujemy właściwości konkretnemu elementowi strony (np. tabeli), a w selektorsze klas każdy znacznik htmla opatrzony tą klasą, będzie miał wartości zdefiniowane dla klasy (w tym przypadku wielkość czcionki 12 punktów). Możemy jednak zdecydować, że TYLKO konkretny znacznik htmla opatrzony klasą, będzie miał jej właściwości. Niech będzie to na przykład <p>. Wtedy napiszemy coś takiego:

P.webinside {font-size:12pt;}



W tym przypadku wielkość czcionki 12pt będzie miał tylko akapit (czyli <p>), jeżeli jako jego klasę podamy "webinside". No dobrze, ale jak podać tą klasę? Robimy to w następujący sposób:

<p class="webinside">jakiś tekst w akapicie</p>

Selektory uniwersalne

Bardzo "sprytny" rodzaj selektorów. Wartości zdefiniowane w nim przyjmuje KAŻDY element na stronie. Jeżeli dla selektora uniwersalnego ustalimy krój i kolor tekstu, to cały tekst, (w tabelach, akapitach, w wykazach itp.) będzie wyświetlany tą czcionką i tym kolorem, jaki zdefiniowaliśmy w stylu dla selektora uniwersalnego. Zapisujemy go w ten sposób:

* {font-family:verdana,arial,'times new roman'; color:yellow;}

Selektory identyfikatora

Bardzo przypominają one selektory klas. Różnica pomiędzy nimi, a selektorami klas jest taka, że styl zdefiniowany dla klasy możemy nadać wielu takim samym znacznikom na stronie (np. na stronie może być wiele znaczników p i możemy im wszystkim nadać klasę), a selektor identyfikatora oddziaływuje TYLKO na jeden konkretny znacznik na stronie (np. na jeden ze znaczników p). Identyfikator deklarujemy tak:

#nasz_identyfikator {cecha:wartość; cecha:wartość; cecha:wartość;}

Aby zaś przypisać identyfikator jakiemuś znacznikowi na stronie, piszemy coś takiego:

<p id="nasz_identyfikator">tekst, tekst i jeszcze raz tekst</p>

Wymieniłem tutaj cztery (najważniejsze) rodzaje selektorów, choć tak naprawdę jest ich dużo więcej. Jednak najczęściej będziesz korzystać podczas budowania swoich stylów z tych wymienionych powyżej.

Cechy

OK, każdy z was jest już prawie mistrzem selektorów, teraz kolej na nauczenie się cech (a raczej poznanie ich bliżej). Jak już wspomnieliśmy, cecha jest tym co chcemy określić dla danego elementu. Jeżeli chcemy określić kolor dla tekstu, to cechą będzie właśnie ten kolor. Oczywiście cecha musi mieć jakąś wartość, ale o tym później. Duży spis cech znajdziesz w artykule "Tabela właściwości CSS". Omówię tutaj tylko kilka podstawowych, najczęściej stosowanych cech. Formatując tekst w CSS możemy posłużyć się następującymi cechami:

font-size - definiuje wielkość czcionki
font-family -
definiuje rodzinę czcionek
font-style - ustala styl tekstu
font-weight -
odpowiada za wagę czcionki
color - ustala kolor tekstu
letter-spacing -
definiuje odstępny między literami
text-decoration - określa dekorację tekstu
text-indent - ustala wielkość wcięcia w tekście

Elementy odnoszące się do tła to:

background-image - obrazek jako tło
background-color -
definiuje kolor tła
background-attachment - ustala zaczepienie
tła
background-position - określa pozycję tła
background-repeat -
odpowiada za powtarzanie się tła

Jeżeli chcemy ustalić marginesy możemy posłużyć się:

margin-left - ustawia lewy margines
margin-right - ustawia prawy margines
margin-top - ustawia górny margines
margin-bottom - ustawia dolny margines
padding-left - ustawia lewy wewnętrzny margines
padding-right - ustawia prawy wewnętrzny margines
padding-top -
ustawia górny wewnętrzny margines
padding-bottom - ustawia dolny wewnętrzny margines

Cechy przeznaczone dla obramowania:

border-width - grubość obramowania
border-style - styl obramowania
border-color - kolor obramowania

Wartości

Czas omówić wartości. Nie podzielę ich na wartości dotyczące obramowania, tekstu itp., ponieważ wiele z nich można stosować do różnych rzeczy. Jeżeli jakaś wartość będzie dotyczyła TYLKO jakiegoś elementu (np. obramowania), to wyraźnie to zaznaczę.

pt - punkty (np. wielkość czcionki)
pc - pica (czyli 12pt, np.
wielkość czcionki)
px - piksele (np. wielkość czcionki)
cm - centymetry
(np. wsielkość czcionki czy margines)
in - cal (ok. 2,5 cm, np. wielkość czcionki czy margines)
xx-small - wielkość czcionki, najmniejsza
x-small -
wielkość czcionki
small - wielkość czcionki
medium - wielkość czcionki
large - wielkość czcionki
x-large - wielkość czcionki
xx-large- wielkość czcionki, największa
% - procenty (np.
margines czy wielkość czcionki)
red - kolor (czerwony, nazwa angielska, np.
kolor tła)
#FF0000 (czerwony, wartość szesnastkowa, np. kolor tła)
none - nic (np. dekoracja tekstu, czy styl obramowania)
dashed - tylko styl obramowania
dotted - tylko styl obramowania
so
lid - tylko styl obramowania
double - tylko styl obramowania
groove - tylko styl obramowania
ridge - tylko styl obramowania
inset - tylko styl obramowania
outset - tylko styl obramowania
italic - pochylenie (tylko styl czcionki)
bold - pogrubienie (tylko waga czcionki)
bolder - większe pogrubienie (tylko waga czcionki)
lighter - cieńsza czcionka (tylko waga czcionki)
underline - podkreślenie (tylko dekoracja tekstu)
overline -
nadkreślenie (tylko dekoracja tekstu)
line-through - przekreślenie (tylko dekoracja tekstu)
normal - wartość domyślna (np. styl lub wariant czcionki)
small-caps - kapitaliki (wariant czcionki)
100 - wartość liczbowa, np. 100 (np. waga czcionki)
disc - koło (tylko styl wykazu)
circle - okrąg (tylko styl wykazu)
square - kwadrat (tylko styl wykazu)
de
cimal - cyfry (tylko styl wykazu)
lower-roman - małe cyfry rzymskie (tylko styl wykazu)
upper-roman - duże cyfry rzymskie (tylko styl wykazu)
lower-alpha - małe litery (tylko styl wkazu)
upper-alpha - duże litery (tylko styl wykazu)
repeat - powtarzanie (tylko powtarzalność tła)
no-repeat - brak powtarzania (tylko powtarzalność tła)
fixed - tło nieruchome na ekranie (tylko zaczepienie tła)
scroll - tło przewijane razem z tekstem (tylko zaczepienie tła)
top - góra (np. pozycja tła lub tabeli)
left - lewo (np. pozycja tła lub tabeli)
right - prawo (np.
pozycja tła lub tabeli)
bottom - dół (np. pozycja tła lub tabeli)



Wyszukiwarka

Podobne podstrony:
15 Wzmacniacze Selektywne W Cz
CSS3 Help Sheet1
wzmacniacz selektywny
WZMACNIACZE SELEKTYWNE LC
badanie wzmacniaczy selektywnych
01 09 ZSO Analiza kosztów zbiórki selektywnej odpadów
01 23 ZSO Finasowe aspekty prowadzenia zbiórki selektywnej o
,radio programowalne, Pomiary selektywności
Fototermoliza selektywna
sem III GO egz wyklady selektywna zbiórka odpadów komunalnych (odpady niebezpieczne i wielkogabaryt
badanie układów selektywnych wykres LJH42F7QSVEEZX7ZNGR3COROC2IH22TRYXY3JGY
chemia, CHROMATOGRAFIA, CHROMATOGRAFIA- opiera się na zjawisku selektywnej adsorpcji rozdzielanych s
selektor impulsów, kl IV cT5
ćw.5 - Wzmacniacz selektywny, Wzmacniacz selektywny z obwodem LC
6B Instalacje elektryczne Zabezpiecznia przetężeniowe, selektywność (maj 09) rysunki
elektr, 10 Wzmacniacze selektywn1, 10 Wzmacniacze selektywne
wzm selektywny - projekt, Projekt wzmacniacza selektywnego
wzm selektywny - projekt, Projekt wzmacniacza selektywnego
01 22 ZSO Szacowanie kosztów funkcjonowania zbiórki selektyw

więcej podobnych podstron