praktycznie o programowaniu

Style CSS

CSS

Aplikacje Internetowe: Kurs › Style CSS

W poniższym kursie będę prezentował tematy, które przerabiam w ramach Specjalizacji z uczniami 3 klasy Technikum Elektrycznego w Słupsku. Kurs ma służyć zarówno uczniom w powtórce materiału, jak i wszytkim zainteresowanym programowaniem Aplikacji Internetowych

Style CSS są ważnym elementem tworzenia interfejsu uzytkownika aplikacji internetowej. Dzięki stylom aplikacja może wyglądac dużo lepiej, możemy również stworzyć rozwijane menu, czy też umieszczać elementy interfesju w konkretnym miejscu dokumentu. 

Co potrafią style CSS

Style CSS są jedną z szybiej rozwijających się technologi internetowych. Programiści czy też graficy umiejący dobrze posługiwać się stylami CSS w swoich aplikacjach są dzisiaj w cenie. Dzięki stylom CSS mamy wpływ następujące właściwości elementów HTML:

  • wygląd, czyli kolor tła, czcionki, itp.
  • rozmiar
  • umiejscowienie w dokumencie, np. na stałe w prawym górnym rogu

Jak wstawić style CSS na stronę

Style definiujemy w sekcji HEAD strony internetowej, podobnie jak w przypadku skryptów JavaScript, mamy dwie możliwości, albo arkusz styli umieszczamy bezpośrednio w kodzie strony przy pomocy tagu STYLE:

<html>
  <head>
    <style>
       a {
          color: white;
        }
    </style>
  </head>
  <body>
    ...
  </body>
</html>

albo, co jest szczególnie zalecane w przypadku bardziej rozbudowanych arkuszy styli, w zewnętrznym pliku (w typ przypadku: site.css):

<html>
  <head>
    <link rel="stylesheet" href="site.css" />
  </head>
 <body>
 ...
 </body>
</html>

Stylowanie określonych tagów

Załóżmy że mamy taką oto zawartość do ostylowania (tekst reprezentuje wpis na forum):

<p><span>09:41 </span><span>nick </span>To jest wpis na forum</p>

Po uruchomieniu takiej strony, w przeglądarce ukaże się czarny tekst na białym tle wypisany standardową czcionką (na 90% Times New Roman). Chcielibyśmy aby wygladało to trochę inaczej:

  • tło ma byc grafitowe
  • litery białe
  • czcionka Arial

Jak widac cały tekst jest w tagu p, ostylujmy więc ten tag:

<style>
  p {
    background-color: #303030;
    color: white;
    font-family: Arial;
  }
</style>

powyższy arkusz styli spowoduje, że wszystkie teksty umieszcone w tagach p na stronie będą miały tło (background-color) grafitowe, kolor czcionki (color) biały, a rodzaj czcionki (font-family) to Arial.

09:41 nick To jest wpis na forum

Kaskadowość styli CSS

CSS jest skrótem, w rozwinięciu to Cascading Style Sheets, kaskadowość oznacza, że mimo ustalenia stylu tylko dla tagu p wszystkie tagi, które są zawarte wewnątrz tagu p (w naszym przypadku span) również otrzymują ten styl, czyli kolor tła i czcionki. Kaskadowość umożliwia też określanie stylu dla tagu w zależności od tego w jakim tagu się znajduje. Brzmi to pokrętnie, więc najlepiej to pokazać na przykładzie. Załóżmy, że w naszym tekście chcielibyśmy wyróznić innym kolorem tagi span zawarte wewnątrz tagu p:

<style>
  ....
  p span {
    color: gray;
  }
</style>

Powyższy zapis czytamy następująco: wszystkie span-y które są zawarte w tagu p ostyluj tak aby kolor czcionki był szary, po dodaniu takiego stylu do naszego arkusza nasz tekst będzie wyglądał następująco

09:41 nick To jest wpis na forum

Jeśli w kodzie strony bedą występowały jakieś inne elementy span nie zawierające się w w tagu p, nie zostaną one ostylowane.

Klasy

Jak widac w powyższym przykładzie, ostylowane zostały oba tagi span zawarte wewnątrz tagu p, jednak chcielibyśmy aby nick użytkownika był wypisany na pomarańczowo. Do takich zastowań w CSS wymyślono klasy, zmodyfikujemy treść naszej strony następująco:

<p><span>09:41 </span><span class="nick">nick </span>To jest wpis na forum</p>

W drugim span-ie pojawił sie dodatkowy artrybut class umożwili on odmienne od innych span-ów ostylowanie. Zmianę koloru czcionki na pomarańczowy uzyskamy dopisując do naszego arkusza następujący styl:

<style>
  ....
  p span.nick {
    color: orange;
  }
</style>

Powyższy zapis rozumujemy następująco: wszystkie span-y o klasie nick które są zawarte w tagu p ostyluj tak aby kolor czcionki był pomarańczowy, efekt zastosowania całego arkusza styli będzie następujący:

09:41 nick To jest wpis na forum

Klasę CSS możemy stosować bez powiązania z konkretnym tagiem (w naszym przypadku span), poniższy zapis:

.nick {
  color: orange;
}

oznacza, że na pomarańczowo będą wypisane wszystkie tagi zawierające klasę nick, niezależnie od tego czy to będzie tag span, p, a, czy też zupełnie inny.

<a class="nick" href="http://infocity.pl">link do infocity</a>

cdn ...

Komentarze

Komentarze do Style CSS na it.jursza.com
powrót