Wpisy otagowane ‘CSS’

Ruch na stronie z jQuery

wtorek, 15 Październik 2013

Nie będę pisał o tym, jak zwiększyć ruch na stronie w sensie ilości użytkowników odwiedzających serwis, tylko o wprowadzeniu ruchomych elementów reagujących na określone zachowania użytkownika. Skorzystam przy tym z dobrodziejstw JavaScriptu i biblioteki jQuery. Jeżeli nie znasz jQuery, przeczytaj Co mogę zrobić z jQuery?.

Efekt, którego realizację chcę tu przybliżyć, zaprezentowałem poniżej. Najedź myszą na kolejne grafiki. Dalej znajdziesz kolejne etapy jego realizacji.

Obraz 1.

Obraz 2.

Obraz 3.

Obraz 4.

Obraz 5.

Obraz 6.

Zaczniemy od kodu HTML:

<div id="photos">
<div class="photo">
 	<div class="text"><p>Obraz 1.</p></div>
 	<img src="img1.jpg" id="p1" />
</div>
<div class="photo">
 	<div class="text"><p>Obraz 2.</p></div>
 	<img src="img2.jpg" id="p2" />
</div>
<div class="photo">
 	<div class="text"><p>Obraz 3.</p></div>
 	<img src="img3.jpg" id="p3" />
</div>
<div class="photo">
 	<div class="text"><p>Obraz 4.</p></div>
 	<img src="img4.jpg" id="p4" />
</div>
<div class="photo">
 	<div class="text"><p>Obraz 5.</p></div>
 	<img src="img5.jpg" id="p5" />
</div>
<div class="photo">
 	<div class="text"><p>Obraz 6.</p></div>
 	<img src="img6.jpg" id="p6" />
</div>
</div>

Całość znajduje się w znacznikach div z identyfikatorem photos. W zależności od szerokości tego elementu w jednym wierszu znajdzie się większa lub mniejsza liczba grafik. Każda grafika składa się z dwóch części: górnej – widocznej od razu i dolnej – pokazującej się po najechaniu myszą. Do elementów img dodałem identyfikatory. Grafiki poprzedzone są opisami zawartymi w elementach div klasy text, a łącznie z grafiką w elementach div klasy photo. Te divy służą do ograniczenia widoczności grafik do połowy ich wysokości, co jest realizowane przez definicje styli CSS:

#photos
{
 	width: 750px;
 	margin: 20px auto;
}
.photo 
{
 	width: 350px;
 	height: 350px;
 	overflow: hidden;
 	display: inline-block;
 	position: relative;
}
img 
{
 	display: none;
 	position: relative;
 	top: 0px;
}
.text 
{
 	width: 100%;
 	height: 100px;
 	background: #fff;
 	position: absolute;
 	left: 0px;
 	bottom:-100px;
 	z-index: 100;
}

Div photos swoją szerokością ogranicza ilość grafik w wierszu. Klasa photo definiuje widoczny obszar dla każdego pliku graficznego do kwadratu o boku 350px. Właściwość overflow ustawiona na hidden ukrywa paski przewijania dla zawartości nie mieszczących się w zdefiniowanym obszarze, display: inline-block sprawia, że elementy tej klasy zachowują się na zewnątrz jak elementy liniowe (ustawiają się jeden za drugim), a wewnątrz są elementami blokowymi zachowującymi zdefiniowane wymiary. Pozycjonowanie relatywne pozwoli na użycie tych elementów jako odniesienia dla elementów zawartych wewnątrz nich. Elementy img początkowo nie są widoczne. Za ich pokazanie będzie odpowiedzialny odpowiedni kod jQuery. Pozycjonując te elementy będziemy mogli wpływać na ich wartość top liczoną względem zewnętrznego elementu pozycjonowanego relatywnie. Została nam jeszcze klasa text. Elementy tej klasy ze względu na to, że są mniejsze niż element nadrzędny są pozycjonowane absolutnie, czyli właściwość bottom odnosi się do dolnej krawędzi elementu nadrzędnego, a nie elementu klasy text. Ujemna wartość ukrywa tekst pod dolną krawędzią elementu klasy photo, a z-index z wartością 100 gwarantuje pojawianie się tekstu na, a nie pod grafiką.

Teraz ostatnia i najważniejsza część, czyli kod jQuery:

$(document).ready(function()
{
	$('#p1').fadeIn(1000);
 	$('#p2').delay(200).fadeIn(1000);
 	$('#p3').delay(400).fadeIn(1000);
 	$('#p4').delay(600).fadeIn(1000);
 	$('#p5').delay(800).fadeIn(1000);
 	$('#p6').delay(1000).fadeIn(1000);
 
 	$('.photo').mouseover(function()
 	{
 		if($('img',this).queue('fx').length==0)
		{
			$('img',this).animate({'top':'-350px'},500);
			$('div',this).delay(200).animate({'bottom':'0px'},800);
		}
 	});
 	$('.photo').mouseleave(function()
 	{
 		if($('img',this).queue('fx').length<2)
		{
			$('div',this).animate({'bottom':'-100px'},400);
			$('img',this).delay(200).animate({'top':'0px'},700);
		}
	});
});

Skrypt rozpoczynamy od pokazania kolejnych grafik z efektem fadeIn. Efekt dla każdego kolejnego obrazka odpala się z opóźnieniem 200 ms względem poprzedniego (funkcja delay() z argumentem o 200 wyższym od poprzedniego). Poniżej mamy obsługę dwóch zdarzeń: mouseover i mouseleave. W pierwszym przypadku mamy dwie animacje funkcją animate(). Najpierw przewijamy w górę grafikę, a potem tekst. Całość jest zawarta w instrukcji warunkowej, którą na razie pominę. Warto sprawdzić zachowanie skryptu bez instrukcji if przy jednym i drugim zdarzeniu. W mouseleave najpierw tekst wraca na miejsce początkowe (tuż pod dolną krawędź widocznego obszaru), a następnie grafika zjeżdża w dół.

