wtorek, 13 maja 2014

HTML - Każdy chce być Stylowy - Wprowadzenie do CSS

Wprowadzenie do CSS

Wstęp

CSS - (cascading style sheet) - jest to język służący do ostylowywania elementów HTML. Obecnie jego najnowsza wersja to CSS3, lecz najpierw postaram się zaprezentować podstawy, które są dostępne zarówno w CSS jak i CSS2.

Podstawy

Używanie stylów css nie jest wcale trudne. W najbardziej prostej wersji (używanej przez nas) musimy zapoznać się z kilkoma faktami:
  1. Każdy element HTML (tag) posiada atrybut style.
  2. Css to tak naprawdę zestaw par atrybut : wartość; zakończonych średnikiem.
  3. Pełny zestaw atrybutów jest dostępny pod adresem http://www.blooberry.com/indexdot/css/propindex/all.htm
  4. Nazwa każdego atrybutu jest w języku angielskim
  5. Przykład użycia : <td style="background-color: red;" ></td>

Przykłady praktyczne

Środkowanie tekstu w danym elemencie HTML.

Zakładając, że chcemy ustawić wyśrodkowany tekst w paragrafie (w poziomie) powinniśmy użyć poniższego kodu:

<!-- Przykład CSS -->
<html>
 <head>
  <title>[CSS] Przyklad 1</title>
 </head>
 <body>
  <p style="text-align:center;">
   Text który powinien zostać wyśrodkowany!
  </p>
 </body>
</html>

Umieszczenie elementów w danej odległości od prawej i górnej krawędzi

Jeśli chcemy, aby jakiś element był umieszczony w odstępie od innego elementu (sąsiadującego, bądź krawędzi zewnętrznego) powinniśmy użyć do tego właściwości margin.

<!-- Przykład 2 CSS -->
<html>
 <head>
  <title>[CSS] Przyklad 2</title>
 </head>
 <body>
  <p style="margin-left: 300px; margin-top: 100px; background-color:red; color: white;">
   Jest on 300px od lewej i 100px od gory. <br />
   Uzyto atrybutow css : <br />
   margin-left - lewy margines <br />
   margin-top - gorny margines <br />
   background-color - kolor tla <br />
   color - kolor czcionki <br />      
  </p>
 </body>
</html>

Ustalenie stałej szerokości elementu 

Czasami chcielibyśmy aby dany element był danej szerokości, nie zmieniał jej, a treść której jest zbyt wiele mogła się np przewijać. W tym celu użyjemy nowego znacznika : DIV - znacznik ten to typowy kontener, w którym można osadzać inne elementy dokumentu HTML.

<!-- Przykład 3 CSS -->
<html>
 <head>
  <title>[CSS] Przyklad 3</title>
 </head>
 <body>
  <div style="width: 300px; height: 200px; display: block; background-color: black; color: green; overflow-x: hidden; overflow-y: scroll;">
   Taki o troche matrix  ╔♀Ebn��○•tÜ<br />
   Uzyto atrybutow css : <br />
   width - szerokosc (mozliwa w px i %) <br />
   height - wysokosc (j/w) <br />
   display - sposob wyswietlania elementow - ustawiono block, by DIV byl stalym blokiem  <br />
   color - kolor czcionki <br />
   background-color - kolor tla <br />
   overflow-x/y - przepelnienie kontenera, Ustawiono wartosci hidden, aby w poziomie byly one skrywane oraz scroll, aby w pionie mozna bylo przewijac. Chowane beda naprawdedlugiewyrazymajacepowyzej300pxszerokoscinieposiadajacespacjiwiecniemoznaichzlamac. <br/>
  </div>
 </body>
</html>

Praca domowa

Ostyluj swoją stronę internetową przy pomocy atrybutów CSS użytych w tym kursie oraz zawartych na stronie http://www.blooberry.com/indexdot/css/propindex/all.htm.


KONIEC CZĘŚCI PIERWSZEJ KURSU...


Brak komentarzy:

Publikowanie komentarza