Kaskadowe arkusze stylów CSS

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

Kaskadowe arkusze stylów CSS

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.

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>

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

Kaskadowe arkusze stylów CSS

</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!

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;}

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

Kaskadowe arkusze stylów CSS

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)

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

}

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

Kaskadowe arkusze stylów CSS

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>
©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

}

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

Kaskadowe arkusze stylów CSS

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

}

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:

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.

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.

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

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.

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.

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

Kaskadowe arkusze stylów CSS

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.

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

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

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.

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.

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.

Kolor elementu color

Kolor tła background-color

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

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.

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.

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

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

Kaskadowe arkusze stylów CSS

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.

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

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

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

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

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.

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

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

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

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

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

Górne obramowanie border-top-style

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

Kaskadowe arkusze stylów CSS

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;

Prawe obramowanie border-right-style

Dolne obramowanie border-bottom-style

Lewe obramowanie border-left-style

Szerokość obramowania

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.

Prawe obramowanie border-right-width

Dolne obramowanie border-bottom-width

Lewe obramowanie border-left-width

Kolor obramowania

Górne obramowanie border-top-color

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

Prawe obramowanie border-right-color

Dolne obramowanie border-bottom-color

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.

Szerokość width

Minimalna szerokość min-width

Maksymalna szerokość max-width

Wysokość height

Minimalna wysokość min-height

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ń.

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

Kaskadowe arkusze stylów CSS

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

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.

Względem prawej krawędzi right

Względem dolnej krawędzi bottom

Względem lewej krawędzi left

Pływanie elementu

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

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.

Wyszukiwarka

Podobne podstrony:
ABC kaskadowych arkuszy stylow CSS abccss(1)
ABC kaskadowych arkuszy stylow CSS abccss
ABC kaskadowych arkuszy stylow CSS abccss
ABC kaskadowych arkuszy stylow CSS 2
ABC kaskadowych arkuszy stylow CSS abccss(1)
ABC kaskadowych arkuszy stylow CSS
HTML CSS Kaskadowe arkusze stylów 03 2005
CSS – kaskadowe arkusze stylów
Kaskadowe arkusze stylów 1
Kaskadowe arkusze stylów 1
CSS3 Kaskadowe arkusze stylow cwiczenia praktyczne cwcss3 2
CSS3 Kaskadowe arkusze stylow cwiczenia praktyczne

więcej podobnych podstron