• Ogłoszenie:

Kurs css by. me

Poradniki związane z tworzeniem i prowadzeniem stron www.

Kurs css by. me

Postprzez ddh 01 Gru 2010, 12:54

reklama
Na początek o CSS słów kilka

Wikipedia napisał(a):Kaskadowe arkusze stylów (ang. Cascading Style Sheets, CSS) to język służący do opisu formy prezentacji (wyświetlania) stron WWW. CSS został opracowany przez organizację W3C w 1996 r.


Przejdźmy teraz do kursu

1. Umieszczanie arkuszy stylów.

a) Wewnętrzny arkusz stylów:

Kod: Zaznacz wszystko
<head>
   (...)
<style type="text/css">
/* <![CDATA[ */
selektor {
cecha: wartość;
cecha2: wartość2
...
}
selektor2 {
cecha: wartość;
cecha2: wartość2
...
}
(...)
/* ]]> */
</style>
   (...)
</head>


Jak widać ten fragment wstawiamy w sekcji head.

b) Zewnętrzny arkus stylów.

W sekcji head wstawiamy taki fragment:

Kod: Zaznacz wszystko
<head>
   (...)
   <link rel="Stylesheet" type="text/css" href="style.css" />
   (...)
</head>


Po czym należy stworzyć plik style.css w tym samym folderze co znajduje się plik index

c) Alternatywny arkusz stylów.

Kod: Zaznacz wszystko
<head>
   <link rel="Stylesheet" type="text/css" href="style.css" title="Nazwa domyślna" />
   <link rel="Alternate stylesheet" type="text/css" href="style1.css" title="Nazwa 1" />
   <link rel="Alternate stylesheet" type="text/css" href="style2.css" title="Nazwa 2" />
   <link rel="Alternate stylesheet" type="text/css" href="style3.css" title="Nazwa 3" />
   (...)
</head>



Tutaj style.css są domyślnym arkuszem stylów, który zostanie dołączony automatycznie, a reszta to alternatywne, które zostaną dołączone po wyborze odpowiedniej opcji w przeglądarce poprzez użytkownika.

d) Importowanie arkusza stylów.


Kod: Zaznacz wszystko
<style type="text/css">
/* <![CDATA[ */
@import url(adres zewnętrznego arkusza stylów);
/* ]]> */
</style>


Polecenie to możemy wstawić zarówno w wewnętrznym jak i zewnętrznym arkuszu stylów. Pozwala ono wczytać arkusz stylów, przy czym może się on znajdować na tym samym serwerze lub w dowolnym serwerze znajdującym się w internecie. Wtedy należy podać adres internetowy. Po wczytaniu zostanie on automatycznie dołączony.

e) Ostatnią opcją jest dopisanie arkusza do wybranego bloku.


Kod: Zaznacz wszystko
<selektor style="nasze style">treść bloku</selektor>



Selektorem może być obojętnie jaki znacznik, np. p, div, itp.

2. Komentarze

Aby wstawić do naszego arkusza stylów komentarz, należy wpisać go pomiędzy /* */, np.


Kod: Zaznacz wszystko
/* Nasz komentarz */


3. Struktura CSS

Ogólna struktura kaskadowych stylów wygląda następująco:


Kod: Zaznacz wszystko
selektor {
atrybut: wartość;
(...)
}


4. Typografia

a) Zmiana koloru czcionki

Kod: Zaznacz wszystko
color: #color;



W miejsce color podajemy kolor w formacie RGB

b) Rozmiar czcionki

Kod: Zaznacz wszystko
font-size: rozmiar;



W miejsce rozmiar podajemy rozmiar w pikselach, np. 10px;

c) Krój czcionki

Kod: Zaznacz wszystko
font-family: czcionka;



W miejsce czcionka wpisujemy nazwę czcionki, np. Arial;

d) Dekoracja czcionki

Kod: Zaznacz wszystko
text-decoration: dekoracja;



Jest kilka sposobów dekoracji czcionki:

underline - podkreślenie
overline - nadkreślenie
line-through - przekreślenie
blink - miganie

Zamiast dekoracja wpisujemy jeden z powyższych przykładów.

e) Styl czcionki

Kod: Zaznacz wszystko
font-style: styl;



Są dwa style:

italic - kursywa
oblique - czcionka pochyła

f) Pogrubienie czcionki

Kod: Zaznacz wszystko
font-weight: pogrubienie;



Zamiast pogrubienie wpisujemy:
bold - Pogrubienie
normal - Bez pogrubienia

5. Pozycjonowanie

a) Pozycja selektora

Aby element znajdował się dokładnie tam, gdzie mu wskażemy, należy użyć postion: absolute;, np.


Kod: Zaznacz wszystko
position: absolute;
top:  /* odległość od góry */;
left:  /* odległość od lewej */;
right:  /* odległość od prawej */;
bottom:  /* odległość od dołu */;


b) Pozycja tekstu


Kod: Zaznacz wszystko
text-align: wyrownanie;



Zamiast wyrównanie należy wpisać jeden z poniższych przykładów:

left - do lewej strony
right - do prawej strony
center - do środka
justify - do obu stron

c) Nadanie marginesów


Kod: Zaznacz wszystko
margin-pozycja: wartosc
;


Zamiast pozycja wstawiamy jeden z poniższych przykładów:

left - lewy margines
right - prawy margines
top - górny margines
bottom - dolny margines

A w miejsce wartosc podajemy wartość w pikselach (px)

6. Tło

a) Tło obrazkowe

Kod: Zaznacz wszystko
background-image: url(adres_obrazka);



b) Kolor tła

Kod: Zaznacz wszystko
background-image: kolor;



W miejsce kolor podajemy oczywiście wartość w formacie RGB

c) Powtarzanie tła

Kod: Zaznacz wszystko
background-repeat: powtarzanie;



repeat - powtarzanie tła na całym obszarze
repeat-x - powtarzanie tła względem osi x
repeat-y - powtarzanie tła względem osi y
no-repeat - brak powtarzania

7. Ramki

a) Grubość obramowania

Kod: Zaznacz wszystko
border: wartosc;



Jako wartosc podajemy wartość w pikselach

b) Kolor obramowania

Kod: Zaznacz wszystko
border-color: kolor;



Jako kolor podajemy kolor w formacie RGB

c) Typ obramowania

Kod: Zaznacz wszystko
border: typ;


Typy obramowania:

none - brak
hidden - ukryta ramka
solid - jedna linia
dotted - kropkowana linia
dashed - kreskowana linia
double - podwójna
groove - wklęsła przestrzenna
ridge - wypukła przestrzenna
inset - wklęsła
outset - wypukła

I takim sposobem doszliśmy do końca. Myślę, że nauczyłem was podstaw tego języka.

Pozdrawiam!

Autorem tego kursu jestem w 100%.

Pochwały przyznane za posta: 5
ddh
~user
 
Posty: 22
Dołączenie: 25 Sie 2010, 16:07
Pochwały: 11



Powróć do Tworzenie stron www

Kto jest na forum

Użytkownicy przeglądający to forum: Brak zarejestrowanych użytkowników oraz 0 gości