czwartek, 19 maja 2011

Kaskadowe Arkusze Stylów CSS - podstawy

Zastanawiacie się pewnie w jaki sposób można panować z jednego pliku nad wyglądem stron www (kolory czcionki, kolory tła, układem strony, zdjęciami, tekstem i wszystkim co jest tylko widoczne na stronie) - zachowując poprawną strukturę kodu xHTML.

Odpowiedź jest prosta - używamy do tego CSS
(Cascading Style Sheets) Kaskadowe Arkusze Stylów


Zapewne znacie takie tagi xHTML jak <strong>, <center> i <font>. Chcąc ustawić tło na stronie korzystaliście z takiej składni <body background="tlo.jpg">. Zapomnijcie o nich! CSS został stworzony po to, żeby sterować wszystkimi atrybutami odpowiedzialnymi za efekty wizualne.

Styl CSS to zbiór atrybutów (reguł) określających sposób wyświetlania strony www.



Jak wygląda składnia reguły css?


Reguła CSS składa się z selektora oraz deklaracji. Selektor wyznacza element
np. <div id="lewy_bok"> css: #lewy_bok {} lub grupę elementów naszej strony
np. <div  class="linki"> css: .linki {}, którym chcemy zmienić wygląd. Dla każdej reguły możemy podać dowolną ilość atrybutów.

Wyjaśnijmy to na prostym przykładzie:

Wszystkim nagłówkom pierwszego stopnia <h1> ustawiamy wielkość czcionki na 16 px (piksele) i pogrubioną czcionkę. Wszystkim obrazkom na stronie ustawiamy ramkę białego koloru oraz jej szerokość równa 4 px.

/*
to jest komentarz
selektor: img
deklaracja: border-width:4px;
rodzaj atrybutu: border-width
wartośc atrybutu border-width: 4px
po rodzaju zawsze atrybutu a przed jego wartościa stawiamy DWUKROPEK,
a po watości ŚREDNIK
*/

img {
  border-width:4px; /* ramka na 4 piksele */
  border-color:#FFF; /* ramka koloru #FFF czyli białego */
}


/*

selektor: h1

*/

h1 {
  font-size:16px; /* wielkość czcionki 16 pikseli */
  font-weight:bold; /* grubość czcionki BOLD można użyć wartości np. 200% */
  text-align:center; /* tekst w selektorze h1 zostanie wyśrodkowany */
}

Wkrótce dalsza część artykułu...

1 komentarz:

  1. Dzieki!!! Fajny artykuł czekam na dalszą część

    OdpowiedzUsuń