POJĘCIA:  styl w nagłówku,   styl w osobnym pliku,   styl w obiekcie,   CLASS 

STYLE Co to są style i do czego służą? Style określają pewne elementy na stronie, np. format tabeli:
  • kolor tła,
  • rodzaj czcionki,
  • rozmiar znaków,
  • szerokość tabeli,
  • rodzaj obramowania...

    Podobnie możemy określić cechy zwykłego tekstu, obrazka, ramki, szerokość marginesów i wiele innych.
    Skąd taka nazwa: arkusze stylów kaskadowych?
    Kaskadowe, ponieważ cecha obiektu nadrzędnego zstępuje, (spada) na obiekt podporządkowany, np. wystarczy określić kolor tabeli, żeby już mieć ustawiony kolor wiersza i kolor komórki.
    Style czytane są przez przeglądarkę kaskadowo, to znaczy od najważniejszych, przez mniejsze części, do najmniejszych. Jednocześnie zmieniona cecha podporządkowanego elementu przesłania cechę obiektu nadrzędnego. To coś w rodzaju przepisów szczególnych: "Zwierzęta uciekają do przodu, oprócz raka, który ucieka do tyłu".


    Zasada działania arkusza stylów:
    Twierdzenie 1.: Kwiatki są zielone,
    Twierdzenie 2.: mają czerwone kwiatostany
    Twierdzenie 3.: i żółte pręciki.

    Jak widać następuje precyzowanie cech "od ogółu do szczegółu" i jednocześnie przesłanianie cechy "kolor". Możemy teraz przejść do przykładu.

    • Przykład 1. Arkusze stylów możemy pisać w nagłówku strony (pomiędzy znacznikami <HEAD> i </HEAD>).

    Wpisaliśmy więc:

    <STYLE type=text/css>
    body {FONT: 10pt Tahoma, "Arial Ce", arial, helvetica, san-serif; COLOR: black;}
    p {COLOR: blue;}
    td {FONT: 14pt;}
    </STYLE>

    Określiliśmy, że w części:
  • <body> czyli w całym tekście będziemy pisać czcionką o rozmiarze 10 pt, rodzajem czcionek Tahoma, a jeżeli tej czcionki nie będzie w komputerze, to następną i tak dalej..., wybieramy czarny kolor czcionki.
  • paragrafy <p> będziemy pisać jak w sekcji <body>, zmienimy tylko kolor czcionki na niebieski.
  • w komórkach tabeli pozostaniemy przy czarnym tekście, ale zwiększymy rozmiar pisma na 14 pt.

    Mało pisania, a jaka skuteczność!
    Dodać trzeba, że raz ustawiony styl będzie obowiązywał w całym tekście strony.

    Co zrobić, żeby obowiązywał w całym, serwisie?
    1) Zapisać to w osobnym pliku np. styl.css
    2) Ładować ten styl na początku każdej strony w sekcji <head> poleceniem:
    <link rel=stylesheet href="styl.css" type="text/css">
    Wystarczy teraz zmieniać ustawienia w pliku styl.css, a zmieni się cały serwis. Proste?!



    • Metody wstawiania stylów na stronę
    Metody są trzy i zostały już podane w przykładach:
  • 1. style w nagłówku strony (patrz przykład wyżej),
  • 2. style ładowane z osobnego pliku (patrz przykład wyżej),
  • 3. style przy każdym elemencie (patrz przykłady w tematach poprzednich).


    • Przykład 2. Warto przypomnieć styl wstawiany w obiekcie, na przykład w paragrafie:

    Jakiś dziwny tekst, ale dlaczego on jest taki dziwny?

    A tak jest zapisany styl tego tekstu:
    <p style="background:#808000; font-family:Times New Roman CE; font-size:x-large; color:#800000; font-weight:bold; font-style:italic; text-align:left;"> Jakiś dziwny tekst, ale dlaczego on jest taki dziwny? </p>

    Co to oznacza?
    background:#808000; - Tło #808000, czyli Olive.
    font-family:Times New Roman CE; - Tekst pisany czcionką Times CE
    font-size:x-large; - Rozmiar bardzo duży.
    color:#800000; - Kolor czcionki #808000, czyli Maroon.
    font-weight:bold; - Waga czcionki bold, czyli czcionka tłusta.
    font-style:italic; - Styl czcionki italic, czcionka pochylona.
    text-align:left; - Wyrównanie tekstu do lewej.


    Uwaga!
    Pamiętajmy, żeby nie używać znaku cudzysłowu w środku takiego stylu!



    Przykład 3. Teraz przykład strony w całości i przykład definiowania stylu odnośników.

    Nasza strona:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
    <title>Strona domowa Agnieszki Borkowskiej</title>
    <meta description="Strona domowa Agnieszki Borkowskiej, moje wiersze, zdjęcia rodzinne, moi znajomi">
    <meta name="Keywords" content="Strona domowa Agnieszka Borkowska zdjęcia wiersze">
    <meta name="robots" content="index,nofollow">

    <STYLE type=text/css>
    body {FONT: 10pt Tahoma, "Arial Ce", arial, helvetica, san-serif; COLOR: black;}
    td {FONT: 10pt Verdana, Arial; color: black; background-color: #cccccc;}
    p {FONT: bold 10pt Verdana, color: black; background-color: yellow;}
    div {FONT: bold 8pt Tahoma, "Arial", arial, helvetica, san-serif; COLOR: #eeeeee;}
    A {color: blue;text-decoration: none;}
    A:visited {color: red;}
    A:hover {text-decoration: underline; color: white; background-color: blue;}
    </STYLE>

    </head>
    <body>
    Cześć, dobrze, że jesteś na mojej stronie! Mam na imię Agnieszka i mam 16 lat.<br>Jestem trochę roztargniona.<br>Mama mówi na mnie Aga i mówi: "Oj, Agnieszko, jaka ty jesteś roztrzepana".

    Wpisz się do książki gości:
    <a href="ksiega.html">Księga gości</a>
    </body>
    </html>


    Wyjaśnienia: (Co to oznacza?)

    A {color: blue;text-decoration: none;}
    elementy klikalne typu odnośnik mają mieć kolor błękitny i nie mają być podkreślone

    A:visited {color: red;}
    odnośniki stron odwiedzonych będą miały kolor czerwony

    A:hover {text-decoration: underline; color: white; background-color: blue;}
    odnośniki po najechaniu na nie myszką zmienią kolor liter na biały, tło na błękitny, tekst zostanie podkreślony.

    Zobacz przykład>>

      
    Class Służy do używania stylów uniwersalnych, zdefiniowanych dla różnych elementów strony. Style uniwersalne definiujemy ze znakiem kropki na początku nazwy.

    <STYLE type=text/css>
    .courier {FONT: 20pt courier;}
    </STYLE>


    i stosujemy wtedy gdziekolwiek przy pomocy słowa class:

    <p class="courier">
    to jest tekst napisany czcionką Courier
    </p>

    A oto wynik:

    to jest tekst napisany czcionką Courier















    POJĘCIA:  styl w nagłówku,   styl w osobnym pliku,   styl w obiekcie,   CLASS 
    Materiały pomocnicze na zajęcia technologia informacyjna, przygotował Dariusz Jagła Zespół Szkół Ekonomicznych Ośno Lubuskie
    Technologia informacyjna, przejdź do menu głównego