Ponieważ w jQuery efekty animacji są kolejkowane, to wszystkie zdarzenia powodujące wywołanie animacji, będą dokładały te animacje do kolejki. Szybkie, kilkukrotne najechanie i opuszczenie kursorem myszy tej samej grafiki spowoduje utworzenie kolejki wielu efektów, które będą musiały być wykonane. Użytkownik nie będzie już nic robił, a obrazki będą się przesuwały w górę i w dół tyle razy, ile razy te efekty zostały wcześniej dodane do kolejki. Rozwiązaniem tego problemu jest kontrolowanie ilości efektów w kolejce, co umożliwia nam właściwość length obiektu queue. Właśnie tę funkcję realizują instrukcje warunkowe w obsłudze zdarzeń. W pierwszym przypadku nowe animacje będą dodane tylko w sytuacji gdy kolejka jest pusta. W drugim bierzemy pod uwagę fakt, że pierwsza faza może nie zostać zakończona, więc jeden efekt może jeszcze być obecny w kolejce.

Zaprezentowany w tym artykule przykład nie będzie działał poprawnie w przeglądarkach IE8 i wcześniejszych ze względu na użytą wartość display: inline-block, której wymienione przeglądarki nie obsługują. Jeżeli komuś zależy na tych przeglądarkach powinien wymienić display: inline-block na float: left. Możliwe, że będzie to wymagało dopracowania kilku innych szczegółów.



Jak zrobić stronę squeeze page?

czwartek, 3 Listopad 2011

Czym jest squeeze page pisałem już kiedyś. Dzisiaj chcę pokazać, jak zabrać się za wykonanie takiej strony.

Jeżeli nie widzisz nagrania, wciśnij F5 na klawiaturze.

Niedawno udostępniłem kurs Zawodowy Webmaster, którego częścią jest to nagranie, swojemu 10-cio letniemu synowi Patrykowi. Zaskoczyło mnie, jak świetnie poradził sobie z wykonaniem zadań. Dla tych co mają wątpliwości, czy sobie poradzą: kurs jest na poziomie uzdolnionego 10-cio latka :) .


Mam dla Ciebie dodatkowy prezent. Jeżeli interesuje Cię pozycjonowanie stron w wyszukiwarkach, z pewnością przydadzą Ci się poniższe publikacje: W pierwszej znajdziesz informację o doborze i testowaniu słów kluczowych, a w drugiej mechanizm funkcjonowania najpopularniejszych wyszukiwarek.

Jak zdobyć popularność i zjednać sobie wyszukiwarki Pierwsze miejsce w wyszukiwarkach



Co się dzieje z tymi marginesami?

piątek, 25 Marzec 2011

Collapsing margins jest zjawiskiem zapadania się (można też spotkać określenie „załamywania”) marginesów pionowych elementów sąsiadujących lub zagnieżdżonych. Zaprezentuję to na przykładzie.

<div id="kontener">
	<p>Hello</p>
</div>

Tworzę blok div o identyfikatorze kontener, a w nim umieszczam akapit. Chcę by akapit miał zielone tło i był odsunięty od krawędzi bloku div o 20 pikseli. Natomiast blok div ma mieć tło zielone. Tworzę więc następujące style.

#kontener
{
	background-color: #ffff00;
}
 
#kontener p
{
	margin: 20px; background-color: #00ff00;
}

To, co otrzymuję nie do końca spełnia moje oczekiwania.

Hello

O ile poziome marginesy zachowały się zgodnie z oczekiwaniami, to pionowe przeszły z akapitu do bloku div.

Problem dla konkretnego marginesu nie wystąpi, jeżeli przed lub po akapicie umieszczę jakąś zawartość.

Definicja stylu pozostaje bez zmian

<div id="kontener">
	Napis przed akapitem
	<p>Hello</p>
</div>

lub

<div id="kontener">
	<p>Hello</p>
	Napis po akapicie
</div>

Da mi odpowiednio

Napis przed akapitem

Hello

lub

Hello

Napis po akapicie

Margines pojawił się automatycznie od strony, z której umieściłem napis. Gdybym umieścił go po obu stronach, marginesy pojawiłyby się powyżej i poniżej akapitu. Co mam jednak robić jeżeli nie chcę umieszczać żadnej zawartości? W takiej sytuacji należy po prostu zmienić definicję styli.

<div id="kontener">
	<p>Hello</p>
</div>

Kod html pozostaje niezmieniony.

#kontener
{
	padding: 20px 0;
	background-color: #ffff00;
}
 
#kontener p
{
	margin: 20px; background-color: #00ff00;
}

Do definicji styli elementu #kontener dodaję 20 pikseli dopełnienia górnego i dolnego. Daje to następujący efekt.

Hello

Tym razem odstępy są zbyt duże. Margines akapitu został oddzielony właściwością padding elementu div i tym samym został przez przeglądarkę uwzględniony. To co widzimy na stronie to suma marginesu akapitu i dopełnienia elementu div. Aby poprawić ostateczny efekt należy pozbyć się pionowych marginesów akapitu.

#kontener
{
	padding: 20px 0;
	background-color: #ffff00;
}
 
#kontener p
{
	margin: 0 20px; background-color: #00ff00;
}

Wstawiam zero jako pierwszą wartość właściwości padding akapitu, czyli pionowe marginesy zostają wyzerowane przy niezmienionym stanie marginesów poziomych. Tym razem efekt jest następujący.

Hello

Co jednak, gdy będę chciał umieścić wewnątrz bloku div kilka akapitów tak, by pomiędzy nimi uzyskać 20 pikseli przerwy?

<div id="kontener">
	<p>Hello</p>
	<p>Hello</p>
	<p>Hello</p>
</div>

Hello

Hello

Hello

Dodam dla każdego akapitu marginesy pionowe: górny i dolny o wartości 10 pikseli. To powinno nam dać w sumie 20 pikseli przerwy. Aby odległość pomiędzy pierwszym akapitem, a górną krawędzią elementu div oraz pomiędzy ostatnim akapitem i dolną krawędzią elementu div nie została zwiększona do 30 pikseli. Zmniejszę wartość pionowego dopełnienia do 10 pikseli.

