Wykład 5 Kaskadowe arkusze stylów CSS – element dynamiczny j

(1)

Wykład 5

Kaskadowe arkusze stylów CSS – element dynamiczny języka HTML (DHTML)

Kaskadowe arkusze stylów pozwalają projektantowi:

• kontrolować wygląd dokumentu

• oddzielić tę kontrolę od języka HTML, czyli od struktury dokumentu

• łączyć w sposób uporządkowany sekwencję informacji na temat stylu z wielu źródeł – stąd kaskadowe arkusze stylów- wg kolejności priorytetów

(najwyŜszy priorytet ma sposób 1):

1. włączane arkusze stylów (w elementach HTML jako atrybut) 2. wewnętrzne arkusze stylów (w bloku znacznika <head>) 3. zewnętrzne arkusze stylów

4. domyślne style przeglądarki

1. Dołączanie arkuszy stylów do strony www

Rys.1. Prosty przykład strony www

Walidacja:

http://jigsaw.w3.org/css-validator/

(2)

1.1. Włączane arkusze stylów zastosowane do danych znaczników HTML – atrybut style

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8"/>

<title>Arkusze stylów</title>

</head>

<body>

<h1 style="color:blue ">Styl nagłówka</h1>

<div style="color:red"> Tekst akapitu.</div>

</body>

</html>

Rys.2. Włączany arkusz stylów jako atrybut w znacznikach <h1> i <div> dla strony z rys.1

1.2. Wewnętrzny arkusz stylów <style> </style> umieszczony w nagłówku dokumentu HTML (w bloku <head>)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8"/>

<title>Arkusze stylów</title>

<style type="text/css">

body { color: red}

h1 { color: blue } </style>

</head>

<body>

<h1>Styl nagłówka </h1>

<div> Tekst akapitu.</div>

</body>

</html>

Rys.3. Wewnętrzny arkusz stylów w bloku znacznika <head > dla strony z rys.1

(3)

1.3. Zastosowanie zewnętrznych arkuszy stylów

body { color: red } h1 { color: blue }

Rys. 4. Definicja arkusza stylów w pliku zewnętrznym Styl1.css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8"/>

<title>Arkusze stylów</title>

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

</head>

<body>

<h1>Styl nagłówka</h1>

<div> Tekst akapitu.</div>

</body>

</html>

Rys. 5. Sposób dołączania zewnętrznych arkuszy stylów, których definicja jest umieszczona w pliku zewnętrznym

Zastosowanie pliku zewnętrznego ułatwia ujednolicenie wyglądu stron www wchodzących w skład prezentacji.

Zasady stosowania ze stylów umieszczonych w plikach zewnętrznych

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

• Styl narzucony (rel="stylesheet") jest stosowany zawsze, niezaleŜnie od wyboru dokonanego przez uŜytkownika

• Styl domyślny (title="dowolny styl", gdy rel = "stylesheet") jest stosowany po załadowaniu strony, lecz moŜna go zastąpić stylami alternatywnymi

• Style alternatywne dla rel= "alternate stylesheet" moŜna wybierać jak

opcje dla uŜytkownika (w przeciwieństwie do stylu domyślnego)

(4)

Przykład definiowania stylu nagłówka i akapitów za pomocą stylu narzuconego ( <link rel="stylesheet" href="styl2.css"

type="text/css"></link>) i uzupełniania go za pomocą stylu domyślnego ( <link rel="stylesheet" title="Plain (by David Baron) - domyślny"

href="http://dbaron.org/style/plain"></link> ) lub stylów alternatywnych np.

( <link rel="alternate stylesheet" title="Modernist"

href="http://www.w3.org/StyleSheets/Core/Modernist"></link>)

(5)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8"/>

<title>Arkusze stylów</title>

<link rel="alternate stylesheet"

title="Oldstyle"

href="http://www.w3.org/StyleSheets/Core/Oldstyle"></link>

<link rel="alternate stylesheet"

title="Modernist"

href="http://www.w3.org/StyleSheets/Core/Modernist"></link>

<link rel="alternate stylesheet"

title="Steely"

href="http://www.w3.org/StyleSheets/Core/Steely"></link>

<link rel="alternate stylesheet"

title="Forest (by David Baron)"

href="http://www.w3.org/StyleSheets/Core/Steely"></link>

<link rel="alternate stylesheet"

title="Forest (by David Baron)"

href="http://dbaron.org/style/forest"></link>

<link rel="stylesheet" title="Plain (by David Baron) - domyślny"

href="http://dbaron.org/style/plain"></link>

