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:
- Każdy element HTML (tag) posiada atrybut style.
- Css to tak naprawdę zestaw par atrybut : wartość; zakończonych średnikiem.
- Pełny zestaw atrybutów jest dostępny pod adresem http://www.blooberry.com/indexdot/css/propindex/all.htm
- Nazwa każdego atrybutu jest w języku angielskim
- 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.
Brak komentarzy:
Prześlij komentarz