Dobra.. zabrnijmy więc odrobinkę dalej. Skoro już wiemy jak w CSS ustawić styl dla obiektu poradzimy sobie z każdym. Co jednak jeśli mamy dwa takie same obiekty i dla każedego chcemy oddzielny styl? Otóż możemy zrobić to na dwa sposoby. Albo Przypiszemy obiektowi jego identyfikator (id) które w całym dokumencie nie może się powtórzyć, albo klasę (class) którą możemy powtarzać dowolną ilość razy. W poniższym przykładzie przedstawię w jaki sposób nadać klasy oraz przypisać im wybrane wartości.
<!-- index.html --> <html> <head> <link rel="stylesheet" type="text/css" href="arkusz.css"/> </head> <body> <p>Przykładowy tekst poznawczy.</p> <p>Drugie zdanie które chcę mieć po prawej stronie.</p> </body> <html>Weźmy taki oto kod. Jak widzisz są tam dwa paragrafy. Powiedzmy iż pierwszy ma się ustawić do lewej krawędzi, a drugi do prawej. Co więc należy zrobić? Najpierw nadać klasy:
<!-- index.html --> <html> <head> <link rel="stylesheet" type="text/css" href="arkusz.css"/> </head> <body> <p class="left">Przykładowy tekst poznawczy.</p> <p class="right">Drugie zdanie które chcę mieć po prawej stronie.</p> </body> <html>Oraz dodać odpowiednie wpisy w srkuszu styli css:
/* arkusz.css */
p.left {
text-align:left;
color: #003366;
}
p.right {
text-align:right;
color: #000000;
}
W tym momencie Twoja przeglądarka zinterpretuje oddzielne style dla każdego z obu obiektów. Polecam przetestowanie na Twojej testowej stronie. Do ustawienia textu służy polecenie text-align: oraz wartości: left, center, right, justify. Zastępują one znane z html znaczniki left, right or center.
Pozdrawiam i do następnej notki.. ;-)
| Interesujesz się informatyką? Te książki mogą Cię zainteresować: |
Jeśli podoba się Tobie ten wpis, podziel się jego treścią ze znajomymi oraz skorzystaj z opcji powiadamiania o nowych wpisach, subskrybując kanał RSS.
Dodaj do:
