docSposoby umieszczania stylów w dokumencie
download 
Reklamacja Transkrypt
Sposoby umieszczania stylów w dokumencie
9. Podstawowe informacje o stylach, formatowanie tekstu
Sposoby umieszczania stylów w dokumencie
1. Wpisanie stylu do konkretnego znacznika.
<znacznik style="właściwość1: wartość; właściwość 2: wartość; ...; właściwośćn: wartość">
przykład
<html>
<body>
<h1>Podstawowe informacje o stylach.</h1><br>
<h1 style="font-size: 20pt; color: green">Podstawowe informacje o stylach.</h1>
</body>
</html>
wynik w przeglądarce internetowej
2. Zdefiniowanie arkusza stylów dla całego dokumentu HTML pomiędzy znacznikami nagłówka
<HEAD> oraz </HEAD>.
<style type="text/css">
znacznik
{
właściwość1: wartość;
właściwość2: wartość;
M
właściwośćn: wartość;
}
</style>
przykład
<html>
<head>
<style type="text/css">
h1
{
font-size: 20pt;
color: green;
}
</style>
</head>
<body>
<h1>Wiersz 1. Podstawowe informacje o stylach.</h1><br>
<h1>Wiersz 2. Podstawowe informacje o stylach.</h1>
</body>
</html>
opracował: Aleksander Piętowski
1/3
9. Podstawowe informacje o stylach, formatowanie tekstu
wynik w przeglądarce internetowej
3. Umieszczenie w nagłówku dokumentu HTML odwołania do pliku zewnętrznego z
rozszerzeniem css zawierającym arkusz stylów.
<head>
<link href="nazwapliku.css" rel="stylesheet" type="text/css">
</head>
Zawartość pliku o nazwie nazwapliku.css
h1
{
font-size: 20pt;
color: green;
}
przykład
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Podstawowe informacje o stylach.</h1>
</body>
</html>
Zawartość pliku o nazwie style.css
h1
{
font-size: 20pt;
color: green;
}
opracował: Aleksander Piętowski
2/3
9. Podstawowe informacje o stylach, formatowanie tekstu
Formatowanie tekstu
Znacznik
Właściwość/wartość
p, h1,
itp.
color
Opis
kolor tekstu
•
nazwa koloru
•
wartość
heksadecymalna
•
zapis RGB
Przykład
p { color: red; }
p { color: #11C1FF; }
p { color: RGB(17, 193, 255); }
text-align
•
left
•
center
•
right
•
justify
wyrównanie tekstu
•
do lewej
•
do środka
•
do prawej
•
justowanie
p
p
p
p
{
{
{
{
text-align:
text-align:
text-align:
text-align:
text-decoration
•
underline
•
overline
•
line-through
•
blink*
dekoracja tekstu
•
podkreślenie
•
nakreślenie
•
przekreślenie
•
migotanie
•
brak efektów
p
p
p
p
p
{
{
{
{
{
text-decoration:
text-decoration:
text-decoration:
text-decoration:
text-decoration:
text-indent
wcięcie
•
•
•
•
•
•
p
p
p
p
p
p
{
{
{
{
{
{
text-indent:
text-indent:
text-indent:
text-indent:
text-indent:
text-indent:
•
•
akapitowe
w milimetrach
w centymetrach
w calach
w punktach
w pikselach
w procentach
(względem
szerokości obszaru
wyświetlania)
względem wysokości
czcionki
względem wysokości
litery x
left; }
center; }
right; }
justify; }
underline; }
overline; }
line-through; }
blink; }
none; }
10mm; }
1cm; }
0.4in; }
28pt; }
37px; }
5%; }
p { text-indent: 2em; }
p { text-indent: 2ex; }
line-height
wysokość wiersza
p { line-height: 20pt; }
letter-spacing
odstępy między literami
p { letter-spacing: 6pt; }
word-spacing
odstępy między wyrazami
p { word-spacing: 5mm; }
opracował: Aleksander Piętowski
3/3
