Odpowiedz 
 
Ocena wątku:
  • 0 Głosów - 0 Średnio
  • 1
  • 2
  • 3
  • 4
  • 5
Jak korzystać ze stylów w pliku html
12-08-2012, 11:49 PM (Ten post był ostatnio modyfikowany: 12-08-2012 11:53 PM przez deros.)
Post: #1
Jak korzystać ze stylów w pliku html
Ponieważ mój poprzedni wątek o stosowaniu formatowania tekstu za pomocą css wywołał dyskusje czy korzystać z css czy ze znaczników html postanowiłem omówić sposób włączania kodu css do plików html.

Zasadniczo korzysta się z css (arkuszy stylów) na trzy sposoby:
Pierwszy to tzw. dołączanie inline polega on na tym, że korzystamy ze znacznika, a po nim następuje opis stylu np:
Cytat:<p style="font-size: 10pt;">coś tam</p>
ustawia rozmiar czcionki dla napisu coś tam na 10 punktów.
Oczywiście takie formatowanie przydaje się do pojedyńczych stron i przy dużych projektach formatowanie każdego kawałka strony bywa kłopotliwe.

Drugim sposobem jest umieszczenie opisu wyglądu strony tuż po znaczniku <title> tytuł</title>
wygląda to następująco:
Cytat:<title>Test</title>
<style>
P {
font-family:Tahoma; font-size: 12pt;
}

.kat {
font-family:Courier New; font-size: 14pt;
}
.mat {
font-family:Courier New; font-size: 16pt;
}
</style>
odtąd tekst napisany bez formatowania będzie wydrukowany na ekranie czcionką Tahoma o rozmiarze 12 punktów
natomiast <p class="kat">napis kat</p> będzie wydrukowany czcionką Courier New o rozmiarze 14 punktów , a <p class="mat">napis kat</p> wyświetli się z rozmiarem 16 punktów.

Najważniejszą sprawą w arkuszach css jest trzeci sposób ich wstawiania do plików html, polega on na tym, że tworzymy osobny plik z rozszerzeniem .css np: utworzymy plik stylowo.css a w nim
Cytat:P {
font-family:Tahoma; font-size: 12pt;
}

.kat {
font-family:Courier New; font-size: 14pt;
}
.mat {
font-family:Courier New; font-size: 16pt;
}
teraz tworzymy plik html niech to będzie plik index.html Diabeł
a w nim po <title>index</title>
Cytat:<LINK REL="stylesheet" HREF="stylowo.css" TYPE="text/css">
odtąd wszystkie znaczniki <p></p> w pliku index.html będą pisane czcionką tahoma o rozmiarze 12 punktów i do klas będziemy się mogli odowływac tak jak w drugiej metodzie wstawiania stylów Oczko
teraz możemy sobie utworzyc kilkanascie plików w ten sposób i dodając <LINK REL="stylesheet" HREF="stylowo.css" TYPE="text/css">
w każdym pliku będziemy mieli to samo formatowanie.
Wyobraźmy sobie, że znudził nam się wygląd strony z czcionką Tahoma i chcemy ją zmienic na np. Times New Roman wystarczy tylko edytowac plik stylowo.css i zastapic
Cytat:P {
font-family:Tahoma; font-size: 12pt;
}
nowym wpisem
Cytat:P {
font-family:Times New Roman ; font-size: 12pt;
}
odtąd na każdej stronie gdzie wstawiliśmy arkusz stylu stylowo.css zmieni się czcionka na Times New Roman.

Uwaga: należy pamiętac, że HREF="stylowo.css" informuje przeglądarke, że ten plik znajduje się w tym samym katalogu co plik html, jeżeli tak nie jest należy w to miejsce podac właściwy katalog gdzie umieściliśmy ten plik!!!
Odwiedź stronę użytkownika Znajdź wszystkie posty użytkownika
Odpowiedz cytując ten post
Odpowiedz 


Skocz do:


Użytkownicy przeglądający ten wątek: 1 gości