<link rel="stylesheet" title=" - domyślny" href="styl2_.css"></link>

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

</head>

<body>

<h1 id="body1">Styl body1 nagłówka</h1>

<p id="box1" id="box3"> Styl box1 akapitu.</p>

<p id="box2"> Styl box2 akapitu.</p>

</body>

</html>

Dołączanie stylów alternatywnych wg.

„ http://www.w3.org/Style/Examples/007/alternatives.html”

(6)

2. Przykłady definiowania własnych arkuszy stylów

Rys.6. Definiowanie własnych stylów

2.1. Zastosowanie własnych (uŜytkownika) wewnętrznych arkuszy stylów - zastosowanie atrybutu id

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8"/>

<title>Arkusze styl?</title>

<style type="text/css">

h1#body1 { font-family: "Gill Sans", sans-serif;

font-size: 12pt;

margin-left:50px;color:blue;}

#box1 {position: relative; left:50px; width:150px;color:red; overflow:auto;}

#box2 {position: relative; top:5px; left:50px; color:green; overflow:auto;}

</style>

</head>

<body>

<h1 id="body1">Styl body1 nagłówka </h1>

<p id="box1"> Styl box1 akapitu.</p>

<p id="box2"> Styl box2 akapitu.</p>

</body>

</html>

Rys.7. Strona www o postaci z rys.6- definicja wewnętrznych arkuszy stylów

uŜytkownika w nagłówku dokumentu - zastosowanie atrybutu id

(7)

2.2. Zastosowanie własnych (uŜytkownika) zewnętrznych arkuszy stylów – atrybut id

h1#body1 {

font-family: "Gill Sans", sans-serif;

font-size: 12pt;

margin-left:50px;color:blue }

#box1 {position: relative; left:50px; width:150px;color:red; overflow:auto}

#box2 {position: relative; top:5px; left:50px; color:green; overflow:auto}

Rys.8. Plik zewnętrzny styl2.css z definicją arkusza stylów uŜytkownika wykorzystywanych za pomocą atrybutu id

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8"/>

<title>Arkusze stylów</title>

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

</head>

<body>

<h1 id="body1">Styl body1 nagłówka </h1>

<p id="box1"> Styl box1 akapitu.</p>

<p id="box2"> Styl box2 akapitu.</p>

</body>

</html>

Rys. 9. Definicja strony o postaci z rys.6 z wykorzystaniem definicji zewnętrznych arkuszy stylów uŜytkownika w pliku styl2.css, stosowanych za pomocą

atrybutu id

(8)

2.3. Zastosowanie definicji własnych (uŜytkownika) zewnętrznych arkuszy stylów - zastosowanie atrybutu class

h1.body1 {

font-family: "Gill Sans", sans-serif;

font-size: 12pt;

margin-left:50px;color:blue;

} .box1

{position:relative;left:50px;width:150px;color:red; overflow:auto;}

.box2

{position: relative; top:5px; left:50px; color:green; overflow:auto;}

Rys.10. Plik zewnętrzny styl3.css z definicją zewnętrznego arkusza stylów uŜytkownika uŜywanego za pomocą atrybutu class

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8"/>

<title>Arkusze stylów</title>

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

</head>

<body>

<h1 class="body1">Styl body1 nagłówka </h1>

<p class="box1"> Styl box1 akapitu.</p>

<p class="box2"> Styl box2 akapitu.</p>

</body>

</html>

Rys.11. Strona www o postaci z rys.6- definiowanie zewnętrznych arkuszy

stylów uŜytkownika - zastosowanie atrybutu class

(9)

Property Description Values margin A shorthand property

for setting the margin properties in one

declaration

margin-top |margin-right

|margin-bottom|margin-left

margin-bottom Sets the bottom

margin of an element

auto| length|%

margin-left Sets the left margin of an element

auto| length|%

margin-right Sets the right margin of an element

auto| length |%

margin-top Sets the top margin of an element

auto|length|%

Property Description Values

color Sets the color of a text color direction Sets the text direction ltr|rtl letter-spacing Increase or decrease the

space between characters

normal|length

text-align Aligns the text in an element

left|right|center|justify

text-decoration Adds decoration to text none|underline|overline|

line-through|blink text-indent Indents the first line of text

in an element

length

%

text-shadow none|color|length

text-transform Controls the letters in an element

none|capitalize|uppercase lowercase

unicode-bidi normal|embed|bidi-override

white-space Sets how white space inside an element is handled

normal pre nowrap word-spacing Increase or decrease the

space between words

normal length

Uwaga: W trzeciej kolumnie dla elementów napisanych pochyloną czcionką naleŜy

