background image

mgr inż. Zbigniew Kęsy – Materiały dydaktyczne  

Kaskadowe arkusze stylów CSS 

1 

 

1.

 

Kaskadowe arkusze stylów – co to jest? 

Kaskadowe  arkusze  stylów  (ang.  Cascading  Style  Sheets,  CSS)  jest  to  język  służący  do 
opisywania  formy  prezentacji  stron  WWW  w  przeglądarkach  internetowych.  Innymi 
słowy  arkusze  stylów  określają  w  jaki  sposób  dana  strona  internetowa  ma  być 
wyświetlana.  Arkusz  stylów  CSS  jest  to  lista  reguł  (czyli  tzw.  dyrektyw)  ustalających  w 
jaki sposób ma zostać wyświetlana przez przeglądarkę internetową zawartość wybranego 
elementu  (lub  elementów)  języka  (X)HTML.  Można  w  ten  sposób  opisać  wszystkie 
pojęcia  odpowiedzialne  za  prezentację  elementów  dokumentów  internetowych,  takie  jak 
rodzina  czcionek,  kolor  tekstu,  marginesy,  odstęp  międzywierszowy  lub  nawet  pozycja 
danego  elementu  względem  innych  elementów  bądź  okna  przeglądarki.  Wykorzystanie 
arkuszy stylów daje znacznie większe możliwości pozycjonowania elementów na stronie, 
niż oferuje sam (X)HTML.  
 
Standard CSS został opracowany przez organizację W3C w 1996 r. jako potomek języka 
DSSSL  przeznaczony  do  używania  w  połączeniu  z  SGML-em.  Pierwszy  szkic  CSS 
zaproponował  w  1994  r.  Arkusze  CSS  zostały  stworzone  w  celu  oddzielenia  struktury 
strony www od formy jej prezentacji. Separacja ta zwiększa zakres dostępności witryny, 
zmniejsza  zawiłość  internetowego  dokumentu,  ułatwia  wprowadzanie  zmian  w  jego 
strukturze.  CSS  ułatwia  także  zmiany  w  renderowaniu  strony  w  zależności  od 
obsługiwanego  medium  (ekran,  palmtop,  dokument  w  druku,  czytnik  ekranowy). 
Stosowanie  zewnętrznych  arkuszy  CSS  daje  możliwość  zmiany  wyglądu  wielu  stron 
naraz  bez  ingerowania  w  sam  kod  (X)HTML,  ponieważ  arkusze  mogą  być  wspólne  dla 
wielu dokumentów. 
 

2.

 

Osadzanie arkuszy stylów na stronie 

Istnieją dwa rodzaje osadzania stylów CSS w dokumencie internetowym czyli na stronie 
WWW.  Kaskadowy  arkusz  stylów  można  umieścić  albo  wewnątrz  konkretnego 
dokumentu,  albo  też  dołączyć  go  do  strony  z  osobnego  pliku.  Pierwsze  rozwiązanie  to 
tzw.  style  wewnętrzne  –  stosowane  jest  do  prostych  stron  internetowych,  z  małą  liczbą 
elementów  których  wygląd  chcemy  kształtować  za  pomocą  CSSa.  Natomiast  drugie 
rozwiązanie  –  style  zewnętrzne  –  jest  rozwiązaniem  dedykowanym  do  większych 
projektów.  
 
Style wewnętrzne: 

 

Styl lokalny – umieszcza się go wewnątrz konkretnego znacznika formatowanego 
elementu. Działanie stylu obejmuje tylko ten jeden, konkretny element. 

<p style=”color:green; font-size:14px; font-variant: small-caps;”> Treść akapitu </p> 

 

Styl  zagnieżdzony  –  umieszcza  się  go  w  nagłówku  strony  WWW.  Swoim 
działaniem obejmuje cały dokument, a nie tylko pojedyncze elementy.  
<html> 
    <head> 

background image

mgr inż. Zbigniew Kęsy – Materiały dydaktyczne  

Kaskadowe arkusze stylów CSS 

2 

 

   <style type=”text/css”> 
     P  
     { 
        color:green; font-size:14px; font-variant: small-caps; 
     } 

 

