2010-04-12 00:15:01

Jak wykorzystać selektory cz. 1.

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.