Login lub e-mail Hasło   

Wprowadzenie do kaskadowych arkuszy stylów

Odnośnik do oryginalnej publikacji: http://www.beldzio.com/blog/wprowadzenie(...)-stylow
Czym jest CSS? CSS (ang. Cascading Style Sheets - kaskadowe arkusze stylów) są językiem umożliwiającym opis prezentacji dokumentu HTML, czyli wygląd czcionek, kolor&oacut...
Wyświetlenia: 6.389 Zamieszczono 30/05/2006

Czym jest CSS?

CSS (ang. Cascading Style Sheets - kaskadowe arkusze stylów) są językiem umożliwiającym opis prezentacji dokumentu HTML, czyli wygląd czcionek, kolorów, rozmiarów czy położenia konkretnych elementów HTML.

Dlaczego warto z niego korzystać

  • Oddzielenie warstwy treści od warstwy prezentacji.
  • Dzięki oddzieleniu warstwy treści od warstwy prezentacji zyskujemy swobodę w modyfikacji naszej strony. Chcąc zmodyfikować jakiś element na stronie nie musimy edytować każdego pliku w celu poprawki, a jedynie arkusz stylów, w którym zdefiniowany jest cały wygląd strony.

  • Zwiększenie szybkości działania strony.
  • Korzystając z CSS pozbywamy się z kodu strony wszelkich znaczników i atrybutów służących do opisania jej wyglądu. Skutkuje to zmniejszeniem objętości każdej podstrony. Dodatkowo po pierwszym załadowaniu strony, arkusz stylów zapisywany jest w pamięci tymczasowej przeglądarki i przy każdym następnym odświeżeniu czy przejściu na kolejną podstronę pobierany jest z naszego dysku, a nie z Internetu co przyśpiesza czas ładowania strony.

  • Definicja wyglądu dla różnych urządzeń
  • Za pomocą CSS możemy zdefiniować inny wygląd strony dla różnych mediów. Mediami określa się tu miedzy innymi drukarki, małe monitory, telewizory, czy drukarki Braille'a.

  • Ułatwienie dostępu niepełnosprawnym
  • Używając arkuszy stylów ułatwimy dostęp do naszej strony niepełnosprawnym. Dzieje się to na skutek możliwości wyłączenia lub modyfikacji kodu CSS dla danej strony (funkcja przydatna osobom niedowidzącym). Użycie arkuszy stylów ułatwia również przetwarzanie kodu strony przez programy ułatwiające korzystanie z sieci osobom niepełnosprawnym (programy czytające treść stron, czy przetwarzające ją na język Braille'a).

  • SEO
  • Używanie stylów CSS ma także pozytywne znaczenie w kwestii SEO czyli pozycjonowania stron w wyszukiwarkach internetowych. Niektóre wyszukiwarki jak chociażby Google doceniają strony o czystym kodzie oraz takie gdzie stosunek kodu do treści właściwej strony jest znaczący na korzyść treści.

Sposoby osadzania kodu CSS w dokumencie HTML

Istnieją trzy sposoby osadzania arkusza stylów wewnątrz dokumentu HTML. Różnią się one miejscem umieszczenia kodu CSS oraz priorytetem jego użycia.

  • zewnętrzny arkusz stylów - kod CSS znajduje się w osobnym pliku, który dołączany jest do kodu strony poprzez wstawienie w sekcji HEAD:
  • <link href="adres_do_css.css" rel="stylesheet" type="text/css" />
  • wewnętrzny arkusz stylów - kod CSS osadzony jest wewnątrz dokumentu HTML w sekcji HEAD:
  • <style type="text/css">
         // kod CSS
    </style>
  • lokalny arkusz stylów - opis wyglądu elementu umieszczony jest w jego deklaracji (wg specyfikacji xHTML 1.1 sposób ten został uznany za przestarzały)
  • <p style="...">

    Priorytet rośnie wraz z odległością opisu wyglądu znacznika od jego deklaracji tzn największy priorytet ma arkusz lokalny następnie wewnętrzny, a na samym końcu zewnętrzny.

Przykład użycia arkuszy stylów

Jako, że uczyć się jest najlepiej na przykładach przedstawię przykładowy kod strony, a następnie omówię jego elementy.

    KOD HTML:

    <html>
            <head>
                    <title>Pierwsze starcie z CSS</title>
                    <link href="style.css" rel="stylesheet" type="text/css" /> (1)
            </head>
            <body>
                    <div id="strona"> (2)
                            <div id="top"><p class="grubas">TOP</p></div> (3)
                            <div id="menu">MENU</div>
                            <div id="tresc">TRESC</div>
                            <div id="stopka"><p class="grubas">STOPKA</p></div>
                    </div>
            </body>
    </html>

    KOD CSS:

    #strona {
            width: 500px;
            height: 700px;
    }
    #top {
            height: 150px;
            background-color: blue;
    }
    #menu{
            height: 500px;
            width: 30%;
            background-color: green;
            float: left;
    }
    #tresc{
            height: 500px;
            width: 70%;
            background-color: yellow;
            float: right;
    }
    #stopka{
            height: 50px;   
            background-color: red;
    }
    .grubas {
            font-weight: bold;
    }

    Zacznijmy od opisania nowych rzeczy z kodu HTML:

    • (1) - dołączamy zewnętrzny arkusz stylów znajdujący się w pliku „style.css"
    • (2) - przypisujemy atrybut „id" znacznikowi „div", który określa unikalny w skali całego dokumentu identyfikator elementu. W całym dokumencie nie mogą znaleźć się dwa (lub więcej) elementy o takim samym identyfikatorze
    • (3) - przypisanie znacznikowi „p" atrybutu „class" określjącego przynależność elementu do klasy. Jeśli chcemy zastosować jeden styl dla wielu elementów w dokumencie należy przypisać go do wybranej klasy.