</style> 

          </head> 
      <body> Treść strony 
         <p> Treść akapitu do którego odnosi się styl CSS </p>     
     </body> </html> 

 

Styl  zewnętrzny  –  umieszczany  jest  w  zewnętrznym  pliku  o  rozszerzeniu  .css. 
Oczywiście  plik  ten  powinien  być  umieszczony  w  tym  samym  katalogu  co 
projektowany dokument internetowy. W nagłówku strony WWW umieszczany jest 
odnośnik do arkusza CSS. 
<
html> 
  <head> 

        <link href=”arkusz.css” rel=”stylesheet” type=”text/css” > 
      </head> 
       <body> Treść strony 
         <p> Treść akapitu do którego odnosi się styl CSS </p>     
     </body> </html> 
Natomiast  sam  dokument  .css  jest  zwykłym  plikiem  tekstowym,  w  którym  zapisano   
reguły  wyglądu  (prezentacji)  strony  WWW.  Ważne  jest  jednak  aby  miał  on 
odpowiednie rozszerzenie, np. możemy nazywać go arkusz.css bądź style.css!  
 

3.

 

Budowa arkusza stylów  

Arkusz  stylów  CSS  składa  się  z  reguł  określających  styl  dla  wybranych  elementów 
dokumentu.  Sama  reguła  składa  się  z  selektora  oraz  deklaracji.  Selektor  określa  grupę 
elementów  (rzadziej  pojedynczy  element),  którego  ma  dotyczyć  deklaracja.  Deklaracja 
określa formatowanie i składa się z nazwy jednej z właściwości i jej wartości napisanej po 
dwukropku. Deklaracja musi być otoczona nawiasami klamrowymi. 
selektor { właściwość: wartość; } 
np.: P {margin-left: 20px;}  
bądź table {border-collspace: collspace;}  
Należy pamiętać o średniku o każdej wartości!  
 
Możliwe  jest  grupowanie  zarówno  selektorów  jak  i  deklaracji.  Zgrupowane  selektory 
rozdziela się przecinkami, a deklaracje średnikami: 
selektor1, selektor2 { właściwość1: wartość1; właściwość2: wartość2; } 
#element1, #innyelement {color:blue; font-style: italic; text-decoration: underline;} 
 
 

background image

mgr inż. Zbigniew Kęsy – Materiały dydaktyczne  

Kaskadowe arkusze stylów CSS 

3 

 

Selektory  zawarte  w  pierwszej  specyfikacji  CSS  zapewniają  możliwość  opisania 
docelowej grupy elementów przez: 

 

nazwę elementu (np. „h1”) 

 

klasę  elementu  (np.  „.elementy_menu”),  także  w  połączeniu  z  nazwą  elementu 
(np. „img.wyrownane_do_prawej”) 

 