#kontener
{
	padding: 10px 0;
	background-color: #ffff00;
}
 
#kontener p
{
	margin: 10px 20px; background-color: #00ff00;
}

Hello

Hello

Hello

Ponownie efekt nie jest zgodny z oczekiwanym. Tym razem marginesy pomiędzy akapitami zostały zredukowane do jednego marginesu. Gdyby marginesy akapitów górny i dolny nie były sobie równe. Odległość pomiędzy akapitami zostałaby zredukowana do większego z marginesów.

Aby marginesy były takie, jakie być powinny, wyzeruję jeden z marginesów akapitów, a drugi ustawię na 20 pikseli. Nie ma większego znaczenia, czy wyzeruję górny, a zwiększę dolny, czy odwrotnie. Będę tylko musiał pamiętać o zmianie odpowiedniego dopełnienia bloku div.

#kontener
{
	padding: 1px 0 20px;
	background-color: #ffff00;
}
 
#kontener p
{
	margin: 20px 20px 0; background-color: #00ff00;
}

Każdy akapit ma margines górny równy 20 pikseli, marginesy poziome równe 20 pikseli i margines dolny równy 0. Natomiast dopełnienia elementu div zmieniły się odwrotnie. To dopełnienie górne zostało zredukowane wprawdzie do 1 piksela, a nie do 0, ale wyzerowanie tej wartości doprowadziłoby do zapadnięcia się marginesu górnego pierwszego akapitu w marginesie górnym bloku div, co obrazuje pierwszy przykład tej lekcji. Jeżeli nie potrzebujemy dokładności co do piksela, to rozwiązanie jest zupełnie zadowalające. Zresztą wystarczy spojrzeć poniżej.

Hello

Hello

Hello

Jeżeli jednak ta dokładność jest potrzebna, należy dodać jeszcze jedną właściwość w definicji stylu.

#kontener
{
	padding: 1px 0 20px;
	background-color: #ffff00;
}
 
#kontener p
{
	margin: 20px 20px 0; background-color: #00ff00;
}
 
#kontener p:first-child
{
	margin-top: 19px;
}

Selektor #kontener p:first-child wskazuje tylko na pierwszy akapit zawarty w elemencie #kontener i tylko dla niego zmniejsza górny margines do 19 pikseli, co łącznie z górnym dopełnieniem daje wartość 20. Niestety to rozwiązanie nie działa w przeglądarce IE nawet w wersji 8. Problem ten można ominąć nadając pierwszemu akapitowi dowolny identyfikator np: id=”pierwszy”. Wówczas selektor powinien wyglądać: #kontener p#pierwszy. Jeżeli takich fragmentów kodu na stronie mamy kilka, zamiast identyfikatora używamy klasy.

Hello

Hello

Hello

Prezentowany przypadek jest dosyć prosty, w praktyce można natknąć się na bardzo różne układy elementów i różne też będą zaplanowane efekty. Z tego względu powyższych rozwiązań nie należy bezmyślnie kopiować. Mają one jedynie wskazać ogólny kierunek szukania rozwiązań.

Jeżeli ktoś z czytelników spotkał się w swojej pracy z szczególnie interesującym problemem związanym z collapsing margins, to proszę o przysłanie kodu z opisem oczekiwanego rezultatu na adres trener@serwan.pl. Rozwiązanie 2-3 ciekawszych przykładów zaprezentuję w jednej z najbliższych lekcji. Zachęcam również do pozostawiania komentarzy poniżej.



Ustalanie pozycji elementów w CSS cz. 3.

czwartek, 3 Luty 2011

Pozycjonowanie fixed

Element w pierwotnym położeniu. Pozostaje w miejscu, w którym był po wczytaniu się strony.
Element dodatkowy

Ze względu na specyfikę pozycjonowania fixed pierwszy przykład umieściłem powyżej, tak by był widoczny od razu po załadowaniu strony w większości przeglądarek. Kod tego przykładu znajdziesz nieco niżej.

W pozycjonowaniu fixed określamy pozycje elementu względem krawędzi okna przeglądarki. Elementy występujące po elemencie pozycjonowanym zajmują miejsce tego elementu. Pozycje tradycyjnie ustala się właściwościami left, right, top i bottom. Pozycjonowanie fixed jest określane właściwością position: fixed;. Elementy pozycjonowane w ten sposób umieściłem w czerwonym obramowaniu. Dla większej jasności po elemencie pozycjonowanym umieściłem element dodatkowy (zielone tło), a całość umieszczam w elemencie z szaro-niebieską ramką.

<div class="ramka">
	<div class="border" id="fixed1">Element w pierwotnym położeniu</div>
	<div class="dodatkowy">Element dodatkowy</div>
</div>
#fixed1
{
	position: fixed;
}
.border
{
	margin: 15px;
	border: 2px solid #b80400;
	padding: 10px;
	background-color: #ffffff;
}
.ramka
{
	width: 350px; 
	border: 1px solid #9999cc;
}
.dodatkowy
{
	margin: 8px;
	padding: 12px;
	background-color: #33ff99;
	color: #ffffff;
	font-weight: bold;
}


<div class="ramka">
	<div class="border" id="fixed2">
	Element z właściwościami top: 90px; right: 40px; - odsunięty od górnej i prawej krawędzi okna przeglądarki o 40 pikseli
	</div>
	<div class="dodatkowy">Element dodatkowy</div>
</div>
#fixed2
{
	position: fixed;
	top: 90px;
	right: 40px;
}
.border
{
	margin: 15px;
	border: 2px solid #b80400;
	padding: 10px;
	background-color: #ffffff;
}
.ramka
{
	width: 350px; 
	border: 1px solid #9999cc;
}
.dodatkowy
{
	margin: 8px;
	padding: 12px;
	background-color: #33ff99;
	color: #ffffff;
	font-weight: bold;
}
Element z właściwościami top: 90px i right: 40px; – odsunięty od górnej 90 pikseli i prawej krawędzi okna przeglądarki o 40 pikseli
Element dodatkowy


Pozycjonowanie statyczne