Pseudoklasy

Pseudoklasy umożliwiają zdefiniowanie wyglądu elementu dla jego fragmentu (np pierwsza litera) lub gdy znajduje się on w specjalnym stanie (np kliknięcie).
Najpopularniejsze pseudoklasy to:
    • :hover :: najechanie myszką na element
    • a:hover {
              font-size: 50px;
      }

      Przykład

    • :active :: kliknięcie na element
    • a:active {
              color: green;
      }

      Przykład

    • :visited :: odwiedzone hiperłącze
    • a:visited {
              text-decoration: none;
      }

      Przykład

    • :focus :: uaktywnienie kontrolki tekstowej (input, textarea)
    • input:focus {
              background-color: #ABC;
      }

      Przykład

    • :first-letter :: definicja wyglądu pierwszej litery
    • p:first-letter {
              color: red;
      }

      Przykład

    • :first-line :: definicja wyglądu pierwszej lini
    • p:first-line {
              text-transform: uppercase;
      }

      Przykład

Czego w HTML nie znajdziemy?

Jak można było zauważyć wiele rzeczy dostępnych w CSS można zrobić równie dobrze za pomocą samego HTML. Kaskadowe arkusze stylów prócz możliwości opisu dokumentu znanych z HTML dają nam serie nowych właściwości. Zaliczyć do tego można kompleksowy opis wyglądu ramek, marginesów czy wypełnień.
Różnorodność wprowadzonych właściwości umożliwia nam praktycznie nieograniczoną możliwość opisu wyglądu naszych stron. Jedynym mankamentem związanym z arkuszami stylów jest różnorodność silników interpretujących kod CSS. Jako, że każda przeglądarka posiada swój własny silnik nie zawsze prezentowana przez nią strona odpowiada temu czego się spodziewaliśmy. Można co prawda temu zaradzić poprzez użycie odpowiednich sztuczek, które wpływają na wygląd strony w określonej przeglądarce, ale ujmuje to znacząco elastyczności CSS. Większym problemem związanym z silnikiem interpretującym arkusze stylów, jest brak wsparcia dla niektórych właściwości języka. Przeglądarką sprawiającą najwięcej problemów z interpretacją kodu CSS jest paradoksalnie najpopularniejszy na rynku Internet Explorer.

Podobne artykuły


16
komentarze: 5 | wyświetlenia: 8953
9
komentarze: 0 | wyświetlenia: 2740
17
komentarze: 4 | wyświetlenia: 13452
49
komentarze: 18 | wyświetlenia: 64730
37
komentarze: 9 | wyświetlenia: 28301
15
komentarze: 5 | wyświetlenia: 32576
13
komentarze: 2 | wyświetlenia: 22870
12
komentarze: 3 | wyświetlenia: 29645
11
komentarze: 1 | wyświetlenia: 86123
11
komentarze: 2 | wyświetlenia: 18448
11
komentarze: 2 | wyświetlenia: 33010
11
komentarze: 1 | wyświetlenia: 10303
10
komentarze: 1 | wyświetlenia: 34881
10
komentarze: 5 | wyświetlenia: 20345
 
Autor
Dodał do zasobów: Mariusz Żurawek
Artykuł

Powiązane tematy






Brak wiadomości


Dodaj swoją opinię
W trosce o jakość komentarzy wymagamy od użytkowników, aby zalogowali się przed dodaniem komentarza. Jeżeli nie posiadasz jeszcze swojego konta, zarejestruj się. To tylko chwila, a uzyskasz dostęp do dodatkowych możliwości!
 

© 2005-2018 grupa EIOBA. Wrocław, Polska