id elementu (np. „#menu_lewe”) 

 

przodków  danego  elementu  (np.  „div#menu_lewe  a”  zostanie  zastosowane  do 
linków zawartych w elemencie div o id „menu_lewe”) 

 

stan linków określany przez pseudoklasy (:visited, :link, :active) 

 

inne pseudoklasy typograficzne (:first-line, :first-letter) 

 

4.

 

Działanie arkusza stylów CSS 

Poniżej  przedstawiłem  działający  arkusz  stylów  CSS  z  rzeczywistej,  stworzonej  przeze 
mnie strony internetowej. Na jego podstawie chciałbym omówić zasadę działania CSSa.  

Obecnie  preferuje  się  zamieszczanie  arkuszy  stylów  w  zewnętrznym  pliku  .css  i 
dołączanie ich do głównego dokumentu strony, tak jak przedstawiono to poniżej: 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
 

<title>Gospodarstwo gościnne "POD DZIKĄ RÓŻĄ" - Noclegi Baligród</title> 

 

<meta name="keywords" content="noclegi Baligród - noclegi w Baligrodzie - nocleg, 

pokoje gościnne - pod dzika roza"/> 
    <meta  name="description"  content="noclegi  Baligród  -  noclegi  w  Baligrodzie  - 
nocleg, pokoje gościnne - pod dzika roza"/> 
 

<link rel="stylesheet" rev="stylesheet" href="baligrodcss.css"/> 

 

<script type="text/javascript" language="Javascript" src="menup.js"> 

 

</script> 

</head> 
<body> 
 
Sam  dokument  z  arkuszami  stylów  ma  następującą  postać.  Kursywą  zaznaczyłem 
faktyczną treść dokumentu CSSowego, natomiast kolorem niebieskim komentuje co dana 
linijka robi.  
 
body {   

- dany styl odnosi się do całego element body 

  background-color: #CC5;   

- ustawienie koloru tła, na jasnooliwkowy 

  color: #black;  

- kolor tekstu ustawiono na czarny 

  margin-left: 1.3cm;  

- margines lewy ma  rozmiar 1,3 cm 

  margin-right: 1.3cm;  

- podobnie wygląda sprawa z marginesem prawym 


 

background image

mgr inż. Zbigniew Kęsy – Materiały dydaktyczne  

Kaskadowe arkusze stylów CSS 

4 

 

p  {   

-  tutaj  odwołujemy  się  do  akapitów,  czyli  elementów  oznaczonych  w  kodzie  strony 

jako p  

text-align: justify; 

- tekst wewnątrz akapitu jest wyśrodkowany (wyjustowany) 

margin-left: 7%;  

- lewy margines stanowi 7% całej szerokości strony 

margin-right: 7%; 

- prawy margines również 7% całej szerokości 


 
p:first-letter { 

- odwołanie się do pierwszej litery (bądź pierwszego znaku) akapitu  

font-weight:  bold; 

-  waga  czcionki  jest  bold,  czyli  mówiąc  po  normalnemu  stosujemy 

pogrubienie 


 
H1 {  

- odwołanie się do nagłówka H1 

    color: #008000;  

- ustawienie koloru 

 

text-align: center;  

- wycentrowanie tekstu 

 

font-size: 25px; 

 - ustawienie rozmiaru czcionki na 25 pikseli 


 
H2 {   

- odwołanie się do nagłówka H2 

   color:chocolate; 

- kolor ustawiamy na czekoladowy 

   text-align: center; 
   font-size: 18px; 

 
#stopka { 

 - odwołanie się do element o id stopka, który zamieściłem poniżej 

     text-align: center; 
 

 font-size: 13px; 

 

 font-style: italic; 

- tekst pisany kursywą 


 
<p id="stopka"> 
<BR><BR> 
 &copy;2009-2010 
</p> 
 
div {   

odwołanie się do wszystkich akapitów bez konkretnej nazwy 

  margin-bottom: 3px; 

- margines dolny ustawiony na 3 piksele 

  width: 180px; 

- szerokość akapitu to 180 pikseli 

  background-color: #CF3;  
  float:  left; 

-  tak  zwane  ‘pływanie  elementu’  ustawione  na  lewo,  czyli  element  div 

znajduje się po lewej stronie całości, opływa całość z lewej strony 


 

background image

mgr inż. Zbigniew Kęsy – Materiały dydaktyczne  

Kaskadowe arkusze stylów CSS 

5 

 

 
div2 {  

- odowałenie się do akapitów div2  

  margin-bottom: 20px; 
  float: center; 

 - element znajduje się w środku całości 

  text-align: center; 

- wyśrodkowanie tekstu 


 
ul.menu li { 

 - odwołwanie się do element li w pozycji menu 

  font: 12px arial, helvetica, sans-serif;  

 - ustawienia czacionki 

  padding-left: 10px; 

lewe dopełnienei ustawione na 10 pikseli 

}  
 

5.

 

Opis najważniejszych selektorów kaskadowych arkuszy stylów  

 

Kolory 
Nazwa koloru określana może być tekstowo, szesnastkowo bądź też przez wartość 
RGB. Przykładowy zapis: {color: red;} bądź {color: #00FFFF} 

 

Właściwości tekstu  
Blok tekstu na stronie formatowany może być (a nawet powinien) przez style CSS. 
Można określić następujące właściwości: 

o

 

Poziome wyrównanie tekstu text-align 
text-align: left; – wyrównanie do lewej, text-align: right; – do prawej, text-
align: center; –
 wycentrowanie, text-align: justify; - wyjustowanie. 

o

 

Pionowe wyrównanie tekstu vertical-align  
vertical-align: sub; - indeks dolny, vertical-align: super;  - indeks gówny, 
vertical-align:  bottom;  -  wyrównanie  do  dolnej  części  elementu,  vertical-
align:middle;  
-  wyrównanie  do  śrokowej  części  elementu,  vertical-align: 
top;  
  -  wyrówanie  do  górnej  części  elementu,  vertical-align:text-top;  - 
wyrównanie  do  górnej  krawędzi  tekstu,  vertical-align:text-bottom;  -  
wyrównanie do dolnej krawędzi tekstu. 

o

 

Dekoracja tekstu text-decoration 
text-decoration:underline; - podkreślenie dolne, text-decoration:overline; - 
podkreślenie górne, text-decoration:blin; - migający tekst. 

o

 

Przekształcenie tekstu text:transform 
text:transform:capitalize; 

duża 

pierwsza 

litera 

wyrazu, 

text:transform:uppercase; 

duże 

wszystkie 

litery, 

text:transform:lowercase; - małe wszystkie litery.  

 

Właściwości czcionki 
Jedną  z  najważniejszych  funkcji  oferowanych  przez  kaskadowe  arkusze  stylów 
CSS jest możliwość formatowania wyglądu czcionki.  

o

 

Rodzaj czcionki font-family 
font-family:  nazwa  czcionki;  -  wpisanie  nazwy  czcionki,  np.  Arial,  font-
family:serif;  
-  dowolna  czcionka  z  rodziny  serif,  font-family:sans-serif;  - 
dowolna czcionka sans-serif. 

background image

mgr inż. Zbigniew Kęsy – Materiały dydaktyczne  

Kaskadowe arkusze stylów CSS 

6 

 

o

 

Rozmiar czcionki font-family 
font-family:rozmiar;  -  rozmiar  zdefiniowany  za  pomocą  pikseli, 
centymetrów,  procentów  itp.,  font-family:small;  -  mały  rozmiar,  font-
family:medium; - 
standardowy  rozmiar czcionki,  font-family:large; - duży 
rozmiar czcionki. 

o

 

Waga czcionki font-weight 
font-weight:normal; font-weight:bold; font-weight:bolder;  - wiadomo. 

o

 

Styl czcionki font-style 
font-style:normal; font-style:italic; font-style:obelique; - czcionka pochyła. 

o

 

Szerokość czcionki font-stretch 
font-stretch:normal;  -  czcionka  o  domyślanej  szerokości,  font-
stretch:wider;  -  
czcionka  o  dużej  szerokości,  font-stretch:narrower;    - 
czcionka o małej szerokości. 

 

Właściwości list 
Kaskadowe arkusze stylów umożliwiają również kontrolowanie właściwości list. 

o

 

Typ listy list-style-type 

list-style-type:disc;  list-style-type:circle;  list-style-type:square;  list-style-
type:decimal; list-style-type:armenian; list-style-type:georgian; 
- poszczególne 
wartości  wypunktowują  listę  za  pomocą  elementów  graficznych,  numerów 
rzymskich i arabskich. 

o

 

Pozycja listy względem wypunktowania list-style-position 

list-style-position:inside;  -  wypunktowanie  schowane  jest  do  treści 
podpunktów,  list-style-position:outside;  -  wypunktowanie  znajduje  się  na 
zewnątrz podpunktów. 

 

Kolor i tło 
Za pomocą CSSa można określić wygląd tła i koloru, dla wybranych elementów. 
W  zależności  od  potrzeb  można  zdefiniować  tło  będące  wartością  koloru  lub 
obrazkiem. 

o

 

Kolor elementu color 

o

 

Kolor tła background-color 

background-color:nazwa lub wartość koloru; background-color:transparent; -  
tło niewidoczne. 

o

 

Element graficzny jako tło background-image 

background-image:url;  -  adres  url  pliku  graficznego  stanowiącego  tło, 
background-image:none; - brak tła z pliku graficznego.  

o

 

Zatrzymanie graficznego tła background-attachment  

background-attachment:  fixed;  -  obrazek  w  tle  jest  unieruchomiony  podczas 
przewijania strony, background-attachment:scroll; - obrazek w tle przewija się 
razem z zawartością strony. 

o

 

Kontrolowanie powielanie graficznego tła background-repeat  

background-repeat:repeat;  -  powielanie  tła  w  pionie  i  w  poziomie, 
background-repeat:repeat-x;  background-repeat:repeat-y;  -  powielanie  w 

background image

mgr inż. Zbigniew Kęsy – Materiały dydaktyczne  

Kaskadowe arkusze stylów CSS 

7 

 

poziomie (x) lub w pionie (y), background-repeat:no-repeat; - brak powielania 
tła.  

 

Marginesy 
Margines  to  obszar  występujący  po  zewnętrznej  stronie  obramowania  elementu, 
obecny w każdym elemencie wykorzystanym na  stronie WWW. Za pomocą CSS 
można kontrolować lewy, prawy i górny oraz dolny margines.  

o

 

Lewy margines margin-left 
margin-left:wartość  liczbowa;  margin-left:  wartość  procentowa;  margin-
left:auto; - 
przeglądarka automatycznie ustawia marginesy. 

o

 

Prawy margines margin-right 
margin-right:wartość  liczbowa;  margin-right:  wartość  procentowa; 
margin-right:auto; - 
przeglądarka automatycznie ustawia marginesy. 

o

 

Górny margines margin-top 
margin-top:wartość  liczbowa;  margin-top:  wartość  procentowa;  margin-
top:auto; - 
przeglądarka automatycznie ustawia marginesy. 

o

 

Dolny margines margin-bottom 
margin-bottom:wartość  liczbowa;  margin-bottom:  wartość  procentowa; 
margin-bottom:auto; - 
przeglądarka automatycznie ustawia marginesy. 

o

 

Zbiorczy zapis właściwości marginesów 
margin: góra prawy dół lewy; np.: margin 1cm 0 1cm 0;  

 

Dopełnienie 
Dopełnienie  jest  to  obszar  występujący  po  wewnętrznej  stronie  obramowania 
elementu i obecny w każdym elemencie na stronie internetowej.  Za pomocą CSS 
można kontrolować lewe, prawe, górne oraz dolne dopełnienia. Warto wspomnieć 
iż dopełnienie bywa czasem nazywane również marginesem wewnętrznym.  

o

 

Lewe dopełnienie padding-left 
padding -left:wartość liczbowa; padding -left: wartość procentowa. 

o

 

Prawe dopełnienie padding-right 
padding -right:wartość liczbowa; padding -right: wartość procentowa;  

o

 

Górne dopełnienie padding-top 
padding-top:wartość liczbowa; padding-top: wartość procentowa; margin- 

o

 

Dolne dopełnienie padding-bottom 
padding -bottom:wartość liczbowa; padding-bottom: wartość procentowa; 

o

 

Zbiorczy zapis właściwości dopełnień 
pudding:góra prawy dół lewey; 

 

Obramowanie 
Obramowanie  występuje  pomiędzy  marginesem  a  dopełnieniem  i  jest  kolejnym 
elementem 

składowym 

modelu 

pudełkowego 

strony 

WWW. 

Typowe 

obramowanie  przybiera  formę  pojedynczej  lub  podwójnej  linii  o  ciągłej  lub 
przerywanej strukturze i dowolnym kolorze. 

 

 

Styl obramowania 

o

 

Górne obramowanie border-top-style 

background image

mgr inż. Zbigniew Kęsy – Materiały dydaktyczne  

Kaskadowe arkusze stylów CSS 

8 

 

border-top-style:none; 

border-top-style:dotted; 

border-top-style:dashed; 

border-top-style:solid; 

border-top-style:double; 

border-top-style:wave; 

border-top-style:groove; 

border-top-style:ridge; 

border-top-style:inset; 

border-top-style:outset;  

o

 

Prawe obramowanie border-right-style 

o

 

Dolne obramowanie border-bottom-style 

o

 

Lewe obramowanie border-left-style 

Szerokość obramowania 

o

 

Górne obramowanie border-top-width 

border-top-width:none;  -  brako  obramowania,  border-top-width:  wartość 
liczbowa;  border-top-width:wartość  porcentowa;  border-top-width:thin  
– 
cienkie  obramowanie,  border-top-width:medium;  -  średnie  obramowanie, 
border-top-width:thin; - grube obramowanie. 

o

 

Prawe obramowanie border-right-width 

o

 

Dolne obramowanie border-bottom-width 

o

 

Lewe obramowanie border-left-width 

Kolor obramowania 

o

 

Górne obramowanie border-top-color 

border-top-color:color; - nazwa lub wartość koloru. 

o

 

Prawe obramowanie border-right-color 

o

 

Dolne obramowanie border-bottom-color 

o

 

Lewe obramowanie border-left-color 

Zbiorczy zapis właściwości obramowania 
Możemy  zastosować  dwa  rodzaje  zbiorczego  zapisu  właściwości.  Albo  zapis 
ten  będzie  się  tyczył  konkretnej  własności,  np.  stylu  wszystkich  obramowań, 
albo też będzie się tyczył konkretnego, np. prawego obramowania. 
Można więc ustawić np.: border-style: dotted solid dotted solid; 
Lub border-right: solid thin blue; 

 

Wymiary 
Za  pomocą  kaskadowych  arkuszów  styli  można  określić  wymiary  większości 
elementów na stronie internetowej. 

o

 

Szerokość width 

o

 

Minimalna szerokość min-width 

o

 

Maksymalna szerokość max-width 

o

 

Wysokość height 

o

 

Minimalna wysokość min-height 

o

 

Maksymalna wysokość max-height 

 

Pozycjonowanie elementów 
Pozycjonowanie elementów za pomocą CSSa to jedno z najważniejszych narzędzi 
udostępnianych  przez  kaskadowe  arkusze  stylów.  Za  pomocą  odpowiednich 
stylów  można  stworzyć  nowoczesną  stronę  pozbawioną  tabel  i  wolną  od  wielu 
ograniczeń.  
 

background image

mgr inż. Zbigniew Kęsy – Materiały dydaktyczne  

Kaskadowe arkusze stylów CSS 

9 

 

 

 

Rodzaj pozycjonowania position 

 

  position:static;  -  pozycjonowanie  tradycyjne  (statyczne),  każdy  element  ma              
swoje miejsce, position:realtive;  - element zmienia pozycję i nie ma to wpływu 
na pozostałą część witryny, position:absolute;  - określa stałą pozycję względem 
boku  okna  przeglądarki,  position:fixed;    -  element  zajmuje  stałą  pozycję  i  nie 
zmienia jej nawet podczas przewijania dokumentu. 

 

Określanie pozycji 

o

 

Względem górnej krawędzi top 

top:auto; - w sposób automatyczny określana jest pozycja elementu; top:wartość 
liczbowa; - 
wartość określająca położenie elementu. 

o

 

Względem prawej krawędzi right 

o

 

Względem dolnej krawędzi bottom 

o

 

Względem lewej krawędzi left 

Pływanie elementu 

o

 

float:left;  -  element  znajduje  się  po  lewej  stronie,  float:right;  -  element 
znajduje  się  po  prawej  stronie,  float:none;  -  element  zajmuje  pozycję 
domyślną.  

Tamowanie elementów 

o

 

clear:left;  -  wymusza  nową  linię  pod  obiektem  umiejscowionym  po  lewej 
stronie, clear:right;  - wymusza nową linię pod obiektem umiejscowionym 
po  prawej  stronie,  clear:none;    -  element  zajmuje  pozycję  domyślną, 
clear:both;  -  wymusza  nową  linię  pod  obiektem  bez  względu  na  jego 
położenie.