Skopiuj plik formatowanieakapitu.zip rozpakuj go do folderu WWW. Otwórz plik formatowanieakapitu.html w przeglądarce internetowej. Zapoznaj się ze źródłem pliku.
W elemencie style dodaj kod.
<style type="text/css">
h1 {
text-align: right;
}
h2 {
text-align: center;
}
h3 {
text-align: left;
}
p {
text-align: justify;
}
</style>
Zapisz zmiany i odśwież podgląd.
W elemencie style dodaj kod.
}
h4 {
padding: 10px 20px;
}
</style>
Zapisz zmiany i odśwież podgląd.
W elemencie style dodaj kod.
padding: 10px 20px; margin: 30px 25px 20px 15px; }
Zapisz zmiany i odśwież podgląd.Przetestuj różne style obrysu i ustawień marginesów.
W elemencie style dodaj kod.
p {
text-align: justify;
line-height: 25px;
}
Zapisz zmiany i odśwież podgląd.
W elemencie style dodaj kod.
line-height: 25px; text-indent: 30px; }
Zapisz zmiany i odśwież podgląd.
W elemencie style dodaj kod.
h5 {
text-decoration: underline;
}
Zapisz zmiany i odśwież podgląd.
W elemencie style dodaj kod.
}
ul {
list-style: circle;
}
</style>
Zapisz zmiany i odśwież podgląd. Przetestuj różne style listy.
W elemencie style dodaj kod.
<style type="text/css">
h1, h2, h3 {
background: rgb(255,0,0);
color: rgb(0,0,255);
}
Zapisz zmiany i odśwież podgląd.
Umieść plik formatowanieakapitu.html na serwerze po sprawdzeniu kodu.
{text-align:} – definiuje wyrównywanie tekstu. Wartość może być równa: left
(do lewej), center (do środka), right (do prawej), justify (wyjustowanie - do prawej i lewej).{padding:} – definiuje margines wewnętrzny elementu. Wartością mogą być liczby z jednostka długości, procent lub auto.
Wartość auto - powoduje, że przeglądarka ustawia marginesy automatyczne.{line-height:} – interlinia (odstęp między liniami tekstu).{text-indent:} – definiuje wielkość wcięcia (wysunięcia) pierwszego wiersza akapitu.{text-decoration:} – definiuje wyróżnienie tekstu. Wartość wyróżnienie może być równa: underline (tekst podkreślony), overline (tekst nadkreślony) line-through (tekst przekreślony) i none (brak wyróżnienia).{list-style:} – definiuje list-style-type (typ), pozycje znaku i/lub punktor graficzny wyliczenia.
Typ wyliczenia może przyjmować wartość: disc (kropki), none (brak), square (kwadraty), circle (kółka), decimal (liczby naturalne), decimal-leading-zero (liczby z początkowym zerem), lower-greek (małe litery greckie), lower-latin (małe litery łacińskie), upper-latin (duże litery łacińskie), lower-alpha (litery), upper-alpha (wielkie litery), lower-roman (litery rzymskie), upper-roman (wielkie litery rzymskie).
W edytorze grafiki utwórz własny graficzny znak wypunktowania o wielkości 10 na 10 pikseli. Zapisz go w formacie GIF pod nazwą punktor.gif.
W elemencie style dodaj kod.
<style type="text/css">
ul {
list-style: circle url(punktor.gif);
}
</style>
Zapisz zmiany i odśwież podgląd.
W elemencie style dodaj kod.
ul {
list-style: circle url(punktor.gif) outside;
}
Zapisz zmiany i odśwież podgląd. Dodaj w akapitach lity dłuższy fragment tekstu.
W elemencie style dodaj kod.
h1 {
letter-spacing: 20px;
}
Zapisz zmiany i odśwież podgląd.
W elemencie style dodaj kod.
h2 {
word-spacing: 20px;
}
Zapisz zmiany i odśwież podgląd.
W elemencie style dodaj kod. Przetestuj wartości stylu.
p {
white-space: pre;
}
Zapisz zmiany i odśwież podgląd.
W elemencie style dodaj kod.
h3 {
text-transform: capitalize;
}
Zapisz zmiany i odśwież podgląd.
W elemencie style dodaj kod.
p {
white-space: normal;
padding-top: 10px;
padding-right: 10%;
}
h4 {
padding-bottom: 10px;
padding-left: 10%;
}
Zapisz zmiany i odśwież podgląd.
W elemencie style dodaj kod. Zapisz zmiany i odśwież podgląd.
h4:first-letter {
color: rgb(255,0,0);
}
Zapisz zmiany i odśwież podgląd.
W elemencie style dodaj kod.
p:first-line {
color: rgb(255,0,0);
}
Zapisz zmiany i odśwież podgląd.
Umieść plik formatowanieakapitu.html na serwerze.
{list-style-image:} – definiuje punktor graficzny wyliczenia. Wartość jest równa url() pliku punktora.{list-style-position:} – definiuje pozycje znaku wyliczenia Wartość może być równa: outside (wypunktowanie na zewnątrz listy) lub inside (wypunktowanie wewnątrz listy).{letter-spacing:} – definiuje odstępy międzyliterowe. Wartością jest liczba z jednostką.{word-spacing:} – definiuje odstępy międzywyrazowe. Wartością jest liczba z jednostką.{white-space:} – definiuje sposób prezentacji znaków specjalnych. Wartość może być równa: pre (jak w elemencie pre), nowrap (uniemożliwia automatyczny podział wiersza),
pre-wrap (dopuszcza automatyczny podział wiersza), pre-line(uniemożliwia łamanie linii), normal (standardowe formatowanie).{text-transform:} – definiuje transformacje tekstu. Wartość może być równa: none (brak transformacji), capitalize (kapitaliki), uppercase (wersaliki, duże litery).{padding-top:} - definiuje margines wewnętrzny, górny elementu.{padding-right:} - definiuje margines wewnętrzny, prawy elementu.{padding-bottom:} - definiuje margines wewnętrzny, dolny elementu.{padding-left:} - definiuje margines wewnętrzny, dolny elementu.