Wykład HTML

Transkrypt

Wykład HTML

Kaskadowe arkusze stylów – cz. 2
Formatowanie wyglądu tekstu
Właściwości związane z czcionką
Wybór czcionki
font-family nazwa rodziny, ogólna nazwa rodziny
p { font-family: "Verdana", "Helvetica", sans-serif }
Tworzenie czcionki
pochyłej
font-style normal|italic|obligue
h1 { font-style: italic }
Pogrubianie czcionki
font-weight normal|bold|bolder|lighter|100|200|300|400|500|600|
700|800|900
strong { font-weight: 700 }
Określanie wielkości
czcionki
font-size xx-small|x-small|small|medium|large|x-large|xx-large
font-size liczba + px|pt|pc|mm|cm|in
font-size larger|smaller
font-size n%|liczba + em|ex
span.xxs { font-size: xx-small }
h1 { font-size: 24px }
em { font-size: larger }
Wykorzystanie
kapitalików
font-variant normal|small-caps
div#capt { font-variant: small-caps }
Określanie wysokości
linii
line-height normal|liczba|miara|n%
p { line-height: 1.2 }
p { line-height: 1.2em }
p { line-height: 120% }
Jednoczesne określanie font font-style|font-variant|font-weight|font-size|line-height|
parametrów czcionki h2 { font-family
font: italic bolder 20px Helvetica, sans-serif}
Kolor tekstu
color nazwa koloru|wartość RGB
h2 { color: #F33 }
em { color: lime }
Odstępy między
wyrazami i między
literami
word-spacing normal|miara
letter-spacing normal|miara
h2 { word-spacing: 0.5em }
div { letter-spacing: 2px; }
Wyrównywanie tekstu text-align center|justify|left|right
div { text-align: right; }
Dodawanie wcięć
akapitowych
text-indent miara|procentowo
p { text-indent: 3em }
Efekty czcionki
text-decoration none|underline|overline|line-through|blink
a { text-decoration: none}
Zmiana wielkości liter text-transform none|capitalize|lowercase|upercase
h2 { text-transform: capitalize }
Wyrównywanie
elementów w pionie
Iwona Dolińska, WSEI
vertical-align baseline|bottom|middle|sub|super|text-bottom|text-top|
top| procentowo
span.sub { vertical-align: sub; }
span.sup { vertical-align: super; }
„Internet i jego usługi”
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Style czcionek</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250" />
<style>
<!-h1 { font-style: italic; font-family: "Helvetica", sans-serif;
font-size: 20px; line-height: 1.5 }
h2 { font: italic bolder 16px Helvetica, sans-serif; color: #F33;
word-spacing: 0.5em; text-transform: capitalize; }
p { font-family: "Verdana", "Helvetica", sans-serif }
.indent { text-indent: 3em }
strong { font-weight: 700 }
strong.more { font-weight: 900 }
strong.less { font-weight: 600 }
span.xxl { font-size: xx-large }
span.xl { font-size: x-large }
span.l
{ font-size: large }
span.m
{ font-size: medium }
span.s
{ font-size: small }
span.xs { font-size: x-small; text-decoration: underline }
span.xxs { font-size: xx-small; text-decoration: overline }
em { font-size: larger; color: lime }
div#capt { font-variant: small-caps; letter-spacing: 2px; text-align: right; }
a { text-decoration: none }
span.sub { vertical-align: sub; }
span.sup { vertical-align: super; font-size: xx-small }
-->
</style>
</head>
<body>
<h1>Style czcionek</h1>
<p class="indent">Przykład zastosowania <em>różnych czcionek</em>. <strong
class="more">Arkusze stylów</strong>
pozwalają na <strong class="less">elastyczne operowanie</strong> <strong>tekstem
pogrubionym.</strong></p>
<p><span class="xxl">Wielkość</span> <span class="xl">czcionki</span>
<span class="l">można</span> <span class="m">określać</span>
<span class="s">w sposób</span> <span class="xs">bezwzględny</span>
<span class="xxs">opisowo.</span></p>
<div id="capt">Wiele zestawów czcionek zawiera gotowe kapitaliki.</div>
<h2>Teraz trochę koloru</h2>
<a href="09-02.html">Łącze bez podkreślenia</a>
<div>Dodawanie <span class="sub">dolnego</span> lub <span
class="sup">górnego</span>
indeksu bez znacznika <sub><sub></sub> i <sup><sup></sup>.</div>
</body>
</html>
2
Właściwości ramki elementu
Ramka elementu składa się z kilku zawierających się w sobie obszarów: marginesów, krawędzi, odstępów i
zawartości.
Marginesy
Krawędzie
Odstępy
Zawartość
elementu HTML
Zawartość
margin-top, margin-right, margin-bottom, margin-left miara|n%|auto
margin miara|n%|auto
Marginesy ND
Rozmiar marginesów podaje się w następującej kolejności:
{
{
{
{
margin:
margin:
margin:
margin:
góra prawa dół lewa
góra prawa/lewa dół
góra/dół prawa/lewa
góra/dół/prawa/lewa
}
}
}
}
div.ramka1 { margin: 10px 20px 30px 40px; }
div.ramka { margin: 20px }
div.ramka2 { margin: 0px 12px 0px 12px }
div.ramka2 { margin: 0px 12px }
Odstępy ND
padding-top, padding-right, padding-bottom, padding-left miara|n%
padding miara|procentowo
div.ramka { padding: 3em }
div.ramka { padding-top: 5px }
Szerokość krawędzi
ramki ND
border-top-width, border-right-width, border-bottom-width,
border-left-width thin|medium|thick|miara
border-width thin|medium|thick|miara
div.ramka { border-top-width: thick }
div.ramka { border-width: medium, thin }
Kolor krawędzi ramki ND border-color nazwa koloru|wartość RGB
div.ramka { border-color: red blue black green }
Styl krawędzi ramki
ND
border-style none|dotted|dashed|solid|double|ridge|groove|inset|
outset
div.ramka { border-style: dotted dashed solid double }
Właściwości stron
ramki
border-top, border-right, border-bottom, border-left border-width|
border-style|border-color
div.ramka2 {border-top: 5px solid red }
Właściwości ramki
border border-top-width|border-style|border-color
div.ramka1 (border: 10px dashed blue }
Rozmiar elementu
width miara|procentowo|auto
height miara|procentowo|auto
img { width: 300px; height: 300px; }
#tytul { width: 50px; }
float left|right|none
clear none|left|right|both
div { float: left; }
div { clear: left; }
ND – Właściwość nie jest dziedziczona.
Otaczanie elementów
tekstem (float ND)
3
<html>
<head>
<title>Ramka elementu</title>
<style>
<!-#tytul { font-size: x-large;
color: green;
text-transform: capitalize;
width: 50px; }
div.ramka1 { margin: 10px 20px 30px 40px; }
div.ramka1 { padding: 2em }
div.ramka1 { padding-top: 1em }
div.ramka1 {border-top: 5px ridge silver }
div.ramka1 {border-right: 5px ridge silver }
div.ramka1 {border-bottom: 5px groove silver }
div.ramka1 {border-left: 5px solid silver }

