doc1/4 ① Budowa klasy. M
download 
Reklamacja Transkrypt
1/4 ① Budowa klasy. M
10. Klasy, właściwości czcionki
Klasy
L Budowa klasy.
znacznik.nazwaklasy
{
właściwość1: wartość;
właściwość2: wartość;
M
właściwośćn: wartość;
}
przykład
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<p class="czerwony">Podstawowe informacje o stylach.</p>
<p class="zielony">Podstawowe informacje o stylach.</p>
<p class="niebieski">Podstawowe informacje o stylach.</p>
</body>
</html>
Zawartość pliku o nazwie style.css
p.czerwony
{
color: red;
font-size: 10pt;
}
p.zielony
{
color: green;
font-size: 15pt;
}
p.niebieski
{
color: blue;
font-size: 20pt;
}
wynik w przeglądarce internetowej
opracował: Aleksander Piętowski
1/4
10. Klasy, właściwości czcionki
L Klasa wspólna.
.nazwaklasy
{
właściwość1: wartość;
właściwość2: wartość;
M
właściwośćn: wartość;
}
przykład
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<p>Podstawowe informacje o stylach</p>
<p class="naglowek">Podstawowe informacje o stylach</p>
<h1>Podstawowe informacje o stylach</h1>
<h1 class="naglowek">Podstawowe informacje o stylach</h1>
</body>
</html>
Zawartość pliku o nazwie style.css
.naglowek
{
font-size: 16pt;
text-align: center;
text-decoration: underline;
letter-spacing: 6pt;
}
wynik w przeglądarce internetowej
opracował: Aleksander Piętowski
2/4
10. Klasy, właściwości czcionki
Grupowanie definicji stylów o identycznych atrybutach
znacznik1
{
właściwość1: wartość;
właściwość2: wartość;
znacznik2
{
właściwość1: wartość;
właściwość2: wartość;
M
K
znacznikn
{
właściwość1: wartość;
właściwość2: wartość;
M
właściwośćn: wartość;
M
właściwośćn: wartość;
}
}
właściwośćn: wartość;
}
znacznik1, znacznik2, K , znacznikn
{
właściwość1: wartość;
właściwość2: wartość;
M
właściwośćn: wartość;
}
przykład
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<p>Podstawowe informacje o stylach</p>
<h1>Podstawowe informacje o stylach</h1>
</body>
</html>
Zawartość pliku o nazwie style.css
p, h1
{
font-size: 16pt;
text-align: center;
text-decoration: underline;
letter-spacing: 6pt;
}
wynik w przeglądarce internetowej
opracował: Aleksander Piętowski
3/4
10. Klasy, właściwości czcionki
Właściwości czcionki
Znacznik
Właściwość/wartość Opis
Przykład
p, body,
h1, itp.
font-family
krój czcionki
p { font-family: 'Times New Roman'; }
p { font-family: Verdana; }
p { font-family: Arial, Verdana; }
font-size
rozmiar czcionki
•
za pomocą
jednostek miar
•
xx-small
•
x-small
•
small
•
medium
•
large
•
x-large
•
xx-large
font-style
•
normal
•
italic
styl czcionki
•
domyślny
•
pochyły
font-weight
•
100-900
waga czcionki
•
wartość od 100 do
900
•
pogrubienie (100)
•
pogrubienie (400)
•
pogrubienie (700)
•
bolder (900)
•
•
•
•
lighter
normal
bold
bolder
font-variant
wariant czcionki
•
zwykły tekst
•
wielkie litery;
mniejszy rozmiar
czcionki
p { font-size: 16pt; }
p
p
p
p
p
p
p
{
{
{
{
{
{
{
font-size:
font-size:
font-size:
font-size:
font-size:
font-size:
font-size:
xx-small; }
x-small; }
small; }
medium; }
large; }
x-large; }
xx-large; }
p { font-style: normal; }
p { font-style: italic; }
p { font-weight: 500; }
p
p
p
p
{
{
{
{
font-weight:
font-weight:
font-weight:
font-weight:
lighter; }
normal; }
bold; }
bolder; }
p { font-variant: normal; }
p { font-variant: small-caps; }
opracował: Aleksander Piętowski
4/4
