Damian Urbańczyk xHTML Tworzenie stylów CSS.

Prezentacja na temat: "Damian Urbańczyk xHTML Tworzenie stylów CSS."— Zapis prezentacji:

1 Damian Urbańczyk xHTML Tworzenie stylów CSS

2 Zewnętrzny plik CSS Aby ułatwić sobie pracę ze stylami, najlepiej utworzyć osobny plik, w którym będą przechowywane wszystkie style, z których korzystamy na stronie WWW. Plik taki najlepiej nazwać style.css lub tak, abyśmy mogli go łatwo odnaleźć w celu dokonania zmian w jego zawartości.

3 Definicja stylu Każdy styl musi zostać zdefiniowany. Nazwa powinna być krótka, ale treściwa – od razu musi nam mówić, do czego dany styl jest używany – za co odpowiada. Przed nazwą stylu dajemy kropkę: .nazwa Opis formatowania stylu zawieramy w klamrach { … }. Każdy otwarty styl musi być zamknięty, aby nie wystąpiły późniejsze błędy w odczycie strony i formatowaniu.

4 Definiujemy wygląd czcionki
Za wysokość czcionki odpowiada font-size, np.: font-size: 50px; Za kolor czcionki odpowiada color, np.: color: red; Za krój czcionki odpowiada font-family, np.: font-family: Verdana;

5 Odstępy Aby zdefiniować odstępy, używamy padding.
Możemy określić jednorazowo odstępy od góry, dołu, lewej i prawej strony, używając np.: padding: 20px; Można też zdefiniować osobno odstępy dla lewej, czy innej strony: padding-left: 30px; Analogicznie, zmieniając left na right, top i bottom, możemy zmienić odstępy do prawej, góry i dołu.

6 Obramowanie Definiowanie obramowania przydaje się to tabel, wierszy i kolumn. Obramowanie najłatwiej zdefiniować za pomocą border, podając jednocześnie trzy informacje: kolor, szerokość oraz styl ramki. Np.: border: # solid 5px; Powyższy styl utworzy tradycyjną linię czarnego koloru o szerokości 5 px.

7 Marginesy strony Aby zdefiniować marginesy strony, możemy użyć pojedynczego stylu margin lub osobno dla każdego marginesu, określając, który to margines: top (góra), bottom (dół), left (lewy), right (prawa).

8 Dziękuję za uwagę!