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

Transkrypt

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/
Zofia Kruczkiewicz, Wykład 5, HTML
1
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>)
<head>
<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
2
1.3. Zastosowanie zewnętrznych arkuszy stylów
body
h1
{ color: red }
{ color: blue }
Rys. 4. Definicja arkusza stylów w pliku zewnętrznym Styl1.css
<head>
<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
• 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)
3
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>)
4
<head>
<link rel="alternate stylesheet"
title="Oldstyle"
href="http://www.w3.org/StyleSheets/Core/Oldstyle"></link>
title="Modernist"
href="http://www.w3.org/StyleSheets/Core/Modernist"></link>
title="Steely"
href="http://www.w3.org/StyleSheets/Core/Steely"></link>
title="Forest (by David Baron)"
href="http://www.w3.org/StyleSheets/Core/Steely"></link>
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>
</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”
5
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
<head>
<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>
</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
6
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
<head>
</head>
<body>
<h1 id="body1">Styl body1 nagłówka </h1>
</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
7
2.3. Zastosowanie definicji własnych (uŜytkownika) zewnętrznych arkuszy
stylów - zastosowanie atrybutu class
h1.body1 {
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
<head>
</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
8
Property
margin
margin-bottom
margin-left
margin-right
margin-top
Property
color
direction
letter-spacing
text-align
text-decoration
text-indent
text-shadow
text-transform
unicode-bidi
white-space
word-spacing
Description
Values
A shorthand property margin-top |margin-right
for setting the margin |margin-bottom|margin-left
properties in one
declaration
Sets the bottom
auto| length|%
margin of an element
Sets the left margin of auto| length|%
an element
Sets the right margin auto| length |%
of an element
Sets the top margin of auto|length|%
an element
Description
Sets the color of a text
Sets the text direction
Increase or decrease the
space between characters
Aligns the text in an
element
Adds decoration to text
Values
color
ltr|rtl
normal|length
left|right|center|justify
none|underline|overline|
line-through|blink
Indents the first line of text length
in an element
%
none|color|length
Controls the letters in an
none|capitalize|uppercase
element
lowercase
normal|embed|bidi-override
Sets how white space
normal
inside an element is
pre
handled
nowrap
Increase or decrease the
normal
space between words
length
Uwaga: W trzeciej kolumnie dla elementów napisanych pochyloną czcionką naleŜy
podawać wartości we właściwych jednostkach.
9
2.4. Zastosowanie selektorów kontekstowych
h1 i {
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>
<head>
</head>
<body>
<h1> <i> Styl nagłówka</i></h1>
<h1> Styl nagłówka</h1>
<p id="box1"> <i> Styl box1 akapitu.</i></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
10
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>
11
<head>
</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>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
12
Ustawienie jednoczesne właściwości czcionki – atrybut font
Property
font
Description
A shorthand property for
setting all of the
properties for a font in
one declaration
font-family
Values
font-style |font-variant
font-weight | font-family
font-size/line-height
caption | icon
menu | message-box
small-caption |status-bar
family-name
generic-family
A prioritized list of font
family names and/or
generic family names for
an element
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 none
for an element that will
number
preserve the x-height of
the first-choice font
font-stretch
Condenses or expands the normal
current font-family
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- normal
caps font or a normal font 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.
13
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
14
<head>
<title>Arkusze styl?</title>
</head>
<body>
<h1>Nagłówek H1</h1>
<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)
15
Property
background
Description
Values
A shorthand
background-color
property for
background-image
setting all
background-repeat backgroundbackground
attachment background-position
properties in
one declaration
background-attachment Sets whether a scroll
background
fixed
image is fixed
or scrolls with
the rest of the
page
background-color
Sets the
color-rgb
background
color-hex
color of an
color-name
element
transparent
background-image
Sets an image url
as the
none
background
background-position
Sets the
top left
starting position top center
of a background top right
image
center left
center center
center right
bottom left
bottom center
bottom right
x-% y-%
x-pos y-pos
background-repeat
Sets if/how a
repeat
background
repeat-x
image will be
repeat-y
repeated
no-repeat
Uwaga: W trzeciej kolumnie dla elementów napisanych pochyloną czcionką
naleŜy podawać wartości we właściwych jednostkach.
16
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
17
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<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;
object.rozmiar
{ width:100%; height:80%; }
Rys.23. Kod css dla strony z rys.21–definicja stylów div, h1 i object
18
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;
div.komorka2
{ width:20%; }
object.rozmiar
{ width:100%; height:80%;}
Rys.25 Arkusz stylów z wprowadzonym stylem wiersza
19
<head>
<link rel="stylesheet" type="text/css" href="styldiv.css" media="screen" />
</head>
<body>
<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 class="komorka1"> <h2> Środkowa komórka. </h2>
<div class="komorka2"> <h2>Trzecia komórka.
</h2>
<object class="rozmiar" type="text/html" data="b3.html"> </object>
</div>
</div>
</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
20
<head>
<link rel="stylesheet" type="text/css" href="styldiv.css" media="screen" />
</head>
<body>
<div class="naglowek"><h1 class="naglowek"> Znaczniki div i arkusze stylów.</h1> </div>
<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="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
21
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
22
<head>
<title>Formularz ankiety-zewnetrzne arkusze stylów</title>
</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)
23
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-size: 12pt;
}
.wybor { background-color: #FF0000; color: #000000;
border: #000000 solid 1px;
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)
24
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)
<head>
<meta http-equiv="content-type" content="text/html; charset= utf-8"/>
<title>Zewnętrzne arkusze stylów</title>
</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)
25
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
*/
*/
*/
*/
26
Property
background
background-attachment
background-color
background-image
background-position
background-repeat
Description
A shorthand property for setting all
background properties in one
declaration
Values
background-color
background-image
background-repeat
background-attachment
background-position
Sets whether a background image is scroll
fixed or scrolls with the rest of the
fixed
page
Sets the background color of an
color-rgb
element
color-hex
color-name
transparent
Sets an image as the background
url
none
Sets the starting position of a
top left
background image
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x-% y-%
x-pos y-pos
Sets if/how a background image will repeat
be repeated
repeat-x
repeat-y
no-repeat
IE
4
F
1
N
6
W3C
1
4
1
6
1
4
1
4
1
4
1
4
1
4
1
6
1
4
1
4
1
Description
of the properties for the four borders
in one declaration
of the properties for the bottom
border in one declaration
Sets the color of the bottom border
Sets the style of the bottom border
Sets the width of the bottom border
IE
4
F
1
N
4
W3C
1
4
1
6
1
4
4
4
1
1
1
6
6
4
2
2
1
4
1
6
1
4
1
6
1
4
4
4
1
1
1
6
6
4
2
2
1
4
1
6
1
4
4
4
1
1
1
6
6
4
2
2
1
4
1
6
1
Border
On-line examples
Property
border
border-bottom
border-bottom-color
border-bottom-style
border-bottom-width
border-color
border-left
border-left-color
border-left-style
border-left-width
border-right
border-right-color
border-right-style
border-right-width
border-style
Sets the color of the four borders,
can have from one to four colors
of the properties for the left border
in one declaration
Sets the color of the left border
Sets the style of the left border
Sets the width of the left border
Values
border-width
border-style
border-color
border-bottom-width
border-style
border-color
border-color
border-style
thin
medium
thick
length
color
border-left-width
border-style
border-color
border-color
border-style
thin
medium
thick
length
A shorthand property for setting all border-right-width
of the properties for the right border border-style
in one declaration
border-color
Sets the color of the right border
border-color
Sets the style of the right border
border-style
Sets the width of the right border
thin
medium
thick
length
Sets the style of the four borders,
none
can have from one to four styles
hidden
dotted
27
border-top
border-top-color
border-top-style
border-top-width
border-width
dashed
solid
double
groove
ridge
inset
outset
A shorthand property for setting all border-top-width
of the properties for the top border border-style
in one declaration
border-color
Sets the color of the top border
border-color
Sets the style of the top border
border-style
Sets the width of the top border
thin
medium
thick
length
A shorthand property for setting the thin
width of the four borders in one
medium
declaration, can have from one to
thick
four values
length
4
1
6
1
4
4
4
1
1
1
6
6
4
2
2
1
4
1
4
1
IE
4
F
1
N
4
W3C
1
4
1
6
2
4
1
4
1
4
1
4
1
4
1
4
2
4
1
6
2
Classification
On-line examples
Property
clear
Description
Sets the sides of an element where
other floating elements are not
allowed
cursor
Specifies the type of cursor to be
displayed
display
Sets how/if an element is displayed
float
Sets where an image or a text will
appear in another element
position
Places an element in a static,
relative, absolute or fixed position
visibility
Sets if an element should be visible
or invisible
Values
left
right
both
none
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
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
left
right
none
static
relative
absolute
fixed
visible
hidden
collapse
28
Dimension
On-line examples
Property
height
Description
Sets the height of an element
line-height
Sets the distance between lines
max-height
Sets the maximum height of an
element
max-width
Sets the maximum width of an
element
min-height
Sets the minimum height of an
element
Sets the minimum width of an
element
Sets the width of an element
min-width
width
Values
auto
length
%
normal
number
length
%
none
length
%
none
length
%
length
%
length
%
auto
%
length
IE
4
F
1
N
6
W3C
1
4
1
4
1
-
1
6
2
-
1
6
2
-
1
6
2
-
1
6
2
4
1
4
1
IE
4
F
1
N
4
W3C
1
3
1
4
1
3
1
4
1
-
-
-
2
-
-
-
2
4
1
4
1
4
1
6
1
Font
On-line examples
Property
font
font-family
font-size
font-size-adjust
font-stretch
font-style
font-variant
Description
of the properties for a font in one
declaration
Values
font-style
font-variant
font-weight
font-size/line-height
font-family
caption
icon
menu
message-box
small-caption
status-bar
A prioritized list of font family names family-name
and/or generic family names for an generic-family
element
Sets the size of a font
xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
length
%
Specifies an aspect value for an
none
element that will preserve the xnumber
height of the first-choice font
Condenses or expands the current
normal
font-family
wider
narrower
ultra-condensed
extra-condensed
condensed
semi-condensed
semi-expanded
expanded
extra-expanded
ultra-expanded
Sets the style of the font
normal
italic
oblique
Displays text in a small-caps font or normal
a normal font
small-caps
29
font-weight
Sets the weight of a font
normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900
4
Property
content
Description
Generates content in a document.
Used with the :before and :after
pseudo-elements
counter-increment
Sets how much the counter
increments on each occurrence of a
selector
Sets the value the counter is set to
on each occurrence of a selector
Sets the type of quotation marks
Values
IE
string
url
counter(name)
counter(name, list-style-type)
counters(name, string)
counters(name, string, liststyle-type)
attr(X)
open-quote
close-quote
no-open-quote
no-close-quote
none
identifier number
1
4
1
F
1
N
6
W3C
2
Generated Content
counter-reset
quotes
none
identifier number
none
string string
2
2
-
1
6
2
Values
list-style-type
list-style-position
list-style-image
none
url
inside
outside
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
auto
length
IE
4
F
1
N
6
W3C
1
4
1
6
1
4
1
6
1
4
1
4
1
1
7
2
Values
IE
F
N
W3C
List and Marker
On-line examples
Property
list-style
list-style-image
list-style-position
list-style-type
Description
of the properties for a list in one
declaration
Sets an image as the list-item
marker
Sets where the list-item marker is
placed in the list
Sets the type of the list-item marker
marker-offset
Margin
On-line examples
Property
Description
30
margin
A shorthand property for setting the margin-top
margin properties in one declaration margin-right
margin-bottom
margin-left
Sets the bottom margin of an
auto
element
length
%
Sets the left margin of an element
auto
length
%
Sets the right margin of an element auto
length
%
Sets the top margin of an element
auto
length
%
4
1
4
1
4
1
4
1
3
1
4
1
3
1
4
1
3
1
4
1
Description
the outline properties in one
declaration
Sets the color of the outline around
an element
Sets the style of the outline around
an element
Values
outline-color
outline-style
outline-width
color
invert
none
dotted
dashed
solid
double
groove
ridge
inset
outset
Sets the width of the outline around thin
an element
medium
thick
length
IE
-
F
-
N
-
W3C
2
-
-
-
2
-
-
-
2
-
-
-
2
Description
of the padding properties in one
declaration
IE
4
F
1
N
4
W3C
1
4
1
4
1
padding-left
Sets the
element
Sets the
4
1
4
1
padding-right
Sets the
4
1
4
1
padding-top
Sets the
4
1
4
1
Values
auto
%
length
shape
auto
IE
5
F
1
N
6
W3C
2
4
1
6
2
auto
%
length
visible
hidden
scroll
auto
static
relative
4
1
4
2
4
1
6
2
4
1
4
2
margin-bottom
margin-left
margin-right
margin-top
Outlines
Property
outline
outline-color
outline-style
outline-width
Padding
On-line examples
Property
padding
padding-bottom
Values
padding-top
padding-right
padding-bottom
padding-left
bottom padding of an
length
%
left padding of an element length
%
right padding of an element length
%
top padding of an element length
%
Positioning
On-line examples
Property
bottom
clip
left
overflow
position
Description
Sets how far the bottom edge of an
element is above/below the bottom
edge of the parent element
Sets the shape of an element. The
element is clipped into this shape,
and displayed
Sets how far the left edge of an
element is to the right/left of the left
edge of the parent element
Sets what happens if the content of
an element overflow its area
Places an element in a static,
relative, absolute or fixed position
31
right
top
vertical-align
z-index
absolute
fixed
Sets how far the right edge of an
auto
element is to the left/right of the
%
right edge of the parent element
length
Sets how far the top edge of an
auto
element is above/below the top edge %
of the parent element
length
Sets the vertical alignment of an
baseline
element
sub
super
top
text-top
middle
bottom
text-bottom
length
%
Sets the stack order of an element
auto
number
5
1
6
2
4
1
4
2
4
1
4
1
4
1
6
2
Values
collapse
separate
length length
IE
5
F
1
N
7
W3C
2
-
1
6
2
top
bottom
left
right
show
hide
-
1
6
2
-
1
6
2
auto
fixed
5
1
6
2
Values
color
ltr
rtl
normal
length
left
right
center
justify
none
underline
overline
line-through
blink
length
%
none
color
length
none
capitalize
uppercase
lowercase
normal
embed
bidi-override
normal
pre
nowrap
IE
3
6
F
1
1
N
4
6
W3C
1
2
4
1
6
1
4
1
4
1
4
1
4
1
4
1
4
1
4
1
4
1
Table
Property
border-collapse
Description
Sets the border model of a table
border-spacing
Sets the distance between the
borders of adjacent cells (only for
the "separated borders" model)
Sets the position of the caption
according to the table
caption-side
empty-cells
table-layout
Sets whether cells with no visible
content should have borders or not
(only for the "separated borders"
model)
Sets the algorithm used to lay out
the table
Text
On-line examples
Property
color
direction
letter-spacing
Description
Sets the color of a text
Sets the text direction
text-align
Increase or decrease the space
between characters
Aligns the text in an element
text-decoration
Adds decoration to text
text-indent
Indents the first line of text in an
element
text-shadow
text-transform
Controls the letters in an element
unicode-bidi
white-space
Sets how white space inside an
element is handled
5
5
2
1
4
1
32
word-spacing
Increase or decrease the space
between words
normal
length
6
1
6
1
Purpose
IE
Adds special style to an activated element
4
Adds special style to an element while the element has focus
Adds special style to an element when you mouse over it
4
Adds special style to an unvisited link
3
Adds special style to a visited link
3
Adds special style to an element that is the first child of some other
element
Allows the author to specify a language to use in a specified element
F
1
1
1
1
1
N
W3C
1
2
1
1
1
2
Purpose
Adds special style to the first letter of a text
Adds special style to the first line of a text
Inserts some content before an element
Inserts some content after an element
F
1
1
Pseudo-classes
On-line examples
Pseudo-class
:active
:focus
:hover
:link
:visited
:first-child
:lang
7
4
4
7
1
2
Pseudo-elements
On-line examples
Pseudo-element
:first-letter
:first-line
:before
:after
IE
5
5
N
W3C
1
1
2
2
33

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

Transkrypt

Podobne dokumenty

Tusz Epson T0520 color | Stylus Color 400/440

certyfikat eduweb html praktyk

Zadanie 3

Kaskadowe arkusze stylów - BK-S

Akcja TOALETA TO NIE ŚMIETNIK

Wprowadzenie, formatowanie tekstu, czcionki

Klasy selektorów Klasy selektorów znajdują zastosowanie wówczas

„CSS – kaskadowe arkusze stylów