Ostatnim typem pozycjonowania jest pozycjonowanie statyczne. Oznaczane jest właściwością position: static;. Jest to domyślne pozycjonowanie. Mają je wszystkie elementy na stronie, którym nie zmieniono właściwości position. Czasami zachodzi konieczność jawnego użycia pozycjonowania statycznego. Przyjrzyjmy się przykładowi poniżej. Jeden z bloków div jest pozycjonowany względnie (position: relative). Wstawiony do jego wnętrza kolejny blok div automatycznie ma tę samą właściwość.

<div class="ramka" id="relative">
	<div class="border">
		Element z właściwościami left: 40px; i top: -50px - pozycjonowany względnie.
		<div class="border">
			Element ma to samo pozycjonowanie, co element nadrzędny.
		</div>
	</div>
	<div style="margin: 8px; padding: 12px; background-color: #33ff99; color: #ffffff; font-weight: bold;">
		Element dodatkowy</div>
	</div>
#relative div
{
	position: relative;
	left: 40px;
	top: -50px;
}
.border
{
	margin: 15px;
	border: 2px solid #b80400;
	padding: 10px;
	background-color: #ffffff;
}
.ramka
{
	width: 350px; 
	border: 1px solid #9999cc;
}
.dodatkowy
{
	margin: 8px;
	padding: 12px;
	background-color: #33ff99;
	color: #ffffff;
	font-weight: bold;
}
Element z właściwościami left: 40px; i top: -50px – pozycjonowany względnie.
Element przejmuje pozycjonowanie elementu nadrzędnego.
Element dodatkowy


Jeżeli chcielibyśmy usunąć pozycjonowanie dla wewnętrznego bloku, musimy użyć position: static

<div class="ramka" id="relative">
	<div class="border">
		Element z właściwościami left: 40px; i top: -50px - pozycjonowany względnie.
		<div class="border" id="static">
			Element z usuniętym pozycjonowaniem dzięki właściwości <em>position: static</em>.
		</div>
	</div>
	<div style="margin: 8px; padding: 12px; background-color: #33ff99; color: #ffffff; font-weight: bold;">
		Element dodatkowy</div>
	</div>
#relative div
{
	position: relative;
	left: 40px;
	top: -50px;
}
#static
{
	position: static;
}
.border
{
	margin: 15px;
	border: 2px solid #b80400;
	padding: 10px;
	background-color: #ffffff;
}
.ramka
{
	width: 350px; 
	border: 1px solid #9999cc;
}
.dodatkowy
{
	margin: 8px;
	padding: 12px;
	background-color: #33ff99;
	color: #ffffff;
	font-weight: bold;
}
Element z właściwościami left: 40px; i top: -50px – pozycjonowany względnie.
Element z usuniętym pozycjonowaniem dzięki właściwości position: static.
Element dodatkowy

Zachęcam do pozostawieni swoich uwag i komentarzy poniżej.



Ustalanie pozycji elementów w CSS cz. 2.

wtorek, 11 Styczeń 2011

Pozycjonowanie absolutne

W pozycjonowaniu absolutnym określamy pozycje elementu względem kontenera. Kontenerem zazwyczaj jest element body, może też być nim inny element z właściwością position ustawioną na relative, absolute lub fixed. Elementy występujące po elemencie pozycjonowanym zajmują miejsce tego elementu. Pozycje tradycyjnie ustala się właściwościami left, right, top i bottom. W przypadku gdy ustalamy właściwość top, a kontenerem jest element body, pozycja jest liczona od dolnej krawędzi części widocznej po załadowaniu strony. Samo pozycjonowanie absolutne jest określane właściwością position: absolute;. Poniżej przedstawiłem element pozycjonowany absolutnie w czerwonym obramowaniu. Dla większej jasności po elemencie pozycjonowanym umieściłem element dodatkowy (zielone tło), a całość umieszczam w elemencie z szaro-niebieską ramką.

<div class="ramka">
	<div class="border" id="absolute1">Element w pierwotnym położeniu</div>
	<div class="dodatkowy">Element dodatkowy</div>
</div>
#absolute1
{
	position: absolute;
}
.border
{
	margin: 15px;
	border: 2px solid #b80400;
	padding: 10px;
	background-color: #ffffff;
}
.ramka
{
	width: 350px; 
	border: 1px solid #9999cc;
}
.dodatkowy
{
	margin: 8px;
	padding: 12px;
	background-color: #33ff99;
	color: #ffffff;
	font-weight: bold;
}
Element w pierwotnym położeniu
Element dodatkowy


<div class="ramka">
	<div class="border" id="absolute2">
	Element z właściwością left: 40px; - odsunięty od lewej krawędzi kontenera o 40 pikseli
	</div>
	<div class="dodatkowy">Element dodatkowy</div>
</div>
#absolute2
{
	position: absolute;
	left: 40px;
}
.border
{
	margin: 15px;
	border: 2px solid #b80400;
	padding: 10px;
	background-color: #ffffff;
}
.ramka
{
	width: 350px; 
	border: 1px solid #9999cc;
}
.dodatkowy
{
	margin: 8px;
	padding: 12px;
	background-color: #33ff99;
	color: #ffffff;
	font-weight: bold;
}
Element z właściwością left: 40px; – odsunięty od lewej krawędzi kontenera o 40 pikseli
Element dodatkowy


<div class="ramka">
	<div class="border" id="absolute3">
	Element z właściwością right: 40px; - odsunięty od prawej krawędzi kontenera o 40 pikseli
	</div>
	<div class="dodatkowy">Element dodatkowy</div>
</div>
#absolute3
{
	position: absolute;
	right: 40px;
}
.border
{
	margin: 15px;
	border: 2px solid #b80400;
	padding: 10px;
	background-color: #ffffff;
}
.ramka
{
	width: 350px; 
	border: 1px solid #9999cc;
}
.dodatkowy
{
	margin: 8px;
	padding: 12px;
	background-color: #33ff99;
	color: #ffffff;
	font-weight: bold;
}
Element z właściwością right: 40px; – odsunięty od prawej krawędzi kontenera o 40 pikseli
Element dodatkowy