podawać wartości we właściwych jednostkach.

(10)

2.4. Zastosowanie selektorów kontekstowych h1 i {

font-family: "Gill Sans", sans-serif;

font-size: 12pt;

color:blue }

#box1 {position: relative; left:50px; width:150px;color:red;overflow:auto}

#box2 {position: relative; top:5px; left:50px; color:green;overflow:auto}

Rys.12. Plik zewnętrzny styl4.css z definicjami zewnętrznych arkuszy stylów uŜytkownika i kontekstowego <i> dla znacznika <h1>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8"/>

<title>Arkusze stylów</title>

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

</head>

<body>

<h1> <i> Styl nagłówka</i></h1>

<h1> Styl nagłówka</h1>

<p id="box1"> <i> Styl box1 akapitu.</i></p>

<p id="box2"> Styl box2 akapitu.</p>

</body>

</html>

Rys.13. Strona www o postaci z rys.14-zastosowanie selektora kontekstowego <i>

w zewnętrznych arkuszach stylów

Rys.14. Zastosowanie selektora kontekstowego <i> do wyróŜnienia stylu nagłówka

(11)

3.Wygląd czcionki i jej styl

Rys.15. Zastosowanie atrybutu font

body {font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;

color:red; background-color:#FFFFFF}

.tekst1 { font: 12pt/14pt sans-serif } .tekst2 { font: 80% sans-serif }

.tekst3 { font: x-large/110% "new century schoolbook", serif}

.tekst4 { font: bold italic large Palatino, serif }

.tekst5 { font: normal small-caps 120%/120% fantasy }

.tekst6 { font: oblique 12pt "Helvetica Nue",serif; font-stretch:condensed}

h1{color:blue;background-color:#FFFFFF}

Rys.16. Plik zewnętrzny styl5.css z definicjami zewnętrznych arkuszy stylów

uŜytkownika i kontekstowych <h1> i <body>

(12)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8"/>

<title>Arkusze stylów</title>

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

</head>

<body>

<h1>Test-1</h1>

<h2>Test-1</h2>

<h1 style= "font-family: 'Times New Roman', Times, serif">Test0</h1>

<p class="tekst1">Test1</p>

<p class="tekst2">Test2</p>

<p class="tekst3">Test3</p>

<p class="tekst4">Test4</p>

<p class="tekst5">Test5</p>

<p class="tekst6">Test6</p>

<p>Test 7</p>

</body>

</html>

Rys.17. Strona www o postaci z rys.15 - zastosowanie selektorów kontekstowych <h1> oraz stylów uŜytkownika w zewnętrznych

arkuszach stylów

(13)

Ustawienie jednoczesne właściwości czcionki – atrybut font

Property Description Values

font A shorthand property for setting all of the

properties for a font in one declaration

font-style |font-variant font-weight | font-family font-size/line-height caption | icon

menu | message-box small-caption |status-bar font-family A prioritized list of font

family names and/or generic family names for an element

family-name generic-family

font-size Sets the size of a font xx-small | x-small small | medium large | x-large xx-large

smaller | larger length | % font-size-adjust Specifies an aspect value

for an element that will preserve the x-height of the first-choice font

none number

font-stretch Condenses or expands the current font-family

normal wider narrower

ultra-condensed extra-condensed condensed

semi-condensed semi-expanded expanded

extra-expanded ultra-expanded font-style Sets the style of the font normal | italic

oblique font-variant Displays text in a small-

caps font or a normal font

normal small-caps

font-weight Sets the weight of a font normal | bold | bolder lighter

100 | 200 | 300 | 400 | 500 600 | 700 | 800 | 900

Uwaga: W trzeciej kolumnie dla elementów napisanych pochyloną czcionką naleŜy

(14)

4. Zewnętrzne arkusze stylów dla tabel i tła

Rys.18. Formatowanie tabeli i tła za pomocą zewnętrznych arkuszy stylów

table { color:blue;

border-top: 8px solid #003366; border-right: 6px solid #123456;

border-bottom: 2px solid #FF2356; border-left: 4px solid #FF0033;}

td { color:red;font: 12pt/14pt sans-serif; padding: 10px;

border-top: 8px solid #000000; border-right: 6px solid #000000;

border-bottom: 2px solid #000000; border-left: 4px solid #000000;}

th {

color:green; font: bold italic large Palatino, serif; padding: 10px;

border-top: 8px solid #FF0000; border-right: 6px solid #FF0000;

border-bottom: 2px solid #FF0000; border-left: 4px solid #FF0000;}

body { background-image: url(clouds.wmf);

background-repeat: repeat-x;

background-position: center;}

.tlo2 { background-color:#FFFFFF; margin-left:50px;}

Rys. 19. Zewnętrzne arkusze stylów w pliku styl6.css ze stylem tabeli (<table>,

<th><td>) oraz tła (background) dla <body> oraz uŜytkownika .tlo2

(15)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8"/>

<title>Arkusze styl?</title>

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

</head>

<body>

<h1>Nagłówek H1</h1>

<h2>Nagłówek H2</h2>

<h3>Nagłówek H3</h3>

<h4>Nagłówek H4</h4>

<p>Napis w akapicie</p>

<table class="tlo2">

<tr>

<th>Nagłówek kolumny 1</th>

<th>Nagłówek kolumny 2</th>

</tr>

<tr>

<td>Pierwsza komórka w pierwszym wierszu</td>

<td>Druga komórka w pierwszym wierszu</td>

</tr>

<tr>

<td>Pierwsza komórka w drugim wierszu</td>

<td>Druga komórka w drugim wierszu</td>

</tr>

</table>

</body>

</html>

Rys. 20. Kod html strony www z rys. 18 stosujący zewnętrzne arkusze stylów z

pliku styl6.css (kontekstowe i uŜytkownika)

(16)

Property Description Values background A shorthand

property for setting all background properties in one declaration

background-color background-image

background-repeat background- attachment background-position

background-attachment Sets whether a background image is fixed or scrolls with the rest of the page

scroll fixed

background-color Sets the background color of an element

color-rgb color-hex color-name transparent background-image Sets an image

as the

background

url none

background-position Sets the

starting position of a background image

top left top center top right center left center center center right bottom left bottom center bottom right x-% y-%

x-pos y-pos background-repeat Sets if/how a

background image will be repeated

repeat repeat-x repeat-y no-repeat

Uwaga: W trzeciej kolumnie dla elementów napisanych pochyloną czcionką

naleŜy podawać wartości we właściwych jednostkach.

(17)

5. Pozycjonowanie tekstu – znacznik div i arkusze stylów.

Zastosowanie- „Tabele” wykonane za pomocą znacznika div i arkuszy stylów Przykład 1

(18)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8"/>

<title> Znacznik div - wersja z kaskadowymi arkuszami stylów. </title>

<link rel="stylesheet" type="text/css" href="styldiv0.css" media="screen" />

</head>

<body>

<div class="tabela">

<div class="naglowek">

<h1 class="naglowek">Znaczniki div i arkusze stylów. </h1> </div>

<div class="komorka1"> <p>Pierwsza komórka.</p> </div>

<div class="komorka2"> <p> Środkowa komórka </p> </div>

<div class="komorka3"> <p>Trzecia komórka.</p>

<object class="rozmiar" type="text/html" data="b3.html"></object>

</div>

<div class="stopka"> <p>Podpis tabeli</p> </div>

</div>

</body>

</html>

Rys.22. Kod html strony z rys.21–rolę znacznika <iframe> przejął <object>

div.tabela

{ width: 900px; height: 400px; margin: 0 auto; } div.naglowek, div.stopka

{padding:0.5em; color:white; background-color:blue; clear:left; } h1.naglowek

{ padding:0; margin:0; } div.komorka1

{ float: left; height: 100%; width: 20%; margin: 0; padding: 0; } div.komorka2

{ float: left; height: 100%; width:20%; margin: 0; padding: 0;

border-left:1px solid gray; } div.komorka3

{ float: left; height: 100%; margin: 0; padding: 0;

border-left:1px solid gray; } object.rozmiar

{ width:100%; height:80%; }

Rys.23. Kod css dla strony z rys.21–definicja stylów div, h1 i object

(19)

Przykład 2 – dokonano zmiany arkusza stylów- wprowadzono definicję „wiersza”

Rys. 24. Znaczniki div i arkusz stylów zastosowane do budowy „jednowierszowej tabeli” z nagłówkiem i podpisem

div.tabela

{width: 900px; height: 400px; margin: 0 auto; } div.naglowek,div.stopka

{padding:0.5em; color:white; background-color:blue; clear:left; } h1.naglowek

{padding:0; margin:0;}

div.wiersz

{width:100%; height:50%;

border-bottom:1px solid gray; border-top:1px solid gray;

border-right:1px solid gray;}

div.komorka1, div.komorka2

{float: left; height:100%; margin: 0; padding: 0;

border-left:1px solid gray; } div.komorka2

{ width:20%; } object.rozmiar

{ width:100%; height:80%;}

Rys.25 Arkusz stylów z wprowadzonym stylem wiersza

(20)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8"/>

<title> Znacznik div - wersja z kaskadowymi arkuszami stylów. </title>

<link rel="stylesheet" type="text/css" href="styldiv.css" media="screen" />

</head>

<body>

<div class="tabela">

<div class="naglowek"><h1 class="naglowek">Znaczniki div i arkusze stylów.</h1> </div>

<div class="wiersz">

<div class="komorka1"> <h2>Pierwsza komórka. </h2> </div>

<div class="komorka1"> <h2> Środkowa komórka. </h2> </div>

<div class="komorka2"> <h2>Trzecia komórka. </h2>

<object class="rozmiar" type="text/html" data="b3.html"> </object> </div>

</div>

<div class="stopka"> <h2>Podpis tabeli</h2> </div>

</div>

</body>

</html>

Rys.26. Kod html „jednowierszowej tabeli”

Przykład 3. Plik ze stylem bez zmian, dodano drugi “wiersz” .

Rys. 27. Znaczniki div i arkusz stylów zastosowane do budowy „dwuwierszowej tabeli” z

nagłówkiem i podpisem

(21)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8"/>

<title> Znacznik div - wersja z kaskadowymi arkuszami stylów. </title>

<link rel="stylesheet" type="text/css" href="styldiv.css" media="screen" />

</head>

<body>

<div class="tabela">

<div class="naglowek"><h1 class="naglowek"> Znaczniki div i arkusze stylów.</h1> </div>

<div class="wiersz">

<div class="komorka1"><h2>Pierwsza komórka. </h2> </div>

<div class="komorka1"><h2> Środkowa komórka. </h2> </div>

<div class="komorka2"><h2>Trzecia komórka. </h2>

<object class="rozmiar" type="text/html" data="b3.html"> </object> </div>

</div>

<div class="wiersz">

<div class="komorka1"><h2>Pierwsza komórka. </h2> </div>

<div class="komorka1"><h2> Środkowa komórka. </h2> </div>

<div class="komorka2"><h2>Trzecia komórka. </h2>

<object class="rozmiar" type="text/html" data="b3.html"> </object> </div>

</div>

<div class="stopka"> <h2>Podpis tabeli</h2> </div>

</div>

</body>

</html>

Rys. 28. Kod html “tablicy dwuwierszowej” wykonanej za pomocą znaczników div i arkuszy

stylow

(22)

6. Zewnętrzne arkusze stylów dla formularzy i list

Rys.29. Formatowanie elementów formularza (<input>, <textarea>, <select>) oraz listy <ol> i elementów listy <li> za pomocą zewnętrznych arkuszy stylów

kontekstowych i uŜytkownika

(23)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8"/>

<title>Formularz ankiety-zewnetrzne arkusze stylów</title>

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

</head>

<body>

<h2>Ankieta</h2>

<form method="post"

action="http://sprocket.ict.pwr.wroc.pl/~zkruczkiewicz/ankieta1.php">

<pre> <i>Podaj nazwisko:</i><input type ="text" name="nazwisko"

class="poletekstowe"/>

<i>Podaj imię</i> <input type ="text" name="imie"/></pre>

<p><i>Płeć</i>

<select name="plec" size="1">

<option>MęŜczyzna</option>

<option selected="selected" class="wybor">Kobieta</option>

</select></p>

<p><i>Podaj swoje umiejętności<br/>

Zaznacz wszystkie moŜliwe odpowiedzi</i> </p>

<ol>

<li><input type="checkbox" name="komputer" checked="checked"

class="wybor"/>Znajomość obsługi komputera</li>

<li><input type="checkbox" name="prawo_jazdy"/>

Posiadanie prawa jazdy</li>

<li><input type="checkbox" name="angielski" checked="checked"/>

Znajomość języka angielskiego</li>

<li><input type="checkbox" name="niemiecki"/>

Znajomość języka niemieckiego</li>

</ol>

<i>Napisz o swoich dodatkowych umiejętnościach</i><br/>

<textarea name="coment" rows="5" cols="50"></textarea>

<p> <input type="submit" value="Prześlij dane operacji"/><br/>

<input type="reset" value="Wyczyść dane" class="przycisk"/><br/> </p>

</form>

</body>

</html>

Rys. 30. Kod html strony www z rys. 21 stosujący zewnętrzne arkusze stylów z

(24)

input { background-color: #ececec; color: black;

font-family: arial, verdana, ms sans serif;

font-weight: bold;

font-size: 12pt }

textarea { background-color: gray; color: white;

border: black 2px solid;

font-family: arial, verdana, ms sans serif;

font-size: 12pt;

font-weight: normal }

select { font-family: arial, verdana, ms sans serif;

font-size: 12pt;font-weight: bold;

}

.przycisk { background-color: #c0c0c0; color: #778899;

font-family: verdana;

border: #000000 1px solid;

font-size: 12px;

}

.poletekstowe { background-color: #99ccff; color: #09c09c;

font-family: verdana;

font-size: 12pt;

}

.wybor { background-color: #FF0000; color: #000000;

border: #000000 solid 1px;

font-family: verdana;

font-size: 12px;

}

li { font-family: arial, verdana, ms sans serif;

font-size: 15px;

}

ol { list-style-type: upper-roman;

list-style-position: inside;

}

Rys. 31. Zewnętrzne arkusze stylów w pliku styl7.css ze stylami (<input>,

<textarea>, <ol>, <li>, <select>) oraz uŜytkownika (.wybor, .poletekstowe, .przycisk)

(25)

7. Połączenia – pseudoklasy dla znacznika <a>

Rys.32. Formatowanie połączeń <a> (visited, hover, active, link) za pomocą zewnętrznych arkuszy stylów kontekstowych i uŜytkownika ( uwaga: wybór linku oznacza

najechanie na jego tekst kursorem myszy )

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">

<head>

<meta http-equiv="content-type" content="text/html; charset= utf-8"/>

<title>Zewnętrzne arkusze stylów</title>

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

</head>

<body>

<h1>Czym jest XHTML</h1>

<p> XHTML słuŜy do tworzenia stron Internetowych. <br/>Pozwala on na:</p>

<ul type="circle">

<li><a href="c1.html" class="podkreslenie">

Wybrany link staje się podkreślony</a></li>

<li><a href="c3.html" class="wybor">Wybrany link zmienia styl napisu</a>

</li>

<li><a href="#" class="podswietlenie">Po wybraniu linku znika tekst</a>

</li>

<li><a href="b.html" class="ramka">

Po wybraniu link podświetla się i znika tekst.</a></li>

</ul>

</body>

</html>

Rys. 33. Kod html strony www z rys. 24 stosujący zewnętrzne arkusze stylów z pliku styl8.css

(26)

a:link {text-decoration:none;color: red;}

a:visited {color: green;}

a:hover {text-decoration:none;}

a:active {color: blue;}

a.podkreslenie {color: black;}

a.podkreslenie:visited {text-decoration:none;color: blue;}

a.podkreslenie:hover {text-decoration:underline;color: green;}

a.podkreslenie:active {color: red;}

a.podswietlenie:visited { color: gray; padding: 12px;}

a.podswietlenie:hover {color: white; background-color:white;

padding: 12px;}

a.wybor { font-family: arial, helvetica, sans-serif;

text-decoration: underline;}

a.wybor:hover {font-family: arial, helvetica, sans-serif; font-weight: bold;

text-decoration: underline; letter-spacing: 3px;}

a.ramka { background-color: #FFFFFF; color: #000000;

text-decoration: none; border: medium solid #000000;

font-family: Verdana, Arial, Helvetica, sans-serif;}

a.ramka:hover { background-color: #000000; color: #000000;

text-decoration: none;

border: medium solid #0000FF;

font-family: Verdana, Arial, Helvetica, sans-serif;}

Rys. 34. Zewnętrzne arkusze stylów w pliku styl8.css ze stylami dla znacznika

<a> oraz uŜytkownika (.wybor, .podswietlenie, .podkreslenie, .ramka)

Pseudoklasy dla znacznika <a> - przykłady stylów kolorów

a:link { color: red } /* unvisited links */

a:visited { color: blue } /* visited links */

a:hover { color: yellow } /* user hovers */

a:active { color: lime } /* active links */

(27)

Property Description Values IE F N W3C background A shorthand property for setting all

background properties in one declaration

background-color background-image background-repeat background-attachment background-position

4 1 6 1

background-attachment Sets whether a background image is fixed or scrolls with the rest of the page

scroll fixed

4 1 6 1

background-color Sets the background color of an element

color-rgb color-hex color-name transparent

4 1 4 1

background-image Sets an image as the background url none

4 1 4 1

background-position Sets the starting position of a background image

top left top center top right center left center center center right bottom left bottom center bottom right x-% y-%

x-pos y-pos

4 1 6 1

background-repeat Sets if/how a background image will be repeated

repeat repeat-x repeat-y no-repeat

4 1 4 1

Border

On-line examples

Property Description Values IE F N W3C

border A shorthand property for setting all of the properties for the four borders in one declaration

border-width border-style border-color

4 1 4 1

border-bottom A shorthand property for setting all of the properties for the bottom border in one declaration

border-bottom-width border-style

border-color

4 1 6 1

border-bottom-color Sets the color of the bottom border border-color 4 1 6 2 border-bottom-style Sets the style of the bottom border border-style 4 1 6 2 border-bottom-width Sets the width of the bottom border thin

medium thick length

4 1 4 1

border-color Sets the color of the four borders, can have from one to four colors

color 4 1 6 1

border-left A shorthand property for setting all of the properties for the left border in one declaration

border-left-width border-style border-color

4 1 6 1

border-left-color Sets the color of the left border border-color 4 1 6 2 border-left-style Sets the style of the left border border-style 4 1 6 2 border-left-width Sets the width of the left border thin

medium thick length

4 1 4 1

border-right A shorthand property for setting all of the properties for the right border in one declaration

border-right-width border-style border-color

4 1 6 1

border-right-color Sets the color of the right border border-color 4 1 6 2 border-right-style Sets the style of the right border border-style 4 1 6 2 border-right-width Sets the width of the right border thin

medium thick length

4 1 4 1

border-style Sets the style of the four borders, none 4 1 6 1

(28)

dashed solid double groove ridge inset outset border-top A shorthand property for setting all

of the properties for the top border in one declaration

border-top-width border-style border-color

4 1 6 1

border-top-color Sets the color of the top border border-color 4 1 6 2 border-top-style Sets the style of the top border border-style 4 1 6 2 border-top-width Sets the width of the top border thin

medium thick length

4 1 4 1

border-width A shorthand property for setting the width of the four borders in one declaration, can have from one to four values

thin medium thick length

4 1 4 1

Classification On-line examples

clear Sets the sides of an element where

other floating elements are not allowed

left right both none

4 1 4 1

cursor Specifies the type of cursor to be displayed

url auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help

4 1 6 2

display Sets how/if an element is displayed none inline block list-item run-in compact marker table inline-table table-row-group table-header-group table-footer-group table-row

table-column-group table-column table-cell table-caption

4 1 4 1

float Sets where an image or a text will appear in another element

left right none

4 1 4 1

position Places an element in a static, relative, absolute or fixed position

static relative absolute fixed

4 1 4 2

visibility Sets if an element should be visible or invisible

visible hidden collapse

4 1 6 2

(29)

Dimension On-line examples

height Sets the height of an element auto

length

%

4 1 6 1

line-height Sets the distance between lines normal number length

%

4 1 4 1

max-height Sets the maximum height of an element

none length

%

- 1 6 2

max-width Sets the maximum width of an element

none length

%

- 1 6 2

min-height Sets the minimum height of an element

length

%

- 1 6 2

min-width Sets the minimum width of an element

length

%

- 1 6 2

width Sets the width of an element auto

% length

4 1 4 1

Font

On-line examples

font A shorthand property for setting all of the properties for a font in one declaration

font-style font-variant font-weight

font-size/line-height font-family

caption icon menu message-box small-caption status-bar

4 1 4 1

font-family A prioritized list of font family names and/or generic family names for an element

family-name generic-family

3 1 4 1

font-size Sets the size of a font xx-small

x-small small medium large x-large xx-large smaller larger length

%

3 1 4 1

font-size-adjust Specifies an aspect value for an element that will preserve the x- height of the first-choice font

none number

- - - 2

font-stretch Condenses or expands the current font-family

normal wider narrower ultra-condensed extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded

- - - 2

font-style Sets the style of the font normal

italic oblique

4 1 4 1

font-variant Displays text in a small-caps font or normal 4 1 6 1

(30)

font-weight Sets the weight of a font normal bold bolder lighter 100 200 300 400 500 600 700 800 900

4 1 4 1

Generated Content

content Generates content in a document.

Used with the :before and :after pseudo-elements

string url

counter(name)

counter(name, list-style-type) counters(name, string) counters(name, string, list- style-type)

attr(X) open-quote close-quote no-open-quote no-close-quote

1 6 2

counter-increment Sets how much the counter

increments on each occurrence of a selector

none

identifier number

2

counter-reset Sets the value the counter is set to on each occurrence of a selector

none

identifier number

2

quotes Sets the type of quotation marks none string string

- 1 6 2

List and Marker On-line examples

list-style A shorthand property for setting all of the properties for a list in one declaration

list-style-type list-style-position list-style-image

4 1 6 1

list-style-image Sets an image as the list-item marker

none url

4 1 6 1

list-style-position Sets where the list-item marker is placed in the list

inside outside

4 1 6 1

list-style-type Sets the type of the list-item marker none disc circle square decimal

decimal-leading-zero lower-roman

upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin hebrew armenian georgian cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha

4 1 4 1

marker-offset auto

length

1 7 2

Margin

On-line examples

(31)

margin A shorthand property for setting the margin properties in one declaration

margin-top margin-right margin-bottom margin-left

4 1 4 1

margin-bottom Sets the bottom margin of an element

auto length

%

4 1 4 1

margin-left Sets the left margin of an element auto length

%

3 1 4 1

margin-right Sets the right margin of an element auto length

%

3 1 4 1

margin-top Sets the top margin of an element auto length

%

3 1 4 1

Outlines

outline A shorthand property for setting all the outline properties in one declaration

outline-color outline-style outline-width

- - - 2

outline-color Sets the color of the outline around an element

color invert

- - - 2

outline-style Sets the style of the outline around an element

none dotted dashed solid double groove ridge inset outset

- - - 2

outline-width Sets the width of the outline around an element

thin medium thick length

- - - 2

Padding

On-line examples

padding A shorthand property for setting all of the padding properties in one declaration

padding-top padding-right padding-bottom padding-left

4 1 4 1

padding-bottom Sets the bottom padding of an element

length

%

4 1 4 1

padding-left Sets the left padding of an element length

%

4 1 4 1

padding-right Sets the right padding of an element length

%

4 1 4 1

padding-top Sets the top padding of an element length

%

4 1 4 1

Positioning On-line examples

bottom Sets how far the bottom edge of an element is above/below the bottom edge of the parent element

auto

% length

5 1 6 2

clip Sets the shape of an element. The

element is clipped into this shape, and displayed

shape auto

4 1 6 2

left Sets how far the left edge of an

element is to the right/left of the left edge of the parent element

auto

% length

4 1 4 2

overflow Sets what happens if the content of an element overflow its area

visible hidden scroll auto

4 1 6 2

(32)

absolute fixed right Sets how far the right edge of an

element is to the left/right of the right edge of the parent element

auto

% length

5 1 6 2

top Sets how far the top edge of an

element is above/below the top edge of the parent element

auto

% length

4 1 4 2

vertical-align Sets the vertical alignment of an element

baseline sub super top text-top middle bottom text-bottom length

%

4 1 4 1

z-index Sets the stack order of an element auto number

4 1 6 2

Table

border-collapse Sets the border model of a table collapse separate

5 1 7 2

border-spacing Sets the distance between the borders of adjacent cells (only for the "separated borders" model)

length length - 1 6 2

caption-side Sets the position of the caption according to the table

top bottom left right

- 1 6 2

empty-cells Sets whether cells with no visible content should have borders or not (only for the "separated borders"

model)

show hide

- 1 6 2

table-layout Sets the algorithm used to lay out the table

auto fixed

5 1 6 2

Text

On-line examples

color Sets the color of a text color 3 1 4 1

direction Sets the text direction ltr

rtl

6 1 6 2

letter-spacing Increase or decrease the space between characters

normal length

4 1 6 1

text-align Aligns the text in an element left right center justify

4 1 4 1

text-decoration Adds decoration to text none underline overline line-through blink

4 1 4 1

text-indent Indents the first line of text in an element

length

%

4 1 4 1

text-shadow none

color length

text-transform Controls the letters in an element none capitalize uppercase lowercase

4 1 4 1

unicode-bidi normal

embed bidi-override

5 2

white-space Sets how white space inside an element is handled

normal pre nowrap

5 1 4 1

(33)

word-spacing Increase or decrease the space between words

normal length

6 1 6 1

Pseudo-classes On-line examples

Pseudo-class Purpose IE F N W3C

:active Adds special style to an activated element 4 1 1

:focus Adds special style to an element while the element has focus - - 2 :hover Adds special style to an element when you mouse over it 4 1 7 1

:link Adds special style to an unvisited link 3 1 4 1

:visited Adds special style to a visited link 3 1 4 1

:first-child Adds special style to an element that is the first child of some other element

1 7 2

:lang Allows the author to specify a language to use in a specified element 1 2 Pseudo-elements

On-line examples

Pseudo-element Purpose IE F N W3C

:first-letter Adds special style to the first letter of a text 5 1 1

:first-line Adds special style to the first line of a text 5 1 1

:before Inserts some content before an element 2

:after Inserts some content after an element 2