Pokaż wyniki 1 do 1 z 1

Temat: CSS - co gdzie jak...

  1. #1
    Avatar eMCe
    eMCe jest offline Emil Grzegorz Gubała
    Zarejestrowany
    Dec 2006
    Skąd
    Kielce
    Postów
    1,767

    Domyślnie CSS - co gdzie jak...

    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
    Kod:
    p {color: #123456;}
    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....
    Ostatnio edytowane przez eMCe : 03-04-2007 - 00:35
    Agencja reklamy kielce (mały kilkudniowy case pozycjonerski )

Podobne wątki

  1. Gdzie znajdę więcej wiadomości nt. web page hack, podmieniania stron itp.?
    By prezes in forum Newbie - dla początkujących!
    Odpowiedzi: 7
    Autor: 02-03-2007, 16:18
  2. gdzie moge znalezc netbusa?
    By ironwall in forum Hacking
    Odpowiedzi: 2
    Autor: 01-28-2007, 22:20
  3. [DELPHI]Kompilator - gdzie znajde?
    By Macok in forum Delphi/Pascal/Lisp
    Odpowiedzi: 4
    Autor: 12-20-2006, 15:32
  4. [DELPHI]Kompilator - gdzie znajde?
    By Macok in forum Hacking
    Odpowiedzi: 0
    Autor: 11-11-2006, 11:03
  5. odpalenie powłoki, a gdzie root?
    By poczatkujacy in forum Newbie - dla początkujących!
    Odpowiedzi: 7
    Autor: 10-10-2006, 15:07

Zasady Postowania

  • Nie możesz zakładać nowych tematów
  • Nie możesz pisać wiadomości
  • Nie możesz dodawać załączników
  • Nie możesz edytować swoich postów
  •  
Subskrybuj