CSS – kaskadowe arkusze stylów

CSS jest is an skrótem od Cascading Style Sheets

(Kaskadowe Arkusze Stylów).

CSS został stworzony aby rozwiązać problematyczną

sytuację poprzez dostarczenie twórcom stron
internetowych możliwości tworzenia zaawansowanych
układów grafi cznych wspieranych przez wszystkie
przeglądarki. W tym samym czasie, separacja
prezentacji stylu dokumentów od treści dokumentów,
pozwoliła na łatwiejszą kontrolę dokumentów.

CO TO JEST CSS?



HTML jest używany do strukturyzacji treści.



CSS jest używany do formatowania tej treści.

JAKA JEST RÓŻNICA MIĘDZY CSS A

HTML?

Powiedzmy że chcemy ładny czerwony kolor tła na
stronie:

Używając HTML możemy zrobić to tak:

Dzięki CSS ten sam rezultat można osiągnąć w taki
sposób:

body {background-color: #FF0000;}

PODSTAWA SKŁADNI CSS

Poniżej umieszczony jest przykład użycia tej metody do
zmiany koloru tła elementu na czerwony:

<html>

<head>
<title>Przykład</title>
</head>
<body style="background-color: #FF0000;">

<p>To jest czerwona strona</p>

</body>

</html>

DODAWANIE CSS DO DOKUMENTU

HTML

METODA 1: W LINII (ATRYBUT

STYLE)

<html>

<head>
<title>Przykład</title>

<style type="text/css">
body {background-color: #FF0000;}
</style>

</head>
<body>

<p>To jest czerwona strona</p>

</body>

</html>

DODAWANIE CSS DO DOKUMENTU

HTML

METODA 2: WEWNĘTRZNA (ZNACZNIK

STYLE)

test.html

<html>
<head>
<title>Mój dokument</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Mój pierwszy arkusz stylów</h1>
</body>
</html>

style.css

body { background-color: #FF0000; }

DODAWANIE CSS DO DOKUMENTU

HTML

METODA 3: ZEWNĘTRZNA (ODNOŚNIK DO ARKUSZA

STYLÓW)

Kolor pierwszoplanowy: właściwość 'color‚

h1{
color: #ff 0000;
}

Właściwość 'background-color'

body {
background-color: #FFCC66;
         }
     h1{
color: #990000;
background-color: #FC9804;
         }

COLOR, BACKGROUND-COLOR

body {

background-color: #FFCC66;
background-image: url("butterfl y.gif");

}
h1 {

color: #990000;
background-color: #FC9804;

}

OBRAZKI W TLE [BACKGROUND-

IMAGE]

Value

Description

Background-repeat:

repeat-x

Obrazek powtarza się w poziomie

background-repeat:

repeat-y

Obrazek powtarza się w pionie

background-repeat: repeat

Obrazek powtarza się w poziomie oraz w

pionie

background-repeat: no-

repeat

Obrazek nie powtarza się

POWTARZANIE OBRAZKA W TLE

[BACKGROUND-REPEAT]

body {

background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;

}
h1 {

color: #990000;
background-color: #FC9804;

}

Value

Description

Background-attachment:

scroll

Obrazek porusza się razem ze stroną -

odblokowany

Background-attachment:

fixed

Obrazek jest zablokowany

BLOKADA OBRAZKA W TLE

[BACKGROUND-ATTACHMENT]

body {

background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;

}

h1 {

color: #990000;
background-color: #FC9804;

}

Value

Description

background-position: 2cm

2cm

Obrazek jest ustawiony 2 cm od lewej i 2

cm w dół

background-position: 50%

25%

Obrazek jest ustawiony centralnie w

poziomie i w jednej czwartej w pionie

licząc od góry

background-position: top

right

Obrazek jest ustawiony w górnym

prawym rogu strony

POZYCJA OBRAZKA W TLE

[BACKGROUND-POSITION]

body {

background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;

}

background-color: #FFCC66;
background-image: url("butterfl y.gif");
background-repeat: no -repeat;
background-attachment: fi xed;
background-position: right bottom;

Używając background ten sam rezultat można zapisać w tylko jednej
linijce kodu:

background: #FFCC66 url("butterfl y.gif") no -repeat fi xed right bottom;

Lista koment jest następująca :

[background-color] | [background-image] | [background-repeat] |
[background-attachment] | [background-position]

KOMPILACJA [BACKGROUND]



font-family



font-style



font-variant



font-weight



font-size



font

CZCIONKI

Nazwa rodziny (Family-
name)Przykłady nazwy
rodzin czcionek (często
zwane "czcionkami") mogą
być następujące: "Arial",
"Times New Roman" lub
"Tahoma".

Rodzina ogólna (Generic
family)Ogólną rodzinę
najlepiej przedstawić jako
grupę rodzin czcionek z
pewnymi określonymi
cechami. Przykładem jest
sans-serif, który jest kolekcją
czcionek bez tzw. "stopy".

RODZINA CZCIONKI [FONT-FAMILY]

h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif;}

Możliwe wartości to: normal, italic lub oblique.
W przykładzie poniżej, wszystkie nagłówki oznaczone
jako <h2> zostaną zapisane kursywą.

h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif; font-style:

italic;}

STYL CZCIONKI [FONT-STYLE]

Właściwości font-variant używamy gdy chcemy
wybrać pomiędzy czcionką normalną (wartość normal)
lub kapitalikami (wartość small-caps). Czcionka small-
caps oznacza że będą wykorzystywane mniejszych
rozmiarów duże litery zamiast małych liter

h1 {font-variant: small-caps;}
h2 {font-variant: normal;}

WARIANT CZCIONKI [FONT-VARIANT]

Właściwość font-weight opisuje jak gruba lub

"ciężka" ma być czcionka. Czcionka może być normalna
(wartość normal) lub pogrubiona (wartość bold).
Niektóre przeglądarki wspierają nawet użycie liczb
między 100-900 (w setkach) do opisu grubości czcionki.

p {font-family: arial, verdana, sans-serif;}
td {font-family: arial, verdana, sans-serif; font-weight:

bold;}

FONT WEIGHT [FONT-WEIGHT]

h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;}