<div class="ramka">
	<div class="border" id="absolute4">
	Element z właściwością bottom: 10px; - odsunięty od dolnej krawędzi kontenera o 10 pikseli
	</div>
	<div class="dodatkowy">Element dodatkowy</div>
</div>
#absolute4
{
	position: absolute;
	bottom: 10px;
}
.border
{
	margin: 15px;
	border: 2px solid #b80400;
	padding: 10px;
	background-color: #ffffff;
}
.ramka
{
	width: 350px; 
	border: 1px solid #9999cc;
}
.dodatkowy
{
	margin: 8px;
	padding: 12px;
	background-color: #33ff99;
	color: #ffffff;
	font-weight: bold;
}
Element z właściwością bottom: 10px; – odsunięty od dolnej krawędzi kontenera o 10 pikseli
Element dodatkowy


<div class="ramka">
	<div class="border" id="absolute5">
	Element z właściwością top: 3500px; - odsunięty od górnej krawędzi kontenera o 3500 pikseli
	</div>
	<div class="dodatkowy">Element dodatkowy</div>
</div>
#absolute5
{
	position: absolute;
	top: 3500px;
}
.border
{
	margin: 15px;
	border: 2px solid #b80400;
	padding: 10px;
	background-color: #ffffff;
}
.ramka
{
	width: 350px; 
	border: 1px solid #9999cc;
}
.dodatkowy
{
	margin: 8px;
	padding: 12px;
	background-color: #33ff99;
	color: #ffffff;
	font-weight: bold;
}
Element z właściwością top: 3500px; – odsunięty od górnej krawędzi kontenera o 3500 pikseli
Element dodatkowy


<div class="ramka">
	<div class="border" id="absolute6">
	Element z właściwościami left: 40px; i top: 4500px - odsunięty od lewej krawędzi kontenera o 40 pikseli oraz od górnej krawędzi o 4500 pikseli
	</div>
	<div class="dodatkowy">Element dodatkowy</div>
</div>
#absolute6
{
	position: absolute;
	left: 40px;
	top: 4500px;
}
.border
{
	margin: 15px;
	border: 2px solid #b80400;
	padding: 10px;
	background-color: #ffffff;
}
.ramka
{
	width: 350px; 
	border: 1px solid #9999cc;
}
.dodatkowy
{
	margin: 8px;
	padding: 12px;
	background-color: #33ff99;
	color: #ffffff;
	font-weight: bold;
}
Element z właściwościami left: 40px; i top: 4500px – odsunięty od lewej krawędzi kontenera o 40 pikseli oraz od górnej krawędzi o 4500 pikseli
Element dodatkowy


<div class="ramka" id="relative">
	<div class="border" id="absolute7">
	Element z właściwościami left: 40px; i top: 50px - odsunięty od lewej krawędzi kontenera o 40 pikseli oraz od górnej krawędzi o 50 pikseli. W tym przypadku kontenerem jest element o identyfikatorze relative.
	</div>
	<div class="dodatkowy">Element dodatkowy</div>
</div>
#absolute6
{
	position: absolute;
	left: 40px;
	top: 50px;
}
#relative
{
	position: relative;
	left: -30px;
	top: 10px;
}
.border
{
	margin: 15px;
	border: 2px solid #b80400;
	padding: 10px;
	background-color: #ffffff;
}
.ramka
{
	width: 350px; 
	border: 1px solid #9999cc;
}
.dodatkowy
{
	margin: 8px;
	padding: 12px;
	background-color: #33ff99;
	color: #ffffff;
	font-weight: bold;
}
Element z właściwościami left: 40px; i top: 50px – odsunięty od lewej krawędzi kontenera o 40 pikseli oraz od górnej krawędzi o 50 pikseli. W tym przypadku kontenerem jest element o identyfikatorze relative.
Element dodatkowy

Zachęcam do pozostawieni swoich uwag i komentarzy poniżej.



Ustalanie pozycji elementów w CSS cz. 1.

poniedziałek, 20 Grudzień 2010

Pozycjonowanie względne

W pozycjonowaniu względnym możemy przesuwać element względem pierwotnego położenia. Służą do tego właściwości left, right, top i bottom. Samo pozycjonowanie względne jest określane właściwością position: relative;. Poniżej przedstawiłem element pozycjonowany względnie w czerwonym obramowaniu. Dla większej jasności elementy pozycjonowane umieszczam w elemencie z szaro-niebieską ramką.

<div class="ramka">
	<div class="border" id="relative1">Element w pierwotnym położeniu</div>
</div>
#relative1
{
	position: relative;
}
.border
{
	margin: 15px;
	border: 2px solid #b80400;
	padding: 10px;
}
.ramka
{
	width: 350px; 
	border: 1px solid #9999cc;
}
Element w pierwotnym położeniu


<div class="ramka">
	<div class="border" id="relative2">
	Element z właściwością left: 40px; - odsunięty od lewej krawędzi pierwotnego położenia o 40 pikseli
	</div>
</div>
#relative2
{
	position: relative;
	left: 40px;
}
.border
{
	margin: 15px;
	border: 2px solid #b80400;
	padding: 10px;
}
.ramka
{
	width: 350px; 
	border: 1px solid #9999cc;
}
Element z właściwością left: 40px; – odsunięty od lewej krawędzi pierwotnego położenia o 40 pikseli


<div class="ramka">
	<div class="border" id="relative3">
	Element z właściwością right: 40px; - odsunięty od prawej krawędzi pierwotnego położenia o 40 pikseli
	</div>
</div>
#relative3
{
	position: relative;
	right: 40px;
}
.border
{
	margin: 15px;
	border: 2px solid #b80400;
	padding: 10px;
}
.ramka
{
	width: 350px; 
	border: 1px solid #9999cc;
}
Element z właściwością right: 40px; – odsunięty od prawej krawędzi pierwotnego położenia o 40 pikseli


<div class="ramka">
	<div class="border" id="relative4">
	Element z właściwością bottom: 10px; - odsunięty od dolnej krawędzi pierwotnego położenia o 10 pikseli
	</div>
