Wstęp
Rozszerzenia języka HTML dodają potężne narzędzie do formatowania dokumentów internetowych – style. Styl, będący zespołem kodów formatujących (jednego czy kilku), pozwala obecnie globalnie lub lokalnie zmieniać sposób formatowania wybranego fragmentu tekstu. Style są obecnie częściowo interpretowane przez przeglądarki Netscape Communicator od 4 i Internet Explorer od 3.
Budowa stylu
Ogólne polecenie stylu ma postać selektor { cecha: wartość }. Selektorem jest po prostu polecenie języka, np. P, H1, itd. Cechą jest pewna własność danego znacznika, np. wielkość i styl czcionki dla akapitu. Wartość konkretyzuje cechę, np. 12pt czy bold dla czcionki.
Przykłady:
P {font-family: Times}
Selektorem jest P, cechą – rodzina czcionek, wartością – Times.
H2 {color: #FF0000}
Selektorem jest H2, cechą – kolor, wartością – kolor czerwony.
Możemy oczywiście łączyć ze sobą różne cechy i wartości.
Selektor { cecha1: wartość1; cecha2: wartość2 }
H1 {font-size: 35pt; color: red; font-family: Arial}
Przykłady
Przykładami mogą być nagłówki, odnośniki, wyróżnione fragmenty teksty na stronach kursu oraz strony zawarte na serwerze ASMODEUS.
Wstawianie stylów
Styl Lokalny
Netscape Communicator może całkowicie błędnie wyświetlać niektóre elementy. Styl lokalny pozwala nadawać atrybuty wybranym, pojedynczym elementom strony. Typowym zastosowaniem jest nadanie określonych atrybutów akapitowi.
< p >Treść akapitu< /p >
Na przykład:
Treść akapitu
Pozioma linia z kilkoma atrybutami (tylko IE4)
< hr >
Arkusz zewnętrzny
Każdą stronę można dołączyć do zewnętrznego arkusza stylów, w którym są zdefiniowane własności różnych elementów. Przykładowy arkusz wygląda następująco:
Wywołanie arkusza styli jest umieszczanew sekcji HEAD i wygląda następująco:
Stosowanie zewnętrznego arkusza ma tę zaletę, że nie jest konieczne wprowadzanie stylów na konkretnej stronie, zmniejszamy objętość plików, a także możemy za pomocą zmiany jednego parametru w arkuszu stylów zmienić wygląd wszystkich stron, które się odwołują do tego arkusza (np. kolor tytułu czy wielkość czcionki akapitów).
Zagnieżdżanie arkusza
Bardzo często spotykanym sposobem definiowania stylów na stronie jest zagnieżdżanie definicji w nagłówkowej części dokumentu. W tym celu wystarczy wpisać odpowiedni blok informacji między poleceniami
i .Przykładowo, niniejsza strona zawiera krótki zestaw stylów, zdefiniowany następująco w części nagłówkowej.
Proszę zwrócić uwagę na wiersz , czyli znaki komentarza obejmujące definicję. Ukrywają one definicję przed przeglądarkami nie interpretującymi stylów. Style definiujemy w „klasyczny” sposób, za pomocą zestawu Selektor { cecha: wartość}.Zagnieżdżanie arkusza zaleca się w przypadku tych stron, w których stosuje się unikatowe style. Gdy kilka stron jest formatowanych za pomocą tego samego zestawu stylów, lepiej jest oczywiście stosować dołączanie wspólnego, zewnętrznego arkusza stylów.
Importowanie arkusza
Każdą stronę można opisać za pomocą importowanego arkusza stylów. Funkcję tę realizuje na razie jedynie Internet Explorer 4. Import jest definiowany za pomocą następującego polecenia, umieszczanego w ramach HEAD:
Można podać zarówno adres względny, jak i bezwzględny. Można więc sobie wyobrazić ujednolicenie wyglądu różnych witryn poprzez wykorzystanie imortowanych stylów, umieszczonych na czyimś serwerze. Możliwe jest łączenie różnych definicji, np. uzupełnienie ustaleń importowanego arkusza stylów o własne definicje różnych elementów (style zagnieżdżane). W przypadku konfliktu pierwszeństwo mają ustalenia własne.
Identyfikatory ID
Identyfikatory ID służą do przypisywania konkretnego, unikatowego stylu jednemu elementowi w dokumencie.Przykładowo, jeśli w definicji stylu zagnieżdżonego (w ramach HEAD) zdefiniujemy styl w postaci:
#1 { font-size: 20pt}
w tekście dokumentu będziemy mogli zastosować definicję
Jakaś tam treść
Blok wydzielony
Style możemy nadawać elementom dokumentu, posługując się bardzo elastycznym poleceniem bloku. Na sposób ten warto zwrócić szczególną uwagę, gdyż jest wygodny, a doświadczenia z dynamicznym HTML, wprowadzanym intensywnie od momentu pojawienia się Internet Explorera 4, wskazują, że jest to jedno z podstawowych narzędzi. Bloki wydzielamy za pomocą polecenia
Przykładem niech będą wyróżnione w tym kursie polecenia języka HTML. które zostały objęte znacznikiem DIV (kolor pomarańczowy).
Wydzielane bloki są podobne w działaniu do SPAN, ale obejmują szersze fragmenty dokumentu. Mogą zawierać w sobie tytuły, akapity, wykazy, a nawet inne bloki. Dzięki temu nadają się do wydzielania większych, logicznych fragmentów dokumentów i nadawania im specyficznego formatowania za pomocą stylów.
——————————————————————————————————-
Przy tworzeniu kursu korzystałem min. z http://webmaster.helion.pl/kurshtml/