Kurs CSS
CSS czyli kaskadowe arkusze stylów, są ważnym elementem, który powinien znać każdy współczesnego webmaster. W hierarchii wagi są tuż po HTML na drugim miejscu. Tak jak za pomocą HTML możemy zarządzać strukturą dokumentu, style mają nam służyć do jego upiększania. Style są poprawnie interpretowane przez przeglądarki od wersji 4.0 zarówno przez Internet Explorer jak i przez Navigatora. Tak więc możesz je spokojnie wykorzystywać na swojej stronie.Ktoś w tym momencie mógłby zapytać co ze znacznikami <FONT> ? Czyżby za ich pomocą nie było by można regulować wielkości, kroju itd. czcionki. Zgoda, ale jest jeden mankament, który od dawna męczył webmasterów. Otóż Obejmując tekst znacznikami <FONT> zachowujemy nad nim tylko częściową kontrolę. Spróbuj zrobić przykłądową stronę z wykorzystaniem tych znaczników. Teraz otwórz projekt w przeglądarce i za jej pomocą ustaw najpier wielkość czcionki na "najmniejsza" póżniej na "największą". No i co ? Rozmniar tekstu pięknie się zmienia. Wykorzystując CSS takiego ubocznego efektu, byś nie zaobserwował. Za pomocą CSS dostaniesz do dyspozycji o wiele więcej opcji nim nawet sobie wyobrażasz. Takie znaczniki jak np. <Center staną się zbyteczne.Style dzieli ma trzy sposoby. Według sposobu ich włączenia z tekstem HTML. I tak istnieją style:
· wpisane
· Osadzone
· Zewnętrzne
Style wpisane odnoszą się tylko do danego obiektu objętego tymi znacznikami. Przykładowe opisanie tekstu za pomocą styli wpisanych będzie wyglądać następująco:
<P Style="font-family: Arial; font-size: 16pt; color:red; text-align:center">Tekst opisany stylami</P>
A oto efekt:
Tekst opisany stylami
Ponieważ dopiero zaczynamy naszą przygodę ze stylami omówię teraz powyższy przykład. Najpierw definiujemy blok może to być np. P, Div lub H1. Dalej proste słówko "Style" otwieramy cudzysłów, a wewnątrz podajemy właściwości dla opisywanego obiektu. Najpierw podajemy właściwość, a później wartość według następującego wzoru:
właściwość : wartość;
tak np. aby ustawić wielkość czcionki należy wpisać coś takiego:
font-size : 16pt;
Stylami osadzonymi nazywamy arkusz stylów, który jest osadzony w sekcji <HEAD> dokumentu HTML. Przykładowy dokument wykorzystujący style osadzone może wyglądać np. tak:
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
BODY {
background-color : red;
}
P {
color : #FFFF00;
font-size : 14pt;
-->
</STYLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Najpierw dzięki deklaracji type="text/css" definiujemy osadzony arkusz stylów. Dalej nie wymagane, jednak dość pomocnicze znaczniki <!-- -->. Dzięki nim arkusz stylów jest usuwany przed przeglądarkami, które nie potrafią z nich korzystać.W powyższym przykładzie zdefiniowaliśmy atrybuty dla BODY, czyli ogólny wygląd strony. Na razie ustawiliśmy tylko kolor tła, ale dzięki stylom możemy także podać inne właściwości. Dalej atrybuty dla wszystkich obiektów objętych znacznikami <P>, to znaczy każdy tekst objęty tymi znacznikami będzie miał wielkość czcionki 14pt, oraz kolor żółty.Oczywiście wykorzystując teraz schemat:
obiekt {
właściwość1 : wartość1;
właściwość2 : wartość2;
możemy zdefiniować właściwości dla innych obiektów np. H1, H2...DIV lub dla poszczególnych identyfikatorów lub class, ale o nich w kolejnych lekcjach.
Style zewnętrzne jak już sama nazwa wskazuje umieszczone są poza dokumentem HTML w pliku *.css. Mają podobną strukturę do stylów osadzonych. Przykładowy plik ze stylami może wyglądać np. tak:
margin-top: 20pt;
margin-left: 20pt;
A:HOVER {
color: #990000;
A:LINK {
color: #FFFF00;
Ustaliliśmy w nim margines lewy i górny na 20pt. oraz stworzyliśmy prosty rollower odnośników. To znaczy link nie odwiedzany będzie miał kolor bordowy zaś po najechaniu na niego myszą zmieni kolor na żółty. Zapisujemy teraz tak zdefiniowany arkusz przykładowo do pliku style.css Teraz w dokumencie HTML musimy umieścić deklarację dołączającą zewnętrzny plik ze stylami do dokumentu:
<link href="style.css" rel="stylesheet" type="text/css">
Ważną częścią powyższego kodu jest atrybut type="text/css". Mówi on o tym, że dołączanym plikiem jest arkusz stylów. We właściwości src podajemy nazwę plików do styli. Po dołączeniu arkusza, możemy z poszczególnych obiektów korzystać w ten sam sposób co ze styli osadzonych.
Czasami może zdarzyć się tak, że chcielibyśmy, aby poszczególne elementy objęte znacznikami np. <P> wyglądały inaczej. Taki efekt możemy osiągnąć stosując identyfikatory lub klasy. Najpierw zajmiemy się tymi pierwszymi, czyli identyfikatorami. Przykładowa ich deklaracja może wyglądać następująco:
P#one { color : blue };
Oczywiście taka deklaracja powinna znaleźć się w arkuszu stylów. Teraz dowolny fragment, który miałby wyglądać według opisanego stylu należy opisać tak jak w poniższym przykładzie:
<P id="one">Tekst opisany identyfikatorem</P>
Identyfikatory moją niestety jedną bardzo ważną wadę. Pojedynczy identyfikator można wykorzystać w całym dokumencie tylko raz !!! W związku z tym wykorzystuje się je głównie do pozycjonowania bloków.
O wiele wygodniejsze jest wykorzystywanie tzw. klas. Są one bardzo podobne do identyfikatorów poza tym właściwie jedyną różnicą. Raz zadeklarowaną klasę możemy wykorzystać w dokumencie wielokrotnie. Taka deklaracja różni się od deklaracji poznanej przed chwilą tylko tym, że zamiast znaku # występuje znak . (kropka):
P.one { color : blue };
A wykorzystuje się ją tak:
<P class="one">Tekst opisany klasą</P>
Dodatkowo oba selektory umożliwiają zastosowanie pewnej sztuczki. Polega ona na tym, że nie określamy rodzaju bloku w jakim zostanie użyty np. P, Div, H1 ...
#one { color : blue };
lub
.one { color : blue };
Teraz jak już wspomniałem dowolny w dowolnym bloku możemy wykorzystać te elementy pamiętając o regule, że identyfikator można wykorzystać tylko raz, a klasę wielokrotnie:
<Div class="one">Tekst opisany klasą</P>
Podczas pisania strony WWW może okazać się, że klika bloków posiada identyczne właściwości tak jak na poniższym przykładzie:
H1 { color : blue };
H2 { color : blue };
H3 { color : blue };
W takim przypadku, aby ułatwić przejrzystość i zrozumiałość kodu możemy użyć grupowania selektorów. I tak powyższy kod można zapisać w prostszy sposób:
H1, H2, H3 { color : blue };
Czasami chcialibyśby, aby wszystkie elementy typu P pisane kursywą miały np. inny kolor. Do tego celu można użyć stylów kontekstowych. Opisane powyżej zadanie można opisać następująco:
P I { color : blue };
Grupowania selektorów od stylów kontekstowych różnią się tym, że zamias przecinka tak jak to jest w pierwszym przykładzie przy stylach kontekstowych używamy spacji.
rafulus