</div>
#relative4
{
	position: relative;
	bottom: 10px;
}
.border
{
	margin: 15px;
	border: 2px solid #b80400;
	padding: 10px;
}
.ramka
{
	width: 350px; 
	border: 1px solid #9999cc;
}
Element z właściwością bottom: 10px; – odsunięty od dolnej krawędzi pierwotnego położenia o 10 pikseli


<div class="ramka">
	<div class="border" id="relative5">
	Element z właściwością top: 10px; - odsunięty od górnej krawędzi pierwotnego położenia o 10 pikseli
	</div>
</div>
#relative5
{
	position: relative;
	top: 10px;
}
.border
{
	margin: 15px;
	border: 2px solid #b80400;
	padding: 10px;
}
.ramka
{
	width: 350px; 
	border: 1px solid #9999cc;
}
Element z właściwością top: 10px; – odsunięty od górnej krawędzi pierwotnego położenia o 10 pikseli


<div class="ramka">
	<div class="border" id="relative6">
	Element z właściwościami left: 40px; i top: 15px - odsunięty od lewej krawędzi pierwotnego 
położenia o 40 pikseli oraz od górnej krawędzi o 15 pikseli
	</div>
</div>
#relative6
{
	position: relative;
	left: 40px;
	top: 15px;
}
.border
{
	margin: 15px;
	border: 2px solid #b80400;
	padding: 10px;
}
.ramka
{
	width: 350px; 
	border: 1px solid #9999cc;
}
Element z właściwościami left: 40px; i top: 15px – odsunięty od lewej krawędzi pierwotnego położenia o 40 pikseli oraz od górnej krawędzi o 15 pikseli

Zachęcam do pozostawieni swoich uwag i komentarzy poniżej.



Jak wykorzystać selektory cz. 3.

piątek, 14 Maj 2010

Oto ostatnia część opisu selektorów CSS. W tym artykule opiszę selektory odnoszące się do elementów strony, z którymi nastąpiła jakaś interakcja, lub są ich modyfikatorami. Selektory te nazywane są pseudoklasami. Łatwo można je rozpoznać po znaku „:” w selektorze.

Definicja styli nadal znajduje się w pliku „style.css”. Natomiast kod strony „index.html” powinien wyglądać tak:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Lorem ipsum</title>
	<link rel="stylesheet" href="style.css" />
</head>
<body>
<p>
Ten akapit jest pierwszym akapitem na tej stronie. Nie jest specjalnie długi, ale za to bez sensu. Jeżeli go nie zrozumiałeś, nie przejmuj się. 7 na 10 naukowców też go nie rozumie. Ostatnie badania dowodzą, że ten akapit nie istnieje.
</p>
<div>
	<p>
	Lorem ipsum dolor sit amet enim. Etiam ullamcorper. <a href="#1">test 1</a> Suspendisse a pellentesque dui, non felis. <a href="#2">test 2</a> <a href="#3">test 3</a> Maecenas malesuada elit lectus felis, <a href="#4">test 4</a> malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna.</p>
</div>
<p>Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis.</p>
</body>
</html>

Jeżeli chcemy wyróżnić pierwszą linię jakiegoś tekstu, lub pierwszą linię każdego akapitu, możemy zastosować :first-line. W przykładzie poniżej pierwsza linia każdego akapitu zostanie wyświetlona przy pomocy kapitalików.

p:first-line {font-variant: small-caps;}

Można też wyróżnić pierwszą literę powiększając ją…

p:first-letter {font-size: 200%;}

albo pierwsze wystąpienie danego elementu w innym elemenci. W tym przypadku będzie to zmiana koloru pierwszego akapitu. Styl zostanie powtórzony dla kolejnego akapitu, gdyż jest on pierwszym w bloku div.

