ok będzie wykładzik...
Co to jest CSS i do czego służy?
CSS (ang. Cascading Style Sheets) Kaskadowe Arkusze Stylów - jest to język opracowany przez organizacje W3C służący do opisu sposobu w jaki będą renderowane poszczególne elementy strony przez przeglądarkę. Każda przeglądarka ma w sobie "wbudowanego CSS'a" - (co najmniej nie informatyczne stwierdzenie ale chodzi mi o to żebyście zrozumieli o co biega) który określa jak ma zostać wyświetlona storna gdy "nie ma innych rozkazów"(kolejne nieinformatyczne stwierdzenie - a będzie ich więcej zawsze w cudzysłowach) - czyli w praktyce oznacza to ze jak użyjemy znacznika <p>..</p> i wpiszemy w niego jakiś text to w większości popularnych przeglądarek będzie on wypisany na czarno a nie np. na różowo. Dzieje się tak dlatego "ten wbudowany w przeglądarkę CSS - fachowo sie to nazywa lista dyrektyw (tzw. reguł) - określa ze text ma mieć właśnie czarny a nie inny kolor - oczywiście jako webmasterzy możemy to zmienić. Mamy do dyspozycji dwa sposoby - przestarzałym juz znacznikiem <font> lub właśnie dzięki CSS.
Dlaczego CSS jest lepszy?
Dobre pytanie. Po pierwsze znacznik <font> jak juz wspominałem jest przestarzały i np. nie jest wspomagany przez XHTML - więc gdy byśmy chcieli pisać strony w języku xhtml to parser nas uświadomi*(w zależności od ustawień) ze <font> is Unsupported (dla XHTML 1.1) lub Deprecated (dla XHTML 1.0). Ponadto CSS ma o wile większe możliwości i stanowi masę udogodnień dla webmasterów. O czym sie zaraz przekonamy....
CSS - lokalny, wewnętrzny, zewnętrzny.
Rozrużniamy 3 rodzaje styli - lokalny wewnętrzny i zewnętrzny:
Styl lokalny (in-line)
Styl lokalny pozwala nadawać atrybuty wybranym, pojedynczym elementom strony.
przyklad:
Kod:
<p style="color: #123456;">Treść</p>
Styl wewnętrzny (inside)
Oznacza zagnieżdżenie arkusza stylów w nagłówkowej części dokumentu. W tym celu należy wpisać blok informacji między poleceniami <head> i </head>
przykład:
Kod:
<head>
<style type="text/css">
p {color: #123456;}
</style>
</head>
Styl zewnętrzny (outside)
Jest to osobny plik - który powinien zawierać tylko definicje styli.
W zasadzie jest to przeniesienie wszystkich deklaracji ze stylu wewnętrznego do osobnego pliku.
przyład:
Plik - style.css
Aby dany plik html - korzystał z zewnętrznego arkusza musimy do tego pliku dany arkusz dołączyć - możemy zrobić to na dwa sposoby - poprzez:
* linkowanie:
w informacjach nagłówkowych umieszczana jest linijka
Kod:
<link rel="stylesheet" type="text/css" href="adres/nazwa_arkusza.css">
w naszym przypadku:
Plik - index.html
Kod:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
bla bla bla i jeszcze raz bla
</body>
</html>
lub poprzez:
* import arkusza:
przypomina to wstawianie stylu wewnętrznego - tu też musimy w sekcji "head" dodać sekcje "style" tym razem zamiast deklarować style - urzyjemy
Kod:
@import url("adres/nazwa.css")
dla naszego przykładu będzie to wyglądało tak:
Plik - index.html
Kod:
<head>
<style type="text/css">
@import url("style.css")
</style>
</head>
(osobiście polecam ten właśnie sposób)
ale żeby dokładniej omówić jakie mają wady i zalety style lokalne wewnętrzne i zewnętrzne musimy dowiedzieć się co oznacza termin Kaskada użyty (nie bezpodstawnie) w nazwie arkuszy stylów.
Kaskada - o co chodzi?
Tu posłużę się definicją z wikipedi - myślę ze jest w miarę sensowna i zrozumiała:
Nazwa "kaskadowe arkusze stylów" wynika z faktu, iż gdy reguły CSS wykluczają się wzajemnie w arkuszu zewnętrznym, arkuszu wewnętrznym oraz na poziomie elementów HTML, priorytet stylów ustalany jest hierarchicznie. Przyjęto, że oddziaływanie stylów z arkuszy zewnętrznych może być modyfikowane przez style zdefiniowane w nagłówku dokumentu, te zaś mogą być modyfikowane przez reguły zdefiniowane bezpośrednio w ciele dokumentu. Pierwszeństwo mają zatem style zdefiniowane "bliżej" formatowanego elementu. Kolejność interpretacji reguł formatujących dany element przez przeglądarkę przedstawia się następująco:
1. Domyślny arkusz przeglądarki WWW (niezależny od autora strony)
2. Domyślny arkusz użytkownika przeglądarki (jak wyżej)
3. Zewnętrzne arkusze stylów
4. Definicje stylów w nagłówku dokumentu
5. Definicje stylów w atrybucie style elementu
Ten model działania pokazuje, w jaki sposób działa kaskada stylów. Między stylami z różnych źródeł nie muszą zresztą wcale występować żadne konflikty - wszystkie style uzupełnią się, tworząc jeden wielki "wirtualny" styl.
W praktyce daje to nam wielkie możliwości - możemy zdefiniować zewnętrzny arkusz a jeśli chcemy by tylko ten konkretny element miał nieco inny wygląd niż pozostałe - dodajemu mu styl lokalny zamiast tworzyć oddzielną klasę dla niego - i to jest piękne...
Klasy w CSS...
Powyżej użyłem terminu klasy - co to właściwie takiego?
Klasy stworzone są po to, by móc obiektom tego samego typu w treści jednej strony przypisywać inne właściwości.
podam tu przykład z użyciem zagnieżdżonego arkusza:
Kod:
<head>
<style type="text/css">
p {color: #123456;}
p.czerwony {color: red;}
</style>
</head>
<body>
<p>Text granatowy</p><br>
<p class="czerwony">Text czerwony - została tu zadeklarowana klasa - przy użyciu atrybutu class - w stylach robimy to poprzez podanie nazwy elementu a po kropce nazwy klasy</p>
</body>
</html>
Jaki styl wybrać - jak mądrze zorganizować informacje zawarte w arkuszach styli...
To pytanie chyba zadaje sobie każdy webmajster przed zabraniem się za tworzenie strony www....
Przedstawie tutaj sposób w jaki ja to robie - nie koniecznie musi on być najlepszy ale mi wydaje się bynajmniej logiczny...
Zacznijmy od tego jaki wybrać arkusz zewnętrzny/wewnętrzny czy lokalny?
Ja proponuje używanie arkuszy zewnętrznych - i importowanie ich do dokumentu html - dzięki temu jeden arkusz możemy użyć do wszystkich stron serwisu a w razie potrzeby możemy wykorzystać Kaskadę oraz Klasy i dla danego elementu/strony użyć stylu lokalnego/wewnętrznego lub dodać nową klasę jest to naprawdę wygodne i przydatne - zmniejsza wielkość plików - bo zamiast w każdym pliku deklarować arkusz stylów deklarujemy go tylko raz i to w pliku zewnętrznym, a dodatkowo poprawia to czytelność kodu.
Należy jednak pamiętać ze zarówno wadą jak i zaletą jest to ze w przypadku kiedy wszystkie strony danego serwisu wykorzystują arkusz zewnętrzny to zmiany wprowadzone do tego arkusza będą widoczne na wszystkich stronach serwisu.
Kursy CSS
Lista stron z których możemy uczyć się css...
www.w3schools.com
developer.mozilla.org
www.kurshtml.boo.pl/css/css.html
webmade.org/kursy/kurs_css/
www.wirtuals.net/dzia-css/
css.webinside.pl/
webmaster.helion.pl/kurshtml/
www.pckurier.pl/html/style/style.htm
Gdyby coś było nie tak, coś było nie jasne - albo przylecieli by kosmici - pisać 
PS. przy okazji chciałem pozdrowić całą moją klasę - i niech mi tylko któryś spróbuje na czwartek tego nie umieć i nie zaliczy sprawdzianu - to wykastruje....
CSS - co gdzie jak...
)
Odpowiedź z Cytatem
Copyright © 2006-2024 - HACK.pl. Wszelkie prawa zastrzeżone.