div.ramka2 { margin: 0px 12px }
div.ramka2 { padding-top: 5px; padding-right: 10px;
padding-bottom: 15px; padding-left: 20px }
div.ramka2 {border-top: 5px solid red }
div.ramka2 {border-right: thin dotted blue }
div.ramka2 {border-bottom: medium double green }
div.ramka2 {border-left: thick dashed black }
-->
</style>
</head>
<body>
<div id="tytul">Ramka elementu</div>
<div class="ramka1">Arkusze stylów traktują każdy element strony tak,
jakby znajdował się on wewnątrz ramki, będącej niewidocznym prostokątem.</div>
<div class="ramka2">Prostokąt ten zawiera kilka kolejnych, mieszczących się
w sobie obszarów.</div>
</body>
</html>
4
Właściwości tła
Właściwości tła odnoszą się do konkretnego elementu. Tło rozciąga się do brzegów krawędzi.
Kolor tła
background-color nazwa koloru|wartość RGB|transparent
div.ramka1 { background-color: red }
Obrazek w tle
background-image URL|none
body { background-image: url(MapaOdn.jpg)}
Powtarzanie obrazka background-repeat repeat|repeat-x|repeat-y|no-repeat
body { background-repeat: no-repeat }
Przesuwanie obrazka background-attachment scroll|fixed
body { background-attachment: fixed }
Pozycjonowanie
obrazka
background-position procentowo|miara|top/center/bottom|
left/center/right
body { background-position: center center; }
body { background-position: bottom right; }
Wspólna deklaracja
właściwości tła
background background-color|background-image|background-repeat|
background-attachment|background-position
<html>
<head>
<title>Tło elementu</title>
<style>
<!-body { margin: 20px; background-color: aqua;
background-image: url(tlo.jpg); background-repeat: no-repeat;
background-position: bottom right; background-attachment: fixed; }
#tytul { font-size: x-large; color: green; text-transform: capitalize; }
div.ramka1 { background-color: red }
-->
</style>
</head>
<body>
<div id="tytul">Tło elementu</div>
<div class="ramka1">Tło stanowi rodzaj „sztalug” umieszczonych za obrazkiem,
komórką tabeli lub tekstem.</div>
<div class="ramka2">Rozciąga się do brzegów krawędzi.</div>
</body>
</html>
5
Właściwości klasyfikacyjne
Wyświetlanie elementu
display block|inline|list-item|none
img { display: none }
Wyświetlanie dodatkowych white-space normal|pre|nowrap
div.odstepy { white-space: pre }
spacji
Wygląd automatycznego
numerowania lub
wypunktowania list
list-style-type disc|circle|square|decimal|lower-roman|upperroman|lower-alpha| upper-alpha|none
ul { list-style-type: square }
ol { list-style-type: lower-roman }
Obrazek jako symbol
wypunktowania listy
list-style-image URL|none
li#kropka { list-style-image: url(kropka.jpg) }
Sposób wyświetlania
elementu listy
list-style-position inside|outside
ul { list-style-type: square; list-style-position: inside; }
ol { list-style-type: lower-roman;
list-style-position: outside; }
Wspólna deklaracja
wyglądu listy
list-style list-style-type|list-style-image|list-style-position
ul ul { list-style: circle outside }
<html>
<head>
<title>Właściwości klasyfikacyjne</title>
<style>
span.bl { display: block; font-weight: bold; }
#inl { display: inline }
ul { list-style-type: square; }
li#kropka { list-style-image: url(kropka.jpg) }
ol { list-style-type: lower-roman; }
</style>
</head>
<body>
<div>Właściwość "display" określa warunki i sposób wyświetlania elementu.
Wartość <span class="bl"><i>block</i> rozpoczyna nową ramkę</span> umieszczoną
względnie do przylegających ramek.</div>
<span>Z kolei wartość</span>
<div id="inl"><i>inline</i> daje efekt odwrotny.</div>
<ul>
<li>pierwszy punkt listy</li>
<li id="kropka">drugi punkt listy</li>
</ul>
<ol>
<li>pierwszy punkt listy</li>
<li>drugi punkt listy</li>
</ol>
</body>
</html>
Sposób wyświetlania elementu listy
6
Pozycjonowanie elementów
• położenie domyślne, statyczne (static) – wszystkie elementy strony są rozmieszczane na niej w takim
porządku, w jakim się pojawiają, inaczej zwane naturalnym układem strony
• położenie bezwzględne (absolute) – określenie położenia elementu w odniesieniu do elementu nadrzędnego
• położenie ustalone (fixed) - określenie położenia elementu względem całej strony
• położeniem względne (relative) - przesunięcie elementu względem jego naturalnego położenia
• właściwość position nie jest dziedziczona
position static|absolute|fixed|relative
h1 { position: fixed; top: 20px; left: 10px }
•
pozycjonowanie elementów w trzecim wymiarze
•
widoczność elementów
z-index numer
h1 { z-index: 10 }
visibility visible|hidden
<html>
<head>
<title>Pozycjonowanie i ukrywanie elementów</title>
<style>
<!-.spis { position: absolute; top: 20px; left: 2% }
.tresc { position: absolute; top: 10px; left: 30% }
#wzgl-m { position: relative; top: -10px; left: -15px }
#wzgl-p { position: relative; top: 10px; left: 15px }
#hidd { visibility: hidden }
#disp { display: none }
-->
</style>
</head>
<body>
<div class="spis"><b>Spis treści</b><br />Pozycjonowanie bezwzględne<br />
Pozycjonowanie względne<br />Ukrywanie elementów</div>
<div class="tresc">
<p>Pozycjonowanie bezwzględne jest to określanie położenia elementu
względem elementu nadrzędnego.</p>
<p>Pozycjonowanie <span id="wzgl-m">względne</span> jest to
<span id="wzgl-p">przesuwanie elementów</span> względem ich
naturalnego położenia.</p>
<p>Kiedy element jest <span id="hidd">ukryty</span>, to przestrzeń,
którą zajmuje pozostaje pusta. Zapełnienie tej przestrzeni
<span id="disp">innymi elementami</span> uzyskujemy za pomocą właściwości
"display: none".</p>
</div>
</body>
</html>
7
•
przepełnienie ramki
overflow visible|hidden|scroll|auto
<html>
<head>
<title>Przepełnienie ramki</title>
<style>
<!-div { position: absolute; top: 5px;
width: 200px; height: 100px; border: solid; }
-->
</style>
</head>
<body>
<div style="left: 5px; overflow: visible;">Właściwość ta określa, jak obsłużyć
tekst, który nie mieści się w swojej ramce. Tekst może „wypływać” poza swoją
ramkę (visible), fragment, który się nie mieści może zostać ukryty (hidden),
przeglądarka może umieścić w ramce paski przewijania (scroll lub auto).</div>
<div style="left: 215px; overflow: hidden;">Właściwość ta określa, jak obsłużyć
<div style="left: 425px; overflow: scroll;">Właściwość ta określa, jak obsłużyć
<div style="left: 635px; overflow: auto;">Właściwość ta określa, jak obsłużyć
</body>
</html>
8

Wykład HTML

Transkrypt

Podobne dokumenty

generuj raport - Rządowe Centrum Legislacji

generuj raport - Rządowe Centrum Legislacji

Bryza-Rura spustowa PCV 110 mm 3 mb.

ŚMIERĆ I DZIEWCZYNA

generuj raport - Rządowe Centrum Legislacji

Trelek.pl DEKUPAŻ I MALOWANIE KWITNĄCY OGRÓD

Cert., M.A., M.Div. Sesje polskojęzyczne w roku 2017

Kaszanka z kapustą kiszoną . . .DAmson Sky

Rodzinny Dom Opieki Spo?ecznej

Lista 5 - IT Courses