[Tutorial] Kurs CSS dla początkujących

jose · 30 Styczeń 2010

Ogólnie o CSS
CSS (Cascading Style Sheets - Kaskadowe Arkusze Stylów) to język

internetowy do określenia wyświetlenia strony WWW. CSS jest ściśle

powiązane z (x)HTML, bez którego nie miało by do czego służyć.

Kurs CSS

Umieszczanie CSS

Są na to cztery sposoby : zewnętrzny arkusz, arkusz importowany, wewnętrzny

arkusz, oraz wydzielanie CSS w bloku.

1. Należy stworzyć plik style.css, wypełnić go treścią, oraz pomiędzy

znacznikami <head> i </head> wpisać

Kod:

<link rel="stylesheet" type="text/css" href="style.css" />

2. Aby zaimportować style z innego serwera, należy w sekcji head strony wpisać

Kod:

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

3. Wewnętrzny arkusz wstawiamy poprzez kod

Kod:

<style type="text/css">zawartość naszego css'a</style>

4. Możemy również dopisać arkusz to wybranego bloku. Żeby to zrobić, należy

wpisać kod

Kod:

<selektor style="nasze style">treść bloku</selektor>

Oczywiście zamiast selektor wpisujemy nasz znacznik np. div.

Komentarze

Do naszych stylów dopisujemy

Kod:

/* KOMENTARZ CSS */

Ogólna struktura CSS

Kod:

selektor {

atrybut: wartosc;

}

Typografia

Kolor czcionki
Żeby ustawić kolor czcionki, należy wpisać

Kod:

color: #color; /* w miejsce #color wpisujemy kolor w RGB */

Czerwony - #FF0000
Biały - #FFFFFF
Czarny - #000000
itd, itp.

Rozmiar czcionki
Żeby ustalić rozmiar czcionki należy wpisać

Kod:

font-size: rozmiar; /* w miejsce rozmiar wpisujemy rozmiar w pikselach 
np. 11px */

Krój czcionki
Żeby określić rodzaj czcionki wpisujemy

Kod:

font-family: czcionka; /* w miejsce czcionka wpisujemy nazwę czcionki 
np. Tahoma */

Dekoracja czcionki
Dekorować czcionki nie powinno się w html, ponieważ te znaczniki są

zdeprecjonowane, należy to robić w css, w ten sposób

Kod:

text-decoration: dekoracja; /* zamiast dekoracja, wpiszemy jeden z 
poniższych przykładów */

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

oraz ten

Kod:

font-style: styl; /* zamiast styl wpisujemy jeden z ponizszych przykladow 
*/

italic - kursywa
oblique - czcionka pochyła

Pozycja na ekranie

Pozycja selektora

Żeby dany element był we wskazanym miejscu na stronie, należy użyć pozycji
absolutnej. Aby to zrobić, należy wpisać

Kod:

position: absolute;
top: xd; /* zamiast xd wpisujemy odleglosc w pikselach od gory */
left: xd; /* zamiast xd wpisujemy odleglosc w pikselach od lewej strony */
right: xd; /* zamiast xd wpisujemy odleglosc w pikselach od prawej strony */
bottom: xd; /* zamiast xd wpisujemy odleglosc w pikselach od dolu */

Pozycja tekstu

Kod:

text-align: wyrownanie; /* zamiast wyrownanie wpisujemy: */

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

Margines
Margines (wcięcie) ustawiamy w ten sposób

Kod:

margin-pozycja: wartosc; /* zamiast pozycja wstawiamy poniższe 
przykłady a w miejsce wartosc margines w pikselach */

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

Margines tekstu

Margines tekstu ustawiamy prawie tak, jak normalny, z wyjątkiem, że używamy do niego atrybutu padding:

Kod:

padding-left: 10px; /* kod ten oznacza, że z lewej strony tekst jest wcięty o 10 pikseli */

Tło

Obrazek tła
Aby ustawić tło, jako obrazek, należy wpisać poniższy kod

Kod:

background-image: url(adres_obrazka); /* w miejsce adres_obrazka 
wpisujemy bezposredni link do naszego obrazka */

Kolor tła
Aby ustawić kolor tła, należy wpisać poniższy kod

Kod:

background-color: kolor; /* w miejsce kolor wpisujemy kolor w RGB 
*/

Powtarzanie tła

Kod:

background-repeat: powtarzanie; /* w miejsce powtarzanie wpisujemy 
jeden z ponizszych wyrazen */

repeat - powtarzanie tła w obu kierunkach (domyślnie)
repeat-x - powtarzanie tła tylko w kierunku poziomym
repeat-y - powtarzanie tła tylko w kierunku pionowym
no-repeat - brak powtarzania tła (zostanie wyświetlone jako pojedynczy

obrazek)

Ramka

Grubość obramowania

Kod:

border-width: liczba; /* jako liczba wpisujemy dowolna liczbe w px np. 0 
*/

Kolor obramowania

Kod:

border-color: kolor; /* jako kolor wpisujemy kolor obramowania w RGB 
*/

Typ obramowania

Kod:

border-style: typ /* jako typ wpisujemy jeden z poniższych przykładów */

none - brak obramowania
hidden - obramowanie ukryte
solid - ciągła linia
dashed - przerywana linia
dotted - linia kropkowana
double - obramowanie składające się z podwójnej lini
groove - linia wklęsła stylizowana
ridge - linia wypukła stylizowana
inset - linia wklęsła prosta
outset - linia wypukła prosta
inherit - przejęcie wartości rodzica

Postać skrócona

Zamiast pisać wszystko po kolei można skorzystać ze skróconego zapisu.
Zamiast:

Kod:

border-width: 1px;
border-style: solid;
border-color: #000;

możemy napisać:

Kod:

border: 1px solid #000;

To już koniec . Mam nadzieję, że Wam pomogłem zapoznać się z CSS. W
wolnym czasie napiszę coś więcej o CSS.

Kurs został napisany przeze mnie w celach edukacyjnych. Zabrania się kopiowania w całości lub częściowo.

Mistic... · 30 Styczeń 2010

Kurs dobrze napisany

k: . Dobrze, że wyjaśniłeś do czego służą poszczególne selektory

. Bo bywają przypadki, że ktoś poda zupełnie nam obcy kod bez żadnego tłumaczenia. Myślę, że dla początkujących webmasterów poradnik się przyda ^^.

[Tutorial] Kurs CSS dla początkujących

jose

Nowicjusz

Mistic...

Nowicjusz