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/
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
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)
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>)
<!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”
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
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
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
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.
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
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>
<!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
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 podawać wartości we właściwych jednostkach.
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
<!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)
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.
5. Pozycjonowanie tekstu – znacznik div i arkusze stylów.
Zastosowanie- „Tabele” wykonane za pomocą znacznika div i arkuszy stylów
Przykład 1
Rys.21. Strony z „tabelami” wykonane za pomocą znaczników div i arkuszy stylów
<!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
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
<!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
<!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
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
<!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 pliku styl7.css (kontekstowe i użytkownika)
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)
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 (kontekstowe i użytkownika)
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 */
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, can have from one to four styles none
hidden 4 1 6 1
dotted 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
Property Description Values IE F N W3C
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
Dimension
On-line examples
Property Description Values IE F N W3C
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
Property Description Values IE F N W3C
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 iconmenu 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 a
normal font normal
small-caps 4 1 6 1
font-weight Sets the weight of a font normal bold bolder lighter 100200 300 400 500 600 700800 900
4 1 4 1
Generated Content
Property Description Values IE F N W3C
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
Property Description Values IE F N W3C
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 disccircle 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
Property Description Values IE F N W3C
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
Property Description Values IE F N W3C
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
Property Description Values IE F N W3C
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
Property Description Values IE F N W3C
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