Istnieje jedna kluczowa różnica między czterema
powyższymi jednostkami. Jednostka 'px' oraz 'pt' czynią
wielkość czcionki absolutną, podczas gdy '%' oraz 'em'
pozwalają użytkownikowi określić wielkość czcionki jak
im "pasuje". Wielu użytkowników może mieć pewne
problemy, być w podeszłym wieku, słabiej widzieć lub
po prostu mieć monitor o słabej jakości obrazu. Aby
twoja strona była dostępna dla wszystkich, powinieneś
używać jednostek regulowanych takich jak '%' lub 'em'.

WIELKOŚĆ CZCIONKI [FONT-SIZE]

<body>

<h1>Nagłówek <h1> wielkość 30px</h1>

<h2>Nagłówek <h2> wielkość 1cm</h2>

<h3>Nagłówek <h3> wielkość 120%</h3>

<p>Paragraf <p> wielkość 1em</p>

</body>

PRZYKŁAD

Na p rzy kład , p op atr z n a te cz ter y lin ie kod u u ży te d o o pisan ia w łaściw ośc i
cz cion ki d la akap itu <p > :

p  {
fon t-sty le: ita lic;
fon t-w eig ht:  b old ;
fon t-size:  30 p x ;
fon t-fa mily:  arial,  san s- ser if;
}

Uży w ają c w ła śc iw ośc i skró to w ej, kod b ęd zie u p roszc zo n y:

p {
fon t: italic b old 30 p x a rial, san s- serif;
}

Ko lejn ość w a rtośc i fon t jest n astęp u jąc a :

fon t-sty le | fon t-v ar ian t | fo n t- w eig ht | fon t- size | f on t-fam ily

KOMPILACJA [FONT]

Document Outline