p:first-child {color: #cc0000;}

Przy pomocy styli można wstawiać dowolną zawartość przed lub po dowolnym elemencie. Np. błękitną gwiazdkę przed każdym odnośnikiem i dodatkowy tekst za blokiem div. Te ustawienia mogą nie działać w starszych przeglądarkach i w IE 8 w widoku zgodności

a:before {content: "*"; color: #00ccff;}
div:after {content: "Tu kończy się blok div"}

Oddzielną grupą pseudoklas są te związane z odnośnikami. Wygląd odnośników można modyfikować w zależności od tego, czy są wskazywane aktualnie kursorem (:hover), zostały już wcześniej odwiedzone (:visited), właśnie zostały kliknięte (:active), lub zostały wybrane klawiszem tabulacji (:focus). Za pomocą pseudoklasy :focus można też wyróżnić pola formularzy, które są aktualnie edytowane. Pseudoklasa :focus może pokrywać się z pseudoklasą :active. Zwykły stan odnośników definiuje się poprzez pseudoklasę :link.

a:link {color: #00cc00; text-decoration: none;}
a:visited {color: #006600; text-decoration: none;}
a:hover {color: #66ff66; text-decoration: underline;}
a:active {color: #ff0000; text-decoration: none;}
a:focus {color: #ff00ff; text-decoration: none;}

Przykładowa strona po zastosowaniu tego selektora wygląda tak:

Ten akapit jest pierwszym akapitem na tej stronie. Nie jest specjalnie długi, ale za to bez sensu. Jeżeli go nie zrozumiałeś, nie przejmuj się. 7 na 10 naukowców też go nie rozumie. Ostatnie badania dowodzą, że ten akapit nie istnieje.

Lorem ipsum dolor sit amet enim. Etiam ullamcorper. test 1 Suspendisse a pellentesque dui, non felis. test 2 test 3 Maecenas malesuada elit lectus felis, test 4 malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna.

Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis.



Jak wykorzystać selektory cz. 2

wtorek, 20 Kwiecień 2010

W poprzednim artykule przedstawiłem selektor uniwersalny, selektor typu, selektory potomka, dziecka i braci. W tym artykule będę kontynuował opis używania kolejnych selektorów.

Definicję styli będziemy nadal umieszczać w pliku „style.css”. Kod strony „index.html” zmienił się w niewielkim stopniu i powinien wyglądać tak:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Lorem ipsum</title>
	<link rel="stylesheet" href="style.css" />
</head>
<body>
<div>
	<p>
	Lorem ipsum dolor sit amet enim. <strong class="wielkie">Etiam ullamcorper. <a id="pierwszy" href="#">test 1</a></strong> Suspendisse a pellentesque dui, <span class="wielkie">non felis. <a rel="nofollow" href="#">test 2</a></span> <a href="#">test 3</a> Maecenas malesuada elit lectus felis, <a href="#" rel="follow">test 4</a> malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna.</p>
</div>
	<p class="wielkie">Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis.
	</p>
</body>
</html>

Często bywa tek, że część właściwości ma być identyczna dla różnych elementów strony. Np. i akapity i elementy div mają mieć identyczne obramowanie, a kolor tła dla każdego z tych elementów ma być inny. Do ustalenia obramowania użyjemy selektora grupowania – selektory poszczególnych elementów umieszczamy oddzielone przecinkiem jeden za drugim przed definicją stylu. Pozostałe właściwości określimy w zwykłych selektorach typów.

div, p {border: 2px solid #ff0000;}
div {background-color: #ff9966;}
p {background-color: #99ff66;}

Przykładowa strona po zastosowaniu tego selektora wyglądała by tak:

Lorem ipsum dolor sit amet enim. Etiam ullamcorper. test 1 Suspendisse a pellentesque dui, non felis. test 2 test 3 Maecenas malesuada elit lectus felis, test 4 malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna.

Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis.

Grupować można selektory wszystkich rodzajów. Następny rodzaj selektora to selektor atrybutu. Oto jego przykład:

a[rel] {color: #66ff66;}

a to wygląd strony:

Lorem ipsum dolor sit amet enim. Etiam ullamcorper. test 1 Suspendisse a pellentesque dui, non felis. test 2 test 3 Maecenas malesuada elit lectus felis, test 4 malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna.

Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis.

Selektor wskazał wszystkie odnośniki (elementy „a”) posiadające atrybut „rel” bez względu na jego wartość. Jeżeli chcemy wyróżnić elementy o określonej wartości atrybutu, użyjemy selektora atrybutu o określonej wartości

a[rel="nofollow"] {color: #cc33ff;}

Strona będzie wyglądała tak jako poniżej.

Lorem ipsum dolor sit amet enim. Etiam ullamcorper. test 1 Suspendisse a pellentesque dui, non felis. test 2 test 3 Maecenas malesuada elit lectus felis, test 4 malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna.

Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis.

Tym razem wybrane zostały tylko ten odnośnik, którego atrybut „rel” miał wartość „nofollow”.

Selektor klasy pozwala na wybranie wszystkich elementów określonej klasy, albo tylko elementów określonego typu tej klasy. Selektor klasy jest zapisywany z kropką przed nazwą klasy, może być dodany do innego selektora (bez spacji przed kropką), ogranicza wówczas zakres tego selektora do elementów tej klasy:

.wielkie {font-size: large;}
span.wielkie {font-weight: bold;}

Lorem ipsum dolor sit amet enim. Etiam ullamcorper. test 1 Suspendisse a pellentesque dui, non felis. test 2 test 3 Maecenas malesuada elit lectus felis, test 4 malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna.

Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis.

Wszystkie elementy klasy „wielkie” zostały powiększone. Dodatkowo, dzięki drugiej definicji stylu, zawartość elementu „span” została też pogrubiona. Pogrubienie elementu „strong” wynika z samej jego definicji i jest realizowane przez przeglądarkę, a nie style.

Selektor identyfikatora

#pierwszy {border: 4px double #ff0000;}

Lorem ipsum dolor sit amet enim. Etiam ullamcorper. test 1 Suspendisse a pellentesque dui, non felis. test 2 test 3 Maecenas malesuada elit lectus felis, test 4 malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna.

Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis.

Element o identyfikatorze „pierwszy” został otoczony podwójną ramką. Na jednej stronie wczytanej do przeglądarki może znajdować się tylko jeden element o określonym identyfikatorze.

Ciąg dalszy może pojawić się szybciej, jeżeli poniżej pojawi się kilka komentarzy od was.



Jak wykorzystać selektory cz. 1.

poniedziałek, 12 Kwiecień 2010

W poprzednim artykule przedstawiłem selektory w stylach CSS. Tym razem pokażę jak ich używać i jakie to może przynieść efekty. Za pomocą selektorów wybieramy element na stronie, który chcemy sformatować. Następnie określamy jakie ich właściwości chcemy zdefiniować i podajemy ich wartość. Załóżmy, że chcemy sformatować akapit na stronie zmienimy kolor czcionki i dodamy obramowanie. Selektorem w tym przypadku będzie „p” – akapit. Jest to selektor typu, gdyż wskazuje jedynie typ elementu strony – w tym przypadku selektor wybierze wszystkie akapity na stronie. Właściwościami będą: „color” – kolor znaków i „border” – obramowanie, a wartościami tych właściwości będą w pierwszym przypadku „#00ff00;” – kolor zielony, a w drugim „4px double #ff0000;” – obramowanie grubości 4 pikseli, linią podwójną w kolorze czerwonym.

Cały zapis można zapisać w pliku „style.css” w taki sposób:

p{color: #00ff00; border: 4px double #ff0000;}

lub taki:

p
{
    color: #00ff00;
    border: 4px double #ff0000;
}

Możemy sprawdzić to w kodzie strony „index.html”

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Lorem ipsum</title>
	<link rel="stylesheet" href="style.css" />
</head>
<body>
<div>
	<p>
	Lorem ipsum dolor sit amet enim. <strong>Etiam ullamcorper. <a href="#">test 1</a></strong> Suspendisse a pellentesque dui, <span>non felis. <a href="#">test 2</a></span> <a href="#">test 3</a> Maecenas malesuada elit lectus felis, <a href="#">test 4</a> malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna.</p>
</div>
	<p>Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis.
	</p>
</body>
</html>

Efekt powinien prezentować się następująco:

Lorem ipsum dolor sit amet enim. Etiam ullamcorper. test 1 Suspendisse a pellentesque dui, non felis. test 2 test 3 Maecenas malesuada elit lectus felis, test 4 malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna.

Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis.

Kolejnym selektorem jest „*” czyli selektor uniwersalny, wskazujący wszystkie elementy na stronie. Najczęściej używa się go do wyzerowania marginesów i dopełnień elementów domyślnie ustawianych przez przeglądarki. Każda może ustawiać nieco inne wartości tych właściwości.

* {margin: 0; padding: 0;}

Jest to przydatny zapis w przypadku witryn, gdzie różnica 1 piksela mogła by popsuć wygląd całej strony. Przykładowa strona po zastosowaniu tego selektora wyglądała by tak:

Lorem ipsum dolor sit amet enim. Etiam ullamcorper. test 1 Suspendisse a pellentesque dui, non felis. test 2 test 3 Maecenas malesuada elit lectus felis, test 4 malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna.

Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis.

Następny rodzaj selektora to selektor potomka. Oto jego przykład:

p a {font-size: large;}

a to wygląd strony:

Lorem ipsum dolor sit amet enim. Etiam ullamcorper. test 1 Suspendisse a pellentesque dui, non felis. test 2 test 3 Maecenas malesuada elit lectus felis, test 4 malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna.

Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis.

Selektor wskazał wszystkie odnośniki (elementy „a”) leżące wewnątrz akapitu (elementu „p”)

Podobny do poprzedniego jest selektor dziecka. Może on przybrać postać taką:

p>a {color: #ffcc33;}

Strona będzie wyglądała tak jako poniżej.

Lorem ipsum dolor sit amet enim. Etiam ullamcorper. test 1 Suspendisse a pellentesque dui, non felis. test 2 test 3 Maecenas malesuada elit lectus felis, test 4 malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna.

Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis.

Tym razem wybrane zostały tylko te odnośniki które leżały bezpośrednio wewnątrz akapitu. Pierwsze dwa odnośniki znajdują się dodatkowo w znacznikach „strong” i „span”, więc selektor p>a nie wskazuje ich.

Selektor braci:

span+a {text-decoration: none;}

Do usunięcia podkreślenia wybrane zostaną tylko te odnośniki, które stoją bezpośrednio za znacznikiem „span”.

Lorem ipsum dolor sit amet enim. Etiam ullamcorper. test 1 Suspendisse a pellentesque dui, non felis. test 2 test 3 Maecenas malesuada elit lectus felis, test 4 malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna.

Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis.

Uwaga, selektory braci i selektory dziecka nie są interpretowane przez przeglądarkę IE 6.

Ciąg dalszy niebawem. A w zasadzie zależy to od ilości komentarzy pod spodem.



Selektory CSS

sobota, 3 Kwiecień 2010

Większość osób używających CSS posługuje się kilkoma podstawowymi selektorami, a przecież ich ilość jest znacznie większa. Wraz z ilością używanych selektorów rosną możliwości formatowania różnych elementów na stronie.

Zachęcam do przetestowania poniższych selektorów i dzielenia się uwagami na dole strony.

selektor typu np. p
ustala określone cechy dla wszystkich elementów p
selektor uniwersalny *
pozwala ustalić określone cechy dla wszystkich elementów strony
selektor potomka np. td li
ustala określone cechy dla elementów li leżących wewnątrz elementów td niekoniecznie bezpośrednio.
selektor dziecka np. div > p
ustala określone cechy dla elementów p leżących bezpośrednio wewnątrz elementów div.
selektor braci np. span + a
ustala określone cechy elementów a leżących bezpośrednio za elementami span.
grupowanie selektorów np. h2, h3
ustala określone cechy dla wymienionych elementów
prosty selektor atrybutu np.: h3[class]
ustala określone cechy dla elementów h3 jeżeli mają ustaloną wartość atrybutu class. Można podać kilka atrybutów, wtedy cechy elementu będą ustalone jeżeli element ma ustalone wszystkie wymienione atrybuty np.: h3[class][title]
selektor atrybutu o określonej wartości np.: h3[class=”header”]
ustala określone cechy dla elementów h3 jeżeli mają ustaloną wartość atrybutu class na header. Analogicznie jak w poprzednim wypadku można podać kilka atrybutów z wartościami lub bez.
selektor klasy np.: .header
ustala określone cechy dla elementów jeżeli mają atrybut class ustawiony na header.
selektor identyfikatora np.: #jeden
ustala określone cechy dla elementu o wartości atrybutu id ustawionym na jeden. Identyfikator musi jednoznacznie określać tylko jeden element w dokumencie.
pierwsza linia np.: p:first-line
ustala określone cechy dla pierwszej linii elementów p
pierwsza litera np.: p:first-letter
ustala określone cechy pierwszej literze elementów p jeżeli ich zawartość rozpoczyna tekst.
selektor przed np.: p:before
wstawia podaną zawartość przed elementami p.
selektor po np.: p:after
wstawia podaną zawartość po elementach p.
selektor podstawowy np.: a:link
ustala określone cechy dla nie klikanych elementów a.
selektor odwiedzony np.: a:visited
ustala określone cechy dla klikniętych elementów a.
selektor wskazany np.: a:hover
ustala określone cechy dla elementów a wskazanych myszą.
selektor aktywny np.: a:active
ustala określone cechy dla klikanych elementów a.
selektor zogniskowania np.: a:focus
ustala określone cechy dla elementu a wybranego klawiszem tabulacji (oprócz odnośników stosuje się do pól formularzy, w których umieszczono kursor).
selektor pierwszego dziecka np.: div:first-child
ustala określone cechy dla pierwszego elementu div

Selektory można ze sobą łączyć. Należy przy tym uważać na spacje. Selektor „p .opis” wskazuje inne elementy niż „p.opis”. Pierwszy wskazuje na elementy klasy opis zawarte w znacznikach p, a drugi wskazuje na znaczniki p z ustawioną klasą opis.

Uwaga!!! Nową stronę należy przetestować w różnych przeglądarkach. Zwłaszcza w IE 6 nie wszystkie selektory działają. Na szczęście ta przeglądarka mocno traci na popularności i w zasadzie można ją już pominąć.